chore: repo filter for org Page (#1929)

Author: hdJerry

cra-rxjs-styled-components/src/components/repo-filter/RepoFilter.styles.ts

@@ -53,10 +53,11 @@ export const RepoBtn = styled.button`
 	border: none;
 `;
 
-export const RepoBtnText = styled.span`
+export const RepoBtnText = styled.a`
 	color: #fff;
 	font-size: 14px;
 	font-weight: 700;
+	text-decoration: none;
 `;
 
 export const FilterTextContainer = styled.div`

cra-rxjs-styled-components/src/components/repo-filter/Repofilter.tsx

@@ -81,7 +81,9 @@ export default function RepoFilter({
 				</FiltersWrapper>
 				<RepoBtn>
 					<RepoBookIcon color="#fff" />
-					<RepoBtnText>{repoBtnText || 'New'}</RepoBtnText>
+					<RepoBtnText href="https://github.com/new" target="_blank">
+						{repoBtnText || 'New'}
+					</RepoBtnText>
 				</RepoBtn>
 			</RepoFilterWrapper>
 			{!isOnlySorted && <FilterText filteredRepoCount={filteredRepoCount} />}

cra-rxjs-styled-components/src/components/user-repos/UserRepos.styles.tsx

@@ -19,22 +19,22 @@ export const NetlifyBadgeContainer = styled.div`
 `;
 
 export const OrgHeader = styled.div`
-	border-bottom: 1px solid var(--gray-500);
-	background-color: var(--gray-200);
+	border-bottom: 1px solid var(--gray-300);
+	background-color: var(--gray-100);
 	position: sticky;
 	top: 0px;
 	z-index: 40;
 `;
 
 export const OrgTopHeader = styled.div`
-	padding: 0 8px;
+	padding: 0 32px;
 `;
 
 export const OrgAbout = styled.div`
 	display: flex;
 	align-items: center;
-	margin-top: 0.5rem;
-	margin-bottom: 0.5rem;
+	padding-top: 1rem;
+	margin-bottom: 2rem;
 `;
 
 export const OrgImage = styled.img`

cra-rxjs-styled-components/src/components/user-repos/UserRepos.tsx

@@ -1,17 +1,26 @@
 import { NetlifyBadgeContainer, RepoListWrapper } from './UserRepos.styles';
 import { useUserRepositories } from '../../hooks/user-repositories/use-user-repositories';
 import RepoCard from '../repo-card/RepoCard';
+import useRepoSortFilter from '../../hooks/repositories/use-repo-sort-filter';
+import RepoFilter from '../repo-filter/Repofilter';
 
 function UserRepos({ isOrg = false }) {
-	const { loading, repos } = useUserRepositories(isOrg);
+	const { loading, repos, languages } = useUserRepositories(isOrg);
+
+	const sortAndFilteredRepositories = useRepoSortFilter(repos);
 
 	if (loading) {
 		return <p>Loading...</p>;
 	}
 
 	return (
 		<RepoListWrapper>
-			{repos && repos.map((repo) => <RepoCard repo={repo} star />)}
+			<RepoFilter
+				languages={languages}
+				filteredRepoCount={sortAndFilteredRepositories.length}
+			/>
+			{sortAndFilteredRepositories &&
+				sortAndFilteredRepositories.map((repo) => <RepoCard repo={repo} star />)}
 
 			<NetlifyBadgeContainer>
 				<a target="_blank" rel="noreferrer noopener" href="https://www.netlify.com">

cra-rxjs-styled-components/src/hooks/user-repositories/use-user-repositories.ts

@@ -6,8 +6,9 @@ import { fromFetchWithAuth } from '../auth/from-fetch-with-auth';
 import { Repository } from '../../interfaces/repositories.interfaces';
 
 export function useUserRepositories(isOrg = false) {
-	const [repos, setRepos] = useState<Repository[]>();
+	const [repos, setRepos] = useState<Repository[]>([]);
 	const [loading, setLoading] = useState(true);
+	const [languages, setLanguages] = useState<string[]>([]);
 	const { username } = useParams();
 
 	const request = (url: string) =>
@@ -24,9 +25,14 @@ export function useUserRepositories(isOrg = false) {
 		const GITHUB_URL = isOrg ? ORG_REPO_LIST(username) : USER_REPO_LIST(username);
 		const subscription = request(GITHUB_URL)
 			.pipe(
-				tap((data) => {
+				tap((data: Repository[]) => {
 					if (data) {
 						setRepos(data);
+						const reposLaguages = data
+							.map((res) => res.language)
+							.filter((res) => res)
+							.sort((a, b) => a.localeCompare(b));
+						setLanguages([...new Set(reposLaguages)]);
 						setLoading(false);
 					}
 				})
@@ -40,5 +46,6 @@ export function useUserRepositories(isOrg = false) {
 	return {
 		loading,
 		repos,
+		languages,
 	};
 }

cra-rxjs-styled-components/src/routes/orgs.tsx

@@ -14,6 +14,9 @@ import { useParams } from 'react-router-dom';
 import { tap } from 'rxjs';
 import { IOrg } from '../interfaces/org.interface';
 import { LoadingBulletList } from '../components/Loading';
+import { tabs } from '../constants/data';
+import TabNavigation from '../components/tab-nav/TabNav';
+import { RepoFilterProvider } from '../context/RepoFilterContext';
 
 export default function OrgPage() {
 	const [loading, setLoading] = useState(true);
@@ -63,9 +66,12 @@ export default function OrgPage() {
 							<OrgName data-testid="org about name">{orgInfo.name}</OrgName>
 						</OrgAbout>
 					)}
+					<TabNavigation tabs={tabs} activeTab={tabs[0].title} />
 				</OrgTopHeader>
 			</OrgHeader>
-			<UserRepos isOrg />
+			<RepoFilterProvider>
+				<UserRepos isOrg />
+			</RepoFilterProvider>
 		</>
 	);
 }