dev: Updating themening worfkflow (#1827)

This commit is contained in:
guru_sainath 2023-08-10 13:03:42 +05:30 committed by GitHub
parent be062ccd34
commit 005b42cb8d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 251 additions and 231 deletions

View file

@ -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 [customThemeSelectorOptions, setCustomThemeSelectorOptions] = useState(false);
const [preLoadedData, setPreLoadedData] = useState<ICustomTheme | null>(null);
const { theme } = useTheme();
const ProfilePreferences = observer(() => {
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 (myProfile?.theme.palette)
if (store?.user && store?.theme?.theme === "custom") {
const currentTheme = store?.user?.currentUserSettings?.theme;
if (currentTheme.palette)
setPreLoadedData({
background: myProfile.theme.background !== "" ? myProfile.theme.background : "#0d101b",
text: myProfile.theme.text !== "" ? myProfile.theme.text : "#c5c5c5",
primary: myProfile.theme.primary !== "" ? myProfile.theme.primary : "#3f76ff",
background: currentTheme.background !== "" ? currentTheme.background : "#0d101b",
text: currentTheme.text !== "" ? currentTheme.text : "#c5c5c5",
primary: currentTheme.primary !== "" ? currentTheme.primary : "#3f76ff",
sidebarBackground:
myProfile.theme.sidebarBackground !== ""
? myProfile.theme.sidebarBackground
: "#0d101b",
sidebarText: myProfile.theme.sidebarText !== "" ? myProfile.theme.sidebarText : "#c5c5c5",
currentTheme.sidebarBackground !== "" ? currentTheme.sidebarBackground : "#0d101b",
sidebarText: currentTheme.sidebarText !== "" ? currentTheme.sidebarText : "#c5c5c5",
darkPalette: false,
palette:
myProfile.theme.palette !== ",,,,"
? myProfile.theme.palette
currentTheme.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;

View file

@ -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 changeTheme = (user: IUser) => {
setTheme(user.theme.theme ?? "system");
const handleTheme = (user: IUser) => {
const currentTheme = user.theme.theme ?? "system";
setTheme(currentTheme);
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;