From 99db939beb2b0f1e22830e4c77feea0fa8c71b71 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Thu, 12 Dec 2024 10:53:56 -0600 Subject: [PATCH] Fix up hide/show toggle state, WITH broadcast hacK --- .../Settings/ContentAndMediaSettings.tsx | 12 ++-- src/state/persisted/index.web.ts | 6 +- src/state/persisted/schema.ts | 3 +- src/state/preferences/index.tsx | 5 +- src/state/preferences/trending.tsx | 66 +++++++++++++++++++ src/state/trending.ts | 28 -------- src/view/shell/desktop/RightNav.tsx | 14 ++-- 7 files changed, 93 insertions(+), 41 deletions(-) create mode 100644 src/state/preferences/trending.tsx delete mode 100644 src/state/trending.ts diff --git a/src/screens/Settings/ContentAndMediaSettings.tsx b/src/screens/Settings/ContentAndMediaSettings.tsx index cec56911d1..488b0f9f8b 100644 --- a/src/screens/Settings/ContentAndMediaSettings.tsx +++ b/src/screens/Settings/ContentAndMediaSettings.tsx @@ -9,7 +9,10 @@ import { useInAppBrowser, useSetInAppBrowser, } from '#/state/preferences/in-app-browser' -import {useTrendingTopicsSidebarSetting} from '#/state/trending' +import { + useTrendingSettings, + useTrendingSettingsApi, +} from '#/state/preferences/trending' import * as SettingsList from '#/screens/Settings/components/SettingsList' import * as Toggle from '#/components/forms/Toggle' import {Bubbles_Stroke2_Corner2_Rounded as BubblesIcon} from '#/components/icons/Bubble' @@ -31,7 +34,8 @@ export function ContentAndMediaSettingsScreen({}: Props) { const setAutoplayDisabledPref = useSetAutoplayDisabled() const inAppBrowserPref = useInAppBrowser() const setUseInAppBrowser = useSetInAppBrowser() - const [showTrending, setShowTrending] = useTrendingTopicsSidebarSetting() + const {trendingSidebarHidden} = useTrendingSettings() + const {setTrendingSidebarHidden} = useTrendingSettingsApi() return ( @@ -113,8 +117,8 @@ export function ContentAndMediaSettingsScreen({}: Props) { setShowTrending(value)}> + value={!trendingSidebarHidden} + onChange={value => setTrendingSidebarHidden(!value)}> diff --git a/src/state/persisted/index.web.ts b/src/state/persisted/index.web.ts index f28b197715..5e3430f6ee 100644 --- a/src/state/persisted/index.web.ts +++ b/src/state/persisted/index.web.ts @@ -63,8 +63,10 @@ export async function write( [key]: value, }) writeToStorage(_state) - broadcast.postMessage({event: {type: UPDATE_EVENT, key}}) - broadcast.postMessage({event: UPDATE_EVENT}) // Backcompat while upgrading + setTimeout(() => { + broadcast.postMessage({event: {type: UPDATE_EVENT, key}}) + broadcast.postMessage({event: UPDATE_EVENT}) // Backcompat while upgrading + }, 0) } write satisfies PersistedApi['write'] diff --git a/src/state/persisted/schema.ts b/src/state/persisted/schema.ts index 2554d8041b..4ab56f850f 100644 --- a/src/state/persisted/schema.ts +++ b/src/state/persisted/schema.ts @@ -125,7 +125,7 @@ const schema = z.object({ subtitlesEnabled: z.boolean().optional(), /** @deprecated */ mutedThreads: z.array(z.string()), - hideSidebarTrendingTopics: z.boolean().optional(), + trendingSidebarHidden: z.boolean().optional(), }) export type Schema = z.infer @@ -171,6 +171,7 @@ export const defaults: Schema = { kawaii: false, hasCheckedForStarterPack: false, subtitlesEnabled: true, + trendingSidebarHidden: false, } export function tryParse(rawData: string): Schema | undefined { diff --git a/src/state/preferences/index.tsx b/src/state/preferences/index.tsx index c7eaf27261..8530a8d0c8 100644 --- a/src/state/preferences/index.tsx +++ b/src/state/preferences/index.tsx @@ -10,6 +10,7 @@ import {Provider as KawaiiProvider} from './kawaii' import {Provider as LanguagesProvider} from './languages' import {Provider as LargeAltBadgeProvider} from './large-alt-badge' import {Provider as SubtitlesProvider} from './subtitles' +import {Provider as TrendingSettingsProvider} from './trending' import {Provider as UsedStarterPacksProvider} from './used-starter-packs' export { @@ -39,7 +40,9 @@ export function Provider({children}: React.PropsWithChildren<{}>) { - {children} + + {children} + diff --git a/src/state/preferences/trending.tsx b/src/state/preferences/trending.tsx new file mode 100644 index 0000000000..7df7cc115c --- /dev/null +++ b/src/state/preferences/trending.tsx @@ -0,0 +1,66 @@ +import React from 'react' + +import * as persisted from '#/state/persisted' + +type StateContext = { + trendingSidebarHidden: persisted.Schema['trendingSidebarHidden'] +} +type ApiContext = { + setTrendingSidebarHidden( + hidden: Exclude, + ): void +} + +const StateContext = React.createContext({ + trendingSidebarHidden: persisted.defaults.trendingSidebarHidden, +}) +const ApiContext = React.createContext({ + setTrendingSidebarHidden() {}, +}) + +export function Provider({children}: React.PropsWithChildren<{}>) { + const [trendingSidebarHidden, _setTrendingSidebarHidden] = React.useState( + () => { + return Boolean(persisted.get('trendingSidebarHidden')) + }, + ) + + const setTrendingSidebarHidden = React.useCallback< + ApiContext['setTrendingSidebarHidden'] + >( + hidden => { + _setTrendingSidebarHidden(hidden) + persisted.write('trendingSidebarHidden', hidden) + }, + [_setTrendingSidebarHidden], + ) + + React.useEffect(() => { + return persisted.onUpdate('trendingSidebarHidden', hidden => { + _setTrendingSidebarHidden(Boolean(hidden)) + }) + }, [_setTrendingSidebarHidden]) + + const state = React.useMemo( + () => ({trendingSidebarHidden}), + [trendingSidebarHidden], + ) + const api = React.useMemo( + () => ({setTrendingSidebarHidden}), + [setTrendingSidebarHidden], + ) + + return ( + + {children} + + ) +} + +export function useTrendingSettings() { + return React.useContext(StateContext) +} + +export function useTrendingSettingsApi() { + return React.useContext(ApiContext) +} diff --git a/src/state/trending.ts b/src/state/trending.ts deleted file mode 100644 index 412a684975..0000000000 --- a/src/state/trending.ts +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react' - -import * as persisted from '#/state/persisted' - -// TODO only updates in other tabs, not current one -export function useTrendingTopicsSidebarSetting() { - const [_show, setShow] = React.useState( - () => !persisted.get('hideSidebarTrendingTopics'), - ) - - const set = React.useCallback( - (show: boolean) => { - setShow(show) - persisted.write('hideSidebarTrendingTopics', !show) - }, - [setShow], - ) - - // persisted.write('hideSidebarTrendingTopics', undefined) - - React.useEffect(() => { - return persisted.onUpdate('hideSidebarTrendingTopics', value => { - setShow(!value) - }) - }, [setShow]) - - return [_show, set] as const -} diff --git a/src/view/shell/desktop/RightNav.tsx b/src/view/shell/desktop/RightNav.tsx index f777905f85..45e0752693 100644 --- a/src/view/shell/desktop/RightNav.tsx +++ b/src/view/shell/desktop/RightNav.tsx @@ -5,8 +5,11 @@ import {useLingui} from '@lingui/react' import {FEEDBACK_FORM_URL, HELP_DESK_URL} from '#/lib/constants' import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' import {useKawaiiMode} from '#/state/preferences/kawaii' +import { + useTrendingSettings, + useTrendingSettingsApi, +} from '#/state/preferences/trending' import {useSession} from '#/state/session' -import {useTrendingTopicsSidebarSetting} from '#/state/trending' import {DesktopFeeds} from '#/view/shell/desktop/Feeds' import {DesktopSearch} from '#/view/shell/desktop/Search' import {atoms as a, useGutters, useTheme, web} from '#/alf' @@ -116,9 +119,10 @@ function TrendingTopics() { const {_} = useLingui() const trendingPrompt = Prompt.usePromptControl() - const [showTrending, setShowTrending] = useTrendingTopicsSidebarSetting() + const {trendingSidebarHidden} = useTrendingSettings() + const {setTrendingSidebarHidden} = useTrendingSettingsApi() - return showTrending ? ( + return trendingSidebarHidden ? null : ( <> @@ -168,9 +172,9 @@ function TrendingTopics() { msg`This is a device setting, and will apply to all accounts on this device. You can update this later from your settings.`, )} confirmButtonCta={_(msg`Hide`)} - onConfirm={() => setShowTrending(false)} + onConfirm={() => setTrendingSidebarHidden(true)} /> - ) : null + ) }