From b1476476fe5295667f8fb776801b3c1463d2b06e Mon Sep 17 00:00:00 2001
From: spwoodcock <sam.woodcock@protonmail.com>
Date: Wed, 24 Jan 2024 17:58:28 +0000
Subject: [PATCH] refactor: fix all linting errors from eslint

---
 src/frontend/src/App.jsx                      | 29 +++++++++++++++++++
 .../MapContainer/index.jsx                    |  2 ++
 .../ProjectInfoCountCardSkeleton.jsx          |  2 +-
 .../createnewproject/SelectForm.tsx           |  2 +-
 .../organisation/OrganisationAddForm.tsx      |  6 +++-
 src/frontend/src/hooks/useForm.tsx            |  2 --
 .../src/utilities/CustomizedModal.tsx         |  1 +
 src/frontend/src/views/NotFound404.jsx        |  2 +-
 src/frontend/src/views/Submissions.tsx        |  1 +
 src/frontend/src/views/Tasks.tsx              |  1 +
 10 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/src/frontend/src/App.jsx b/src/frontend/src/App.jsx
index 19a655fb4a..724aa9c331 100755
--- a/src/frontend/src/App.jsx
+++ b/src/frontend/src/App.jsx
@@ -1,3 +1,4 @@
+import axios from 'axios';
 import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import { RouterProvider } from 'react-router-dom';
@@ -28,6 +29,33 @@ console.error = function filterWarnings(msg, ...args) {
   }
 };
 
+const GlobalInit = () => {
+  useEffect(() => {
+    axios.interceptors.request.use(
+      (config) => {
+        // Do something before request is sent
+
+        const urlIsExcluded = excludedDomains.some((domain) => config.url.includes(domain));
+
+        if (!urlIsExcluded) {
+          config.withCredentials = true;
+        }
+
+        return config;
+      },
+      (error) =>
+        // Do something with request error
+        Promise.reject(error),
+    );
+
+    axios.defaults.withCredentials = true;
+
+    return () => {};
+  }, []);
+
+  return null; // Renders nothing
+};
+
 const SentryInit = () => {
   useEffect(() => {
     if (import.meta.env.MODE === 'development') {
@@ -107,6 +135,7 @@ ReactDOM.render(
   <Provider store={store}>
     <PersistGate loading={null} persistor={persistor}>
       <RouterProvider router={routes} />
+      <GlobalInit />
       <MatomoTrackingInit />
       <SentryInit />
     </PersistGate>
diff --git a/src/frontend/src/components/MapComponent/OpenLayersComponent/MapContainer/index.jsx b/src/frontend/src/components/MapComponent/OpenLayersComponent/MapContainer/index.jsx
index b7abafa404..b3dc95b82d 100644
--- a/src/frontend/src/components/MapComponent/OpenLayersComponent/MapContainer/index.jsx
+++ b/src/frontend/src/components/MapComponent/OpenLayersComponent/MapContainer/index.jsx
@@ -34,4 +34,6 @@ MapContainer.propTypes = {
   mapInstance: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
 };
 
+MapContainer.displayName = 'MapContainer';
+
 export default MapContainer;
diff --git a/src/frontend/src/components/ProjectInfo/ProjectInfoCountCardSkeleton.jsx b/src/frontend/src/components/ProjectInfo/ProjectInfoCountCardSkeleton.jsx
index 153fbeaacd..0ec681aab2 100644
--- a/src/frontend/src/components/ProjectInfo/ProjectInfoCountCardSkeleton.jsx
+++ b/src/frontend/src/components/ProjectInfo/ProjectInfoCountCardSkeleton.jsx
@@ -11,7 +11,7 @@ const ProjectInfoCountCardSkeleton = () => {
       }}
     >
       {Array.from({ length: 3 }).map((i) => (
-        <div id={i}>
+        <div key={i} id={i}>
           <CoreModules.Skeleton sx={{ bgcolor: 'grey.900' }} variant="rectangular" width={250} height={128} />
         </div>
       ))}
diff --git a/src/frontend/src/components/createnewproject/SelectForm.tsx b/src/frontend/src/components/createnewproject/SelectForm.tsx
index e58ec53047..4d54fc193c 100644
--- a/src/frontend/src/components/createnewproject/SelectForm.tsx
+++ b/src/frontend/src/components/createnewproject/SelectForm.tsx
@@ -118,7 +118,7 @@ const SelectForm = ({ flag, geojsonFile, customFormFile, setCustomFormFile }) =>
                   >
                     tags
                   </a>{' '}
-                  that match the selected category in OSM database, if you don't choose to upload custom data extract.
+                  {`that match the selected category in OSM database, if you don't choose to upload custom data extract.`}
                 </p>
               </div>
               <RadioButton
diff --git a/src/frontend/src/components/organisation/OrganisationAddForm.tsx b/src/frontend/src/components/organisation/OrganisationAddForm.tsx
index 932d75addd..398f5cb5ed 100644
--- a/src/frontend/src/components/organisation/OrganisationAddForm.tsx
+++ b/src/frontend/src/components/organisation/OrganisationAddForm.tsx
@@ -167,7 +167,11 @@ const OrganisationAddForm = () => {
                 // dispatch(CreateProjectActions.SetProjectDetails({ key: 'organisation', value: e.target.value }))
               }}
             >
-              {organisationDataList?.map((org) => <MenuItem value={org.value}>{org.label}</MenuItem>)}
+              {organisationDataList?.map((org) => (
+                <MenuItem key={org.value} value={org.value}>
+                  {org.label}
+                </MenuItem>
+              ))}
             </Select>
           </CoreModules.Stack>
           {errors.type && (
diff --git a/src/frontend/src/hooks/useForm.tsx b/src/frontend/src/hooks/useForm.tsx
index 4000b0b4b0..fc6939435d 100755
--- a/src/frontend/src/hooks/useForm.tsx
+++ b/src/frontend/src/hooks/useForm.tsx
@@ -59,8 +59,6 @@ const useForm = (initialState, callback, validate) => {
   useEffect(() => {
     setValues(initialState);
     setErrors({});
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [initialState]);
 
   return {
diff --git a/src/frontend/src/utilities/CustomizedModal.tsx b/src/frontend/src/utilities/CustomizedModal.tsx
index b17629f532..3e2f74dd49 100644
--- a/src/frontend/src/utilities/CustomizedModal.tsx
+++ b/src/frontend/src/utilities/CustomizedModal.tsx
@@ -25,6 +25,7 @@ const Backdrop = React.forwardRef<HTMLDivElement, { open?: boolean; className: s
   const { open, className, ...other } = props;
   return <div className={clsx({ 'MuiBackdrop-open': open }, className)} ref={ref} {...other} />;
 });
+Backdrop.displayName = 'ModalBackdrop';
 
 const StyledModal = styled(Modal)`
   position: fixed;
diff --git a/src/frontend/src/views/NotFound404.jsx b/src/frontend/src/views/NotFound404.jsx
index 8f2bb722c7..e1152480a1 100644
--- a/src/frontend/src/views/NotFound404.jsx
+++ b/src/frontend/src/views/NotFound404.jsx
@@ -12,7 +12,7 @@ const NotFoundPage = () => {
       p={3}
     >
       <CoreModules.Typography mt={'9%'} style={{ wordWrap: 'break-word' }} variant="subtitle2">
-        The page you were looking for doesn't exist.
+        {`The page you were looking for doesn't exist.`}
       </CoreModules.Typography>
       <CoreModules.Typography style={{ wordWrap: 'break-word' }} variant="h3">
         You may have mistyped the address or the page may have moved.
diff --git a/src/frontend/src/views/Submissions.tsx b/src/frontend/src/views/Submissions.tsx
index aba72a17e2..6b69859902 100755
--- a/src/frontend/src/views/Submissions.tsx
+++ b/src/frontend/src/views/Submissions.tsx
@@ -100,6 +100,7 @@ const Submissions = () => {
               const formattedDate = date.toLocaleDateString('en-US', dateOptions);
               return (
                 <CoreModules.Box
+                  key={submission.id}
                   sx={{
                     display: 'flex',
                     alignItems: 'center',
diff --git a/src/frontend/src/views/Tasks.tsx b/src/frontend/src/views/Tasks.tsx
index 0396827258..96dd72ca10 100644
--- a/src/frontend/src/views/Tasks.tsx
+++ b/src/frontend/src/views/Tasks.tsx
@@ -235,6 +235,7 @@ const TasksSubmission = () => {
               const formattedDate = date.toLocaleDateString('en-US', dateOptions);
               return (
                 <CoreModules.Link
+                  key={submission.id}
                   style={{ textDecoration: 'auto' }}
                   className="submission-item"
                   to={`/project/${encodedProjectId}/tasks/${encodedTaskId}/submission/${submission.instanceId}`}