feat: handle issue (Add custom sorting DevLeonardoCommunity#60)

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<React.SetStateAction<string>>;
   pullRequestState: PullRequestState;
   setpullRequestState: React.Dispatch<React.SetStateAction<PullRequestState>>;
+  repositoriesOrder: RepositoryOrder;
+  setRepositoriesOrder: React.Dispatch<React.SetStateAction<RepositoryOrder>>;
   baseYear: number;
   year: number;
   setYear: React.Dispatch<React.SetStateAction<number>>;
@@ -20,6 +26,8 @@ export const ReposFilters: FC<ReposFiltersProps> = ({
   setSearchQuery,
   pullRequestState,
   setpullRequestState,
+  repositoriesOrder,
+  setRepositoriesOrder,
   baseYear,
   year,
   setYear,
@@ -47,6 +55,10 @@ export const ReposFilters: FC<ReposFiltersProps> = ({
     setpullRequestState(selectedState);
   };
 
+  const handleRepositoriesOrderChange = (selectedOrder: RepositoryOrder) => {
+    setRepositoriesOrder(selectedOrder);
+  };
+
   return (
     <div className="flex justify-between sm:gap-0 sm:flex-row flex-col gap-3">
       <div className="sm:text-left text-center">
@@ -78,7 +90,7 @@ export const ReposFilters: FC<ReposFiltersProps> = ({
               onChange={(e) => setSearchQuery(e.target.value)}
             />
           </div>
-          <div className="my-5 flex flex-col sm:items-start items-center">
+          <div className="my-5 mr-2 flex flex-col sm:items-start items-center">
             <label className="mb-2">State of PR</label>
             <select
               className="select select-bordered w-full max-w-md"
@@ -93,6 +105,23 @@ export const ReposFilters: FC<ReposFiltersProps> = ({
               <option value="CLOSED">Closed</option>
             </select>
           </div>
+          <div className="my-5 flex flex-col sm:items-start items-center">
+            <label className="mb-2">Order by</label>
+            <select
+              className="select select-bordered w-full max-w-md"
+              value={repositoriesOrder}
+              onChange={(e) =>
+                handleRepositoriesOrderChange(e.target.value as RepositoryOrder)
+              }
+            >
+              <option value="OWNER">Owner</option>
+              <option value="REPOSITORY">Repository</option>
+              <option value="PRASCENDING">N° PR Ascending</option>
+              <option value="PRDESCENDING" selected>
+                N° PR Descending
+              </option>
+            </select>
+          </div>
         </div>
 
         <div className="flex sm:items-start items-center justify-center md:justify-start">

src/hooks/index.ts

@@ -1,3 +1,3 @@
 export * from "./useGitHubPullRequests";
 export * from "./useGitHubQuery";
-export * from "./useFilteredRepositories";
+export * from "./useHandleStateRepositories";

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;
+};

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,18 +20,22 @@ export default function Stats() {
   const [pullRequestState, setpullRequestState] = useState<PullRequestState>(
     null!
   );
+  const [repositoriesOrder, setRepositoriesOrder] = useState<RepositoryOrder>(
+    null!
+  );
   const [hideOwnRepo, setHideOwnRepo] = useState<boolean>(false);
 
   const { repositories, isLoading } = useGitHubPullRequests(
     year,
     login as string
   );
 
-  const filteredRepositories = useFilteredRepositories(
+  const filteredRepositories = useHandleStateRepositories(
     repositories,
     searchQuery,
     hideOwnRepo,
-    pullRequestState
+    pullRequestState,
+    repositoriesOrder
   );
 
   return (
@@ -42,6 +50,8 @@ export default function Stats() {
       <ReposFilters
         pullRequestState={pullRequestState!}
         setpullRequestState={setpullRequestState}
+        repositoriesOrder={repositoriesOrder}
+        setRepositoriesOrder={setRepositoriesOrder}
         searchQuery={searchQuery}
         setSearchQuery={setSearchQuery}
         baseYear={baseYear}

src/types/github.ts

@@ -43,5 +43,10 @@ export type User = {
   };
 };
 
+export type RepositoryOrder =
+  | "OWNER"
+  | "REPOSITORY"
+  | "PRASCENDING"
+  | "PRDESCENDING";
 export type RepositoryRenderFormat = "cards" | "text" | "json";
 export type PullRequestState = "MERGED" | "CLOSED" | "OPEN";

src/utils/compare.ts

@@ -0,0 +1,12 @@
+export const compareArrayString = (
+  itemNumberOne: string,
+  itemNumberTwo: string
+) => {
+  if (itemNumberOne < itemNumberTwo) {
+    return -1;
+  }
+  if (itemNumberOne > itemNumberTwo) {
+    return 1;
+  }
+  return 0;
+};