1 files changed, 15 insertions, 62 deletions

diff --git a/frontend/src/pages/Settings/components/collapse.tsx b/frontend/src/pages/Settings/components/collapse.tsx
index 1296e44b2..c47b94e06 100644
--- a/frontend/src/pages/Settings/components/collapse.tsx
+++ b/frontend/src/pages/Settings/components/collapse.tsx
@@ -1,75 +1,31 @@
 import { Collapse } from "@mantine/core";
-import {
-  createContext,
-  Dispatch,
-  FunctionComponent,
-  useContext,
-  useMemo,
-  useState,
-} from "react";
-
-type SupportType = string | boolean;
-
-const CollapseContext = createContext<
-  [SupportType, Dispatch<SupportType> | undefined]
->([false, undefined]);
-
-const CollapseUpdateContext = createContext<Dispatch<SupportType> | undefined>(
-  undefined
-);
-
-export function useCollapse() {
-  return useContext(CollapseUpdateContext);
-}
-
-interface CollapseBoxType {
-  Control: typeof CollapseBoxControl;
-  Content: typeof CollapseBoxContent;
-}
-
-const CollapseBox: CollapseBoxType & FunctionComponent = ({ children }) => {
-  const state = useState<boolean | string>(false);
-
-  return (
-    <CollapseContext.Provider value={state}>
-      {children}
-    </CollapseContext.Provider>
-  );
-};
-
-const CollapseBoxControl: FunctionComponent = ({ children }) => {
-  const context = useContext(CollapseContext);
-  return (
-    <CollapseUpdateContext.Provider value={context[1]}>
-      {children}
-    </CollapseUpdateContext.Provider>
-  );
-};
+import { FunctionComponent, useMemo, useRef } from "react";
+import { useSettingValue } from "./hooks";
 
 interface ContentProps {
-  on?: (k: string) => boolean;
-  eventKey?: string;
+  settingKey: string;
+  on?: (k: unknown) => boolean;
   indent?: boolean;
-  children: JSX.Element | JSX.Element[];
 }
 
-const CollapseBoxContent: FunctionComponent<ContentProps> = ({
+const CollapseBox: FunctionComponent<ContentProps> = ({
   on,
-  eventKey,
   indent,
   children,
+  settingKey,
 }) => {
-  const [value] = useContext(CollapseContext);
+  const value = useSettingValue(settingKey);
 
-  const open = useMemo(() => {
-    if (on && typeof value === "string") {
-      return on(value);
-    } else if (eventKey) {
-      return value === eventKey;
+  const onRef = useRef(on);
+  onRef.current = on;
+
+  const open = useMemo<boolean>(() => {
+    if (onRef.current) {
+      return onRef.current(value);
     } else {
-      return value === true;
+      return Boolean(value);
     }
-  }, [on, value, eventKey]);
+  }, [value]);
 
   return (
     <Collapse in={open} pl={indent ? "md" : undefined}>
@@ -78,7 +34,4 @@ const CollapseBoxContent: FunctionComponent<ContentProps> = ({
   );
 };
 
-CollapseBox.Control = CollapseBoxControl;
-CollapseBox.Content = CollapseBoxContent;
-
 export default CollapseBox;