diff --git a/src/state/persisted/schema.ts b/src/state/persisted/schema.ts index 4ab56f850f..e4852e2f72 100644 --- a/src/state/persisted/schema.ts +++ b/src/state/persisted/schema.ts @@ -125,7 +125,12 @@ const schema = z.object({ subtitlesEnabled: z.boolean().optional(), /** @deprecated */ mutedThreads: z.array(z.string()), + + /* + * Trending + */ trendingSidebarHidden: z.boolean().optional(), + trendingDiscoverHidden: z.boolean().optional(), }) export type Schema = z.infer @@ -171,7 +176,12 @@ export const defaults: Schema = { kawaii: false, hasCheckedForStarterPack: false, subtitlesEnabled: true, + + /* + * Trending + */ trendingSidebarHidden: false, + trendingDiscoverHidden: false, } export function tryParse(rawData: string): Schema | undefined { diff --git a/src/state/preferences/trending.tsx b/src/state/preferences/trending.tsx index 7df7cc115c..61a026c22e 100644 --- a/src/state/preferences/trending.tsx +++ b/src/state/preferences/trending.tsx @@ -3,51 +3,71 @@ import React from 'react' import * as persisted from '#/state/persisted' type StateContext = { - trendingSidebarHidden: persisted.Schema['trendingSidebarHidden'] + trendingSidebarHidden: Exclude< + persisted.Schema['trendingSidebarHidden'], + undefined + > + trendingDiscoverHidden: Exclude< + persisted.Schema['trendingDiscoverHidden'], + undefined + > } type ApiContext = { setTrendingSidebarHidden( hidden: Exclude, ): void + setTrendingDiscoverHidden( + hidden: Exclude, + ): void } const StateContext = React.createContext({ - trendingSidebarHidden: persisted.defaults.trendingSidebarHidden, + trendingSidebarHidden: Boolean(persisted.defaults.trendingSidebarHidden), + trendingDiscoverHidden: Boolean(persisted.defaults.trendingDiscoverHidden), }) const ApiContext = React.createContext({ setTrendingSidebarHidden() {}, + setTrendingDiscoverHidden() {}, }) -export function Provider({children}: React.PropsWithChildren<{}>) { - const [trendingSidebarHidden, _setTrendingSidebarHidden] = React.useState( - () => { - return Boolean(persisted.get('trendingSidebarHidden')) - }, - ) - - const setTrendingSidebarHidden = React.useCallback< - ApiContext['setTrendingSidebarHidden'] +function usePersistedBooleanValue(key: T) { + const [value, _set] = React.useState(() => { + return Boolean(persisted.get(key)) + }) + const set = React.useCallback< + (value: Exclude) => void >( hidden => { - _setTrendingSidebarHidden(hidden) - persisted.write('trendingSidebarHidden', hidden) + _set(Boolean(hidden)) + persisted.write(key, hidden) }, - [_setTrendingSidebarHidden], + [key, _set], ) - React.useEffect(() => { - return persisted.onUpdate('trendingSidebarHidden', hidden => { - _setTrendingSidebarHidden(Boolean(hidden)) + return persisted.onUpdate(key, hidden => { + _set(Boolean(hidden)) }) - }, [_setTrendingSidebarHidden]) + }, [key, _set]) + return [value, set] as const +} + +export function Provider({children}: React.PropsWithChildren<{}>) { + const [trendingSidebarHidden, setTrendingSidebarHidden] = + usePersistedBooleanValue('trendingSidebarHidden') + const [trendingDiscoverHidden, setTrendingDiscoverHidden] = + usePersistedBooleanValue('trendingDiscoverHidden') + + /* + * Context + */ const state = React.useMemo( - () => ({trendingSidebarHidden}), - [trendingSidebarHidden], + () => ({trendingSidebarHidden, trendingDiscoverHidden}), + [trendingSidebarHidden, trendingDiscoverHidden], ) const api = React.useMemo( - () => ({setTrendingSidebarHidden}), - [setTrendingSidebarHidden], + () => ({setTrendingSidebarHidden, setTrendingDiscoverHidden}), + [setTrendingSidebarHidden, setTrendingDiscoverHidden], ) return (