diff --git a/src/components/ReposFilters.tsx b/src/components/ReposFilters.tsx index 8c894b4..cbafd23 100644 --- a/src/components/ReposFilters.tsx +++ b/src/components/ReposFilters.tsx @@ -1,11 +1,17 @@ import { FC } from "react"; -import { PullRequestState, RepositoryRenderFormat } from "@/types/github"; +import { + PullRequestState, + RepositoryOrder, + RepositoryRenderFormat, +} from "@/types/github"; type ReposFiltersProps = { searchQuery: string; setSearchQuery: React.Dispatch>; pullRequestState: PullRequestState; setpullRequestState: React.Dispatch>; + repositoriesOrder: RepositoryOrder; + setRepositoriesOrder: React.Dispatch>; baseYear: number; year: number; setYear: React.Dispatch>; @@ -20,6 +26,8 @@ export const ReposFilters: FC = ({ setSearchQuery, pullRequestState, setpullRequestState, + repositoriesOrder, + setRepositoriesOrder, baseYear, year, setYear, @@ -47,6 +55,10 @@ export const ReposFilters: FC = ({ setpullRequestState(selectedState); }; + const handleRepositoriesOrderChange = (selectedOrder: RepositoryOrder) => { + setRepositoriesOrder(selectedOrder); + }; + return (
@@ -78,7 +90,7 @@ export const ReposFilters: FC = ({ onChange={(e) => setSearchQuery(e.target.value)} />
-
+
+
+ + +
diff --git a/src/hooks/index.ts b/src/hooks/index.ts index 10f7894..7336701 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -1,3 +1,3 @@ export * from "./useGitHubPullRequests"; export * from "./useGitHubQuery"; -export * from "./useFilteredRepositories"; +export * from "./useHandleStateRepositories"; diff --git a/src/hooks/useFilteredRepositories.ts b/src/hooks/useFilteredRepositories.ts deleted file mode 100644 index de31e7b..0000000 --- a/src/hooks/useFilteredRepositories.ts +++ /dev/null @@ -1,66 +0,0 @@ -import { useMemo } from "react"; -import { useSession } from "next-auth/react"; -import { - PullRequestContributionsByRepository, - PullRequestState, -} from "@/types/github"; - -export const useFilteredRepositories = ( - repositories: PullRequestContributionsByRepository[], - searchQuery: string, - hideOwnRepo: boolean, - pullRequestState: PullRequestState -) => { - const { data: session } = useSession(); - - const filteredRepositories = useMemo(() => { - const filterOutOwnRepos = ( - repos: PullRequestContributionsByRepository[] - ) => { - return repos?.filter( - (repoData) => repoData.repository.owner.login !== session?.user.login - ); - }; - - const filterReposBySearchQuery = ( - repos: PullRequestContributionsByRepository[] - ) => { - const query = searchQuery.toLowerCase(); - return repos?.filter((repoData) => - repoData.repository.name.toLowerCase().includes(query) - ); - }; - - const filterReposByPullRequestState = ( - repos: PullRequestContributionsByRepository[] - ) => { - return repos?.filter((repoData) => - repoData.contributions.nodes.some( - (contribution) => contribution.pullRequest.state === pullRequestState - ) - ); - }; - - const filterRepos = (repos: PullRequestContributionsByRepository[]) => { - let filteredRepos = repos; - if (!searchQuery) { - filteredRepos = hideOwnRepo ? filterOutOwnRepos(repos) : repos; - } else { - const filteredReposBySearchQuery = filterReposBySearchQuery(repos); - filteredRepos = hideOwnRepo - ? filterOutOwnRepos(filteredReposBySearchQuery) - : filteredReposBySearchQuery; - } - - filteredRepos = pullRequestState - ? filterReposByPullRequestState(filteredRepos) - : filteredRepos; - - return filteredRepos; - }; - - return filterRepos(repositories); - }, [repositories, searchQuery, hideOwnRepo, pullRequestState, session]); - - return filteredRepositories; -}; diff --git a/src/hooks/useHandleStateRepositories.ts b/src/hooks/useHandleStateRepositories.ts new file mode 100644 index 0000000..45ae8c1 --- /dev/null +++ b/src/hooks/useHandleStateRepositories.ts @@ -0,0 +1,134 @@ +import { useMemo } from "react"; +import { useSession } from "next-auth/react"; +import { + PullRequestContributionsByRepository, + PullRequestState, + RepositoryOrder, +} from "@/types/github"; +import { compareArrayString } from "@/utils/compare"; + +export const useHandleStateRepositories = ( + repositories: PullRequestContributionsByRepository[], + searchQuery: string, + hideOwnRepo: boolean, + pullRequestState: PullRequestState, + orderState: RepositoryOrder +) => { + const { data: session } = useSession(); + + const filteredRepositories = useMemo(() => { + //Filter section + const filterOutOwnRepos = ( + repos: PullRequestContributionsByRepository[] + ) => { + return repos?.filter( + (repoData) => repoData.repository.owner.login !== session?.user.login + ); + }; + const filterReposBySearchQuery = ( + repos: PullRequestContributionsByRepository[] + ) => { + const query = searchQuery.toLowerCase(); + return repos?.filter((repoData) => + repoData.repository.name.toLowerCase().includes(query) + ); + }; + const filterReposByPullRequestState = ( + repos: PullRequestContributionsByRepository[] + ) => { + return repos?.filter((repoData) => + repoData.contributions.nodes.some( + (contribution) => contribution.pullRequest.state === pullRequestState + ) + ); + }; + + const filterRepos = (repos: PullRequestContributionsByRepository[]) => { + let filteredRepos = repos; + if (!searchQuery) { + filteredRepos = hideOwnRepo ? filterOutOwnRepos(repos) : repos; + } else { + const filteredReposBySearchQuery = filterReposBySearchQuery(repos); + filteredRepos = hideOwnRepo + ? filterOutOwnRepos(filteredReposBySearchQuery) + : filteredReposBySearchQuery; + } + + filteredRepos = pullRequestState + ? filterReposByPullRequestState(filteredRepos) + : filteredRepos; + + return filteredRepos; + }; + /** */ + + //Order section + const orderRepoByOwner = ( + repos: PullRequestContributionsByRepository[] + ) => { + return [...repos].sort((a, b) => + compareArrayString(a.repository.owner.login, b.repository.owner.login) + ); + }; + const orderRepoByName = (repos: PullRequestContributionsByRepository[]) => { + return [...repos].sort((a, b) => + compareArrayString(a.repository.name, b.repository.name) + ); + }; + const orderRepoByCountAscending = ( + repos: PullRequestContributionsByRepository[] + ) => { + return [...repos].sort( + (a, b) => a.contributions.totalCount - b.contributions.totalCount + ); + }; + const orderRepoByCountDescending = ( + repos: PullRequestContributionsByRepository[] + ) => { + return [...repos].sort( + (a, b) => b.contributions.totalCount - a.contributions.totalCount + ); + }; + + const orderRepos = (repos: PullRequestContributionsByRepository[]) => { + let orderedRepos = repos; + if (orderState === "OWNER") { + orderedRepos = + orderedRepos !== undefined ? orderRepoByOwner(repos) : orderedRepos; + } else if (orderState === "REPOSITORY") { + orderedRepos = + orderedRepos !== undefined ? orderRepoByName(repos) : orderedRepos; + } else if (orderState === "PRASCENDING") { + orderedRepos = + orderedRepos !== undefined + ? orderRepoByCountAscending(repos) + : orderedRepos; + } else if (orderState === "PRDESCENDING") { + orderedRepos = + orderedRepos !== undefined + ? orderRepoByCountDescending(repos) + : orderedRepos; + } + + return orderedRepos; + }; + /** */ + + const filterAndOrderRepos = ( + repos: PullRequestContributionsByRepository[] + ) => { + return orderRepos(filterRepos(repos)); + }; + + return filterAndOrderRepos(repositories); + }, [ + repositories, + searchQuery, + hideOwnRepo, + pullRequestState, + orderState, + session, + ]); + + return filteredRepositories; +}; diff --git a/src/pages/stats/[login].tsx b/src/pages/stats/[login].tsx index c9f189d..0461c75 100644 --- a/src/pages/stats/[login].tsx +++ b/src/pages/stats/[login].tsx @@ -1,9 +1,13 @@ import { useState } from "react"; import { useSession } from "next-auth/react"; import { useRouter } from "next/router"; -import { useGitHubPullRequests, useFilteredRepositories } from "@/hooks"; +import { useGitHubPullRequests, useHandleStateRepositories } from "@/hooks"; import { CardSkeleton, FormatStatsRender, ReposFilters } from "@/components"; -import { PullRequestState, RepositoryRenderFormat } from "@/types/github"; +import { + PullRequestState, + RepositoryOrder, + RepositoryRenderFormat, +} from "@/types/github"; export default function Stats() { const { data: session } = useSession(); @@ -16,6 +20,9 @@ export default function Stats() { const [pullRequestState, setpullRequestState] = useState( null! ); + const [repositoriesOrder, setRepositoriesOrder] = useState( + null! + ); const [hideOwnRepo, setHideOwnRepo] = useState(false); const { repositories, isLoading } = useGitHubPullRequests( @@ -23,11 +30,12 @@ export default function Stats() { login as string ); - const filteredRepositories = useFilteredRepositories( + const filteredRepositories = useHandleStateRepositories( repositories, searchQuery, hideOwnRepo, - pullRequestState + pullRequestState, + repositoriesOrder ); return ( @@ -42,6 +50,8 @@ export default function Stats() { { + if (itemNumberOne < itemNumberTwo) { + return -1; + } + if (itemNumberOne > itemNumberTwo) { + return 1; + } + return 0; +};