make the app wider, and submit the form right away if there are valid…

… url params
krystal · Mar 14, 2022 · a6a8ee3 · a6a8ee3
1 parent 3a624ae
commit a6a8ee3
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 40 deletions.
diff --git a/frontend/src/app/app.tsx b/frontend/src/app/app.tsx
@@ -25,7 +25,7 @@ const App: FC = () => {
       <ChakraProvider theme={appTheme}>
         <Header />
 
-        <Container maxW="container.lg" py={{ base: 6, md: 8 }}>
+        <Container maxW="container.xl" py={{ base: 6, md: 8 }}>
           <Grid
             templateColumns={{
               base: "1fr",

diff --git a/frontend/src/common/code/code.tsx b/frontend/src/common/code/code.tsx
@@ -8,7 +8,7 @@ import {
   Tooltip,
 } from "@chakra-ui/react";
 import { FC } from "react";
-import { FaClipboard } from "react-icons/fa";
+import { IoCopy } from "react-icons/io5";
 import { useClipboard } from "../../hooks/use-clipboard";
 
 type CodeProps = {
@@ -63,7 +63,7 @@ const Code: FC<CodeProps & BoxProps> = ({
                 size="xs"
                 fontFamily="sans-serif"
                 onClick={copyToClipboard}
-                icon={<Icon h={2} w={2} color="white" as={FaClipboard} />}
+                icon={<Icon h={3} w={3} color="white" as={IoCopy} />}
                 aria-label="copy"
                 h={4}
               />

diff --git a/frontend/src/common/form/form.tsx b/frontend/src/common/form/form.tsx
@@ -13,26 +13,44 @@ const Form: FormComponent = ({
   render,
   ...props
 }) => {
+  // handleSubmit is a closure around the form submission function
+  let handleSubmit: () => void;
+
   const [initialValues, setInitialValues] = useState(initialVals || {});
 
   // Check if the initial values can be added from the URL search params
   // We only want this to run on mount
   useEffect(() => {
-    setInitialValues(
-      Object.entries(initialValues).reduce((values, [name, val]) => {
-        const params = new URLSearchParams(window.location.search);
+    if (window.location.search) {
+      const params = new URLSearchParams(window.location.search);
 
-        let param: string | boolean | null = params.get(name);
-        if (param === "false") param = false;
-        if (param === "true") param = true;
+      setInitialValues(
+        Object.entries(initialValues).reduce((values, [name, val]) => {
+          let param: string | boolean | null = params.get(name);
+          if (param === "false") param = false;
+          if (param === "true") param = true;
 
-        const value = param === null ? val : param;
+          const value = param === null ? val : param;
 
-        return { ...values, [name]: value };
-      }, {})
-    );
+          return { ...values, [name]: value };
+        }, {})
+      );
+    }
   }, []); // eslint-disable-line
 
+  // When the initial values are set check if they are valid
+  // if they are then submit the form right away.
+  useEffect(() => {
+    if (initialValues !== initialVals) {
+      try {
+        schema.parse(initialValues);
+        if (handleSubmit) handleSubmit();
+      } catch (err) {
+        // Do nothing.
+      }
+    }
+  }, [initialValues]); // eslint-disable-line
+
   return (
     <FinalForm
       keepDirtyOnReinitialize
@@ -42,6 +60,7 @@ const Form: FormComponent = ({
         try {
           await onSubmit(...args);
           const values = new URLSearchParams(args[0]);
+
           // On a successful commit, add the form values to the search params
           window.history.pushState(
             {},
@@ -61,24 +80,28 @@ const Form: FormComponent = ({
           };
         }
       }}
-      render={(form) => (
-        <form onSubmit={form.handleSubmit} {...props}>
-          <Stack spacing={6}>
-            {form.submitError && (
-              <Alert status="error" variant="solid" borderRadius="sm">
-                <Box flex="1">
-                  <AlertTitle>
-                    There was a problem submitting the form
-                  </AlertTitle>
-                  {form.submitError}
-                </Box>
-              </Alert>
-            )}
+      render={(form) => {
+        handleSubmit = form.handleSubmit;
+
+        return (
+          <form onSubmit={form.handleSubmit} {...props}>
+            <Stack spacing={6}>
+              {form.submitError && (
+                <Alert status="error" variant="solid" borderRadius="sm">
+                  <Box flex="1">
+                    <AlertTitle>
+                      There was a problem submitting the form
+                    </AlertTitle>
+                    {form.submitError}
+                  </Box>
+                </Alert>
+              )}
 
-            {render(form)}
-          </Stack>
-        </form>
-      )}
+              {render(form)}
+            </Stack>
+          </form>
+        );
+      }}
     />
   );
 };

diff --git a/frontend/src/common/header/header.tsx b/frontend/src/common/header/header.tsx
@@ -48,7 +48,7 @@ const Header: FC = () => {
     >
       <HeaderDrawer isOpen={menuIsOpen} onClose={() => setMenuIsOpen(false)} />
 
-      <Container maxW="container.lg">
+      <Container maxW="container.xl">
         <Grid templateColumns={{ base: "1fr 1fr" }} alignItems="center" gap={3}>
           <GridItem>
             <HStack spacing={3}>

diff --git a/frontend/src/pages/bgp-route/bgp-route.view.tsx b/frontend/src/pages/bgp-route/bgp-route.view.tsx
@@ -47,33 +47,33 @@ const BgpRoute: FC = () => {
               <Table size="sm">
                 <Tr>
                   <Th>Next hop</Th>
-                  <Td colspan={2}>
+                  <Td colSpan={2}>
                     <Code>{item.next_hop}</Code>
                   </Td>
                 </Tr>
                 <Tr>
                   <Th>As path</Th>
-                  <Td colspan={2}>
+                  <Td colSpan={2}>
                     <Code>{item.as_path?.join(", ")}</Code>
                   </Td>
                 </Tr>
                 <Tr>
                   <Th>Community</Th>
-                  <Td colspan={2}>
+                  <Td colSpan={2}>
                     <Code>{item.community?.join(" - ")}</Code>
                   </Td>
                 </Tr>
                 {!!item.large_community && (
                   <Tr>
                     <Th>Large community</Th>
-                    <Td colspan={2}>
+                    <Td colSpan={2}>
                       <Code>{item.large_community?.join(" - ")}</Code>
                     </Td>
                   </Tr>
                 )}
                 <Tr>
                   <Th>Local pref</Th>
-                  <Td colspan={2}>
+                  <Td colSpan={2}>
                     <Code>{item.local_pref}</Code>
                   </Td>
                 </Tr>

diff --git a/frontend/src/pages/dns/dns-table.tsx b/frontend/src/pages/dns/dns-table.tsx
@@ -1,4 +1,4 @@
-import { FC, useMemo } from "react";
+import { FC, Fragment, useMemo } from "react";
 
 import {
   Button,
@@ -147,9 +147,9 @@ const DnsTable: FC<DnsTableProps> = ({ record }) => {
 
       <Tbody>
         {record.map(({ server, records }) => (
-          <>
+          <Fragment key={server}>
             <Tr>
-              <Td colspan={showPriority ? 7 : 6} py={1} px={0} border="none">
+              <Td colSpan={showPriority ? 7 : 6} py={1} px={0} border="none">
                 <Box
                   py={3}
                   px={5}
@@ -168,7 +168,7 @@ const DnsTable: FC<DnsTableProps> = ({ record }) => {
             {records.map((row, index) => (
               <DnsTableRow key={index} row={row} showPriority={showPriority} />
             ))}
-          </>
+          </Fragment>
         ))}
       </Tbody>
     </Table>