Filter feeds

app/api/leaderboard/functions.ts

@@ -3,6 +3,7 @@ import {
   ReleasesResponse,
   LeaderboardAPIResponse,
   Release,
+  Repository,
 } from "@/lib/types";
 import { getContributors } from "@/lib/api";
 import { env } from "@/env.mjs";
@@ -113,3 +114,46 @@ export default async function fetchGitHubReleases(
     )
     .slice(0, sliceLimit);
 }
+
+interface RepositoriesResponse {
+  organization: {
+    repositories: {
+      pageInfo: {
+        hasNextPage: boolean;
+        endCursor: string | null;
+      };
+      nodes: Repository[];
+    };
+  };
+}
+export async function fetchAllReposName() {
+  let repos: string[] = [];
+  let afterCursor: string | null = null;
+
+  do {
+    const response: RepositoriesResponse = await octokit.graphql({
+      query: `
+        query GetTop10ActiveRepos($org: String!, $after: String) {
+          organization(login: $org) {
+            repositories(first: 20, after: $after, orderBy: { field: UPDATED_AT, direction: DESC }) {
+              pageInfo {
+                hasNextPage
+                endCursor
+              }
+              nodes {
+                name
+              }
+            }
+          }
+        }
+      `,
+      org: env.NEXT_PUBLIC_GITHUB_ORG,
+      after: afterCursor,
+    });
+    const { nodes, pageInfo } = response.organization.repositories;
+    repos.push(...nodes.map((repo) => repo.name));
+    afterCursor = pageInfo.hasNextPage ? pageInfo.endCursor : null;
+  } while (afterCursor !== null);
+
+  return repos;
+}

app/feed/page.tsx

@@ -1,21 +1,41 @@
 import LoadingText from "@/components/LoadingText";
 import { IGitHubEvent } from "@/lib/gh_events";
-import GitHubEvent from "@/components/gh_events/GitHubEvent";
 import { env } from "@/env.mjs";
 import octokit from "@/lib/octokit";
+import {
+  // fetchAllBranchName,
+  fetchAllReposName,
+} from "../api/leaderboard/functions";
+import GithubFeedFilter from "../../components/gh_events/GithubFeedFilter";
+import GitHubEvent from "@/components/gh_events/GitHubEvent";
+import { FilterOption } from "@/lib/types";
 
 const GITHUB_ORG: string = env.NEXT_PUBLIC_GITHUB_ORG;
 
 export const revalidate = 600;
 
-type Props = {
-  searchParams: {
-    page?: string;
-  };
-};
-
-export default async function FeedPage({ searchParams }: Props) {
-  const events = await octokit.paginate(
+export default async function FeedPage({ searchParams }: any) {
+  const { Repository, Events } = searchParams;
+  const repositories = await fetchAllReposName();
+  const filterEvents: FilterOption[] = [
+    { title: "Repository", options: ["All", ...repositories] },
+    {
+      title: "Events",
+      options: [
+        "All",
+        "PullRequestReviewCommentEvent",
+        "PullRequestReviewEvent",
+        "MemberEvent",
+        "IssuesEvent",
+        "IssueCommentEvent",
+        "PullRequestEvent",
+        "PushEvent",
+        "ForkEvent",
+        "ReleaseEvent",
+      ],
+    },
+  ] as const;
+  let events = await octokit.paginate(
     "GET /orgs/{org}/events",
     {
       org: GITHUB_ORG,
@@ -29,15 +49,46 @@ export default async function FeedPage({ searchParams }: Props) {
   if (!Object.entries(events).length) {
     return <LoadingText text="Fetching latest events" />;
   }
+
+  if (Repository && Events) {
+    events = events.filter((event) => {
+      const repoName = event.repo.name.replace(
+        `${env.NEXT_PUBLIC_GITHUB_ORG}/`,
+        "",
+      );
+      return (
+        repoName === searchParams.Repository &&
+        event.type === searchParams.Events
+      );
+    });
+  } else if (Repository) {
+    events = events.filter((event) => {
+      const repoName = event.repo.name.replace(
+        `${env.NEXT_PUBLIC_GITHUB_ORG}/`,
+        "",
+      );
+      return repoName === searchParams.Repository;
+    });
+  } else if (Events) {
+    events = events.filter((event) => {
+      return event.type === searchParams.Events;
+    });
+  }
+
   return (
-    <div className="relative mx-auto my-8 flow-root max-w-4xl p-4">
-      <h1 className="text-4xl text-primary-500 dark:text-white">Feed</h1>
-      <ul role="list" className="mb-20 mt-10 flex flex-col gap-4 space-y-4">
-        {events.map((e) => (
-          <GitHubEvent key={e.id} event={e} />
-        ))}
-      </ul>
-    </div>
+    <>
+      <div className="lg:justify-betw flex flex-col lg:flex-row-reverse">
+        <GithubFeedFilter filterEvents={filterEvents} />
+        <div className="relative flow-root w-full max-w-4xl p-4 lg:my-8">
+          <h1 className="text-4xl text-primary-500 dark:text-white">Feed</h1>
+          <ul role="list" className="mb-20 mt-10 flex flex-col gap-4 space-y-4">
+            {events.map((e) => (
+              <GitHubEvent key={e.id} event={e} />
+            ))}
+          </ul>
+        </div>
+      </div>
+    </>
   );
 }
 

app/leaderboard/_components/Searchbar.tsx

@@ -29,6 +29,7 @@ export default function Searchbar({ searchParams }: PageProps) {
 
   const updateSearchParam = (key: string, value?: string) => {
     const current = new URLSearchParams(searchParams as Record<string, string>);
+    console.log(current);
     if (!value) {
       current.delete(key);
     } else {

components/gh_events/GithubFeedFilter.tsx

@@ -0,0 +1,59 @@
+"use client";
+import { FilterOption } from "@/lib/types";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+
+const GithubFeed = (props: { filterEvents: FilterOption[] }) => {
+  const { filterEvents } = props;
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const updateSearchParam = (key: string, value: string) => {
+    const params = new URLSearchParams(searchParams.toString());
+
+    value !== "All" ? params.set(key, value) : params.delete(key);
+
+    router.push(pathname + "?" + params.toString());
+  };
+
+  return (
+    <div className="flex flex-col lg:flex-row-reverse lg:justify-between">
+      {/* Filter Component */}
+      <div className="w-full lg:sticky lg:top-20 lg:ml-auto lg:mr-0 lg:w-auto">
+        <div className="mx-auto min-w-max rounded-lg border border-primary-500 p-4 shadow-lg lg:my-20">
+          <span className="mb-2 text-2xl font-bold">Filter Activity</span>
+          <div className="mx-auto mt-4">
+            <ul className="filters mx-auto space-y-4">
+              {filterEvents.map((filter, index) => (
+                <li key={index} className="flex flex-col overflow-x-hidden">
+                  <span className="mb-2 font-semibold">{filter.title}</span>
+                  {filter.options && (
+                    <select
+                      className="rounded-md border-2 border-secondary-600 bg-background p-2 sm:p-1"
+                      value={filter.selectedOption}
+                      onChange={(e) => {
+                        updateSearchParam(filter.title, e.target.value);
+                      }}
+                    >
+                      {filter.options.map((option, optionIndex) => (
+                        <option
+                          className="w-2 sm:w-auto sm:text-sm"
+                          key={optionIndex}
+                          value={option}
+                        >
+                          {option}
+                        </option>
+                      ))}
+                    </select>
+                  )}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default GithubFeed;

lib/types.ts

@@ -153,7 +153,11 @@ export type ContributorSocials = {
   linkedin: string;
   slack: string;
 };
-
+export type FilterOption = {
+  title: string;
+  options: string[];
+  selectedOption?: string; // Add selectedOption property
+};
 export type PageProps = {
   searchParams: {
     search?: string;