refactor: change data file structure

remvze · Oct 6, 2023 · c9e8bd4 · c9e8bd4
1 parent cc26f68
commit c9e8bd4
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 98 deletions.
diff --git a/src/components/categories/categories.tsx b/src/components/categories/categories.tsx
@@ -1,55 +1,35 @@
-import { useMemo } from 'react';
 import { BiSolidTree } from 'react-icons/bi';
 import { FaCity } from 'react-icons/fa';
 
 import { Container } from '@/components/container';
 import { Category } from '@/components/category';
 
 interface CategoriesProps {
-  sounds: {
-    [id: string]: {
-      title: string;
-      sounds: Array<{
-        label: string;
-        src: string;
-      }>;
-    };
-  };
+  categories: Array<{
+    id: string;
+    title: string;
+    sounds: Array<{
+      label: string;
+      src: string;
+    }>;
+  }>;
 }
 
-export function Categories({ sounds }: CategoriesProps) {
-  const categories = useMemo(() => {
-    const idToIcon: { [id: string]: React.ReactNode } = {
-      nature: <BiSolidTree />,
-      urban: <FaCity />,
-    };
-
-    const ids = Object.keys(sounds);
-    const categories: Array<{
-      icon: React.ReactNode;
-      title: string;
-      id: string;
-      sounds: Array<{ label: string; src: string }>;
-    }> = [];
-
-    ids.forEach(id => {
-      const category = sounds[id];
-
-      categories.push({
-        icon: idToIcon[id] || '-',
-        id: id,
-        ...category,
-      });
-    });
-
-    return categories;
-  }, [sounds]);
+export function Categories({ categories }: CategoriesProps) {
+  const idToIcon: { [id: string]: React.ReactNode } = {
+    nature: <BiSolidTree />,
+    urban: <FaCity />,
+  };
 
   return (
     <Container>
       <div>
         {categories.map(category => (
-          <Category {...category} key={category.id} />
+          <Category
+            {...category}
+            icon={idToIcon[category.id] || idToIcon.nature}
+            key={category.id}
+          />
         ))}
       </div>
     </Container>

diff --git a/src/data/sounds.json b/src/data/sounds.json
diff --git a/src/data/sounds.ts b/src/data/sounds.ts
@@ -0,0 +1,66 @@
+export const sounds: {
+  categories: Array<{
+    id: string;
+    title: string;
+    sounds: Array<{ label: string; src: string }>;
+  }>;
+} = {
+  categories: [
+    {
+      id: 'nature',
+      sounds: [
+        {
+          label: 'Rain',
+          src: '/sounds/rain.mp3',
+        },
+        {
+          label: 'Birds',
+          src: '/sounds/birds.mp3',
+        },
+        {
+          label: 'River',
+          src: '/sounds/river.mp3',
+        },
+        {
+          label: 'Thunder',
+          src: '/sounds/thunder.mp3',
+        },
+        {
+          label: 'Crickets',
+          src: '/sounds/crickets.mp3',
+        },
+        {
+          label: 'Waves',
+          src: '/sounds/waves.mp3',
+        },
+        {
+          label: 'Seagulls',
+          src: '/sounds/seagulls.mp3',
+        },
+        {
+          label: 'Campfire',
+          src: '/sounds/campfire.mp3',
+        },
+      ],
+      title: 'Nature',
+    },
+    {
+      id: 'urban',
+      sounds: [
+        {
+          label: 'Airport',
+          src: '/sounds/airport.mp3',
+        },
+        {
+          label: 'Cafe',
+          src: '/sounds/cafe.mp3',
+        },
+        {
+          label: 'Rain on Window',
+          src: '/sounds/rain-on-window.mp3',
+        },
+      ],
+      title: 'Urban',
+    },
+  ],
+};
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -4,13 +4,14 @@ import Layout from '@/layouts/layout.astro';
 import { Hero } from '@/components/hero';
 import { Categories } from '@/components/categories';
 
-import sounds from '@/data/sounds.json';
+// import sounds from '@/data/sounds.json';
+import { sounds } from '@/data/sounds';
 ---
 
 <Layout title="Welcome to Astro.">
   <main>
     <Hero />
-    <Categories client:load sounds={sounds.sounds} />
+    <Categories categories={sounds.categories} client:load />
   </main>
 </Layout>