refactor: seperate irrelevant logic

src/components/app/app.tsx

@@ -0,0 +1,63 @@
+import { useMemo } from 'react';
+import { useShallow } from 'zustand/react/shallow';
+import { BiSolidHeart } from 'react-icons/bi/index';
+
+import { useSoundStore } from '@/store';
+
+import { Container } from '@/components/container';
+import { StoreConsumer } from '@/components/store-consumer';
+import { Buttons } from '@/components/buttons';
+import { Categories } from '@/components/categories';
+
+import { sounds } from '@/data/sounds';
+
+interface Sound {
+  src: string;
+  label: string;
+  id: string;
+  icon: React.ReactNode;
+}
+
+export function App() {
+  const categories = useMemo(() => sounds.categories, []);
+
+  const favorites = useSoundStore(useShallow(state => state.getFavorites()));
+
+  const favoriteSounds = useMemo(() => {
+    const favoriteSounds = categories
+      .map(category => category.sounds)
+      .flat()
+      .filter(sound => favorites.includes(sound.id));
+
+    /**
+     * Reorder based on the order of favorites
+     */
+    return favorites.map(favorite =>
+      favoriteSounds.find(sound => sound.id === favorite),
+    );
+  }, [favorites, categories]);
+
+  const allCategories = useMemo(() => {
+    const favorites = [];
+
+    if (favoriteSounds.length) {
+      favorites.push({
+        icon: <BiSolidHeart />,
+        id: 'favorites',
+        sounds: favoriteSounds as Array<Sound>,
+        title: 'Favorites',
+      });
+    }
+
+    return [...favorites, ...categories];
+  }, [favoriteSounds, categories]);
+
+  return (
+    <StoreConsumer>
+      <Container>
+        <Buttons />
+        <Categories categories={allCategories} />
+      </Container>
+    </StoreConsumer>
+  );
+}

src/components/app/index.ts

@@ -0,0 +1 @@
+export { App } from './app';

src/components/categories/categories.tsx

@@ -1,65 +1,31 @@
-import { useMemo } from 'react';
-import { useShallow } from 'zustand/react/shallow';
-import { BiSolidHeart } from 'react-icons/bi/index';
 import { AnimatePresence } from 'framer-motion';
 
-import { useSoundStore } from '@/store';
-
-import { Container } from '@/components/container';
-import { StoreConsumer } from '../store-consumer';
 import { Category } from '@/components/category';
-import { Buttons } from '@/components/buttons';
 
-import { sounds } from '@/data/sounds';
+interface CategoriesProps {
-
+  categories: Array<{
-export function Categories() {
+    id: string;
-  const categories = useMemo(() => sounds.categories, []);
+    title: string;
-
+    icon: React.ReactNode;
-  const favorites = useSoundStore(useShallow(state => state.getFavorites()));
+    sounds: Array<{
-
+      label: string;
-  const favoriteSounds = useMemo(() => {
+      src: string;
-    const favoriteSounds = categories
+      icon: React.ReactNode;
-      .map(category => category.sounds)
+      id: string;
-      .flat()
+    }>;
-      .filter(sound => favorites.includes(sound.id));
+  }>;
-
+}
-    /**
-     * Reorder based on the order of favorites
-     */
-    return favorites.map(favorite =>
-      favoriteSounds.find(sound => sound.id === favorite),
-    );
-  }, [favorites, categories]);
 
+export function Categories({ categories }: CategoriesProps) {
   return (
-    <StoreConsumer>
+    <AnimatePresence initial={false}>
-      <Container>
+      {categories.map(category => (
-        <Buttons />
+        <Category
-        <div>
+          functional={category.id !== 'favorites'}
-          <AnimatePresence initial={false}>
+          {...category}
-            {!!favoriteSounds.length && (
+          key={category.id}
-              <Category
+        />
-                functional={false}
+      ))}
-                icon={<BiSolidHeart />}
+    </AnimatePresence>
-                id="favorites"
-                title="Favorites"
-                sounds={
-                  favoriteSounds as Array<{
-                    src: string;
-                    label: string;
-                    id: string;
-                    icon: React.ReactNode;
-                  }>
-                }
-              />
-            )}
-
-            {categories.map(category => (
-              <Category {...category} key={category.id} />
-            ))}
-          </AnimatePresence>
-        </div>
-      </Container>
-    </StoreConsumer>
   );
 }

src/pages/index.astro

@@ -2,13 +2,13 @@
 import Layout from '@/layouts/layout.astro';
 
 import { Hero } from '@/components/hero';
-import { Categories } from '@/components/categories';
+import { App } from '@/components/app';
 ---
 
 <Layout title="Welcome to Astro.">
   <main>
     <Hero />
-    <Categories client:load />
+    <App client:load />
   </main>
 </Layout>