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

client/src/pages/simplified-parts-jobs-detail/simplified-parts-jobs-detail.component.jsx

@@ -23,6 +23,7 @@ const mapStateToProps = createStructuredSelector({
   jobRO: selectJobReadOnly,
   isPartsEntry: selectIsPartsEntry
 });
+
 const mapDispatchToProps = (dispatch) => ({
   setPrintCenterContext: (context) =>
     dispatch(
@@ -36,9 +37,13 @@ const mapDispatchToProps = (dispatch) => ({
 export function SimplifiedPartsJobDetailComponent({ setPrintCenterContext, jobRO, job, refetch, isPartsEntry }) {
   const { t } = useTranslation();
   const [form] = Form.useForm();
-  const history = useNavigate();
+  const navigate = useNavigate();
+  const location = useLocation();
+
   const [loading] = useState(false);
-  const search = queryString.parse(useLocation().search);
+
+  // Parse once per render; do not mutate this object.
+  const search = queryString.parse(location.search);
 
   const billsQuery = useQuery(QUERY_PARTS_BILLS_BY_JOBID, {
     variables: { jobid: job.id },
@@ -47,44 +52,43 @@ export function SimplifiedPartsJobDetailComponent({ setPrintCenterContext, jobRO
   });
 
   useEffect(() => {
-    //form.setFieldsValue(transormJobToForm(job));
     form.resetFields();
   }, [form, job]);
 
+  const navigateWithSearch = (nextSearchObj) => {
+    navigate({ search: queryString.stringify(nextSearchObj) });
+  };
+
+  const omitKey = (obj, key) => {
+    if (!obj) return {};
+    // immutable omit
+    // eslint-disable-next-line no-unused-vars
+    const { [key]: _omit, ...rest } = obj;
+    return rest;
+  };
+
   const handleBillOnRowClick = (record) => {
-    if (record) {
-      if (record.id) {
-        search.billid = record.id;
-        history({ search: queryString.stringify(search) });
-      }
-    } else {
-      delete search.billid;
-      history({ search: queryString.stringify(search) });
+    if (record?.id) {
+      navigateWithSearch({ ...search, billid: record.id });
+      return;
     }
+    navigateWithSearch(omitKey(search, "billid"));
   };
 
   const handlePartsOrderOnRowClick = (record) => {
-    if (record) {
-      if (record.id) {
-        search.partsorderid = record.id;
-        history({ search: queryString.stringify(search) });
-      }
-    } else {
-      delete search.partsorderid;
-      history({ search: queryString.stringify(search) });
+    if (record?.id) {
+      navigateWithSearch({ ...search, partsorderid: record.id });
+      return;
     }
+    navigateWithSearch(omitKey(search, "partsorderid"));
   };
 
   const handlePartsDispatchOnRowClick = (record) => {
-    if (record) {
-      if (record.id) {
-        search.partsdispatchid = record.id;
-        history.push({ search: queryString.stringify(search) });
-      }
-    } else {
-      delete search.partsdispatchid;
-      history.push({ search: queryString.stringify(search) });
+    if (record?.id) {
+      navigateWithSearch({ ...search, partsdispatchid: record.id });
+      return;
     }
+    navigateWithSearch(omitKey(search, "partsdispatchid"));
   };
 
   const menuExtra = (
@@ -98,7 +102,9 @@ export function SimplifiedPartsJobDetailComponent({ setPrintCenterContext, jobRO
         <SyncOutlined />
         {t("general.labels.refresh")}
       </Button>
+
       <JobsChangeStatus job={job} />
+
       <Button
         onClick={() => {
           setPrintCenterContext({
@@ -127,6 +133,8 @@ export function SimplifiedPartsJobDetailComponent({ setPrintCenterContext, jobRO
     </Space>
   );
 
+  const activeTabKey = (search?.tab && String(search.tab)) || "repairdata";
+
   return (
     <div>
       <JobLineUpsertModalContainer />
@@ -135,9 +143,10 @@ export function SimplifiedPartsJobDetailComponent({ setPrintCenterContext, jobRO
       <JobsDetailHeader job={job} />
       <Divider orientation="horizontal" />
       <FormFieldsChanged form={form} />
+
       <Tabs
-        defaultActiveKey={search.tab}
-        onChange={(key) => history({ search: `?tab=${key}` })}
+        defaultActiveKey={activeTabKey}
+        onChange={(key) => navigateWithSearch({ ...search, tab: key })}
         tabBarStyle={{ fontWeight: "bold", borderBottom: "10px" }}
         items={[
           {
@@ -159,7 +168,6 @@ export function SimplifiedPartsJobDetailComponent({ setPrintCenterContext, jobRO
               />
             )
           },
-
           {
             key: "partssublet",
             id: "job-details-partssublet",