chore: fix top repos api (#1901)

* chore: fix top repos api * chore: modified repo card * chore: fixing failing build
thisdot · Aug 9, 2023 · 07665a2 · 07665a2
1 parent fe0e8d1
commit 07665a2
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 8 deletions.
diff --git a/cra-rxjs-styled-components/src/components/repo-card/RepoCard.tsx b/cra-rxjs-styled-components/src/components/repo-card/RepoCard.tsx
@@ -17,9 +17,10 @@ import {
 interface RepoCardProps {
 	repo: Repository;
 	star?: boolean;
+	isMainPage?: boolean;
 }
 
-function RepoCard({ repo, star }: RepoCardProps) {
+function RepoCard({ repo, star, isMainPage }: RepoCardProps) {
 	const {
 		id,
 		name,
@@ -32,11 +33,19 @@ function RepoCard({ repo, star }: RepoCardProps) {
 		visibility,
 	} = repo;
 
+	const repoNameWithOwnerLink = () =>
+		owner?.login ? `/${owner.login}/${name || ''}` : '';
+
+	const repoNameWithOwner = () =>
+		`${isMainPage ? `${owner?.login + '/' || ''}` : ''}${name || ''}`;
+
 	return (
 		<Containers key={id} star={star}>
 			<Content>
 				<Header>
-					<HeadingLink to={`/${owner.login}/${name}`}>{name}</HeadingLink>
+					<HeadingLink to={repoNameWithOwnerLink()}>
+						{repoNameWithOwner()}
+					</HeadingLink>
 					<BadgeWrapper>
 						<PrivacyBadge visibility={visibility} />
 					</BadgeWrapper>

diff --git a/cra-rxjs-styled-components/src/constants/url.constants.ts b/cra-rxjs-styled-components/src/constants/url.constants.ts
@@ -1,3 +1,4 @@
+import convertObjectToQueryString from '../helpers/objectToQueryString';
 import { IssueType, State } from '../types/types';
 
 export const API_URL_BASE = process.env.REACT_APP_API_URL;
@@ -30,6 +31,17 @@ export const ORG_REPO_LIST = (user: string) =>
 export const USER_REPO_LIST = (user: string, page: string = '1') =>
 	`${GITHUB_URL_BASE}/users/${user}/repos?sort=pushed&page=${page}&type=all`;
 
+export const USER_TOP_REPO_LIST = (page: string = '1') => {
+	const params = {
+		sort: 'updated',
+		affiliation: 'owner, collaborator, organization_member',
+		page,
+		per_page: 20,
+	};
+	const queryStrings = convertObjectToQueryString(params);
+	return `${GITHUB_URL_BASE}/user/repos?${queryStrings}`;
+};
+
 export const GISTS_URL = (user: string) =>
 	`${GITHUB_URL_BASE}/users/${user}/gists?per_page=10`;
 

diff --git a/cra-rxjs-styled-components/src/helpers/objectToQueryString.ts b/cra-rxjs-styled-components/src/helpers/objectToQueryString.ts
@@ -0,0 +1,5 @@
+export default function convertObjectToQueryString(
+	object: Record<string, any>
+) {
+	return new URLSearchParams(object).toString();
+}
diff --git a/cra-rxjs-styled-components/src/hooks/repositories/use-repos.ts b/cra-rxjs-styled-components/src/hooks/repositories/use-repos.ts
@@ -19,11 +19,17 @@ import {
 } from '../../helpers/extract-branch-count';
 import { useEffect, useState } from 'react';
 
-import { USER_REPO_LIST } from '../../constants/url.constants';
+import {
+	USER_REPO_LIST,
+	USER_TOP_REPO_LIST,
+} from '../../constants/url.constants';
 import { fromFetchWithAuth } from '../auth/from-fetch-with-auth';
 import parse from 'parse-link-header';
 
-export function useRepos(username: string | undefined): UseRepo {
+export function useRepos(
+	username: string | undefined,
+	isTopRepos?: boolean
+): UseRepo {
 	const [state, setState] = useState<RepositoryWithBranchCount[]>([]);
 	const [paginationPages, setPaginationPages] = useState<Pagination>({
 		prevPage: '',
@@ -36,7 +42,7 @@ export function useRepos(username: string | undefined): UseRepo {
 	useEffect(() => {
 		if (username) {
 			const subscription: Subscription = fromFetchWithAuth<Repository[]>(
-				USER_REPO_LIST(username, page),
+				isTopRepos ? USER_TOP_REPO_LIST(page) : USER_REPO_LIST(username, page),
 				{
 					selector: (response: Response) => {
 						const links = parse(response.headers.get('Link'));
@@ -70,7 +76,7 @@ export function useRepos(username: string | undefined): UseRepo {
 				subscription.unsubscribe();
 			};
 		}
-	}, [username, page]);
+	}, [username, page, isTopRepos]);
 
 	const nextPage = () => {
 		setPage(paginationPages.nextPage);

diff --git a/cra-rxjs-styled-components/src/routes/user-top-repos.tsx b/cra-rxjs-styled-components/src/routes/user-top-repos.tsx
@@ -65,7 +65,8 @@ const NetlifyBadgeContainer = styled.div`
 export default function TopRepos() {
 	const context = useUser();
 	const user = context?.user;
-	const { repositories } = useRepos(user?.login);
+	const isTopRepos: boolean = true;
+	const { repositories } = useRepos(user?.login, isTopRepos);
 	const { gists, loadingGist } = useGists();
 	const topRepositories = [...repositories]
 		.sort((a, b) => b.stargazers_count - a.stargazers_count)
@@ -92,7 +93,7 @@ export default function TopRepos() {
 							) : (
 								<>
 									{topRepositories.map((repo) => (
-										<RepoCard repo={repo} key={repo.id} />
+										<RepoCard repo={repo} key={repo.id} isMainPage />
 									))}
 									<ViewRepositoriesContainer>
 										<ViewRepositoriesLink href={`/${user?.login}`}>