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,30 @@ export default async function fetchGitHubReleases(
     )
     .slice(0, sliceLimit);
 }
+
+export async function fetchAllReposName() {
+  const result = await octokit.graphql.paginate(
+    `
+      query paginate($cursor: String, $organization: String!) {
+        organization(login: $organization) {
+          repositories(first: 10, after: $cursor, orderBy: { field: STARGAZERS, direction: DESC }) {
+            nodes {
+              name
+            }
+            pageInfo {
+              hasNextPage
+              endCursor
+            }
+          }
+        }
+      }
+      `,
+    {
+      organization: env.NEXT_PUBLIC_GITHUB_ORG,
+    },
+  );
+
+  return result.organization.repositories.nodes.map(
+    (r: { name: string }) => r.name,
+  ) as string[];
+}

app/feed/page.tsx

@@ -1,21 +1,47 @@
 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 = {
+interface FeedPageProps {
   searchParams: {
-    page?: string;
+    repository: string;
+    events: string;
   };
-};
+}
 
-export default async function FeedPage({ searchParams }: Props) {
-  const events = await octokit.paginate(
+export default async function FeedPage({ searchParams }: FeedPageProps) {
+  const { repository, events } = searchParams;
+  const repositories = await fetchAllReposName();
+  const filterEvents: FilterOption[] = [
+    { title: "repository", options: repositories },
+    {
+      title: "events",
+      options: [
+        "PullRequestReviewCommentEvent",
+        "PullRequestReviewEvent",
+        "MemberEvent",
+        "IssuesEvent",
+        "IssueCommentEvent",
+        "PullRequestEvent",
+        "PushEvent",
+        "ForkEvent",
+        "ReleaseEvent",
+      ],
+    },
+  ] as const;
+  let allEvents = await octokit.paginate(
     "GET /orgs/{org}/events",
     {
       org: GITHUB_ORG,
@@ -26,18 +52,36 @@ export default async function FeedPage({ searchParams }: Props) {
       return data.filter(exludeBotEvents).filter(excludeBlacklistedEvents);
     },
   );
-  if (!Object.entries(events).length) {
+  if (!Object.entries(allEvents).length) {
     return <LoadingText text="Fetching latest events" />;
   }
+
+  if (searchParams.repository) {
+    allEvents = allEvents.filter((e) =>
+      e.repo.name.includes(
+        env.NEXT_PUBLIC_GITHUB_ORG + "/" + searchParams.repository,
+      ),
+    );
+  }
+
+  if (searchParams.events) {
+    allEvents = allEvents.filter((e) => e.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">
+            {allEvents.map((e) => (
+              <GitHubEvent key={e.id} event={e} />
+            ))}
+          </ul>
+        </div>
+      </div>
+    </>
   );
 }
 

components/gh_events/GithubFeedFilter.tsx

@@ -0,0 +1,62 @@
+"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 ? 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);
+                      }}
+                    >
+                      <option className="w-2 sm:w-auto sm:text-sm" value="">
+                        All
+                      </option>
+                      {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;