diff --git a/src/components/categories/categories.tsx b/src/components/categories/categories.tsx index 1f41d35..64753cc 100644 --- a/src/components/categories/categories.tsx +++ b/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 diff --git a/src/components/sound/like/like.tsx b/src/components/sound/like/like.tsx index 282d8a9..83578c7 100644 --- a/src/components/sound/like/like.tsx +++ b/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(); diff --git a/src/components/store-consumer/store-consumer.tsx b/src/components/store-consumer/store-consumer.tsx index 7984273..eb90381 100644 --- a/src/components/store-consumer/store-consumer.tsx +++ b/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}; diff --git a/src/store/favorite/favorite.actions.ts b/src/store/favorite/favorite.actions.ts deleted file mode 100644 index b447e0e..0000000 --- a/src/store/favorite/favorite.actions.ts +++ /dev/null @@ -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] }); - } - }, - }; -}; diff --git a/src/store/favorite/favorite.state.ts b/src/store/favorite/favorite.state.ts deleted file mode 100644 index b94747d..0000000 --- a/src/store/favorite/favorite.state.ts +++ /dev/null @@ -1,14 +0,0 @@ -import type { StateCreator } from 'zustand'; - -import type { FavoriteActions } from './favorite.actions'; - -export interface FavoriteState { - favorites: Array; -} - -export const createState: StateCreator< - FavoriteState & FavoriteActions, - [], - [], - FavoriteState -> = () => ({ favorites: [] }); diff --git a/src/store/favorite/index.ts b/src/store/favorite/index.ts deleted file mode 100644 index 8201d94..0000000 --- a/src/store/favorite/index.ts +++ /dev/null @@ -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()( - persist( - (...a) => ({ - ...createState(...a), - ...createActions(...a), - }), - { - name: 'moodist-favorites', - skipHydration: true, - storage: createJSONStorage(() => localStorage), - version: 0, - }, - ), -); diff --git a/src/store/sound/sound.actions.ts b/src/store/sound/sound.actions.ts index 97a20e6..4aa7aed 100644 --- a/src/store/sound/sound.actions.ts +++ b/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: { diff --git a/src/store/sound/sound.state.ts b/src/store/sound/sound.state.ts index 6857fa0..02b0ee9 100644 --- a/src/store/sound/sound.state.ts +++ b/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; } 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, };