refactor: remove seperate favorite store

src/components/categories/categories.tsx

@@ -3,7 +3,7 @@ import { useShallow } from 'zustand/react/shallow';
 import { BiSolidHeart } from 'react-icons/bi/index';
 import { AnimatePresence } from 'framer-motion';
 
-import { useFavoriteStore } from '@/store/favorite';
+import { useSoundStore } from '@/store';
 
 import { Container } from '@/components/container';
 import { StoreConsumer } from '../store-consumer';
@@ -16,7 +16,7 @@ import { sounds } from '@/data/sounds';
 export function Categories() {
   const categories = useMemo(() => sounds.categories, []);
 
-  const favorites = useFavoriteStore(useShallow(state => state.favorites));
+  const favorites = useSoundStore(useShallow(state => state.getFavorites()));
 
   const favoriteSounds = useMemo(() => {
     const favoriteSounds = categories

src/components/sound/like/like.tsx

@@ -1,7 +1,7 @@
 import { BiHeart, BiSolidHeart } from 'react-icons/bi/index';
 import { AnimatePresence, motion } from 'framer-motion';
 
-import { useFavoriteStore } from '@/store/favorite';
+import { useSoundStore } from '@/store';
 import { cn } from '@/helpers/styles';
 import { fade } from '@/lib/motion';
 
@@ -12,8 +12,8 @@ interface LikeProps {
 }
 
 export function Like({ id }: LikeProps) {
-  const isFavorite = useFavoriteStore(state => state.favorites.includes(id));
-  const toggleFavorite = useFavoriteStore(state => state.toggleFavorite);
+  const isFavorite = useSoundStore(state => state.sounds[id].isFavorite);
+  const toggleFavorite = useSoundStore(state => state.toggleFavorite);
 
   const variants = fade();
 

src/components/store-consumer/store-consumer.tsx

@@ -1,7 +1,6 @@
 import { useEffect } from 'react';
 
 import { useSoundStore } from '@/store';
-import { useFavoriteStore } from '@/store/favorite';
 
 interface StoreConsumerProps {
   children: React.ReactNode;
@@ -10,7 +9,6 @@ interface StoreConsumerProps {
 export function StoreConsumer({ children }: StoreConsumerProps) {
   useEffect(() => {
     useSoundStore.persist.rehydrate();
-    useFavoriteStore.persist.rehydrate();
   });
 
   return <>{children}</>;

src/store/favorite/favorite.actions.ts

@@ -1,24 +0,0 @@
-import type { StateCreator } from 'zustand';
-
-import type { FavoriteState } from './favorite.state';
-
-export interface FavoriteActions {
-  toggleFavorite: (id: string) => void;
-}
-
-export const createActions: StateCreator<
-  FavoriteActions & FavoriteState,
-  [],
-  [],
-  FavoriteActions
-> = (set, get) => {
-  return {
-    toggleFavorite(id) {
-      if (get().favorites.includes(id)) {
-        set({ favorites: get().favorites.filter(_id => _id !== id) });
-      } else {
-        set({ favorites: [...get().favorites, id] });
-      }
-    },
-  };
-};

src/store/favorite/favorite.state.ts

@@ -1,14 +0,0 @@
-import type { StateCreator } from 'zustand';
-
-import type { FavoriteActions } from './favorite.actions';
-
-export interface FavoriteState {
-  favorites: Array<string>;
-}
-
-export const createState: StateCreator<
-  FavoriteState & FavoriteActions,
-  [],
-  [],
-  FavoriteState
-> = () => ({ favorites: [] });

src/store/favorite/index.ts

@@ -1,20 +0,0 @@
-import { create } from 'zustand';
-import { createJSONStorage, persist } from 'zustand/middleware';
-
-import { type FavoriteState, createState } from './favorite.state';
-import { type FavoriteActions, createActions } from './favorite.actions';
-
-export const useFavoriteStore = create<FavoriteState & FavoriteActions>()(
-  persist(
-    (...a) => ({
-      ...createState(...a),
-      ...createActions(...a),
-    }),
-    {
-      name: 'moodist-favorites',
-      skipHydration: true,
-      storage: createJSONStorage(() => localStorage),
-      version: 0,
-    },
-  ),
-);

src/store/sound/sound.actions.ts

@@ -8,6 +8,7 @@ export interface SoundActions {
   setVolume: (id: string, volume: number) => void;
   unselectAll: (pushToHistory?: boolean) => void;
   restoreHistory: () => void;
+  toggleFavorite: (id: string) => void;
 }
 
 export const createActions: StateCreator<
@@ -44,6 +45,18 @@ export const createActions: StateCreator<
       });
     },
 
+    toggleFavorite(id) {
+      const sounds = get().sounds;
+      const sound = sounds[id];
+
+      set({
+        sounds: {
+          ...sounds,
+          [id]: { ...sound, isFavorite: !sound.isFavorite },
+        },
+      });
+    },
+
     unselect(id) {
       set({
         sounds: {

src/store/sound/sound.state.ts

@@ -8,16 +8,19 @@ export interface SoundState {
   sounds: {
     [id: string]: {
       isSelected: boolean;
+      isFavorite: boolean;
       volume: number;
     };
   };
   history: {
     [id: string]: {
       isSelected: boolean;
+      isFavorite: boolean;
       volume: number;
     };
   } | null;
   noSelected: () => boolean;
+  getFavorites: () => Array<string>;
 }
 
 export const createState: StateCreator<
@@ -27,6 +30,13 @@ export const createState: StateCreator<
   SoundState
 > = (set, get) => {
   const state: SoundState = {
+    getFavorites() {
+      const { sounds } = get();
+      const ids = Object.keys(sounds);
+      const favorites = ids.filter(id => sounds[id].isFavorite);
+
+      return favorites;
+    },
     history: null,
     noSelected() {
       const { sounds } = get();
@@ -44,6 +54,7 @@ export const createState: StateCreator<
 
     sounds.forEach(sound => {
       state.sounds[sound.id] = {
+        isFavorite: false,
         isSelected: false,
         volume: 0.5,
       };