feature/IO-3499-React-19: Bug Fixes / Checkpoint

client/src/components/tech-lookup-jobs-drawer/tech-lookup-jobs-drawer.component.jsx

@@ -24,18 +24,10 @@ const mapDispatchToProps = (dispatch) => ({
   setPrintCenterContext: (context) => dispatch(setModalContext({ context: context, modal: "printCenter" }))
 });
 
-// const colBreakPoints = {
-//   xs: {
-//     span: 24,
-//   },
-//   sm: {
-//     span: 8,
-//   },
-// };
-
 export function TechLookupJobsDrawer({ bodyshop, setPrintCenterContext }) {
-  const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
-    .filter((screen) => !!screen[1])
+  const breakpoints = Grid.useBreakpoint();
+  const selectedBreakpoint = Object.entries(breakpoints)
+    .filter(([, isOn]) => !!isOn)
     .slice(-1)[0];
 
   const bpoints = {
@@ -46,11 +38,16 @@ export function TechLookupJobsDrawer({ bodyshop, setPrintCenterContext }) {
     xl: "90%",
     xxl: "85%"
   };
+
   const drawerPercentage = selectedBreakpoint ? bpoints[selectedBreakpoint[0]] : "100%";
 
-  const searchParams = queryString.parse(useLocation().search);
-  const { selected } = searchParams;
+  const location = useLocation();
   const history = useNavigate();
+
+  // Parse once per render; do not mutate this object later.
+  const searchParams = queryString.parse(location.search);
+  const selected = searchParams?.selected;
+
   const { loading, error, data, refetch } = useQuery(GET_JOB_BY_PK, {
     variables: { id: selected },
     skip: !selected,
@@ -59,12 +56,12 @@ export function TechLookupJobsDrawer({ bodyshop, setPrintCenterContext }) {
   });
 
   const { t } = useTranslation();
+
   const handleDrawerClose = () => {
-    delete searchParams.selected;
+    // Immutable omit (no delete/mutation)
+    const { ...rest } = searchParams || {};
     history({
-      search: queryString.stringify({
-        ...searchParams
-      })
+      search: queryString.stringify(rest)
     });
   };
 
@@ -72,6 +69,7 @@ export function TechLookupJobsDrawer({ bodyshop, setPrintCenterContext }) {
     <Drawer open={!!selected} destroyOnHidden size={drawerPercentage} placement="right" onClose={handleDrawerClose}>
       {loading ? <LoadingSpinner /> : null}
       {error ? <AlertComponent title={error.message} type="error" /> : null}
+
       {data ? (
         <PageHeader
           onBack={() => window.history.back()}
@@ -118,13 +116,13 @@ export function TechLookupJobsDrawer({ bodyshop, setPrintCenterContext }) {
                 children: bodyshop.uselocalmediaserver ? (
                   <JobsDocumentsLocalGallery job={data ? data.jobs_by_pk : null} />
                 ) : (
-                  <JobsDocumentsGalleryContainer jobId={searchParams.selected} />
+                  <JobsDocumentsGalleryContainer jobId={selected} />
                 )
               },
               {
                 key: "notes",
                 label: t("jobs.labels.notes"),
-                children: <JobNotesContainer jobId={searchParams.selected} />
+                children: <JobNotesContainer jobId={selected} />
               }
             ]}
           />