diff --git a/sites/jeromefitzgerald.com/src/app/(notion)/currently/listening-to/_components/Music.client.tsx b/sites/jeromefitzgerald.com/src/app/(notion)/currently/listening-to/_components/Music.client.tsx index 820efee71..82ee29c17 100644 --- a/sites/jeromefitzgerald.com/src/app/(notion)/currently/listening-to/_components/Music.client.tsx +++ b/sites/jeromefitzgerald.com/src/app/(notion)/currently/listening-to/_components/Music.client.tsx @@ -41,16 +41,18 @@ import { HeaderSidebar } from '@/app/playground/2024/_components/Header.Sidebar' // import { Grid } from '@/components/Grid/index' import { LI, UL } from '@/components/List/index' import { bandcamps } from '@/data/bandcamps' -import { useStore as _useStore } from '@/store/index' +import { useStore as _useStore, useShallow } from '@/store/index' import { getKey, INIT } from '@/utils/getKey' const useStore = () => { - return _useStore((store) => ({ - spotifyTimeRange: store.spotifyTimeRange, - spotifyTimeRangeSet: store.spotifyTimeRangeSet, - spotifyType: store.spotifyType, - spotifyTypeSet: store.spotifyTypeSet, - })) + return _useStore( + useShallow((store) => ({ + spotifyTimeRange: store.spotifyTimeRange, + spotifyTimeRangeSet: store.spotifyTimeRangeSet, + spotifyType: store.spotifyType, + spotifyTypeSet: store.spotifyTypeSet, + })), + ) } const HOUR = 3600000 diff --git a/sites/jeromefitzgerald.com/src/app/(notion)/currently/reading/_components/Book.client.tsx b/sites/jeromefitzgerald.com/src/app/(notion)/currently/reading/_components/Book.client.tsx index 2fa11baf8..0edaa744c 100644 --- a/sites/jeromefitzgerald.com/src/app/(notion)/currently/reading/_components/Book.client.tsx +++ b/sites/jeromefitzgerald.com/src/app/(notion)/currently/reading/_components/Book.client.tsx @@ -39,13 +39,15 @@ import { HeaderSidebar } from '@/app/playground/2024/_components/Header.Sidebar' // import { Lorem } from '@/app/playground/2024/_components/Lorem' // import { Image } from '@/app/(notion)/events/[[...catchAll]]/_components/Image' import { LI, UL } from '@/components/List/index' -import { useStore as _useStore } from '@/store/index' +import { useStore as _useStore, useShallow } from '@/store/index' const useStore = () => { - return _useStore((store) => ({ - bookStatus: store.bookStatus, - bookStatusSet: store.bookStatusSet, - })) + return _useStore( + useShallow((store) => ({ + bookStatus: store.bookStatus, + bookStatusSet: store.bookStatusSet, + })), + ) } const stores = [ diff --git a/sites/jeromefitzgerald.com/src/app/_temp/Footer.Cmdk.client.tsx b/sites/jeromefitzgerald.com/src/app/_temp/Footer.Cmdk.client.tsx index f75e6e9fd..a8b2129c6 100644 --- a/sites/jeromefitzgerald.com/src/app/_temp/Footer.Cmdk.client.tsx +++ b/sites/jeromefitzgerald.com/src/app/_temp/Footer.Cmdk.client.tsx @@ -6,13 +6,15 @@ import { Kbd } from '@radix-ui/themes/dist/esm/components/kbd.js' import { Skeleton } from '@radix-ui/themes/dist/esm/components/skeleton.js' import { Text } from '@radix-ui/themes/dist/esm/components/text.js' -import { useStore as _useStore } from '@/store/index' +import { useStore as _useStore, useShallow } from '@/store/index' const useStore = () => { - return _useStore((store) => ({ - isCmdkOpen: store.isCmdkOpen, - isCmdkOpenSet: store.isCmdkOpenSet, - })) + return _useStore( + useShallow((store) => ({ + isCmdkOpen: store.isCmdkOpen, + isCmdkOpenSet: store.isCmdkOpenSet, + })), + ) } function FooterCmdkClient({ isLoading }) { diff --git a/sites/jeromefitzgerald.com/src/app/playground/2024/_components/Navigation.Primary.tsx b/sites/jeromefitzgerald.com/src/app/playground/2024/_components/Navigation.Primary.tsx index 88d35b716..de71a1c92 100644 --- a/sites/jeromefitzgerald.com/src/app/playground/2024/_components/Navigation.Primary.tsx +++ b/sites/jeromefitzgerald.com/src/app/playground/2024/_components/Navigation.Primary.tsx @@ -25,13 +25,15 @@ import { Text } from '@radix-ui/themes/dist/esm/components/text.js' import NextLink from 'next/link' import { useState } from 'react' -import { useStore as _useStore } from '@/store/index' +import { useStore as _useStore, useShallow } from '@/store/index' const useStore = () => { - return _useStore((store) => ({ - isOverlay: store.isOverlay, - isOverlaySet: store.isOverlaySet, - })) + return _useStore( + useShallow((store) => ({ + isOverlay: store.isOverlay, + isOverlaySet: store.isOverlaySet, + })), + ) } const image = { diff --git a/sites/jeromefitzgerald.com/src/app/playground/2024/_components/Navigation.Secondary.tsx b/sites/jeromefitzgerald.com/src/app/playground/2024/_components/Navigation.Secondary.tsx index ef41e42eb..844489470 100644 --- a/sites/jeromefitzgerald.com/src/app/playground/2024/_components/Navigation.Secondary.tsx +++ b/sites/jeromefitzgerald.com/src/app/playground/2024/_components/Navigation.Secondary.tsx @@ -21,16 +21,18 @@ import { Text } from '@radix-ui/themes/dist/esm/components/text.js' import { useRouter } from 'next/navigation.js' import { Fragment } from 'react' -import { useStore as _useStore } from '@/store/index' +import { useStore as _useStore, useShallow } from '@/store/index' const useStore = () => { - return _useStore((store) => ({ - zzz_menuSecondary: store.zzz_menuSecondary, - zzz_menuSecondaryActive: store.zzz_menuSecondaryActive, - zzz_menuSecondaryActiveSet: store.zzz_menuSecondaryActiveSet, - zzz_menuTertiary: store.zzz_menuTertiary, - zzz_menuTertiaryActiveSet: store.zzz_menuTertiaryActiveSet, - })) + return _useStore( + useShallow((store) => ({ + zzz_menuSecondary: store.zzz_menuSecondary, + zzz_menuSecondaryActive: store.zzz_menuSecondaryActive, + zzz_menuSecondaryActiveSet: store.zzz_menuSecondaryActiveSet, + zzz_menuTertiary: store.zzz_menuTertiary, + zzz_menuTertiaryActiveSet: store.zzz_menuTertiaryActiveSet, + })), + ) } function NavigationSecondary({ order = 0 }) { diff --git a/sites/jeromefitzgerald.com/src/app/playground/2024/_components/Navigation.Tertiary.tsx b/sites/jeromefitzgerald.com/src/app/playground/2024/_components/Navigation.Tertiary.tsx index 493efeb48..4768c5555 100644 --- a/sites/jeromefitzgerald.com/src/app/playground/2024/_components/Navigation.Tertiary.tsx +++ b/sites/jeromefitzgerald.com/src/app/playground/2024/_components/Navigation.Tertiary.tsx @@ -19,15 +19,17 @@ import { Text } from '@radix-ui/themes/dist/esm/components/text.js' import { useRouter } from 'next/navigation.js' import { Fragment } from 'react' -import { useStore as _useStore } from '@/store/index' +import { useStore as _useStore, useShallow } from '@/store/index' const useStore = () => { - return _useStore((store) => ({ - zzz_menuSecondaryActive: store.zzz_menuSecondaryActive, - zzz_menuTertiary: store.zzz_menuTertiary, - zzz_menuTertiaryActive: store.zzz_menuTertiaryActive, - zzz_menuTertiaryActiveSet: store.zzz_menuTertiaryActiveSet, - })) + return _useStore( + useShallow((store) => ({ + zzz_menuSecondaryActive: store.zzz_menuSecondaryActive, + zzz_menuTertiary: store.zzz_menuTertiary, + zzz_menuTertiaryActive: store.zzz_menuTertiaryActive, + zzz_menuTertiaryActiveSet: store.zzz_menuTertiaryActiveSet, + })), + ) } // @todo(complexity) 11 diff --git a/sites/jeromefitzgerald.com/src/app/playground/2024/_components/Overlay.tsx b/sites/jeromefitzgerald.com/src/app/playground/2024/_components/Overlay.tsx index aedd317b4..16c5f3679 100644 --- a/sites/jeromefitzgerald.com/src/app/playground/2024/_components/Overlay.tsx +++ b/sites/jeromefitzgerald.com/src/app/playground/2024/_components/Overlay.tsx @@ -1,12 +1,14 @@ 'use client' import { cx } from '@jeromefitz/ds/utils/cx' -import { useStore as _useStore } from '@/store/index' +import { useStore as _useStore, useShallow } from '@/store/index' const useStore = () => { - return _useStore((store) => ({ - isOverlay: store.isOverlay, - })) + return _useStore( + useShallow((store) => ({ + isOverlay: store.isOverlay, + })), + ) } function Overlay() { diff --git a/sites/jeromefitzgerald.com/src/components/Cmdk/Cmdk.tsx b/sites/jeromefitzgerald.com/src/components/Cmdk/Cmdk.tsx index d05bef176..fbc220cdc 100644 --- a/sites/jeromefitzgerald.com/src/components/Cmdk/Cmdk.tsx +++ b/sites/jeromefitzgerald.com/src/components/Cmdk/Cmdk.tsx @@ -16,7 +16,7 @@ import { useTheme } from 'next-themes' import { useEffect, useMemo, useRef, useState } from 'react' import { menus } from '@/data/menu' -import { useStore as _useStore } from '@/store/index' +import { useStore as _useStore, useShallow } from '@/store/index' import { Logo } from './Icons' @@ -29,17 +29,19 @@ function getIconViaParentChild(parent, child) { } const useStore = () => { - return _useStore((store) => ({ - cmdkInput: store.cmdkInput, - cmdkInputSet: store.cmdkInputSet, - cmdkPages: store.cmdkPages, - cmdkPagesSet: store.cmdkPagesSet, - cmdkPagesSetRemove: store.cmdkPagesSetRemove, - isCmdkInnerOpen: store.isCmdkInnerOpen, - isCmdkInnerOpenSet: store.isCmdkInnerOpenSet, - isCmdkOpen: store.isCmdkOpen, - isCmdkOpenSet: store.isCmdkOpenSet, - })) + return _useStore( + useShallow((store) => ({ + cmdkInput: store.cmdkInput, + cmdkInputSet: store.cmdkInputSet, + cmdkPages: store.cmdkPages, + cmdkPagesSet: store.cmdkPagesSet, + cmdkPagesSetRemove: store.cmdkPagesSetRemove, + isCmdkInnerOpen: store.isCmdkInnerOpen, + isCmdkInnerOpenSet: store.isCmdkInnerOpenSet, + isCmdkOpen: store.isCmdkOpen, + isCmdkOpenSet: store.isCmdkOpenSet, + })), + ) } function CMDKWrapper(props: { children: ReactNode } & MotionProps) { diff --git a/sites/jeromefitzgerald.com/src/components/Layout/Layout.client.tsx b/sites/jeromefitzgerald.com/src/components/Layout/Layout.client.tsx index 5da0a1432..7c6b6187e 100644 --- a/sites/jeromefitzgerald.com/src/components/Layout/Layout.client.tsx +++ b/sites/jeromefitzgerald.com/src/components/Layout/Layout.client.tsx @@ -3,13 +3,15 @@ import { cx } from '@jeromefitz/ds/utils/cx' import { motion } from 'framer-motion' -import { useStore as _useStore } from '@/store/index' +import { useStore as _useStore, useShallow } from '@/store/index' const useStore = () => { - return _useStore((store) => ({ - isWidgetOpen: store.isWidgetOpen, - isWidgetOpenSet: store.isWidgetOpenSet, - })) + return _useStore( + useShallow((store) => ({ + isWidgetOpen: store.isWidgetOpen, + isWidgetOpenSet: store.isWidgetOpenSet, + })), + ) } function LayoutClient() { diff --git a/sites/jeromefitzgerald.com/src/components/Providers/RouterEventProvider.Loading.client.tsx b/sites/jeromefitzgerald.com/src/components/Providers/RouterEventProvider.Loading.client.tsx index 3ee927693..572915bea 100644 --- a/sites/jeromefitzgerald.com/src/components/Providers/RouterEventProvider.Loading.client.tsx +++ b/sites/jeromefitzgerald.com/src/components/Providers/RouterEventProvider.Loading.client.tsx @@ -7,17 +7,19 @@ import { usePathname } from 'next/navigation.js' // import { motion } from 'framer-motion' import { useEffect } from 'react' -import { useStore as _useStore } from '@/store/index' +import { useStore as _useStore, useShallow } from '@/store/index' const useStore = () => { - return _useStore((store) => ({ - zzz_menuSecondary: store.zzz_menuSecondary, - zzz_menuSecondaryActive: store.zzz_menuSecondaryActive, - zzz_menuSecondaryActiveSet: store.zzz_menuSecondaryActiveSet, - zzz_menuTertiary: store.zzz_menuTertiary, - zzz_menuTertiaryActive: store.zzz_menuTertiaryActive, - zzz_menuTertiaryActiveSet: store.zzz_menuTertiaryActiveSet, - })) + return _useStore( + useShallow((store) => ({ + zzz_menuSecondary: store.zzz_menuSecondary, + zzz_menuSecondaryActive: store.zzz_menuSecondaryActive, + zzz_menuSecondaryActiveSet: store.zzz_menuSecondaryActiveSet, + zzz_menuTertiary: store.zzz_menuTertiary, + zzz_menuTertiaryActive: store.zzz_menuTertiaryActive, + zzz_menuTertiaryActiveSet: store.zzz_menuTertiaryActiveSet, + })), + ) } const Loading: React.FC<{ isRouteChanging: boolean }> = ({ isRouteChanging }) => { diff --git a/sites/jeromefitzgerald.com/src/components/Providers/RouterEventProvider.client.tsx b/sites/jeromefitzgerald.com/src/components/Providers/RouterEventProvider.client.tsx index 05c38f9e0..7e0785d8a 100644 --- a/sites/jeromefitzgerald.com/src/components/Providers/RouterEventProvider.client.tsx +++ b/sites/jeromefitzgerald.com/src/components/Providers/RouterEventProvider.client.tsx @@ -4,7 +4,7 @@ import dynamic from 'next/dynamic.js' import { usePathname } from 'next/navigation.js' import { useEffect, useState } from 'react' -import { useStore as _useStore } from '@/store/index' +import { useStore as _useStore, useShallow } from '@/store/index' // import { Loading } from './RouterEventProvider.Loading.client' const Loading = dynamic( @@ -18,10 +18,12 @@ const Loading = dynamic( ) const useStore = () => { - return _useStore((store) => ({ - isRouteChanging: store.isRouteChanging, - isRouteChangingSet: store.isRouteChangingSet, - })) + return _useStore( + useShallow((store) => ({ + isRouteChanging: store.isRouteChanging, + isRouteChangingSet: store.isRouteChangingSet, + })), + ) } function RouterEventProvider() { diff --git a/sites/jeromefitzgerald.com/src/store/index.tsx b/sites/jeromefitzgerald.com/src/store/index.tsx index 447608204..46e33b17d 100644 --- a/sites/jeromefitzgerald.com/src/store/index.tsx +++ b/sites/jeromefitzgerald.com/src/store/index.tsx @@ -23,6 +23,7 @@ import type { StoreApi } from 'zustand' import { createContext, useContext, useRef } from 'react' import { useStore as useZustandStore } from 'zustand' +import { useShallow } from 'zustand/shallow' import { createStore } from 'zustand/vanilla' // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents @@ -46,37 +47,39 @@ const useStore = (selector: (state: any) => T): T => { return useZustandStore(store, selector) } +const FALLBACK_ACTION = () => {} + const getDefaultInitialStateStoreMenu = () => ({ bookStatus: 'in-progress', - bookStatusSet: () => {}, + bookStatusSet: FALLBACK_ACTION, cmdkInput: '', - cmdkInputSet: () => {}, + cmdkInputSet: FALLBACK_ACTION, cmdkPages: [], - cmdkPagesSet: () => {}, - cmdkPagesSetRemove: () => {}, + cmdkPagesSet: FALLBACK_ACTION, + cmdkPagesSetRemove: FALLBACK_ACTION, count: 0, - countSet: () => {}, + countSet: FALLBACK_ACTION, current: 0, - currentSet: () => {}, + currentSet: FALLBACK_ACTION, isCmdkInnerOpen: false, - isCmdkInnerOpenSet: () => {}, + isCmdkInnerOpenSet: FALLBACK_ACTION, isCmdkOpen: false, - isCmdkOpenSet: () => {}, + isCmdkOpenSet: FALLBACK_ACTION, isMenuMobileOpen: false, - isMenuMobileOpenSet: () => {}, + isMenuMobileOpenSet: FALLBACK_ACTION, isOverlay: false, - isOverlaySet: () => {}, + isOverlaySet: FALLBACK_ACTION, isRouteChanging: false, - isRouteChangingSet: () => {}, + isRouteChangingSet: FALLBACK_ACTION, isWidgetOpen: false, - isWidgetOpenSet: () => {}, + isWidgetOpenSet: FALLBACK_ACTION, seen: 0, - seenSetDecrease: () => {}, - seenSetIncrease: () => {}, + seenSetDecrease: FALLBACK_ACTION, + seenSetIncrease: FALLBACK_ACTION, spotifyTimeRange: 'medium_term', - spotifyTimeRangeSet: () => {}, + spotifyTimeRangeSet: FALLBACK_ACTION, spotifyType: 'top-tracks', - spotifyTypeSet: () => {}, + spotifyTypeSet: FALLBACK_ACTION, // @wip(menu) zzz_menuSecondary: [ { @@ -495,4 +498,4 @@ const initializeStoreMenu = (preloadedState: Partial = {}) => { })) } -export { initializeStoreMenu, Provider, useStore } +export { initializeStoreMenu, Provider, useShallow, useStore }