feat(projects): update all pages to fetch projects data from data/repo_data.json

Author: Majestic9169

src/components/GithubCard.tsx

@@ -1,26 +1,8 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import "../styles/components/RepoCard.css";
-import { RepoData } from "../utils/types";
-import { RepoMap } from "../utils/dummyData";
-
-const RepoCard = ({ repoName }: { repoName: string }) => {
-  const [repoData, setRepoData] = useState<RepoData>({
-    description: "Find a place to chill during class hours in IIT KGP",
-    language: "HTML",
-    stars: 22,
-    forks: 27,
-  })
-
-  const fetchDummyData = () => {
-    const data = JSON.parse(RepoMap[`${repoName}_data`])
-    setRepoData(data);
-    console.log("Fetched dummy data")
-  }
-
-  useEffect(() => {
-    fetchDummyData();
-  });
+import { REPO_DATA_TYPE } from "../utils/types";
 
+const RepoCard = ({ repoData }: { repoData: REPO_DATA_TYPE }) => {
   return (
     <div className="gh-card-container">
       <div className="gh-card-header">
@@ -29,7 +11,7 @@ const RepoCard = ({ repoName }: { repoName: string }) => {
             <path d="M2 2.5A2.5 2.5 0 0 1 4.5 0h8.75a.75.75 0 0 1 .75.75v12.5a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1 0-1.5h1.75v-2h-8a1 1 0 0 0-.714 1.7.75.75 0 1 1-1.072 1.05A2.495 2.495 0 0 1 2 11.5Zm10.5-1h-8a1 1 0 0 0-1 1v6.708A2.486 2.486 0 0 1 4.5 9h8ZM5 12.25a.25.25 0 0 1 .25-.25h3.5a.25.25 0 0 1 .25.25v3.25a.25.25 0 0 1-.4.2l-1.45-1.087a.249.249 0 0 0-.3 0L5.4 15.7a.25.25 0 0 1-.4-.2Z"></path>
           </svg>
         </span>
-        <span className="gh-repo-name">{repoName}</span>
+        <span className="gh-repo-name">{repoData.name}</span>
       </div>
       <div className="gh-card-body">
         {repoData.description}

src/pages/About.tsx

@@ -2,15 +2,27 @@ import React from 'react';
 import { HeroSection } from "../sections/Hero";
 import { StatsSection } from "../sections/Statistics";
 import CardGrid from '../sections/CardGrid';
+import RepoData from "../data/repo_data.json";
+import { REPO_DATA_TYPE } from '../utils/types';
 
 function About() {
+  const Repos: REPO_DATA_TYPE[] = RepoData as REPO_DATA_TYPE[];
+  const featuredReposList: string[] = ["iqps-go", "metakgp.org"];
+  const featuredRepos: REPO_DATA_TYPE[] = Repos.filter(repo => featuredReposList.includes(repo.name)) ?? [{
+    name: "ERROR",
+    description: "You seem to have inputted a wrong repo name in the featured repos list, please check that your names are valid",
+    stars: 69,
+    forks: 420,
+    language: "ERROR"
+  }];
+
   return (
     <div className="page-container">
       <HeroSection />
       <StatsSection />
       <section className="topic-section">
         <h2 className="section-header-left">Featured Projects</h2>
-        <CardGrid names={["iqps-go", "metakgp.org"]} displayMode='featured' />
+        <CardGrid repos={featuredRepos} displayMode='featured' />
       </section>
       <section className="topic-section">
         <h2 className="section-header-left">About MetaKGP</h2>

src/pages/Projects.tsx

@@ -1,32 +1,15 @@
-import { useContext, useEffect, useState } from "react";
-import RepoCard from "../components/GithubCard";
+import { useState } from "react";
 import CardGrid from "../sections/CardGrid";
-import { dummyRepoList, RepoMap } from "../utils/dummyData";
 import "../styles/pages/Projects.css";
-import { RepoData } from "../utils/types";
+import { REPO_DATA_TYPE } from "../utils/types";
+import RepoData from '../data/repo_data.json';
 
 const Projects = () => {
-  const [repoList, setRepoList] = useState<string[]>([]);
-  const [languages, setLanguages] = useState<string[]>([]);
-  const [selectedLanguage, setSelectedLanguage] = useState<string[]>([]);
-
-  const fetchDummyData = () => {
-    const data = JSON.parse(dummyRepoList)
-    setRepoList(data)
-  }
-
-  useEffect(() => {
-    fetchDummyData();
-  });
+  const repoList: REPO_DATA_TYPE[] = RepoData as REPO_DATA_TYPE[]
 
-  useEffect(() => {
-    const repoData = repoList
-      .map(name => JSON.parse(RepoMap[`${name}_data`]));
-
-    const allLanguages = [...new Set(repoData.map(repo => repo.language))];
+  const languages = [...new Set(repoList.map(repo => repo.language))];
+  const [selectedLanguage, setSelectedLanguage] = useState<string[]>([]);
 
-    setLanguages([...allLanguages]);
-  }, [repoList]);
 
   const toggleLanguage = (lang: string) => {
     setSelectedLanguage(prev => {
@@ -39,11 +22,10 @@ const Projects = () => {
     });
   };
 
-  const filteredRepos = repoList.filter(name => {
-    const repoData: RepoData = JSON.parse(RepoMap[`${name}_data`]);
+  const filteredRepos = repoList.filter(repo => {
     if (selectedLanguage.length === 0)
       return true;
-    return selectedLanguage.includes(repoData.language);
+    return selectedLanguage.includes(repo.language);
   })
 
   return (
@@ -66,7 +48,7 @@ const Projects = () => {
           </button>
         ))}
       </div>
-      <CardGrid names={filteredRepos} displayMode="all" />
+      <CardGrid repos={filteredRepos} displayMode="all" />
     </div>
   )
 }

src/sections/CardGrid.tsx

@@ -1,17 +1,18 @@
 import React from "react";
 import RepoCard from "../components/GithubCard";
 import "../styles/sections/CardGrid.css"
+import { REPO_DATA_TYPE } from "../utils/types";
 
 type Props = {
-  names: string[];
+  repos: REPO_DATA_TYPE[];
   displayMode: "all" | "featured";
 }
 
 const CardGrid = (props: Props) => {
   return (
     <div className={`gh-card-grid ${props.displayMode}`}>
-      {props.names.map((name, index) => (
-        <RepoCard repoName={name} key={index} />
+      {props.repos.map((repo, index) => (
+        <RepoCard repoData={repo} key={index} />
       ))}
     </div>
   )

src/utils/types.ts

@@ -1,10 +1,7 @@
-export interface RepoData {
+export interface REPO_DATA_TYPE {
+  name: string;
   description: string;
   language: string;
   stars: number;
   forks: number;
 }
-
-export interface dummyData {
-  [key: string]: string;
-}