dev: Updating themening worfkflow (#1827)

apps/app/components/core/theme/custom-theme-selector.tsx

@@ -4,17 +4,13 @@ import { useTheme } from "next-themes";
 
 import { useForm } from "react-hook-form";
 
-// hooks
-import useUser from "hooks/use-user";
 // ui
 import { PrimaryButton } from "components/ui";
 import { ColorPickerInput } from "components/core";
-// services
-import userService from "services/user.service";
-// helper
-import { applyTheme } from "helpers/theme.helper";
 // types
 import { ICustomTheme } from "types";
+// mobx react lite
+import { observer } from "mobx-react-lite";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 
@@ -33,11 +29,11 @@ const defaultValues: ICustomTheme = {
   theme: "custom",
 };
 
-export const CustomThemeSelector: React.FC<Props> = ({ preLoadedData }) => {
+export const CustomThemeSelector: React.FC<Props> = observer(({ preLoadedData }) => {
   const store: any = useMobxStore();
+  const { setTheme } = useTheme();
 
   const [darkPalette, setDarkPalette] = useState(false);
-
   const {
     register,
     formState: { errors, isSubmitting },
@@ -48,11 +44,14 @@ export const CustomThemeSelector: React.FC<Props> = ({ preLoadedData }) => {
   } = useForm<ICustomTheme>({
     defaultValues,
   });
+  useEffect(() => {
+    reset({
+      ...defaultValues,
+      ...preLoadedData,
+    });
+  }, [preLoadedData, reset]);
 
-  const { setTheme } = useTheme();
+  const handleUpdateTheme = async (formData: any) => {
-  const { mutateUser } = useUser();
-
-  const handleFormSubmit = async (formData: ICustomTheme) => {
     const payload: ICustomTheme = {
       background: formData.background,
       text: formData.text,
@@ -64,28 +63,14 @@ export const CustomThemeSelector: React.FC<Props> = ({ preLoadedData }) => {
       theme: "custom",
     };
 
-    store.user
+    setTheme("custom");
+
+    return store.user
       .updateCurrentUserSettings({ theme: payload })
-      .then((response: any) => {
+      .then((response: any) => response)
-        setTheme("custom");
+      .catch((error: any) => error);
-        applyTheme(payload.palette, darkPalette);
-      })
-      .catch((error: any) => {
-        console.log("error", error);
-      });
   };
 
-  const handleUpdateTheme = async (formData: any) => {
-    await handleFormSubmit({ ...formData, darkPalette });
-  };
-
-  useEffect(() => {
-    reset({
-      ...defaultValues,
-      ...preLoadedData,
-    });
-  }, [preLoadedData, reset]);
-
   return (
     <form onSubmit={handleSubmit(handleUpdateTheme)}>
       <div className="space-y-5">
@@ -164,4 +149,4 @@ export const CustomThemeSelector: React.FC<Props> = ({ preLoadedData }) => {
       </div>
     </form>
   );
-};
+});

apps/app/components/core/theme/theme-switch.tsx

@@ -1,9 +1,5 @@
-import { useState, useEffect } from "react";
-
 // next-themes
 import { useTheme } from "next-themes";
-// services
-import userService from "services/user.service";
 // hooks
 import useUser from "hooks/use-user";
 // constants
@@ -13,6 +9,10 @@ import { CustomSelect } from "components/ui";
 // types
 import { ICustomTheme } from "types";
 import { unsetCustomCssVariables } from "helpers/theme.helper";
+// mobx react lite
+import { observer } from "mobx-react-lite";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 
 type Props = {
   setPreLoadedData: React.Dispatch<React.SetStateAction<ICustomTheme | null>>;
@@ -20,142 +20,116 @@ type Props = {
   setCustomThemeSelectorOptions: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
-export const ThemeSwitch: React.FC<Props> = ({
+export const ThemeSwitch: React.FC<Props> = observer(
-  setPreLoadedData,
+  ({ setPreLoadedData, customThemeSelectorOptions, setCustomThemeSelectorOptions }) => {
-  customThemeSelectorOptions,
+    const store: any = useMobxStore();
-  setCustomThemeSelectorOptions,
-}) => {
-  const [mounted, setMounted] = useState(false);
 
-  const { theme, setTheme } = useTheme();
+    const { user, mutateUser } = useUser();
+    const { theme, setTheme } = useTheme();
 
-  const { user, mutateUser } = useUser();
+    const updateUserTheme = (newTheme: string) => {
+      if (!user) return;
+      setTheme(newTheme);
+      return store.user
+        .updateCurrentUserSettings({ theme: { ...user.theme, theme: newTheme } })
+        .then((response: any) => response)
+        .catch((error: any) => error);
+    };
 
-  const updateUserTheme = (newTheme: string) => {
+    const currentThemeObj = THEMES_OBJ.find((t) => t.value === theme);
-    if (!user) return;
 
-    setTheme(newTheme);
+    return (
-
+      <CustomSelect
-    mutateUser((prevData) => {
+        value={theme}
-      if (!prevData) return prevData;
+        label={
-
+          currentThemeObj ? (
-      return {
+            <div className="flex items-center gap-2">
-        ...prevData,
-        theme: {
-          ...prevData.theme,
-          theme: newTheme,
-        },
-      };
-    }, false);
-
-    userService.updateUser({
-      theme: {
-        ...user.theme,
-        theme: newTheme,
-      },
-    });
-  };
-
-  // useEffect only runs on the client, so now we can safely show the UI
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  if (!mounted) return null;
-
-  const currentThemeObj = THEMES_OBJ.find((t) => t.value === theme);
-
-  return (
-    <CustomSelect
-      value={theme}
-      label={
-        currentThemeObj ? (
-          <div className="flex items-center gap-2">
-            <div
-              className="border-1 relative flex h-4 w-4 rotate-45 transform items-center justify-center rounded-full border"
-              style={{
-                borderColor: currentThemeObj.icon.border,
-              }}
-            >
               <div
-                className="h-full w-1/2 rounded-l-full"
+                className="border-1 relative flex h-4 w-4 rotate-45 transform items-center justify-center rounded-full border"
                 style={{
-                  background: currentThemeObj.icon.color1,
+                  borderColor: currentThemeObj.icon.border,
                 }}
-              />
+              >
-              <div
+                <div
-                className="h-full w-1/2 rounded-r-full border-l"
+                  className="h-full w-1/2 rounded-l-full"
-                style={{
+                  style={{
-                  borderLeftColor: currentThemeObj.icon.border,
+                    background: currentThemeObj.icon.color1,
-                  background: currentThemeObj.icon.color2,
+                  }}
-                }}
+                />
-              />
+                <div
+                  className="h-full w-1/2 rounded-r-full border-l"
+                  style={{
+                    borderLeftColor: currentThemeObj.icon.border,
+                    background: currentThemeObj.icon.color2,
+                  }}
+                />
+              </div>
+              {currentThemeObj.label}
             </div>
-            {currentThemeObj.label}
+          ) : (
-          </div>
+            "Select your theme"
-        ) : (
+          )
-          "Select your theme"
+        }
-        )
+        onChange={({ value, type }: { value: string; type: string }) => {
-      }
+          if (value === "custom") {
-      onChange={({ value, type }: { value: string; type: string }) => {
+            if (user?.theme.palette) {
-        if (value === "custom") {
+              setPreLoadedData({
-          if (user?.theme.palette) {
+                background: user.theme.background !== "" ? user.theme.background : "#0d101b",
-            setPreLoadedData({
+                text: user.theme.text !== "" ? user.theme.text : "#c5c5c5",
-              background: user.theme.background !== "" ? user.theme.background : "#0d101b",
+                primary: user.theme.primary !== "" ? user.theme.primary : "#3f76ff",
-              text: user.theme.text !== "" ? user.theme.text : "#c5c5c5",
+                sidebarBackground:
-              primary: user.theme.primary !== "" ? user.theme.primary : "#3f76ff",
+                  user.theme.sidebarBackground !== "" ? user.theme.sidebarBackground : "#0d101b",
-              sidebarBackground:
+                sidebarText: user.theme.sidebarText !== "" ? user.theme.sidebarText : "#c5c5c5",
-                user.theme.sidebarBackground !== "" ? user.theme.sidebarBackground : "#0d101b",
+                darkPalette: false,
-              sidebarText: user.theme.sidebarText !== "" ? user.theme.sidebarText : "#c5c5c5",
+                palette:
-              darkPalette: false,
+                  user.theme.palette !== ",,,,"
-              palette:
+                    ? user.theme.palette
-                user.theme.palette !== ",,,,"
+                    : "#0d101b,#c5c5c5,#3f76ff,#0d101b,#c5c5c5",
-                  ? user.theme.palette
+                theme: "custom",
-                  : "#0d101b,#c5c5c5,#3f76ff,#0d101b,#c5c5c5",
+              });
-              theme: "custom",
+            }
-            });
+
+            if (!customThemeSelectorOptions) setCustomThemeSelectorOptions(true);
+          } else {
+            if (customThemeSelectorOptions) setCustomThemeSelectorOptions(false);
+            unsetCustomCssVariables();
           }
 
-          if (!customThemeSelectorOptions) setCustomThemeSelectorOptions(true);
+          updateUserTheme(value);
-        } else {
+          document.documentElement.style.setProperty("--color-scheme", type);
-          if (customThemeSelectorOptions) setCustomThemeSelectorOptions(false);
+        }}
-          unsetCustomCssVariables();
+        input
-        }
+        width="w-full"
-
+        position="right"
-        updateUserTheme(value);
+      >
-        document.documentElement.style.setProperty("--color-scheme", type);
+        {THEMES_OBJ.map(({ value, label, type, icon }) => (
-      }}
+          <CustomSelect.Option key={value} value={{ value, type }}>
-      input
+            <div className="flex items-center gap-2">
-      width="w-full"
-      position="right"
-    >
-      {THEMES_OBJ.map(({ value, label, type, icon }) => (
-        <CustomSelect.Option key={value} value={{ value, type }}>
-          <div className="flex items-center gap-2">
-            <div
-              className="border-1 relative flex h-4 w-4 rotate-45 transform items-center justify-center rounded-full border"
-              style={{
-                borderColor: icon.border,
-              }}
-            >
               <div
-                className="h-full w-1/2 rounded-l-full"
+                className="border-1 relative flex h-4 w-4 rotate-45 transform items-center justify-center rounded-full border"
                 style={{
-                  background: icon.color1,
+                  borderColor: icon.border,
                 }}
-              />
+              >
-              <div
+                <div
-                className="h-full w-1/2 rounded-r-full border-l"
+                  className="h-full w-1/2 rounded-l-full"
-                style={{
+                  style={{
-                  borderLeftColor: icon.border,
+                    background: icon.color1,
-                  background: icon.color2,
+                  }}
-                }}
+                />
-              />
+                <div
+                  className="h-full w-1/2 rounded-r-full border-l"
+                  style={{
+                    borderLeftColor: icon.border,
+                    background: icon.color2,
+                  }}
+                />
+              </div>
+              {label}
             </div>
-            {label}
+          </CustomSelect.Option>
-          </div>
+        ))}
-        </CustomSelect.Option>
+      </CustomSelect>
-      ))}
+    );
-    </CustomSelect>
+  }
-  );
+);
-};

apps/app/lib/mobx/store-init.tsx

@@ -1,9 +1,14 @@
 import { useEffect } from "react";
+// next themes
+import { useTheme } from "next-themes";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
+// theme helpers
+import { applyTheme, unsetCustomCssVariables } from "helpers/theme.helper";
 
 const MobxStoreInit = () => {
   const store: any = useMobxStore();
+  const { setTheme } = useTheme();
 
   useEffect(() => {
     // sidebar collapsed toggle
@@ -21,11 +26,25 @@ const MobxStoreInit = () => {
       );
 
     // theme
-    if (localStorage && localStorage.getItem("theme") && store.theme.theme === null)
+    if (store.theme.theme === null && store?.user?.currentUserSettings) {
-      store.theme.setTheme(
+      let currentTheme = localStorage.getItem("theme");
-        localStorage.getItem("theme") ? localStorage.getItem("theme") : "system"
+      currentTheme = currentTheme ? currentTheme : "system";
-      );
+
-  }, [store?.theme]);
+      // validating the theme and applying for initial state
+      if (currentTheme) {
+        setTheme(currentTheme);
+        store.theme.setTheme({ theme: { theme: currentTheme } });
+      }
+    }
+  }, [store?.theme, store?.user, setTheme]);
+
+  useEffect(() => {
+    // current user
+    if (store?.user?.currentUser === null) store.user.setCurrentUser();
+
+    // current user settings
+    if (store?.user?.currentUserSettings === null) store.user.setCurrentUserSettings();
+  }, [store?.user]);
 
   return <></>;
 };

apps/app/pages/[workspaceSlug]/me/profile/preferences.tsx

@@ -1,7 +1,4 @@
 import { useEffect, useState } from "react";
-
-// next-themes
-import { useTheme } from "next-themes";
 // hooks
 import useUserAuth from "hooks/use-user-auth";
 // layouts
@@ -14,37 +11,47 @@ import { Spinner } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // types
 import { ICustomTheme } from "types";
+// mobx react lite
+import { observer } from "mobx-react-lite";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// next themes
+import { useTheme } from "next-themes";
 
-const ProfilePreferences = () => {
+const ProfilePreferences = observer(() => {
-  const [customThemeSelectorOptions, setCustomThemeSelectorOptions] = useState(false);
-  const [preLoadedData, setPreLoadedData] = useState<ICustomTheme | null>(null);
-
-  const { theme } = useTheme();
-
   const { user: myProfile } = useUserAuth();
 
+  const store: any = useMobxStore();
+  const { theme } = useTheme();
+
+  console.log("store", store?.theme?.theme);
+  console.log("theme", theme);
+
+  const [customThemeSelectorOptions, setCustomThemeSelectorOptions] = useState(false);
+
+  const [preLoadedData, setPreLoadedData] = useState<ICustomTheme | null>(null);
+
   useEffect(() => {
-    if (theme === "custom") {
+    if (store?.user && store?.theme?.theme === "custom") {
-      if (myProfile?.theme.palette)
+      const currentTheme = store?.user?.currentUserSettings?.theme;
+      if (currentTheme.palette)
         setPreLoadedData({
-          background: myProfile.theme.background !== "" ? myProfile.theme.background : "#0d101b",
+          background: currentTheme.background !== "" ? currentTheme.background : "#0d101b",
-          text: myProfile.theme.text !== "" ? myProfile.theme.text : "#c5c5c5",
+          text: currentTheme.text !== "" ? currentTheme.text : "#c5c5c5",
-          primary: myProfile.theme.primary !== "" ? myProfile.theme.primary : "#3f76ff",
+          primary: currentTheme.primary !== "" ? currentTheme.primary : "#3f76ff",
           sidebarBackground:
-            myProfile.theme.sidebarBackground !== ""
+            currentTheme.sidebarBackground !== "" ? currentTheme.sidebarBackground : "#0d101b",
-              ? myProfile.theme.sidebarBackground
+          sidebarText: currentTheme.sidebarText !== "" ? currentTheme.sidebarText : "#c5c5c5",
-              : "#0d101b",
-          sidebarText: myProfile.theme.sidebarText !== "" ? myProfile.theme.sidebarText : "#c5c5c5",
           darkPalette: false,
           palette:
-            myProfile.theme.palette !== ",,,,"
+            currentTheme.palette !== ",,,,"
-              ? myProfile.theme.palette
+              ? currentTheme.palette
               : "#0d101b,#c5c5c5,#3f76ff,#0d101b,#c5c5c5",
           theme: "custom",
         });
-      if (!customThemeSelectorOptions) setCustomThemeSelectorOptions(true);
+      setCustomThemeSelectorOptions((prevData) => true);
     }
-  }, [myProfile, theme, customThemeSelectorOptions]);
+  }, [store, store?.theme?.theme]);
 
   return (
     <WorkspaceAuthorizationLayout
@@ -91,6 +98,6 @@ const ProfilePreferences = () => {
       )}
     </WorkspaceAuthorizationLayout>
   );
-};
+});
 
 export default ProfilePreferences;

apps/app/pages/index.tsx

@@ -22,8 +22,14 @@ import {
 import { Spinner } from "components/ui";
 // images
 import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
+// mobx react lite
+import { observer } from "mobx-react-lite";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// next themes
 import { useTheme } from "next-themes";
-import { ICurrentUserResponse, IUser } from "types";
+import { IUser } from "types";
+
 // types
 type EmailPasswordFormValues = {
   email: string;
@@ -31,15 +37,18 @@ type EmailPasswordFormValues = {
   medium?: string;
 };
 
-const HomePage: NextPage = () => {
+const HomePage: NextPage = observer(() => {
+  const store: any = useMobxStore();
+  const { setTheme } = useTheme();
+
   const { isLoading, mutateUser } = useUserAuth("sign-in");
 
   const { setToastAlert } = useToast();
 
-  const { setTheme } = useTheme();
+  const handleTheme = (user: IUser) => {
-
+    const currentTheme = user.theme.theme ?? "system";
-  const changeTheme = (user: IUser) => {
+    setTheme(currentTheme);
-    setTheme(user.theme.theme ?? "system");
+    store?.user?.setCurrentUserSettings();
   };
 
   const handleGoogleSignIn = async ({ clientId, credential }: any) => {
@@ -53,7 +62,7 @@ const HomePage: NextPage = () => {
         const response = await authenticationService.socialAuth(socialAuthPayload);
         if (response && response?.user) {
           mutateUser();
-          changeTheme(response.user);
+          handleTheme(response?.user);
         }
       } else {
         throw Error("Cant find credentials");
@@ -79,7 +88,7 @@ const HomePage: NextPage = () => {
         const response = await authenticationService.socialAuth(socialAuthPayload);
         if (response && response?.user) {
           mutateUser();
-          changeTheme(response.user);
+          handleTheme(response?.user);
         }
       } else {
         throw Error("Cant find credentials");
@@ -101,7 +110,7 @@ const HomePage: NextPage = () => {
         try {
           if (response) {
             mutateUser();
-            changeTheme(response.user);
+            handleTheme(response?.user);
           }
         } catch (err: any) {
           setToastAlert({
@@ -128,7 +137,7 @@ const HomePage: NextPage = () => {
     try {
       if (response) {
         mutateUser();
-        changeTheme(response.user);
+        handleTheme(response?.user);
       }
     } catch (err: any) {
       setToastAlert({
@@ -140,10 +149,6 @@ const HomePage: NextPage = () => {
     }
   };
 
-  useEffect(() => {
-    setTheme("system");
-  }, [setTheme]);
-
   return (
     <DefaultLayout>
       {isLoading ? (
@@ -202,6 +207,6 @@ const HomePage: NextPage = () => {
       )}
     </DefaultLayout>
   );
-};
+});
 
 export default HomePage;

apps/app/store/theme.ts

@@ -38,21 +38,24 @@ class ThemeStore {
     }
   }
 
-  setTheme = async (_theme: ICurrentUserSettings) => {
+  setTheme = async (_theme: { theme: ICurrentUserSettings }) => {
     try {
-      localStorage.setItem("theme", _theme.theme.toString());
+      const currentTheme: string = _theme.theme.theme.toString();
-      this.theme = _theme.theme.toString();
 
-      if (this.theme === "custom") {
+      // updating the local storage theme value
-        let themeSettings = this.rootStore.user.currentUserSettings || null;
+      localStorage.setItem("theme", currentTheme);
-        if (themeSettings && themeSettings.theme.palette) {
+      // updating the mobx theme value
-          applyTheme(
+      this.theme = currentTheme;
-            themeSettings.theme.palette !== ",,,,"
+
-              ? themeSettings.theme.palette
+      // applying the theme to platform if the selected theme is custom
-              : "#0d101b,#c5c5c5,#3f76ff,#0d101b,#c5c5c5",
+      if (currentTheme === "custom") {
-            themeSettings.theme.darkPalette
+        const themeSettings = this.rootStore.user.currentUserSettings || null;
-          );
+        applyTheme(
-        }
+          themeSettings?.theme?.palette !== ",,,,"
+            ? themeSettings?.theme?.palette
+            : "#0d101b,#c5c5c5,#3f76ff,#0d101b,#c5c5c5",
+          themeSettings?.theme?.darkPalette
+        );
       } else unsetCustomCssVariables();
     } catch (error) {
       console.error("setting user theme error", error);

apps/app/store/user.ts

@@ -1,5 +1,5 @@
 // mobx
-import { action, observable, computed, makeObservable } from "mobx";
+import { action, observable, computed, runInAction, makeObservable } from "mobx";
 // services
 import UserService from "services/user.service";
 // interfaces
@@ -31,8 +31,9 @@ class UserStore {
     try {
       let userResponse: ICurrentUser | null = await UserService.currentUser();
       userResponse = userResponse || null;
+
       if (userResponse) {
-        this.currentUser = {
+        const userPayload: ICurrentUser = {
           id: userResponse?.id,
           avatar: userResponse?.avatar,
           first_name: userResponse?.first_name,
@@ -46,6 +47,9 @@ class UserStore {
           is_onboarded: userResponse?.is_onboarded,
           role: userResponse?.role,
         };
+        runInAction(() => {
+          this.currentUser = userPayload;
+        });
       }
     } catch (error) {
       console.error("Fetching current user error", error);
@@ -56,11 +60,15 @@ class UserStore {
     try {
       let userSettingsResponse: ICurrentUserSettings | null = await UserService.currentUser();
       userSettingsResponse = userSettingsResponse || null;
+
       if (userSettingsResponse) {
-        this.currentUserSettings = {
+        const themePayload = {
-          theme: userSettingsResponse?.theme,
+          theme: { ...userSettingsResponse?.theme },
         };
-        this.rootStore.theme.setTheme();
+        runInAction(() => {
+          this.currentUserSettings = themePayload;
+          this.rootStore.theme.setTheme(themePayload);
+        });
       }
     } catch (error) {
       console.error("Fetching current user error", error);
@@ -71,9 +79,26 @@ class UserStore {
     try {
       let userResponse: ICurrentUser = await UserService.updateUser(user);
       userResponse = userResponse || null;
+
       if (userResponse) {
-        this.currentUser = userResponse;
+        const userPayload: ICurrentUser = {
-        return userResponse;
+          id: userResponse?.id,
+          avatar: userResponse?.avatar,
+          first_name: userResponse?.first_name,
+          last_name: userResponse?.last_name,
+          username: userResponse?.username,
+          email: userResponse?.email,
+          mobile_number: userResponse?.mobile_number,
+          is_email_verified: userResponse?.is_email_verified,
+          is_tour_completed: userResponse?.is_tour_completed,
+          onboarding_step: userResponse?.onboarding_step,
+          is_onboarded: userResponse?.is_onboarded,
+          role: userResponse?.role,
+        };
+        runInAction(() => {
+          this.currentUser = userPayload;
+        });
+        return userPayload;
       }
     } catch (error) {
       console.error("Updating user error", error);
@@ -86,9 +111,14 @@ class UserStore {
       let userSettingsResponse: ICurrentUserSettings = await UserService.updateUser(userTheme);
       userSettingsResponse = userSettingsResponse || null;
       if (userSettingsResponse) {
-        this.currentUserSettings = userSettingsResponse;
+        const themePayload = {
-        this.rootStore.theme.setTheme(userTheme);
+          theme: { ...userSettingsResponse?.theme },
-        return userSettingsResponse;
+        };
+        runInAction(() => {
+          this.currentUserSettings = themePayload;
+          this.rootStore.theme.setTheme(themePayload);
+        });
+        return themePayload;
       }
     } catch (error) {
       console.error("Updating user settings error", error);
@@ -97,10 +127,7 @@ class UserStore {
   };
 
   // init load
-  initialLoad() {
+  initialLoad() {}
-    this.setCurrentUser();
-    this.setCurrentUserSettings();
-  }
 }
 
 export default UserStore;