Update frontend to handle the changed format of consolidated snippets

Author: Mathys-Gasnier

src/components/LanguageSelector.tsx

@@ -79,7 +79,7 @@ const LanguageSelector = () => {
       >
         <div className="selector__value">
           <img src={language.icon} alt="" />
-          <span>{language.lang || "Select a language"}</span>
+          <span>{language.name || "Select a language"}</span>
         </div>
         <span className="selector__arrow" />
       </button>
@@ -92,18 +92,18 @@ const LanguageSelector = () => {
         >
           {fetchedLanguages.map((lang, index) => (
             <li
-              key={lang.lang}
+              key={lang.name}
               role="option"
               tabIndex={-1}
               onClick={() => handleSelect(lang)}
               className={`selector__item ${
-                language.lang === lang.lang ? "selected" : ""
+                language.name === lang.name ? "selected" : ""
               } ${focusedIndex === index ? "focused" : ""}`}
-              aria-selected={language.lang === lang.lang}
+              aria-selected={language.name === lang.name}
             >
               <label>
                 <img src={lang.icon} alt="" />
-                <span>{lang.lang}</span>
+                <span>{lang.name}</span>
               </label>
             </li>
           ))}

src/components/SnippetList.tsx

@@ -63,7 +63,7 @@ const SnippetList = () => {
                 whileTap={{ scale: 0.98 }}
               >
                 <div className="snippet__preview">
-                  <img src={language.icon} alt={language.lang} />
+                  <img src={language.icon} alt={language.name} />
                 </div>
                 <h3 className="snippet__title">{snippet.title}</h3>
               </motion.button>
@@ -77,7 +77,7 @@ const SnippetList = () => {
           <SnippetModal
             snippet={snippet}
             handleCloseModal={handleCloseModal}
-            language={language.lang}
+            language={language.name}
           />
         )}
       </AnimatePresence>

src/contexts/AppContext.tsx

@@ -4,8 +4,9 @@ import { AppState, LanguageType, SnippetType } from "@types";
 
 // tokens
 const defaultLanguage: LanguageType = {
-  lang: "JAVASCRIPT",
+  name: "JAVASCRIPT",
   icon: "/icons/javascript.svg",
+  subIndexes: [],
 };
 
 // TODO: add custom loading and error handling

src/hooks/useCategories.ts

@@ -1,24 +1,19 @@
 import { useMemo } from "react";
 
 import { useAppContext } from "@contexts/AppContext";
-import { SnippetType } from "@types";
+import { CategoryType } from "@types";
 import { slugify } from "@utils/slugify";
 
 import { useFetch } from "./useFetch";
 
-type CategoryData = {
-  categoryName: string;
-  snippets: SnippetType[];
-};
-
 export const useCategories = () => {
   const { language } = useAppContext();
-  const { data, loading, error } = useFetch<CategoryData[]>(
-    `/consolidated/${slugify(language.lang)}.json`
+  const { data, loading, error } = useFetch<CategoryType[]>(
+    `/consolidated/${slugify(language.name)}.json`
   );
 
   const fetchedCategories = useMemo(() => {
-    return data ? data.map((item) => item.categoryName) : [];
+    return data ? data.map((item) => item.name) : [];
   }, [data]);
 
   return { fetchedCategories, loading, error };

src/hooks/useSnippets.ts

@@ -1,22 +1,17 @@
 import { useAppContext } from "@contexts/AppContext";
-import { SnippetType } from "@types";
+import { CategoryType } from "@types";
 import { slugify } from "@utils/slugify";
 
 import { useFetch } from "./useFetch";
 
-type CategoryData = {
-  categoryName: string;
-  snippets: SnippetType[];
-};
-
 export const useSnippets = () => {
   const { language, category } = useAppContext();
-  const { data, loading, error } = useFetch<CategoryData[]>(
-    `/consolidated/${slugify(language.lang)}.json`
+  const { data, loading, error } = useFetch<CategoryType[]>(
+    `/consolidated/${slugify(language.name)}.json`
   );
 
   const fetchedSnippets = data
-    ? data.find((item) => item.categoryName === category)?.snippets
+    ? data.find((item) => item.name === category)?.snippets
     : [];
 
   return { fetchedSnippets, loading, error };

src/types/index.ts

@@ -1,10 +1,14 @@
 export type LanguageType = {
-  lang: string;
+  name: string;
   icon: string;
+  subIndexes: {
+    name: string;
+    icon: string;
+  }[];
 };
 
 export type CategoryType = {
-  categoryName: string;
+  name: string;
   snippets: SnippetType[];
 };