Reorganize component to avoid wrapping children with ChakraProvider (#2)

* Reorganize component to avoid wrapping children with ChakraProvider * Update README to show 2 possible usages
stordco · Sep 22, 2021 · 92e64b7 · 92e64b7
1 parent c57b1c2
commit 92e64b7
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 56 deletions.
diff --git a/README.md b/README.md
@@ -3,5 +3,31 @@
 A simple utility to make your MSW experience a little bit better.
 
 ### Requirements
+
 - [msw](https://github.com/mswjs/msw)
 - [chakra-ui](https://github.com/chakra-ui/chakra-ui)
+
+### Usage
+
+There are two primary ways to use this component:
+
+1. As a wrapper around your entire app
+
+   1. When you structure things like the below, you guarantee that _all requests_ will be intercepted because `children` will not be rendered until the worker has successfully started.
+
+   ```ts
+   <MSWToolbar {...props}>
+     <YourApp />
+   </MSWToolbar>
+   ```
+
+2. As a regular component in the tree
+   1. When you do this, all requests _should be intercepted_, but it's not guaranteed because there can be timing issues with the service worker registration.
+   ```ts
+   <YourApp>
+     <MSWToolbar {...props} />
+     <Header />
+     <Content />
+     <Footer />
+   </YourApp>
+   ```
diff --git a/src/index.tsx b/src/index.tsx
@@ -153,61 +153,55 @@ export const MSWToolbar = ({
 
   if (!isEnabled || !worker) return <>{children}</>;
 
-  return (
-    <ChakraProvider>
-      <div>
-        {isReady && (
-          <div>
-            <Stack
-              direction={['column', 'column', 'row']}
-              spacing={8}
-              p={2}
-              bg="blue.100"
+  return isReady ? (
+    <>
+      <ChakraProvider>
+        <Stack
+          direction={['column', 'column', 'row']}
+          spacing={8}
+          p={2}
+          bg="blue.100"
+        >
+          <HStack>
+            <Text fontWeight="bold">Mocks:</Text>
+            <Switch
+              onChange={() => setWorkerEnabled(prev => !prev)}
+              isChecked={workerEnabled}
+              size="lg"
+            />
+          </HStack>
+          <HStack>
+            <Text fontWeight="bold">Mode:</Text>
+            <Select
+              value={mode}
+              onChange={({ target: { value } }) => setMode(value as WorkerMode)}
+              w="150px"
+              bg="white"
             >
-              <HStack>
-                <Text fontWeight="bold">Mocks:</Text>
-                <Switch
-                  onChange={() => setWorkerEnabled(prev => !prev)}
-                  isChecked={workerEnabled}
-                  size="lg"
-                />
-              </HStack>
-              <HStack>
-                <Text fontWeight="bold">Mode:</Text>
-                <Select
-                  value={mode}
-                  onChange={({ target: { value } }) =>
-                    setMode(value as WorkerMode)
-                  }
-                  w="150px"
-                  bg="white"
-                >
-                  {modes.map(m => (
-                    <option value={m} key={m}>
-                      {capitalize(m)}
-                    </option>
-                  ))}
-                </Select>
-              </HStack>
-              <HStack>
-                <Text fontWeight="bold">Delay (ms):</Text>
-                <NumberInput
-                  onChange={value => setDelay(Number(value))}
-                  value={delay}
-                  bg="white"
-                  w="100px"
-                >
-                  <NumberInputField />
-                </NumberInput>
-              </HStack>
-
-              <Spacer />
-              {actions ? actions : null}
-            </Stack>
-            <div>{children}</div>
-          </div>
-        )}
-      </div>
-    </ChakraProvider>
-  );
+              {modes.map(m => (
+                <option value={m} key={m}>
+                  {capitalize(m)}
+                </option>
+              ))}
+            </Select>
+          </HStack>
+          <HStack>
+            <Text fontWeight="bold">Delay (ms):</Text>
+            <NumberInput
+              onChange={value => setDelay(Number(value))}
+              value={delay}
+              bg="white"
+              w="100px"
+            >
+              <NumberInputField />
+            </NumberInput>
+          </HStack>
+
+          <Spacer />
+          {actions ? actions : null}
+        </Stack>
+      </ChakraProvider>
+      {children}
+    </>
+  ) : null;
 };