feat: constate divide context status by role

Author: minsgy

src/hooks/useMswDevtoolsContext.ts

@@ -0,0 +1,16 @@
+"use client"
+
+import { useState, useCallback } from "react"
+import { MswDevtoolsContextType } from "../providers/useMswDevtoolsContext"
+
+export const useMswDevtoolsState = (initialState: MswDevtoolsContextType) => {
+  const [state, setState] = useState(initialState)
+  const setEnabled = useCallback((isEnabled: boolean) => {
+    setState((prev) => ({
+      ...prev,
+      isEnabled,
+    }))
+  }, [])
+
+  return { state, setEnabled }
+}

src/hooks/useMswDevtoolsState.ts

@@ -0,0 +1,13 @@
+"use client"
+
+import { useState, useCallback } from "react"
+import { Tab } from ".."
+
+export const useMswDevtoolsTabs = () => {
+  const [tab, setTab] = useState<Tab>("handlers")
+  const handleTabChange = useCallback((tab: Tab) => {
+    setTab(tab)
+  }, [])
+
+  return { tab, handleTabChange }
+}

src/hooks/useMswDevtoolsTabs.ts

@@ -0,0 +1,41 @@
+"use client"
+
+import constate from "constate"
+import { SetupWorker } from "msw/lib/browser"
+import { useMswDevtoolsState } from "../hooks/useMswDevtoolsState"
+import { useMswDevtoolsTabs } from "../hooks/useMswDevtoolsTabs"
+
+export type MswDevtoolsContextType = {
+  isEnabled: boolean
+  worker?: SetupWorker
+  apiUrl: string
+}
+
+const [
+  MswDevToolsProvider,
+  useApiUrlValue,
+  useIsEnabledValue,
+  useWorkerValue,
+  useEnabledUpdate,
+  useTabIndex,
+] = constate(
+  (initialState: MswDevtoolsContextType) => {
+    const { state, setEnabled } = useMswDevtoolsState(initialState)
+    const { tab, handleTabChange } = useMswDevtoolsTabs()
+    return { state, setEnabled, tab, handleTabChange }
+  },
+  (value) => value.state.apiUrl,
+  (value) => value.state.isEnabled,
+  (value) => value.state.worker,
+  (value) => value.setEnabled,
+  (value) => ({ tab: value.tab, handleTabChange: value.handleTabChange })
+)
+
+export {
+  MswDevToolsProvider,
+  useApiUrlValue,
+  useIsEnabledValue,
+  useWorkerValue,
+  useEnabledUpdate,
+  useTabIndex,
+}