From b177ca1ba5b8fe1f0861f7e388caaae1afdae44f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Fri, 29 Sep 2023 11:50:06 +0100
Subject: [PATCH] fix: Linting

---
 .../components/DrawBoundary/Public/index.tsx  |  22 +--
 .../FileUploadAndLabel/Editor.test.tsx        |   2 +-
 .../components/FileUploadAndLabel/Modal.tsx   |   6 +-
 .../classifiedRoadsNegativeResponseMock.ts    |   2 +-
 .../mocks/classifiedRoadsResponseMock.ts      |   2 +-
 .../src/@planx/components/Section/Editor.tsx  |   5 +-
 .../@planx/components/Section/Public.test.tsx |  14 +-
 .../src/@planx/components/Section/Public.tsx  |  45 ++++---
 editor.planx.uk/src/client/index.ts           |   4 +-
 .../src/components/Header.test.tsx            |   4 +-
 editor.planx.uk/src/components/Header.tsx     | 127 +++++++++---------
 .../components/Flow/components/Hanger.tsx     |   5 +-
 .../components/Settings/DesignSettings.tsx    |   2 +-
 .../components/Settings/ServiceFlags.tsx      |   2 +-
 .../src/pages/FlowEditor/lib/store/editor.ts  |   4 +-
 .../src/pages/FlowEditor/lib/store/user.ts    |   7 +-
 editor.planx.uk/src/ui/ImgInput.tsx           |   2 +-
 editor.planx.uk/src/ui/ListManager.tsx        |   2 +-
 18 files changed, 143 insertions(+), 114 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/DrawBoundary/Public/index.tsx b/editor.planx.uk/src/@planx/components/DrawBoundary/Public/index.tsx
index 0d3f450282..7850e0bf32 100644
--- a/editor.planx.uk/src/@planx/components/DrawBoundary/Public/index.tsx
+++ b/editor.planx.uk/src/@planx/components/DrawBoundary/Public/index.tsx
@@ -12,7 +12,7 @@ import QuestionHeader from "@planx/components/shared/Preview/QuestionHeader";
 import { PrivateFileUpload } from "@planx/components/shared/PrivateFileUpload/PrivateFileUpload";
 import type { PublicProps } from "@planx/components/ui";
 import buffer from "@turf/buffer";
-import { type GeometryObject,point } from "@turf/helpers";
+import { type GeometryObject, point } from "@turf/helpers";
 import { Store, useStore } from "pages/FlowEditor/lib/store";
 import React, { useEffect, useRef, useState } from "react";
 import { FONT_WEIGHT_SEMI_BOLD } from "theme";
@@ -42,10 +42,13 @@ export default function Component(props: Props) {
   const [boundary, setBoundary] = useState<Boundary>(previousBoundary);
   const [slots, setSlots] = useState<FileUploadSlot[]>(previousFile ?? []);
   const [area, setArea] = useState<number | undefined>(previousArea);
-  const addressPoint = passport?.data?._address?.longitude && passport?.data?._address?.latitude && point([
-    Number(passport?.data?._address?.longitude),
-    Number(passport?.data?._address?.latitude),
-  ]);
+  const addressPoint =
+    passport?.data?._address?.longitude &&
+    passport?.data?._address?.latitude &&
+    point([
+      Number(passport?.data?._address?.longitude),
+      Number(passport?.data?._address?.latitude),
+    ]);
   const environment = useStore((state) => state.previewEnvironment);
 
   useEffect(() => {
@@ -120,9 +123,12 @@ export default function Component(props: Props) {
                 drawMode
                 drawPointer="crosshair"
                 drawGeojsonData={JSON.stringify(boundary)}
-                clipGeojsonData={addressPoint && JSON.stringify(
-                  buffer(addressPoint, BUFFER_IN_METERS, { units: "meters" }),
-                )}
+                clipGeojsonData={
+                  addressPoint &&
+                  JSON.stringify(
+                    buffer(addressPoint, BUFFER_IN_METERS, { units: "meters" }),
+                  )
+                }
                 zoom={20}
                 maxZoom={23}
                 latitude={Number(passport?.data?._address?.latitude)}
diff --git a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Editor.test.tsx b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Editor.test.tsx
index c14b559f7c..4b8d71140a 100644
--- a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Editor.test.tsx
+++ b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Editor.test.tsx
@@ -1,11 +1,11 @@
 import { screen } from "@testing-library/react";
+import { vanillaStore } from "pages/FlowEditor/lib/store";
 import React from "react";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import { setup } from "testUtils";
 
 import FileUploadAndLabelComponent from "./Editor";
-import { vanillaStore } from "pages/FlowEditor/lib/store";
 
 const { getState } = vanillaStore;
 
diff --git a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Modal.tsx b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Modal.tsx
index e6008a3f90..5e6ddedd4b 100644
--- a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Modal.tsx
+++ b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Modal.tsx
@@ -285,7 +285,11 @@ const SelectMultiple = (props: SelectMultipleProps) => {
             <Typography variant="h4" component="h3" pr={3}>
               Select all labels that apply
             </Typography>
-            <Button variant="contained" onClick={handleClose} aria-label="Close list">
+            <Button
+              variant="contained"
+              onClick={handleClose}
+              aria-label="Close list"
+            >
               Done
             </Button>
           </ListHeader>
diff --git a/editor.planx.uk/src/@planx/components/PlanningConstraints/mocks/classifiedRoadsNegativeResponseMock.ts b/editor.planx.uk/src/@planx/components/PlanningConstraints/mocks/classifiedRoadsNegativeResponseMock.ts
index 4a51847ec0..6a18b0aac0 100644
--- a/editor.planx.uk/src/@planx/components/PlanningConstraints/mocks/classifiedRoadsNegativeResponseMock.ts
+++ b/editor.planx.uk/src/@planx/components/PlanningConstraints/mocks/classifiedRoadsNegativeResponseMock.ts
@@ -7,7 +7,7 @@ export default {
     "road.classified": {
       name: "Classified road",
       plural: "Classified roads",
-      text: "This will effect your project if you are looking to add a dropped kerb. It may also impact some agricultural or forestry projects within 25 metres of a classified road."
+      text: "This will effect your project if you are looking to add a dropped kerb. It may also impact some agricultural or forestry projects within 25 metres of a classified road.",
     },
   },
   constraints: {
diff --git a/editor.planx.uk/src/@planx/components/PlanningConstraints/mocks/classifiedRoadsResponseMock.ts b/editor.planx.uk/src/@planx/components/PlanningConstraints/mocks/classifiedRoadsResponseMock.ts
index 8296d32838..155d3c782d 100644
--- a/editor.planx.uk/src/@planx/components/PlanningConstraints/mocks/classifiedRoadsResponseMock.ts
+++ b/editor.planx.uk/src/@planx/components/PlanningConstraints/mocks/classifiedRoadsResponseMock.ts
@@ -7,7 +7,7 @@ export default {
     "road.classified": {
       name: "Classified road",
       plural: "Classified roads",
-      text: "This will effect your project if you are looking to add a dropped kerb. It may also impact some agricultural or forestry projects within 25 metres of a classified road."
+      text: "This will effect your project if you are looking to add a dropped kerb. It may also impact some agricultural or forestry projects within 25 metres of a classified road.",
     },
   },
   constraints: {
diff --git a/editor.planx.uk/src/@planx/components/Section/Editor.tsx b/editor.planx.uk/src/@planx/components/Section/Editor.tsx
index da6e3d4ee0..f0f5c13334 100644
--- a/editor.planx.uk/src/@planx/components/Section/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/Section/Editor.tsx
@@ -28,10 +28,7 @@ function SectionComponent(props: Props) {
   return (
     <form onSubmit={formik.handleSubmit} id="modal">
       <ModalSection>
-        <ModalSectionContent
-          title="Section marker"
-          Icon={ICONS[TYPES.Section]}
-        >
+        <ModalSectionContent title="Section marker" Icon={ICONS[TYPES.Section]}>
           <InputRow>
             <Input
               required
diff --git a/editor.planx.uk/src/@planx/components/Section/Public.test.tsx b/editor.planx.uk/src/@planx/components/Section/Public.test.tsx
index 7cb1c0b513..d79ee45280 100644
--- a/editor.planx.uk/src/@planx/components/Section/Public.test.tsx
+++ b/editor.planx.uk/src/@planx/components/Section/Public.test.tsx
@@ -8,7 +8,13 @@ import Section, { SectionsOverviewList } from "./Public";
 describe("Section component", () => {
   it("renders correctly", () => {
     const handleSubmit = jest.fn();
-    setup(<Section title="Section one" description="Description of section one" handleSubmit={handleSubmit} />);
+    setup(
+      <Section
+        title="Section one"
+        description="Description of section one"
+        handleSubmit={handleSubmit}
+      />,
+    );
 
     expect(screen.getByText("Application incomplete.")).toBeInTheDocument();
     expect(screen.getByText("Continue")).toBeInTheDocument();
@@ -19,7 +25,11 @@ describe("Section component", () => {
     const handleSubmit = jest.fn();
 
     const { container } = setup(
-      <Section title="Section one" description="Description of section one" handleSubmit={handleSubmit} />,
+      <Section
+        title="Section one"
+        description="Description of section one"
+        handleSubmit={handleSubmit}
+      />,
     );
 
     const results = await axe(container);
diff --git a/editor.planx.uk/src/@planx/components/Section/Public.tsx b/editor.planx.uk/src/@planx/components/Section/Public.tsx
index 3772a5e5d6..e1075ddb00 100644
--- a/editor.planx.uk/src/@planx/components/Section/Public.tsx
+++ b/editor.planx.uk/src/@planx/components/Section/Public.tsx
@@ -169,26 +169,33 @@ export function SectionsOverviewList({
     <DescriptionList>
       {Object.entries(sectionNodes).map(([sectionId, sectionNode]) => (
         <SectionRow key={sectionId}>
-            <SectionTitle>
-              {showChange &&
-              sectionStatuses[sectionId] === SectionStatus.Completed ? (
-                <Link
-                  onClick={() => changeFirstAnswerInSection(sectionId)}
-                  component="button"
+          <SectionTitle>
+            {showChange &&
+            sectionStatuses[sectionId] === SectionStatus.Completed ? (
+              <Link
+                onClick={() => changeFirstAnswerInSection(sectionId)}
+                component="button"
+              >
+                <Typography
+                  variant="subtitle1"
+                  component="h4"
+                  color="primary"
+                  align="left"
                 >
-                  <Typography variant="subtitle1" component="h4" color="primary" align="left">
-                    <span style={visuallyHidden}>{`Change `}</span>
-                    <strong>{sectionNode.data.title}</strong>
-                  </Typography>
-                </Link>
-              ) : (
-                <Typography variant="subtitle1" component="h4" color="inherit"><strong>{sectionNode.data.title}</strong></Typography>           
-              )}
-              <ReactMarkdownOrHtml
-                source={sectionNode.data.description}
-                openLinksOnNewTab
-              />   
-            </SectionTitle>
+                  <span style={visuallyHidden}>{`Change `}</span>
+                  <strong>{sectionNode.data.title}</strong>
+                </Typography>
+              </Link>
+            ) : (
+              <Typography variant="subtitle1" component="h4" color="inherit">
+                <strong>{sectionNode.data.title}</strong>
+              </Typography>
+            )}
+            <ReactMarkdownOrHtml
+              source={sectionNode.data.description}
+              openLinksOnNewTab
+            />
+          </SectionTitle>
           <SectionState> {getTag(sectionStatuses[sectionId])} </SectionState>
         </SectionRow>
       ))}
diff --git a/editor.planx.uk/src/client/index.ts b/editor.planx.uk/src/client/index.ts
index 263f8ca1d3..9f40abd271 100644
--- a/editor.planx.uk/src/client/index.ts
+++ b/editor.planx.uk/src/client/index.ts
@@ -10,5 +10,5 @@ export const _public = new CoreDomainClient({
 
 export const _client = new CoreDomainClient({
   targetURL: process.env.REACT_APP_HASURA_URL!,
-  auth: { jwt: getCookie("jwt") || "" }
-})
+  auth: { jwt: getCookie("jwt") || "" },
+});
diff --git a/editor.planx.uk/src/components/Header.test.tsx b/editor.planx.uk/src/components/Header.test.tsx
index 7dbfe95e10..d190f5f5eb 100644
--- a/editor.planx.uk/src/components/Header.test.tsx
+++ b/editor.planx.uk/src/components/Header.test.tsx
@@ -49,8 +49,8 @@ describe("Header Component - Editor Route", () => {
           isPlatformAdmin: false,
           teams: [],
           id: 123,
-          email: "test@example.com"
-        }
+          email: "test@example.com",
+        },
       }),
     );
 
diff --git a/editor.planx.uk/src/components/Header.tsx b/editor.planx.uk/src/components/Header.tsx
index ef339f7961..700732c6cc 100644
--- a/editor.planx.uk/src/components/Header.tsx
+++ b/editor.planx.uk/src/components/Header.tsx
@@ -393,7 +393,7 @@ const EditorToolbar: React.FC<{
   route: Route;
 }> = ({ headerRef, route }) => {
   const [open, setOpen] = useState(false);
-  const [ togglePreview, user ] = useStore((state) => [
+  const [togglePreview, user] = useStore((state) => [
     state.togglePreview,
     state.getUser(),
   ]);
@@ -452,72 +452,73 @@ const EditorToolbar: React.FC<{
           </InnerContainer>
         </Container>
       </StyledToolbar>
-      { user && 
-      <StyledPopover
-        open={open}
-        anchorEl={headerRef.current}
-        onClose={handleClose}
-        anchorOrigin={{
-          vertical: "bottom",
-          horizontal: "right",
-        }}
-        transformOrigin={{
-          vertical: "top",
-          horizontal: "right",
-        }}
-      >
-        <StyledPaper>
-          <MenuItem disabled>
-            <ListItemIcon>
-              <Person fontSize="small" />
-            </ListItemIcon>
-            <ListItemText>
-              {user.email}
-            </ListItemText>
-          </MenuItem>
-          {(user.isPlatformAdmin || user.teams.length > 0) && (
+      {user && (
+        <StyledPopover
+          open={open}
+          anchorEl={headerRef.current}
+          onClose={handleClose}
+          anchorOrigin={{
+            vertical: "bottom",
+            horizontal: "right",
+          }}
+          transformOrigin={{
+            vertical: "top",
+            horizontal: "right",
+          }}
+        >
+          <StyledPaper>
             <MenuItem disabled>
               <ListItemIcon>
-                <Edit />
+                <Person fontSize="small" />
               </ListItemIcon>
-              <ListItemText>
-                {user.isPlatformAdmin ? `All teams` : user.teams.map((team) => team.team.name).concat(["Templates"]).join(", ")}
-              </ListItemText>
-            </MenuItem>
-          )}
-          {!user.isPlatformAdmin && (
-            <MenuItem disabled divider>
-              <ListItemIcon>
-                <Visibility />
-              </ListItemIcon>
-              <ListItemText>
-                All teams
-              </ListItemText>
-            </MenuItem>
-          )}
-          
-          {/* only show flow settings link if inside a flow route  */}
-          {route.data.flow && (
-            <MenuItem
-              onClick={() =>
-                handleClick([rootFlowPath(true), "settings"].join("/"))
-              }
-            >
-              Settings
+              <ListItemText>{user.email}</ListItemText>
             </MenuItem>
-          )}
-
-          {/* Only show global settings link from top-level admin view */}
-          {!route.data.flow && !route.data.team && (
-            <MenuItem onClick={() => navigate("/global-settings")}>
-              Global Settings
-            </MenuItem>
-          )}
-
-          <MenuItem onClick={() => navigate("/logout")}>Log out</MenuItem>
-        </StyledPaper>
-      </StyledPopover>
-      }
+            {(user.isPlatformAdmin || user.teams.length > 0) && (
+              <MenuItem disabled>
+                <ListItemIcon>
+                  <Edit />
+                </ListItemIcon>
+                <ListItemText>
+                  {user.isPlatformAdmin
+                    ? `All teams`
+                    : user.teams
+                        .map((team) => team.team.name)
+                        .concat(["Templates"])
+                        .join(", ")}
+                </ListItemText>
+              </MenuItem>
+            )}
+            {!user.isPlatformAdmin && (
+              <MenuItem disabled divider>
+                <ListItemIcon>
+                  <Visibility />
+                </ListItemIcon>
+                <ListItemText>All teams</ListItemText>
+              </MenuItem>
+            )}
+
+            {/* only show flow settings link if inside a flow route  */}
+            {route.data.flow && (
+              <MenuItem
+                onClick={() =>
+                  handleClick([rootFlowPath(true), "settings"].join("/"))
+                }
+              >
+                Settings
+              </MenuItem>
+            )}
+
+            {/* Only show global settings link from top-level admin view */}
+            {!route.data.flow && !route.data.team && (
+              <MenuItem onClick={() => navigate("/global-settings")}>
+                Global Settings
+              </MenuItem>
+            )}
+
+            <MenuItem onClick={() => navigate("/logout")}>Log out</MenuItem>
+          </StyledPaper>
+        </StyledPopover>
+      )}
     </>
   );
 };
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Hanger.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Hanger.tsx
index 3c6d3c9fc6..a7578b170a 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Hanger.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Hanger.tsx
@@ -59,7 +59,10 @@ const Hanger: React.FC<HangerProps> = ({ before, parent, hidden = false }) => {
   };
 
   return (
-    <li className={classnames("hanger", { hidden: hidden || hideHangerFromUser })} ref={drop}>
+    <li
+      className={classnames("hanger", { hidden: hidden || hideHangerFromUser })}
+      ref={drop}
+    >
       <Link
         href={buildHref(before, parent)}
         prefetch={false}
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings.tsx
index 59121d6711..e22d05a20a 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings.tsx
@@ -20,4 +20,4 @@ const DesignSettings: React.FC = () => {
     </>
   );
 };
-export default DesignSettings;
\ No newline at end of file
+export default DesignSettings;
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceFlags.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceFlags.tsx
index ef2632180e..c96cf4594d 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceFlags.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceFlags.tsx
@@ -21,4 +21,4 @@ const ServiceFlags: React.FC = () => {
     </>
   );
 };
-export default ServiceFlags;
\ No newline at end of file
+export default ServiceFlags;
diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts b/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts
index bd75ea0b84..c642a57f31 100644
--- a/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts
+++ b/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts
@@ -336,7 +336,9 @@ export const editorStore: StateCreator<
   moveFlow(flowId: string, teamSlug: string) {
     const valid = get().canUserEditTeam(teamSlug);
     if (!valid) {
-      alert(`You do not have permission to move this flow into ${teamSlug}, try again`);
+      alert(
+        `You do not have permission to move this flow into ${teamSlug}, try again`,
+      );
       return Promise.resolve();
     }
 
diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/store/user.ts b/editor.planx.uk/src/pages/FlowEditor/lib/store/user.ts
index 6e55c0ea92..e1ddf7c521 100644
--- a/editor.planx.uk/src/pages/FlowEditor/lib/store/user.ts
+++ b/editor.planx.uk/src/pages/FlowEditor/lib/store/user.ts
@@ -5,7 +5,7 @@ import { Team } from "types";
 import type { StateCreator } from "zustand";
 
 export interface UserStore {
-  user?: User
+  user?: User;
 
   setUser: (user: User) => void;
   getUser: () => User | undefined;
@@ -17,7 +17,6 @@ export const userStore: StateCreator<UserStore, [], [], UserStore> = (
   set,
   get,
 ) => ({
-
   setUser: (user: User) => set({ user }),
 
   getUser: () => get().user,
@@ -25,11 +24,11 @@ export const userStore: StateCreator<UserStore, [], [], UserStore> = (
   canUserEditTeam(teamSlug) {
     const user = this.getUser();
     if (!user) return false;
-    
+
     return (
       user.isPlatformAdmin ||
       teamSlug === "templates" ||
-        user.teams.filter(
+      user.teams.filter(
         (team) => team.role === "teamEditor" && team.team.slug === teamSlug,
       ).length > 0
     );
diff --git a/editor.planx.uk/src/ui/ImgInput.tsx b/editor.planx.uk/src/ui/ImgInput.tsx
index 2c5ab9ce7f..5cd4a37160 100644
--- a/editor.planx.uk/src/ui/ImgInput.tsx
+++ b/editor.planx.uk/src/ui/ImgInput.tsx
@@ -5,10 +5,10 @@ import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
 import { styled } from "@mui/material/styles";
 import Tooltip from "@mui/material/Tooltip";
+import { useStore } from "pages/FlowEditor/lib/store";
 import React, { useMemo, useState } from "react";
 
 import PublicFileUploadButton from "./PublicFileUploadButton";
-import { useStore } from "pages/FlowEditor/lib/store";
 
 const ImageUploadContainer = styled(Box)(() => ({
   height: 50,
diff --git a/editor.planx.uk/src/ui/ListManager.tsx b/editor.planx.uk/src/ui/ListManager.tsx
index 97d0a3e74f..c9ca09eddf 100644
--- a/editor.planx.uk/src/ui/ListManager.tsx
+++ b/editor.planx.uk/src/ui/ListManager.tsx
@@ -5,6 +5,7 @@ import Button from "@mui/material/Button";
 import IconButton from "@mui/material/IconButton";
 import { styled } from "@mui/material/styles";
 import { arrayMoveImmutable } from "array-move";
+import { useStore } from "pages/FlowEditor/lib/store";
 import React, { useRef } from "react";
 import {
   DragDropContext,
@@ -16,7 +17,6 @@ import {
 } from "react-beautiful-dnd";
 
 import { removeAt, setAt } from "../utils";
-import { useStore } from "pages/FlowEditor/lib/store";
 
 export interface EditorProps<T> {
   index?: number;