From 2246775046bae29af16608dff087778c931f0b74 Mon Sep 17 00:00:00 2001 From: Chubby Granny Chaser Date: Sun, 16 Feb 2025 21:52:57 +0000 Subject: [PATCH] feat: clearing theme --- .../src/context/settings/settings.context.tsx | 60 ++++++++++++------- .../settings/aparence/settings-appearance.tsx | 52 +++++++++------- .../src/pages/settings/settings-account.tsx | 2 +- src/renderer/src/pages/settings/settings.tsx | 16 +---- 4 files changed, 70 insertions(+), 60 deletions(-) diff --git a/src/renderer/src/context/settings/settings.context.tsx b/src/renderer/src/context/settings/settings.context.tsx index 77e78bce..61a3fdb7 100644 --- a/src/renderer/src/context/settings/settings.context.tsx +++ b/src/renderer/src/context/settings/settings.context.tsx @@ -9,26 +9,32 @@ export interface SettingsContext { updateUserPreferences: (values: Partial) => Promise; setCurrentCategoryIndex: React.Dispatch>; clearSourceUrl: () => void; + clearTheme: () => void; sourceUrl: string | null; currentCategoryIndex: number; blockedUsers: UserBlocks["blocks"]; fetchBlockedUsers: () => Promise; - appearanceTheme: string | null; - appearanceAuthorId: string | null; - appearanceAuthorName: string | null; + appearance: { + theme: string | null; + authorId: string | null; + authorName: string | null; + }; } export const settingsContext = createContext({ updateUserPreferences: async () => {}, setCurrentCategoryIndex: () => {}, clearSourceUrl: () => {}, + clearTheme: () => {}, sourceUrl: null, currentCategoryIndex: 0, blockedUsers: [], fetchBlockedUsers: async () => {}, - appearanceTheme: null, - appearanceAuthorId: null, - appearanceAuthorName: null, + appearance: { + theme: null, + authorId: null, + authorName: null, + }, }); const { Provider } = settingsContext; @@ -43,15 +49,16 @@ export function SettingsContextProvider({ }: Readonly) { const dispatch = useAppDispatch(); const [sourceUrl, setSourceUrl] = useState(null); - const [appearanceTheme, setAppearanceTheme] = useState(null); - const [appearanceAuthorId, setAppearanceAuthorId] = useState( - null - ); - const [appearanceAuthorName, setAppearanceAuthorName] = useState< - string | null - >(null); + const [appearance, setAppearance] = useState<{ + theme: string | null; + authorId: string | null; + authorName: string | null; + }>({ + theme: null, + authorId: null, + authorName: null, + }); const [currentCategoryIndex, setCurrentCategoryIndex] = useState(0); - const [blockedUsers, setBlockedUsers] = useState([]); const [searchParams] = useSearchParams(); @@ -71,8 +78,8 @@ export function SettingsContextProvider({ }, [defaultSourceUrl]); useEffect(() => { - if (appearanceTheme) setCurrentCategoryIndex(3); - }, [appearanceTheme]); + if (appearance.theme) setCurrentCategoryIndex(3); + }, [appearance.theme]); useEffect(() => { if ( @@ -80,9 +87,11 @@ export function SettingsContextProvider({ defaultAppearanceAuthorId && defaultAppearanceAuthorName ) { - setAppearanceTheme(defaultAppearanceTheme); - setAppearanceAuthorId(defaultAppearanceAuthorId); - setAppearanceAuthorName(defaultAppearanceAuthorName); + setAppearance({ + theme: defaultAppearanceTheme, + authorId: defaultAppearanceAuthorId, + authorName: defaultAppearanceAuthorName, + }); } }, [ defaultAppearanceTheme, @@ -90,6 +99,14 @@ export function SettingsContextProvider({ defaultAppearanceAuthorName, ]); + const clearTheme = useCallback(() => { + setAppearance({ + theme: null, + authorId: null, + authorName: null, + }); + }, []); + const fetchBlockedUsers = useCallback(async () => { const blockedUsers = await window.electron.getBlockedUsers(12, 0); setBlockedUsers(blockedUsers.blocks); @@ -115,12 +132,11 @@ export function SettingsContextProvider({ setCurrentCategoryIndex, clearSourceUrl, fetchBlockedUsers, + clearTheme, currentCategoryIndex, sourceUrl, blockedUsers, - appearanceTheme, - appearanceAuthorId, - appearanceAuthorName, + appearance, }} > {children} diff --git a/src/renderer/src/pages/settings/aparence/settings-appearance.tsx b/src/renderer/src/pages/settings/aparence/settings-appearance.tsx index 9cd0e52e..cf72bf4c 100644 --- a/src/renderer/src/pages/settings/aparence/settings-appearance.tsx +++ b/src/renderer/src/pages/settings/aparence/settings-appearance.tsx @@ -1,20 +1,21 @@ -import { useEffect, useState } from "react"; +import { useCallback, useContext, useEffect, useState } from "react"; import "./settings-appearance.scss"; import { ThemeActions, ThemeCard, ThemePlaceholder } from "./index"; import type { Theme } from "@types"; import { ImportThemeModal } from "./modals/import-theme-modal"; +import { settingsContext } from "@renderer/context"; interface SettingsAppearanceProps { - appearanceTheme: string | null; - appearanceAuthorId: string | null; - appearanceAuthorName: string | null; + appearance: { + theme: string | null; + authorId: string | null; + authorName: string | null; + }; } -export const SettingsAppearance = ({ - appearanceTheme, - appearanceAuthorId, - appearanceAuthorName, -}: SettingsAppearanceProps) => { +export function SettingsAppearance({ + appearance, +}: Readonly) { const [themes, setThemes] = useState([]); const [isImportThemeModalVisible, setIsImportThemeModalVisible] = useState(false); @@ -24,14 +25,16 @@ export const SettingsAppearance = ({ authorName: string; } | null>(null); - const loadThemes = async () => { + const { clearTheme } = useContext(settingsContext); + + const loadThemes = useCallback(async () => { const themesList = await window.electron.getAllCustomThemes(); setThemes(themesList); - }; + }, []); useEffect(() => { loadThemes(); - }, []); + }, [loadThemes]); useEffect(() => { const unsubscribe = window.electron.onCssInjected(() => { @@ -39,18 +42,24 @@ export const SettingsAppearance = ({ }); return () => unsubscribe(); - }, []); + }, [loadThemes]); useEffect(() => { - if (appearanceTheme && appearanceAuthorId && appearanceAuthorName) { + if (appearance.theme && appearance.authorId && appearance.authorName) { setIsImportThemeModalVisible(true); setImportTheme({ - theme: appearanceTheme, - authorId: appearanceAuthorId, - authorName: appearanceAuthorName, + theme: appearance.theme, + authorId: appearance.authorId, + authorName: appearance.authorName, }); } - }, [appearanceTheme, appearanceAuthorId, appearanceAuthorName]); + }, [appearance.theme, appearance.authorId, appearance.authorName]); + + const onThemeImported = useCallback(() => { + setIsImportThemeModalVisible(false); + loadThemes(); + clearTheme(); + }, [clearTheme, loadThemes]); return (
@@ -80,10 +89,7 @@ export const SettingsAppearance = ({ setIsImportThemeModalVisible(false)} - onThemeImported={() => { - setIsImportThemeModalVisible(false); - loadThemes(); - }} + onThemeImported={onThemeImported} themeName={importTheme.theme} authorId={importTheme.authorId} authorName={importTheme.authorName} @@ -91,4 +97,4 @@ export const SettingsAppearance = ({ )}
); -}; +} diff --git a/src/renderer/src/pages/settings/settings-account.tsx b/src/renderer/src/pages/settings/settings-account.tsx index 06aabc06..9cf35541 100644 --- a/src/renderer/src/pages/settings/settings-account.tsx +++ b/src/renderer/src/pages/settings/settings-account.tsx @@ -63,7 +63,7 @@ export function SettingsAccount() { return () => { unsubscribe(); }; - }, [fetchUserDetails, updateUserDetails, showSuccessToast]); + }, [fetchUserDetails, updateUserDetails, t, showSuccessToast]); const visibilityOptions = [ { value: "PUBLIC", label: t("public") }, diff --git a/src/renderer/src/pages/settings/settings.tsx b/src/renderer/src/pages/settings/settings.tsx index 1cfd499f..391742b8 100644 --- a/src/renderer/src/pages/settings/settings.tsx +++ b/src/renderer/src/pages/settings/settings.tsx @@ -65,13 +65,7 @@ export default function Settings() { return ( - {({ - currentCategoryIndex, - setCurrentCategoryIndex, - appearanceTheme, - appearanceAuthorId, - appearanceAuthorName, - }) => { + {({ currentCategoryIndex, setCurrentCategoryIndex, appearance }) => { const renderCategory = () => { if (currentCategoryIndex === 0) { return ; @@ -86,13 +80,7 @@ export default function Settings() { } if (currentCategoryIndex === 3) { - return ( - - ); + return ; } if (currentCategoryIndex === 4) {