markdown-home-tab/src/modules/settings/providers/SettingsProvider/index.tsx

import { FC, PropsWithChildren, useCallback, useState } from "react";
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";

const SettingsProvider: FC<PropsWithChildren> = ({ children }) => {
  const [settings, setSettings] = useState(defaultSettings);
  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 }}>
      {settingsModalVisible && (
        <Modal onClose={hide}>
          <ModalPage onClose={hide}>
            <SettingsContainer />
          </ModalPage>
        </Modal>
      )}

      {children}
    </SettingsContext.Provider>
  );
};

export { SettingsProvider };