refactor: route update after update query feature

minsgy · Jun 9, 2024 · 6b12fbd · 6b12fbd
1 parent 29c0f10
commit 6b12fbd
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 46 deletions.
diff --git a/src/app/MSWDevtools.tsx b/src/app/MSWDevtools.tsx
@@ -7,6 +7,7 @@ export const MSWDevtools = ({
   isEnabled = false,
   children,
   worker,
+  onRouteUpdate,
 }: MSWDevtoolsProps) => {
   if ((isEnabled && !worker) || (isEnabled && worker && !worker)) {
     console.warn(
@@ -20,7 +21,11 @@ export const MSWDevtools = ({
 
   return (
     <>
-      <MswDevToolsProvider isEnabled={isEnabled} worker={worker}>
+      <MswDevToolsProvider
+        isEnabled={isEnabled}
+        worker={worker}
+        onRouteUpdate={onRouteUpdate}
+      >
         <MSWDevtoolsPanel />
       </MswDevToolsProvider>
       {children}

diff --git a/src/features/DevtoolsHandlerList.tsx b/src/features/DevtoolsHandlerList.tsx
@@ -29,7 +29,7 @@ export const DevtoolsHandlerList = () => {
       {routes.map((route) => (
         <li key={route.id} className="p-[12px] flex items-center">
           <Switch
-            checked={route.isSkip}
+            checked={route.enabled}
             onCheckedChange={(checked) => {
               onToggleHandler(route.id, checked)
             }}

diff --git a/src/hooks/useMswDevtoolsState.ts b/src/hooks/useMswDevtoolsState.ts
@@ -1,16 +1,21 @@
 "use client"
 
-import { useState, useCallback, useEffect } from "react"
+import { useState, useCallback, useEffect, useRef } from "react"
 import { MswDevtoolsContextType } from "../providers/useMswDevtoolsContext"
 import { EnhancedDevtoolsRoute } from ".."
 import { generatorSerializedRouteHandlers } from "@/shared/utils/generatorSerializedRouteHandlers"
 import { generatorRequestHandler } from "@/shared/utils/generatorRequestHandler"
 
-export const useMswDevtoolsState = (initialState: MswDevtoolsContextType) => {
+export const useMswDevtoolsState = ({
+  onRouteUpdate,
+  ...initialState
+}: MswDevtoolsContextType) => {
+  const isMounted = useRef(false)
   const [state, setState] = useState(initialState)
   const [routes, setRoutes] = useState<EnhancedDevtoolsRoute[]>(
     generatorSerializedRouteHandlers(initialState.worker?.listHandlers() ?? [])
   )
+
   const setEnabled = useCallback((isEnabled: boolean) => {
     setState((prev) => ({
       ...prev,
@@ -26,10 +31,10 @@ export const useMswDevtoolsState = (initialState: MswDevtoolsContextType) => {
     setRoutes((prev) => [...prev, route])
   }
 
-  const onToggleHandler = (id: string, isSkip: boolean) => {
+  const onToggleHandler = (id: string, enabled: boolean) => {
     const findIndex = routes.findIndex((route) => route.id === id)
     const newRoutes = [...routes]
-    newRoutes[findIndex].isSkip = isSkip
+    newRoutes[findIndex].enabled = enabled
     setRoutes(newRoutes)
   }
 
@@ -42,15 +47,22 @@ export const useMswDevtoolsState = (initialState: MswDevtoolsContextType) => {
 
   useEffect(() => {
     if (state.worker) {
-      const usedRoutes = routes.filter(({ isSkip }) => isSkip)
-      state.worker.resetHandlers(...generatorRequestHandler(usedRoutes))
+      const usedRoutes = routes.filter(({ enabled }) => enabled)
+      const httpUsedRoutes = generatorRequestHandler(usedRoutes)
+      state.worker.resetHandlers(...httpUsedRoutes)
+      // first call is not needed
+      if (isMounted.current) {
+        onRouteUpdate?.(usedRoutes.filter(({ isHidden }) => !isHidden))
+      } else {
+        isMounted.current = true
+      }
     }
   }, [routes, state.worker])
 
   return {
     state,
     setEnabled,
-    routes,
+    routes: routes.filter(({ isHidden }) => !isHidden),
     setRoutes,
     onDeleteHandler,
     onAddHandler,

diff --git a/src/providers/useMswDevtoolsContext.ts b/src/providers/useMswDevtoolsContext.ts
@@ -1,14 +1,14 @@
 "use client"
 
 import constate from "constate"
-import { SetupWorker } from "msw/lib/browser"
 import { useMswDevtoolsState } from "../hooks/useMswDevtoolsState"
 import { useEditorPanelState } from "@/hooks/useEditorPanelState"
+import { MSWDevtoolsProps } from ".."
 
-export type MswDevtoolsContextType = {
-  isEnabled: boolean
-  worker?: SetupWorker
-}
+export type MswDevtoolsContextType = Omit<
+  MSWDevtoolsProps,
+  "children" | "position"
+>
 
 const [
   MswDevToolsProvider,

diff --git a/src/shared/lib/index.ts b/src/shared/lib/index.ts
@@ -0,0 +1 @@
+export * from "./http"
diff --git a/src/shared/utils/createHandler.ts b/src/shared/utils/createHandler.ts
@@ -1,4 +1,4 @@
-import { DevtoolsRoute } from "@/types"
+import { EnhancedDevtoolsRoute } from "@/types"
 import { faker } from "@faker-js/faker"
 import {
   HttpHandler,
@@ -9,16 +9,22 @@ import {
   delay,
 } from "msw"
 
-export const createHandler = (route: DevtoolsRoute): RequestHandler | null => {
-  const { method, url, handlers, selectedHandlerId } = route
+export const createHandler = (
+  route: EnhancedDevtoolsRoute
+): RequestHandler | null => {
+  const { method, url, handlers, selectedHandlerId, isHidden } = route
 
   const httpHandler = createHttpHandler(method)
   return httpHandler(url, async (info) => {
     const selectedHandler =
       handlers.find((handler) => handler.id === selectedHandlerId) ??
       handlers[0]
-    const jsonResponse = JSON.parse(selectedHandler.response)
 
+    if (isHidden) {
+      return new HttpResponse()
+    }
+
+    const jsonResponse = JSON.parse(selectedHandler.response)
     if (jsonResponse) {
       recursiveTransform(jsonResponse, (key, value) => {
         if (typeof value === "number") {

diff --git a/src/shared/utils/generatorSerializedRouteHandlers.ts b/src/shared/utils/generatorSerializedRouteHandlers.ts
@@ -1,5 +1,5 @@
 import { EnhancedDevtoolsRoute } from "@/types"
-import { RequestHandler } from "msw"
+import { HttpMethods, RequestHandler } from "msw"
 
 export const createdUuid = (): string => {
   return self.crypto.randomUUID()
@@ -8,34 +8,56 @@ export const createdUuid = (): string => {
 export const generatorSerializedRouteHandlers = (
   routes: readonly RequestHandler[]
 ): EnhancedDevtoolsRoute[] => {
-  return routes.map((route) => {
-    console.log(route)
-    const handlers = Array.isArray((route as any).options)
-      ? (route as any).options.map((option: any) => ({
-          id: createdUuid(),
-          response: JSON.stringify(option.response),
-          status: option.status,
-          description: option.description,
-          origin: "msw",
-        }))
-      : [
-          {
+  return (
+    routes.map((route) => {
+      const handlers = Array.isArray((route as any).options)
+        ? (route as any).options.map((option: any) => ({
             id: createdUuid(),
-            response: JSON.stringify((route as any).response),
-            status: (route as any).status,
-            description: (route as any).description,
+            response: JSON.stringify(option.response),
+            status: option.status,
+            description: option.description,
             origin: "msw",
-          },
-        ]
-    return {
+          }))
+        : [
+            {
+              id: createdUuid(),
+              response: JSON.stringify((route as any).response),
+              status: (route as any).status,
+              description: (route as any).description,
+              origin: "msw",
+            },
+          ]
+      return {
+        id: createdUuid(),
+        url: (route.info as any).path,
+        method: (route.info as any).method,
+        enabled: (route.info as any).enabled ?? true,
+        handlers,
+        delay: 0,
+        selectedHandlerId: handlers[0]?.id,
+      }
+    }) as EnhancedDevtoolsRoute[]
+  ).concat(unknownRoute)
+}
+
+/**
+ * https://mswjs.io/docs/api/setup-worker/reset-handlers
+ */
+export const unknownRoute: EnhancedDevtoolsRoute = {
+  id: createdUuid(),
+  url: "unknown",
+  method: HttpMethods.GET,
+  enabled: true,
+  isHidden: true,
+  handlers: [
+    {
       id: createdUuid(),
-      url: (route.info as any).path,
-      method: (route.info as any).method,
-      isSkip: (route.info as any).isSkip ?? true,
-      handlers,
-      delay: 0,
-      selectedHandlerId: handlers[0]?.id,
-      description: "MSW Route (auto-generated)",
-    }
-  })
+      response: "{}",
+      status: 404,
+      description: "",
+      origin: "msw",
+    },
+  ] as any,
+  delay: 0,
+  selectedHandlerId: createdUuid(),
 }