muerwre/markdown-home-tab
1
0
Fork 0
mirror of https://github.com/muerwre/markdown-home-tab.git synced 2025-04-24 16:36:41 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions

added settings persistance

Browse source
This commit is contained in:
Fedor Katurov 2023-04-27 18:43:47 +06:00
parent e81e766ea6
commit 51576b0309
2 changed files with 47 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

40
src/modules/settings/hooks/usePersistSettings.ts Normal file
View file

@ -0,0 +1,40 @@
import { useCallback, useState } from "react";
import { defaultSettings } from "../context/SettingsContext";
import {
Theme,
defaultDarkTheme,
defaultLightTheme,
} from "~/modules/theme/constants/theme";
import { useDetectTheme } from "~/modules/theme/hooks/useDetectTheme";
import { SettingsValue } from "~/modules/settings/context/SettingsContext";
const getLocalStorageSettings = (defaultValue: SettingsValue) => {
try {
const raw = localStorage.getItem("settings");
const parsed = JSON.parse(raw ?? "");
return parsed ? { ...defaultValue, ...parsed } : defaultValue;
} catch (error) {
return defaultValue;
}
};
export const usePersistSettings = () => {
const theme = useDetectTheme();
const defaultColors =
theme === Theme.Dark ? defaultDarkTheme : defaultLightTheme;
const [settings, setSettings] = useState<SettingsValue>(
getLocalStorageSettings({ ...defaultSettings, ...defaultColors })
);
const update = useCallback((val: Partial<SettingsValue>) => {
setSettings((v) => {
const updatedValue = { ...v, ...val };
localStorage.setItem("settings", JSON.stringify(updatedValue));
return updatedValue;
});
}, []);
return { settings, update };
};

32
src/modules/settings/providers/SettingsProvider/index.tsx
View file

@ -1,40 +1,22 @@
import { FC, PropsWithChildren, useCallback, useState } from "react";
import { useTranslation } from "react-i18next";
import { Button } from "~/components/buttons/Button";
import { ModalPage } from "~/modules/modal/components/ModalPage";
import { Modal } from "~/modules/modal/containers/Modal";
import { SettingsContainer } from "../../containers/SettingsContainer";
import {
SettingsContext,
SettingsValue,
defaultSettings,
} from "../../context/SettingsContext";
import { ModalPage } from "~/modules/modal/components/ModalPage";
import { useDetectTheme } from "~/modules/theme/hooks/useDetectTheme";
import {
Theme,
defaultDarkTheme,
defaultLightTheme,
} from "~/modules/theme/constants/theme";
import { Button } from "~/components/buttons/Button";
import { useTranslation } from "react-i18next";
import { SettingsContext } from "../../context/SettingsContext";
import { usePersistSettings } from "../../hooks/usePersistSettings";
import styles from "./styles.module.scss";
const SettingsProvider: FC<PropsWithChildren> = ({ children }) => {
const { t } = useTranslation();
const theme = useDetectTheme();
const defaultColors =
theme === Theme.Dark ? defaultDarkTheme : defaultLightTheme;
const [settings, setSettings] = useState({
...defaultSettings,
...defaultColors,
});
const { settings, update } = usePersistSettings();
const [settingsModalVisible, setSettingsModalVisible] = useState(false);
const show = useCallback(() => setSettingsModalVisible(true), []);
const hide = useCallback(() => setSettingsModalVisible(false), []);
const update = useCallback(
(val: Partial<SettingsValue>) => setSettings((v) => ({ ...v, ...val })),
[]
);
return (
<SettingsContext.Provider value={{ settings, update, show, hide }}>