Merge branch 'main' into cra-rxjs-org-page

thisdot · Aug 9, 2023 · 6edd0b1 · 6edd0b1
2 parents 0c1cef7 + 10cd8dd
commit 6edd0b1
Show file tree

Hide file tree

Showing 38 changed files with 843 additions and 466 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/components/sub-header/SubHeader.styles.tsx b/cra-rxjs-styled-components/src/components/sub-header/SubHeader.styles.tsx
@@ -48,6 +48,7 @@ export const SubHeaderUserLink = styled.a`
 	margin-bottom: 0.125rem;
 	--tw-text-opacity: 1;
 	color: rgb(37 99 235 / var(--tw-text-opacity));
+	text-decoration: none;
 
 	&:hover {
 		text-decoration: underline;
@@ -71,6 +72,7 @@ export const SubHeaderRepoLink = styled.a`
 	--tw-space-x-reverse: 0;
 	margin-right: calc(0.375rem * var(--tw-space-x-reverse));
 	margin-left: calc(0.375rem * calc(1 - var(--tw-space-x-reverse)));
+	text-decoration: none;
 
 	&:hover {
 		text-decoration: underline;

diff --git a/cra-rxjs-styled-components/src/components/sub-header/SubHeader.tsx b/cra-rxjs-styled-components/src/components/sub-header/SubHeader.tsx
@@ -70,9 +70,15 @@ export default function SubHeader() {
 						<BookIcon />
 					</BookIconStyles>
 					<SubHeaderSpanContainer>
-						<SubHeaderUserLink>{repo.owner}</SubHeaderUserLink>
+						<SubHeaderUserLink
+							href={repo.data?.isOrg ? `/orgs/${repo.owner}` : `/${repo.owner}`}
+						>
+							{repo.owner}
+						</SubHeaderUserLink>
 						<SubHeaderSeperator>/</SubHeaderSeperator>
-						<SubHeaderRepoLink>{repo?.name}</SubHeaderRepoLink>
+						<SubHeaderRepoLink href={`/${repo?.owner}/${repo?.name}`}>
+							{repo?.name}
+						</SubHeaderRepoLink>
 					</SubHeaderSpanContainer>
 					<SubHeaderPrivacyBadge>
 						{repo.data?.isPrivate ? 'Private' : 'Public'}

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}`}>

diff --git a/expo-zustand-styled-components/src/components/Organization/Repositories/Repositories.tsx b/expo-zustand-styled-components/src/components/Organization/Repositories/Repositories.tsx
@@ -28,15 +28,17 @@ const Repositories = ({
       showsVerticalScrollIndicator={false}
       keyExtractor={(item, index) => item.id + index}
       renderItem={({ item }) => <RepoCard repo={item} />}
-      ListHeaderComponent={<RepoFilter languages={languages} filteredRepoCount={repos.length} repoBtnText="New" />}
+      ListHeaderComponent={
+        <RepoFilter languages={languages} filteredRepoCount={repos.length} repoBtnText="New" />
+      }
       ListFooterComponent={
         repos.length > 0 && (
-        <Pagination
-          goToNext={goToNext}
-          goToPrev={goToPrev}
-          hasNextPage={hasNextPage}
-          hasPrevPage={hasPrevPage}
-        />
+          <Pagination
+            goToNext={goToNext}
+            goToPrev={goToPrev}
+            hasNextPage={hasNextPage}
+            hasPrevPage={hasPrevPage}
+          />
         )
       }
     />

diff --git a/expo-zustand-styled-components/src/screens/Home/Home.tsx b/expo-zustand-styled-components/src/screens/Home/Home.tsx
@@ -1,6 +1,6 @@
 import { openURL } from 'expo-linking';
 import React, { useEffect } from 'react';
-import { Text, FlatList, TouchableOpacity, useWindowDimensions } from 'react-native';
+import { Text, TouchableOpacity, useWindowDimensions, ScrollView } from 'react-native';
 import {
   GistsStyled,
   TitleStyled,
@@ -19,6 +19,7 @@ import { useGistsStore, useTopReposStore } from '../../hooks/stores';
 
 import RepoCard from '../../components/RepoCard';
 import LoaderErrorView from '../../components/LoaderErrorView';
+import LinkButton from '../../components/LinkButton/LinkButton';
 
 const Home = () => {
   const { width } = useWindowDimensions();
@@ -36,40 +37,43 @@ const Home = () => {
 
   return (
     <SafeAreaViewStyled>
-      <ContainerStyled screenWidth={width}>
-        <GistsStyled screenWidth={width}>
-          <GistsListContainerStyled>
-            <TitleStyled>Gists</TitleStyled>
-            {gistsIsLoading || gistsError ? (
-              <LoaderErrorView error={gistsError} />
-            ) : (
-              <FlatList
-                data={gists}
-                renderItem={({ item }) => (
-                  <TouchableOpacity onPress={() => openURL(item.url)}>
+      <ScrollView>
+        <ContainerStyled screenWidth={width}>
+          <GistsStyled screenWidth={width}>
+            <GistsListContainerStyled>
+              <TitleStyled>Gists</TitleStyled>
+              {gistsIsLoading || gistsError ? (
+                <LoaderErrorView error={gistsError} />
+              ) : (
+                gists.map((item) => (
+                  <TouchableOpacity key={item.url} onPress={() => openURL(item.url)}>
                     <Text>{item.name}</Text>
                   </TouchableOpacity>
-                )}
-              />
-            )}
-          </GistsListContainerStyled>
-        </GistsStyled>
-        <RepositoriesStyled screenWidth={width}>
-          <TitleStyled>Top Repositories</TitleStyled>
-          <RepositoriesListContainerStyled>
-            {topReposIsLoading || topReposError ? (
-              <LoaderErrorView error={topReposError} />
-            ) : (
-              <>
-                <FlatList data={topRepos} renderItem={({ item }) => <RepoCard repo={item} />} />
-                <ViewAllReposButtonStyled>
-                  <Text>View all repositories</Text>
-                </ViewAllReposButtonStyled>
-              </>
-            )}
-          </RepositoriesListContainerStyled>
-        </RepositoriesStyled>
-      </ContainerStyled>
+                ))
+              )}
+            </GistsListContainerStyled>
+          </GistsStyled>
+          <RepositoriesStyled screenWidth={width}>
+            <TitleStyled>Top Repositories</TitleStyled>
+            <RepositoriesListContainerStyled>
+              {topReposIsLoading || topReposError ? (
+                <LoaderErrorView error={topReposError} />
+              ) : (
+                <>
+                  {topRepos.map((item) => (
+                    <RepoCard repo={item} key={item.id} />
+                  ))}
+                  <ViewAllReposButtonStyled>
+                    <LinkButton to={`/${topRepos[0].owner.login}`}>
+                      <Text>View all repositories</Text>
+                    </LinkButton>
+                  </ViewAllReposButtonStyled>
+                </>
+              )}
+            </RepositoriesListContainerStyled>
+          </RepositoriesStyled>
+        </ContainerStyled>
+      </ScrollView>
     </SafeAreaViewStyled>
   );
 };

diff --git a/next-react-query-tailwind/.gitignore b/next-react-query-tailwind/.gitignore
@@ -36,4 +36,4 @@ yarn-error.log*
 
 src/lib/github.ts
 
-public/mockServiceWorker.js
+#public/mockServiceWorker.js