Skip to content

Commit

Permalink
Merge pull request #38 from krystal/wider-and-form-submissions
Browse files Browse the repository at this point in the history
Submit the form right away if there are valid URL params
  • Loading branch information
benhoneywill authored Mar 14, 2022
2 parents fc033fd + a6a8ee3 commit d739aa8
Show file tree
Hide file tree
Showing 6 changed files with 63 additions and 40 deletions.
2 changes: 1 addition & 1 deletion frontend/src/app/app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/common/code/code.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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}
/>
Expand Down
77 changes: 50 additions & 27 deletions frontend/src/common/form/form.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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(
{},
Expand All @@ -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>
);
}}
/>
);
};
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/common/header/header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand Down
10 changes: 5 additions & 5 deletions frontend/src/pages/bgp-route/bgp-route.view.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/pages/dns/dns-table.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { FC, useMemo } from "react";
import { FC, Fragment, useMemo } from "react";

import {
Button,
Expand Down Expand Up @@ -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}
Expand All @@ -168,7 +168,7 @@ const DnsTable: FC<DnsTableProps> = ({ record }) => {
{records.map((row, index) => (
<DnsTableRow key={index} row={row} showPriority={showPriority} />
))}
</>
</Fragment>
))}
</Tbody>
</Table>
Expand Down

0 comments on commit d739aa8

Please sign in to comment.