feat: clearing theme

src/renderer/src/context/settings/settings.context.tsx

@@ -9,26 +9,32 @@ export interface SettingsContext {
   updateUserPreferences: (values: Partial<UserPreferences>) => Promise<void>;
   setCurrentCategoryIndex: React.Dispatch<React.SetStateAction<number>>;
   clearSourceUrl: () => void;
+  clearTheme: () => void;
   sourceUrl: string | null;
   currentCategoryIndex: number;
   blockedUsers: UserBlocks["blocks"];
   fetchBlockedUsers: () => Promise<void>;
-  appearanceTheme: string | null;
+  appearance: {
-  appearanceAuthorId: string | null;
+    theme: string | null;
-  appearanceAuthorName: string | null;
+    authorId: string | null;
+    authorName: string | null;
+  };
 }
 
 export const settingsContext = createContext<SettingsContext>({
   updateUserPreferences: async () => {},
   setCurrentCategoryIndex: () => {},
   clearSourceUrl: () => {},
+  clearTheme: () => {},
   sourceUrl: null,
   currentCategoryIndex: 0,
   blockedUsers: [],
   fetchBlockedUsers: async () => {},
-  appearanceTheme: null,
+  appearance: {
-  appearanceAuthorId: null,
+    theme: null,
-  appearanceAuthorName: null,
+    authorId: null,
+    authorName: null,
+  },
 });
 
 const { Provider } = settingsContext;
@@ -43,15 +49,16 @@ export function SettingsContextProvider({
 }: Readonly<SettingsContextProviderProps>) {
   const dispatch = useAppDispatch();
   const [sourceUrl, setSourceUrl] = useState<string | null>(null);
-  const [appearanceTheme, setAppearanceTheme] = useState<string | null>(null);
+  const [appearance, setAppearance] = useState<{
-  const [appearanceAuthorId, setAppearanceAuthorId] = useState<string | null>(
+    theme: string | null;
-    null
+    authorId: string | null;
-  );
+    authorName: string | null;
-  const [appearanceAuthorName, setAppearanceAuthorName] = useState<
+  }>({
-    string | null
+    theme: null,
-  >(null);
+    authorId: null,
+    authorName: null,
+  });
   const [currentCategoryIndex, setCurrentCategoryIndex] = useState(0);
-
   const [blockedUsers, setBlockedUsers] = useState<UserBlocks["blocks"]>([]);
 
   const [searchParams] = useSearchParams();
@@ -71,8 +78,8 @@ export function SettingsContextProvider({
   }, [defaultSourceUrl]);
 
   useEffect(() => {
-    if (appearanceTheme) setCurrentCategoryIndex(3);
+    if (appearance.theme) setCurrentCategoryIndex(3);
-  }, [appearanceTheme]);
+  }, [appearance.theme]);
 
   useEffect(() => {
     if (
@@ -80,9 +87,11 @@ export function SettingsContextProvider({
       defaultAppearanceAuthorId &&
       defaultAppearanceAuthorName
     ) {
-      setAppearanceTheme(defaultAppearanceTheme);
+      setAppearance({
-      setAppearanceAuthorId(defaultAppearanceAuthorId);
+        theme: defaultAppearanceTheme,
-      setAppearanceAuthorName(defaultAppearanceAuthorName);
+        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,
+        appearance,
-        appearanceAuthorId,
-        appearanceAuthorName,
       }}
     >
       {children}

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;
+  appearance: {
-  appearanceAuthorId: string | null;
+    theme: string | null;
-  appearanceAuthorName: string | null;
+    authorId: string | null;
+    authorName: string | null;
+  };
 }
 
-export const SettingsAppearance = ({
+export function SettingsAppearance({
-  appearanceTheme,
+  appearance,
-  appearanceAuthorId,
+}: Readonly<SettingsAppearanceProps>) {
-  appearanceAuthorName,
-}: SettingsAppearanceProps) => {
   const [themes, setThemes] = useState<Theme[]>([]);
   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,
+        theme: appearance.theme,
-        authorId: appearanceAuthorId,
+        authorId: appearance.authorId,
-        authorName: appearanceAuthorName,
+        authorName: appearance.authorName,
       });
     }
-  }, [appearanceTheme, appearanceAuthorId, appearanceAuthorName]);
+  }, [appearance.theme, appearance.authorId, appearance.authorName]);
+
+  const onThemeImported = useCallback(() => {
+    setIsImportThemeModalVisible(false);
+    loadThemes();
+    clearTheme();
+  }, [clearTheme, loadThemes]);
 
   return (
     <div className="settings-appearance">
@@ -80,10 +89,7 @@ export const SettingsAppearance = ({
         <ImportThemeModal
           visible={isImportThemeModalVisible}
           onClose={() => setIsImportThemeModalVisible(false)}
-          onThemeImported={() => {
+          onThemeImported={onThemeImported}
-            setIsImportThemeModalVisible(false);
-            loadThemes();
-          }}
           themeName={importTheme.theme}
           authorId={importTheme.authorId}
           authorName={importTheme.authorName}
@@ -91,4 +97,4 @@ export const SettingsAppearance = ({
       )}
     </div>
   );
-};
+}

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") },

src/renderer/src/pages/settings/settings.tsx

@@ -65,13 +65,7 @@ export default function Settings() {
   return (
     <SettingsContextProvider>
       <SettingsContextConsumer>
-        {({
+        {({ currentCategoryIndex, setCurrentCategoryIndex, appearance }) => {
-          currentCategoryIndex,
-          setCurrentCategoryIndex,
-          appearanceTheme,
-          appearanceAuthorId,
-          appearanceAuthorName,
-        }) => {
           const renderCategory = () => {
             if (currentCategoryIndex === 0) {
               return <SettingsGeneral />;
@@ -86,13 +80,7 @@ export default function Settings() {
             }
 
             if (currentCategoryIndex === 3) {
-              return (
+              return <SettingsAppearance appearance={appearance} />;
-                <SettingsAppearance
-                  appearanceTheme={appearanceTheme}
-                  appearanceAuthorId={appearanceAuthorId}
-                  appearanceAuthorName={appearanceAuthorName}
-                />
-              );
             }
 
             if (currentCategoryIndex === 4) {