dev: Updating themening worfkflow (#1827)
This commit is contained in:
parent
be062ccd34
commit
005b42cb8d
7 changed files with 251 additions and 231 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue