refactor(download): split the DownloadForm component into more compon…

…ents * fix: fixed the layout falling apart with widths between 900px and 970px * refactor: created a custom Divider to avoid repeating the same style multiple times * refactor: moved the pure info stuff from the DownloadForm to a separate component * refactor: moved the Panel and Title components to a separate file
istex · Aug 17, 2023 · b50c76a · b50c76a
1 parent 761905d
commit b50c76a
Show file tree

Hide file tree

Showing 2 changed files with 118 additions and 91 deletions.
diff --git a/src/app/[locale]/download/components/DownloadForm.tsx b/src/app/[locale]/download/components/DownloadForm.tsx
@@ -2,29 +2,20 @@
 
 import { useTranslations } from "next-intl";
 import { redirect } from "next-intl/server";
-import { Divider, Grid, Link, Paper, Typography } from "@mui/material";
-import type { PaperProps } from "@mui/material/Paper";
-import type { TypographyProps } from "@mui/material/Typography";
+import { Divider as MuiDivider, Grid, Paper, Typography } from "@mui/material";
+import { styled } from "@mui/material/styles";
 import DownloadButton from "./DownloadButton";
 import FormatPicker from "./FormatPicker";
+import InfoPanels from "./InfoPanels";
 import UsageSelector from "./UsageSelector";
-import { usages } from "@/config";
-import { buildResultPreviewUrl } from "@/lib/istexApi";
 import useSearchParams from "@/lib/useSearchParams";
-import { lineclamp } from "@/lib/utils";
 import type { ClientComponent } from "@/types/next";
 
 const DownloadForm: ClientComponent = () => {
   const t = useTranslations("download");
-  const tUsages = useTranslations("config.usages");
   const searchParams = useSearchParams();
   const queryString = searchParams.getQueryString();
-  const currentUsageName = searchParams.getUsageName();
-  const currentUsage = usages[currentUsageName];
   const size = searchParams.getSize();
-  const resultsApiUrl = buildResultPreviewUrl({
-    queryString,
-  }).toString();
 
   if (queryString === "" || size === 0) {
     redirect("/");
@@ -36,96 +27,29 @@ const DownloadForm: ClientComponent = () => {
         {t("title")}
       </Typography>
       <Grid container spacing={2}>
-        <Grid item xs={12} md>
-          <Panel>
+        <Grid item xs={12} md={8}>
+          <Paper elevation={0} sx={{ p: 2 }}>
             <UsageSelector />
-            <Divider sx={{ mt: 2, mb: 1 }} />
+            <Divider />
             <FormatPicker />
-            <Divider sx={{ mt: 1, mb: 2 }} />
+            <Divider />
             <DownloadButton />
-          </Panel>
+          </Paper>
         </Grid>
 
         <Grid item xs={12} md={4} container spacing={2} direction="column">
-          <Grid item>
-            <Panel>
-              <Title>{tUsages(`${currentUsageName}.label`)}</Title>
-              <Typography
-                data-testid={`${currentUsageName}-usage-description`}
-                variant="body2"
-                gutterBottom
-              >
-                {tUsages.rich(`${currentUsageName}.description`, {
-                  strong: (chunks) => <strong>{chunks}</strong>,
-                })}
-              </Typography>
-              <Link
-                href={currentUsage.url}
-                target="_blank"
-                rel="noreferrer"
-                sx={(theme) => ({
-                  fontSize: theme.typography.body2.fontSize,
-                  fontWeight: "bold",
-                })}
-              >
-                {t("seeMoreLink")}
-              </Link>
-            </Panel>
-          </Grid>
-
-          <Grid item>
-            <Panel>
-              <Title>{t("yourQueryTitle")}</Title>
-              <Panel sx={{ bgcolor: "colors.white", p: 2, mb: 2 }}>
-                <Typography
-                  data-testid="query-string"
-                  variant="body2"
-                  sx={{ ...lineclamp(6), wordBreak: "break-word" }}
-                >
-                  {queryString}
-                </Typography>
-              </Panel>
-
-              <Title>{t("rawRequestTitle")}</Title>
-              <Panel sx={{ bgcolor: "colors.white", p: 2 }}>
-                <Typography
-                  data-testid="raw-request"
-                  variant="body2"
-                  component={Link}
-                  href={resultsApiUrl}
-                  target="_blank"
-                  rel="noreferrer"
-                  sx={{ ...lineclamp(4), wordBreak: "break-word" }}
-                >
-                  {resultsApiUrl}
-                </Typography>
-              </Panel>
-            </Panel>
-          </Grid>
+          <InfoPanels />
         </Grid>
       </Grid>
     </>
   );
 };
 
-const Title: ClientComponent<
-  Omit<
-    TypographyProps & { component?: React.ElementType },
-    "variant" | "gutterBottom" | "color" | "fontSize"
-  >
-> = (props) => (
-  <Typography
-    component="h2"
-    variant="h6"
-    gutterBottom
-    color="primary"
-    fontSize="0.875rem"
-    {...props}
-  />
-);
-
-const Panel: ClientComponent<Omit<PaperProps, "elevation">> = (props) => (
-  <Paper elevation={0} sx={{ p: 2 }} {...props} />
-);
+const Divider = styled(MuiDivider)(({ theme }) => ({
+  "&.MuiDivider-root": {
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(2),
+  },
+}));
 
 export default DownloadForm;
diff --git a/src/app/[locale]/download/components/InfoPanels.tsx b/src/app/[locale]/download/components/InfoPanels.tsx
@@ -0,0 +1,103 @@
+import { useTranslations } from "next-intl";
+import { Grid, Link, Paper, Typography } from "@mui/material";
+import type { PaperProps } from "@mui/material/Paper";
+import type { TypographyProps } from "@mui/material/Typography";
+import { usages } from "@/config";
+import { buildResultPreviewUrl } from "@/lib/istexApi";
+import useSearchParams from "@/lib/useSearchParams";
+import { lineclamp } from "@/lib/utils";
+import type { ClientComponent } from "@/types/next";
+
+const InfoPanels: ClientComponent = () => {
+  const t = useTranslations("download");
+  const tUsages = useTranslations("config.usages");
+  const searchParams = useSearchParams();
+  const queryString = searchParams.getQueryString();
+  const currentUsageName = searchParams.getUsageName();
+  const currentUsage = usages[currentUsageName];
+  const resultsApiUrl = buildResultPreviewUrl({
+    queryString,
+  }).toString();
+
+  return (
+    <>
+      <Grid item>
+        <Panel>
+          <Title>{tUsages(`${currentUsageName}.label`)}</Title>
+          <Typography
+            data-testid={`${currentUsageName}-usage-description`}
+            variant="body2"
+            gutterBottom
+          >
+            {tUsages.rich(`${currentUsageName}.description`, {
+              strong: (chunks) => <strong>{chunks}</strong>,
+            })}
+          </Typography>
+          <Link
+            href={currentUsage.url}
+            target="_blank"
+            rel="noreferrer"
+            sx={(theme) => ({
+              fontSize: theme.typography.body2.fontSize,
+              fontWeight: "bold",
+            })}
+          >
+            {t("seeMoreLink")}
+          </Link>
+        </Panel>
+      </Grid>
+
+      <Grid item>
+        <Panel>
+          <Title>{t("yourQueryTitle")}</Title>
+          <Panel sx={{ bgcolor: "colors.white", p: 2, mb: 2 }}>
+            <Typography
+              data-testid="query-string"
+              variant="body2"
+              sx={{ ...lineclamp(6), wordBreak: "break-word" }}
+            >
+              {queryString}
+            </Typography>
+          </Panel>
+
+          <Title>{t("rawRequestTitle")}</Title>
+          <Panel sx={{ bgcolor: "colors.white", p: 2 }}>
+            <Typography
+              data-testid="raw-request"
+              variant="body2"
+              component={Link}
+              href={resultsApiUrl}
+              target="_blank"
+              rel="noreferrer"
+              sx={{ ...lineclamp(4), wordBreak: "break-word" }}
+            >
+              {resultsApiUrl}
+            </Typography>
+          </Panel>
+        </Panel>
+      </Grid>
+    </>
+  );
+};
+
+const Title: ClientComponent<
+  Omit<
+    TypographyProps & { component?: React.ElementType },
+    "variant" | "gutterBottom" | "color" | "fontSize"
+  >
+> = (props) => (
+  <Typography
+    component="h2"
+    variant="h6"
+    gutterBottom
+    color="primary"
+    fontSize="0.875rem"
+    {...props}
+  />
+);
+
+const Panel: ClientComponent<Omit<PaperProps, "elevation">> = (props) => (
+  <Paper elevation={0} sx={{ p: 2 }} {...props} />
+);
+
+export default InfoPanels;