feat: add filter for state of PR (#116)

Author: DomeT99

src/components/ReposFilters.tsx

@@ -1,9 +1,11 @@
 import { FC } from "react";
-import { RepositoryRenderFormat } from "@/types/github";
+import { PullRequestState, RepositoryRenderFormat } from "@/types/github";
 
 type ReposFiltersProps = {
   searchQuery: string;
   setSearchQuery: React.Dispatch<React.SetStateAction<string>>;
+  pullRequestState: PullRequestState;
+  setpullRequestState: React.Dispatch<React.SetStateAction<PullRequestState>>;
   baseYear: number;
   year: number;
   setYear: React.Dispatch<React.SetStateAction<number>>;
@@ -16,6 +18,8 @@ type ReposFiltersProps = {
 export const ReposFilters: FC<ReposFiltersProps> = ({
   searchQuery,
   setSearchQuery,
+  pullRequestState,
+  setpullRequestState,
   baseYear,
   year,
   setYear,
@@ -39,6 +43,10 @@ export const ReposFilters: FC<ReposFiltersProps> = ({
     setHideOwnRepo((prevHideOwnRepo) => !prevHideOwnRepo);
   };
 
+  const handlePullRequestStateChange = (selectedState: PullRequestState) => {
+    setpullRequestState(selectedState);
+  };
+
   return (
     <div className="flex justify-between sm:gap-0 sm:flex-row flex-col gap-3">
       <div className="sm:text-left text-center">
@@ -59,15 +67,32 @@ export const ReposFilters: FC<ReposFiltersProps> = ({
             );
           })}
         </div>
-        <div className="my-5 flex flex-col sm:items-start items-center">
-          <label className="mb-2">Search</label>
-          <input
-            type="text"
-            placeholder="Type here"
-            className="input input-bordered w-full max-w-md"
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-          />
+        <div className="sm:flex-row flex-col flex">
+          <div className="my-5 mr-2 flex flex-col sm:items-start items-center">
+            <label className="mb-2">Search</label>
+            <input
+              type="text"
+              placeholder="Type here"
+              className="input input-bordered w-full max-w-md"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+            />
+          </div>
+          <div className="my-5 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"
+              value={pullRequestState}
+              onChange={(e) =>
+                handlePullRequestStateChange(e.target.value as PullRequestState)
+              }
+            >
+              <option value={null!} selected></option>
+              <option value="OPEN">Open</option>
+              <option value="MERGED">Merged</option>
+              <option value="CLOSED">Closed</option>
+            </select>
+          </div>
         </div>
 
         <div className="flex sm:items-start items-center justify-center md:justify-start">

src/hooks/useFilteredRepositories.ts

@@ -1,11 +1,15 @@
 import { useMemo } from "react";
 import { useSession } from "next-auth/react";
-import { PullRequestContributionsByRepository } from "@/types/github";
+import {
+  PullRequestContributionsByRepository,
+  PullRequestState,
+} from "@/types/github";
 
 export const useFilteredRepositories = (
   repositories: PullRequestContributionsByRepository[],
   searchQuery: string,
-  hideOwnRepo: boolean
+  hideOwnRepo: boolean,
+  pullRequestState: PullRequestState
 ) => {
   const { data: session } = useSession();
 
@@ -27,6 +31,16 @@ export const useFilteredRepositories = (
       );
     };
 
+    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) {
@@ -37,11 +51,16 @@ export const useFilteredRepositories = (
           ? filterOutOwnRepos(filteredReposBySearchQuery)
           : filteredReposBySearchQuery;
       }
+
+      filteredRepos = pullRequestState
+        ? filterReposByPullRequestState(filteredRepos)
+        : filteredRepos;
+
       return filteredRepos;
     };
 
     return filterRepos(repositories);
-  }, [repositories, searchQuery, hideOwnRepo, session]);
+  }, [repositories, searchQuery, hideOwnRepo, pullRequestState, session]);
 
   return filteredRepositories;
 };

src/pages/stats/[login].tsx

@@ -3,7 +3,7 @@ import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
 import { useGitHubPullRequests, useFilteredRepositories } from "@/hooks";
 import { CardSkeleton, FormatStatsRender, ReposFilters } from "@/components";
-import { RepositoryRenderFormat } from "@/types/github";
+import { PullRequestState, RepositoryRenderFormat } from "@/types/github";
 
 export default function Stats() {
   const { data: session } = useSession();
@@ -13,6 +13,9 @@ export default function Stats() {
   const [year, setYear] = useState<number>(baseYear);
   const [format, setFormat] = useState<RepositoryRenderFormat>("cards");
   const [searchQuery, setSearchQuery] = useState<string>("");
+  const [pullRequestState, setpullRequestState] = useState<PullRequestState>(
+    null!
+  );
   const [hideOwnRepo, setHideOwnRepo] = useState<boolean>(false);
 
   const { repositories, isLoading } = useGitHubPullRequests(
@@ -23,7 +26,8 @@ export default function Stats() {
   const filteredRepositories = useFilteredRepositories(
     repositories,
     searchQuery,
-    hideOwnRepo
+    hideOwnRepo,
+    pullRequestState
   );
 
   return (
@@ -36,6 +40,8 @@ export default function Stats() {
         </h2>
       </div>
       <ReposFilters
+        pullRequestState={pullRequestState!}
+        setpullRequestState={setpullRequestState}
         searchQuery={searchQuery}
         setSearchQuery={setSearchQuery}
         baseYear={baseYear}

src/types/github.ts

@@ -15,7 +15,7 @@ export type PullRequestNode = {
 export type PullRequest = {
   id: string;
   title: string;
-  state: "MERGED" | "CLOSED" | "OPEN";
+  state: PullRequestState;
   url: string;
 };
 
@@ -44,3 +44,4 @@ export type User = {
 };
 
 export type RepositoryRenderFormat = "cards" | "text" | "json";
+export type PullRequestState = "MERGED" | "CLOSED" | "OPEN";