github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

[FED-594] fix: user change theme interface bug fixes (#2587)

Browse Source 
* fix: user change theme interface bugfixes

* fix: handling error case
This commit is contained in:
sriram veeraghanta 2023-11-01 17:11:29 +05:30 committed by GitHub
parent 548e95c7e0
commit 0121a4ab51
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
web/components/command-palette/change-interface-theme.tsx
View File

@ -1,33 +1,35 @@
import React, { Dispatch, SetStateAction, useEffect, useState } from "react"; import React, { FC, Dispatch, SetStateAction, useEffect, useState } from "react";
import { Command } from "cmdk"; import { Command } from "cmdk";
import { THEME_OPTIONS } from "constants/themes"; import { THEME_OPTIONS } from "constants/themes";
import { useTheme } from "next-themes"; import { useTheme } from "next-themes";
import useUser from "hooks/use-user";
import { Settings } from "lucide-react"; import { Settings } from "lucide-react";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
// mobx store // hooks
import useToast from "hooks/use-toast";
import { useMobxStore } from "lib/mobx/store-provider"; import { useMobxStore } from "lib/mobx/store-provider";
type Props = { type Props = {
setIsPaletteOpen: Dispatch<SetStateAction<boolean>>; setIsPaletteOpen: Dispatch<SetStateAction<boolean>>;
}; };
export const ChangeInterfaceTheme: React.FC<Props> = observer(({ setIsPaletteOpen }) => { export const ChangeInterfaceTheme: FC<Props> = observer((props) => {
const store: any = useMobxStore(); const { setIsPaletteOpen } = props;
// store
const { user: userStore } = useMobxStore();
// states
const [mounted, setMounted] = useState(false); const [mounted, setMounted] = useState(false);
// hooks
const { setTheme } = useTheme(); const { setTheme } = useTheme();
const { setToastAlert } = useToast();
const { user } = useUser();
const updateUserTheme = (newTheme: string) => { const updateUserTheme = (newTheme: string) => {
if (!user) return;
setTheme(newTheme); setTheme(newTheme);
return store.user return userStore.updateCurrentUserTheme(newTheme).catch(() => {
.updateCurrentUserSettings({ theme: { ...user.theme, theme: newTheme } }) setToastAlert({
.then((response: any) => response) title: "Failed to save user theme settings!",
.catch((error: any) => error); type: "error",
});
});
}; };
// useEffect only runs on the client, so now we can safely show the UI // useEffect only runs on the client, so now we can safely show the UI