(fix) infinite render loop on test page

metlo-labs · Aug 22, 2022 · a4e9d04 · a4e9d04
1 parent 59ed7b9
commit a4e9d04
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 51 deletions.
diff --git a/frontend/src/components/Authentication/authSwitch.tsx b/frontend/src/components/Authentication/authSwitch.tsx
@@ -1,6 +1,7 @@
 import { Box, HStack, Select, StackDivider, VStack } from "@chakra-ui/react";
 import { AuthType } from "@common/testing/enums";
 import { Authorization, Request } from "@common/testing/types";
+import React, { useCallback } from "react";
 import APIAuth from "./apiKey";
 import BasicAuth from "./basicAuth";
 import BearerAuth from "./bearerAuth";
@@ -9,50 +10,49 @@ import NoAuth from "./noAuth";
 interface AuthSwitchInterface {
   variant: AuthType;
   setVariant: (value: AuthType) => void;
-  request: Request;
-  setRequest: (v: Request) => void;
+  setRequest: (t: (e: Request) => Request) => void;
 }
 
-const AuthSwitch: React.FC<AuthSwitchInterface> = ({
-  variant,
-  setVariant,
-  request,
-  setRequest,
-}) => {
-  const onAuthParamsChange = (v: () => Authorization) => {
-    setRequest({ ...request, authorization: v() });
-  };
-  const getAuthComponent = (auth: AuthType) => {
-    switch (auth) {
-      case AuthType.API_KEY:
-        return <APIAuth evaluate={onAuthParamsChange} />;
-      case AuthType.BASIC_AUTH:
-        return <BasicAuth evaluate={onAuthParamsChange} />;
-      case AuthType.NO_AUTH:
-        return <NoAuth evaluate={onAuthParamsChange} />;
-      case AuthType.BEARER:
-        return <BearerAuth evaluate={onAuthParamsChange} />;
-    }
-  };
-  return (
-    <VStack divider={<StackDivider />}>
-      <HStack w="full">
-        <Box w="full">Type</Box>
-        <Box w="full">
-          <Select
-            value={variant}
-            onChange={(v) => setVariant(v.target.value as AuthType)}
-          >
-            {Object.values(AuthType).map((v, i) => (
-              <option value={v} key={i}>
-                {v}
-              </option>
-            ))}
-          </Select>
-        </Box>
-      </HStack>
-      <Box w="full">{getAuthComponent(variant)}</Box>
-    </VStack>
-  );
-};
+const AuthSwitch: React.FC<AuthSwitchInterface> = React.memo(
+  ({ variant, setVariant, setRequest }) => {
+    const onAuthParamsChange = useCallback(
+      (v: () => Authorization) => {
+        setRequest((request) => ({ ...request, authorization: v() }));
+      },
+      [setRequest]
+    );
+    const getAuthComponent = (auth: AuthType) => {
+      switch (auth) {
+        case AuthType.API_KEY:
+          return <APIAuth evaluate={onAuthParamsChange} />;
+        case AuthType.BASIC_AUTH:
+          return <BasicAuth evaluate={onAuthParamsChange} />;
+        case AuthType.NO_AUTH:
+          return <NoAuth evaluate={onAuthParamsChange} />;
+        case AuthType.BEARER:
+          return <BearerAuth evaluate={onAuthParamsChange} />;
+      }
+    };
+    return (
+      <VStack divider={<StackDivider />}>
+        <HStack w="full">
+          <Box w="full">Type</Box>
+          <Box w="full">
+            <Select
+              value={variant}
+              onChange={(v) => setVariant(v.target.value as AuthType)}
+            >
+              {Object.values(AuthType).map((v, i) => (
+                <option value={v} key={i}>
+                  {v}
+                </option>
+              ))}
+            </Select>
+          </Box>
+        </HStack>
+        <Box w="full">{getAuthComponent(variant)}</Box>
+      </VStack>
+    );
+  }
+);
 export default AuthSwitch;
diff --git a/frontend/src/components/TestEditor/requestEditor.tsx b/frontend/src/components/TestEditor/requestEditor.tsx
@@ -125,16 +125,11 @@ const RequestEditor: React.FC<RequestEditorProps> = React.memo(
                     />
                   </TabPanel>
                   <TabPanel p="0" h="full">
-                    <Box p={4}>
+                    <Box p="4">
                       <AuthSwitch
                         variant={authType}
                         setVariant={setAuthType}
-                        request={request}
-                        setRequest={(updatedReq) => {
-                          updateRequest((req) => {
-                            return { ...req, ...updatedReq };
-                          });
-                        }}
+                        setRequest={updateRequest}
                       />
                     </Box>
                   </TabPanel>