IO-2626 Modify seachparm and fix linking

client/src/components/csi-response-list-paginated/csi-response-list-paginated.component.jsx

@@ -1,8 +1,9 @@
 import { SyncOutlined } from "@ant-design/icons";
 import { Button, Card, Table } from "antd";
+import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link } from "react-router-dom";
+import { Link, useHistory, useLocation } from "react-router-dom";
 import { DateFormatter } from "../../utils/DateFormatter";
 import { pageLimit } from "../../utils/config";
 import { alphaSort, dateSort } from "../../utils/sorters";
@@ -15,21 +16,23 @@ export default function CsiResponseListPaginated({
   loading,
   responses,
   total,
-  setresponseid,
 }) {
+  const search = queryString.parse(useLocation().search);
+  const { responseid } = search;
+  const history = useHistory();
+  const { t } = useTranslation();
   const [state, setState] = useState({
     sortedInfo: {},
     filteredInfo: { text: "" },
     page: "",
   });
-  const { t } = useTranslation();
 
   const columns = [
     {
       title: t("jobs.fields.ro_number"),
       dataIndex: "ro_number",
       key: "ro_number",
-      sorter: (a, b) => alphaSort(a.job?.ro_number, b.job?.ro_number),
+      sorter: (a, b) => alphaSort(a.job.ro_number, b.job.ro_number),
       sortOrder:
         state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
       render: (text, record) => (
@@ -87,12 +90,17 @@ export default function CsiResponseListPaginated({
   };
 
   const handleOnRowClick = (record) => {
-    if (record?.id) {
-      setresponseid(record.id);
+    if (record) {
+      if (record.id) {
+        search.responseid = record.id;
+        history.push({ search: queryString.stringify(search) });
+      }
     } else {
-      setresponseid("");
+      delete search.responseid;
+      history.push({ search: queryString.stringify(search) });
     }
   };
+
   return (
     <Card
       extra={
@@ -117,15 +125,9 @@ export default function CsiResponseListPaginated({
           onSelect: (record) => {
             handleOnRowClick(record);
           },
+          selectedRowKeys: [responseid],
           type: "radio",
         }}
-        onRow={(record, rowIndex) => {
-          return {
-            onClick: (event) => {
-              handleOnRowClick(record);
-            }, // click row
-          };
-        }}
       />
     </Card>
   );