Merge pull request #47 from kudos-ink/refactor/avatar

[Refactor] get icon url from json instead of notion

app/explore/[slug]/page.tsx

@@ -40,10 +40,7 @@ export default async function ExplorePage({ params }: IProps) {
     page_size: DEFAULT_PAGE_SIZE,
     filter: queryFilter,
   });
-  const contributions = transformNotionDataToContributions(
-    data,
-    filterOptions.repositories,
-  );
+  const contributions = transformNotionDataToContributions(data);
   const items: PaginatedCustomDataResponse<Contribution> = {
     data: contributions,
     hasMore: data.has_more,

app/page.tsx

@@ -13,10 +13,7 @@ export default async function Home() {
   const data = await queryDatabase({
     page_size: DEFAULT_PAGE_SIZE,
   });
-  const contributions = transformNotionDataToContributions(
-    data,
-    filterOptions.repositories,
-  );
+  const contributions = transformNotionDataToContributions(data);
   const items: PaginatedCustomDataResponse<Contribution> = {
     data: contributions,
     hasMore: data.has_more,

components/table/table.tsx

@@ -1,5 +1,11 @@
 "use client";
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { useMediaQuery } from "react-responsive";
 import {
   Table as NuiTable,
@@ -16,6 +22,8 @@ import { ExternalLink, Content, Time, Project } from "./row";
 import { useContributions } from "@/hooks/useContributions";
 import { KudosQueryParameters } from "@/lib/notion/types";
 import dynamic from "next/dynamic";
+import { useFilters } from "@/contexts/filters";
+import { extractRepositoryUrlFromIssue } from "@/utils/github";
 const Labels = dynamic(() => import("./row").then((m) => m.Labels), {
   ssr: false,
 });
@@ -29,6 +37,11 @@ interface ITableProps {
   items: PaginatedContributions;
   queries?: Partial<KudosQueryParameters>;
 }
+
+interface RepositoryMap {
+  [key: string]: string;
+}
+
 export const Table = ({ items, queries = {} }: ITableProps) => {
   const [columns, setColumns] = useState<IColumn[]>([
     { name: "PROJECT", uid: "project" },
@@ -38,6 +51,8 @@ export const Table = ({ items, queries = {} }: ITableProps) => {
     { name: "ACTIONS", uid: "actions" },
   ]);
 
+  const { filterOptions } = useFilters();
+
   const {
     data: results,
     fetchNextPage,
@@ -54,15 +69,40 @@ export const Table = ({ items, queries = {} }: ITableProps) => {
     return results?.pages.flatMap((page) => page.data) || [];
   }, [results]);
 
+  const repositoryIconMap: RepositoryMap = useMemo(() => {
+    const map: RepositoryMap = {};
+    filterOptions.repositories.forEach((repository) => {
+      map[repository.repository_url] = repository.repository_url
+        .toLowerCase()
+        .includes("polkadot")
+        ? "/images/polkadot-logo.png"
+        : repository.icon;
+    });
+    return map;
+  }, [filterOptions.repositories]);
+  const useGetIconByRepositoryUrl = (repositoryIconMap: RepositoryMap) => {
+    const getIconByRepositoryUrl = useCallback(
+      (repositoryUrl: string): string | null => {
+        return repositoryIconMap[repositoryUrl];
+      },
+      [repositoryIconMap],
+    );
+
+    return getIconByRepositoryUrl;
+  };
+
+  const getIconByRepositoryUrl = useGetIconByRepositoryUrl(repositoryIconMap);
+
   const renderCell = React.useCallback(
     (item: Contribution, columnKey: React.Key) => {
       const cellValue = item[columnKey as keyof Contribution];
-
+      const repository = extractRepositoryUrlFromIssue(item.url);
+      const avatar = !!repository ? getIconByRepositoryUrl(repository) : null;
       switch (columnKey) {
         case "project":
           return (
             <Project
-              avatarSrc={item.avatar}
+              avatarSrc={avatar}
               name={item.project}
               organization={item.organization}
               repository={item.repository}
@@ -109,7 +149,7 @@ export const Table = ({ items, queries = {} }: ITableProps) => {
           return cellValue;
       }
     },
-    [],
+    [getIconByRepositoryUrl],
   );
 
   const handleScroll = useCallback(() => {

hooks/useContributions.tsx

@@ -32,10 +32,7 @@ export const useContributions = (
         start_cursor: next_cursor,
       });
       return {
-        data: transformNotionDataToContributions(
-          response,
-          filterOptions.repositories,
-        ),
+        data: transformNotionDataToContributions(response),
         hasMore: response.has_more,
         nextCursor: response.next_cursor ?? undefined,
       };

types/contribution.ts

@@ -2,7 +2,6 @@ import { PaginatedCustomDataResponse } from ".";
 
 export type Contribution = {
   id: number;
-  avatar: string | null;
   labels: string[];
   languages: string[];
   project: string;

types/filters.ts

@@ -11,6 +11,8 @@ export type FilterOption = {
   value: string;
   interests?: string[];
   id?: string;
+  icon?: string;
+  repository_url?: string;
 };
 
 export type FilterOptions = {

utils/github.ts

@@ -1,22 +1,3 @@
-import { Repository } from "@/types/filters";
-
-export function getImagePath(
-  githubUrl: string,
-  repositories: Repository[],
-): string | null {
-  const lowerCaseGithubUrl = githubUrl.toLowerCase();
-
-  if (lowerCaseGithubUrl.includes("polkadot")) {
-    return "/images/polkadot-logo.png";
-  }
-
-  const repository = repositories.find(
-    ({ repository_url }) => repository_url.toLowerCase() === lowerCaseGithubUrl,
-  );
-
-  return repository?.icon ?? null;
-}
-
 export const getProjectUrls = (organization: string, repository?: string) => {
   return {
     organizationUrl: `https://github.com/${organization}`,
@@ -25,3 +6,15 @@ export const getProjectUrls = (organization: string, repository?: string) => {
       : undefined,
   };
 };
+export const extractRepositoryUrlFromIssue = (
+  issueUrl: string,
+): string | null => {
+  // Regex pattern to match the repository URL in the issue URL
+  const regex = /(https:\/\/github\.com\/[^/]+\/[^/]+)\/issues\/\d+/;
+
+  // Use the regex pattern to extract the repository URL
+  const match = issueUrl.match(regex);
+
+  // If a match is found, return the repository URL, otherwise, return null
+  return match ? match[1] : null;
+};

utils/notion.ts

@@ -1,18 +1,16 @@
 import { QueryDatabaseResponse } from "@notionhq/client/build/src/api-endpoints";
 import { Contribution } from "@/types/contribution";
-import { getImagePath } from "./github";
 import {
   GOOD_FIRST_ISSUE_KEY,
   GOOD_FIRST_ISSUE_LABELS,
   INTEREST_KEY,
   LANGUAGES_KEY,
   PROJECTS_KEY,
 } from "@/data/filters";
-import { FilterOption, Filters, Repository } from "@/types/filters";
+import { FilterOption, Filters } from "@/types/filters";
 
 export function transformNotionDataToContributions(
   notionData: QueryDatabaseResponse,
-  repositoriesData: Repository[],
 ): Contribution[] {
   return notionData.results.reduce((acc: Contribution[], currentItem: any) => {
     const properties = currentItem.properties;
@@ -23,7 +21,6 @@ export function transformNotionDataToContributions(
     const organization = urlElements.pop();
     const contribution: Contribution = {
       id,
-      avatar: getImagePath(avatarKey, repositoriesData),
       labels: properties["Issue Labels"].multi_select.map(
         (label: any) => label.name,
       ),