global context

Author: generalentropy

context/GlobalProvider.jsx

@@ -0,0 +1,41 @@
+import { createContext, useState, useEffect } from "react";
+import { fetchReposData } from "../utils/helpers";
+import { ORGNAME } from "../config/globals";
+
+export const GlobalContext = createContext();
+
+const GlobalProvider = ({ children }) => {
+  const [reposData, setReposData] = useState(null);
+
+  useEffect(() => {
+    // Pour éviter de multiples refetch pendant le dev (github api rate limit)
+    if (!reposData) {
+      fetchReposData(ORGNAME)
+        .then((res) => {
+          if (res) {
+            setReposData(res);
+            console.log("Repo data fetched");
+          } else {
+            setReposData(null);
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <GlobalContext.Provider
+      value={{
+        reposData,
+        setReposData,
+      }}
+    >
+      {children}
+    </GlobalContext.Provider>
+  );
+};
+
+export default GlobalProvider;

context/useGlobalContext.js

@@ -0,0 +1,4 @@
+import { useContext } from "react";
+import { GlobalContext } from "../context/GlobalProvider";
+
+export const useGlobalContext = () => useContext(GlobalContext);

data/cardsData.js

@@ -71,6 +71,31 @@ export const cardsData = [
       },
     ],
   },
+  {
+    project: "bitguardian",
+    imageCover: "bitguardian.jpg",
+    title: "BitGuardian",
+    author: "Moon",
+    github: "https://github.com/Bit-Scripts/BitGuardian",
+    demo: "",
+    translations: [
+      {
+        lang: "en",
+        description:
+          "BitGuardian is a Discord moderation bot that assigns a role to new members and logs user messages. By facilitating server management, it enhances the user experience and offers extensible support for custom features.",
+      },
+      {
+        lang: "fr",
+        description:
+          "BitGuardian est un bot Discord de modération qui attribue un rôle aux nouveaux membres et enregistre les messages utilisateur. Facilitant la gestion des serveurs, il améliore l'expérience utilisateur et offre un support extensible pour des fonctionnalités personnalisées.",
+      },
+      {
+        lang: "es",
+        description:
+          "BitGuardian es un bot de moderación de Discord que asigna un rol a los nuevos miembros y registra los mensajes de los usuarios. Al facilitar la gestión de servidores, mejora la experiencia del usuario y ofrece soporte extensible para funciones personalizadas.",
+      },
+    ],
+  },
   {
     project: "lowfuel",
     imageCover: "lowfuel.jpg",

public/images/bitguardian.jpg

@@ -1,25 +1,19 @@
-import { useEffect } from "react";
-// import { ORGNAME } from "../config/globals";
-// import { fetchReposData } from "../utils/helpers";
 import CardsWrapper from "./components/CardsWrapper";
 import Header from "./components/Header";
 import Info from "./components/Info";
 import LangageSwitcher from "./components/LangSwitcher";
+import GlobalProvider from "../context/GlobalProvider";
 
 function App() {
-  useEffect(() => {
-    // fetchReposData(ORGNAME);
-  }, []);
-
-  console.log('"render app');
-
   return (
-    <div className="min-h-screen overflow-x-hidden bg-neutral-800">
-      <Header />
-      <LangageSwitcher />
-      <Info />
-      <CardsWrapper />
-    </div>
+    <GlobalProvider>
+      <div className="min-h-screen overflow-x-hidden bg-neutral-800">
+        <Header />
+        <LangageSwitcher />
+        <Info />
+        <CardsWrapper />
+      </div>
+    </GlobalProvider>
   );
 }
 

src/App.jsx

@@ -27,7 +27,7 @@ function Card({
           {title}
         </div>
 
-        <div className="h-full max-h-[180px] overflow-hidden overflow-y-auto text-ellipsis py-4 text-sm text-neutral-200">
+        <div className="h-full max-h-[200px] overflow-hidden text-ellipsis py-4 text-sm text-neutral-200">
           {t(`app.card:${translationKey}.description`)}
         </div>
 

src/components/Card.jsx

@@ -6,7 +6,6 @@ function CardsWrapper() {
     <div className="flex items-center justify-center">
       <div className="flex max-w-[1280px] flex-wrap justify-center gap-8 p-8">
         {cardsData.map((card, i) => {
-          console.log(card);
           return (
             <Card
               title={card.title}