IO-2626 Modify seachparm and fix linking

client/src/components/csi-response-form/csi-response-form.container.jsx

@@ -1,19 +1,20 @@
 import { useQuery } from "@apollo/client";
 import { Card, Form, Result } from "antd";
-// import queryString from "query-string";
+import queryString from "query-string";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
-// import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import { QUERY_CSI_RESPONSE_BY_PK } from "../../graphql/csi.queries";
 import { DateFormatter } from "../../utils/DateFormatter";
 import AlertComponent from "../alert/alert.component";
 import ConfigFormComponents from "../config-form-components/config-form-components.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 
-export default function CsiResponseFormContainer({ responseid }) {
+export default function CsiResponseFormContainer() {
   const { t } = useTranslation();
   const [form] = Form.useForm();
-
+  const searchParams = queryString.parse(useLocation().search);
+  const { responseid } = searchParams;
   const { loading, error, data } = useQuery(QUERY_CSI_RESPONSE_BY_PK, {
     variables: {
       id: responseid,
@@ -44,13 +45,7 @@ export default function CsiResponseFormContainer({ responseid }) {
           readOnly
           componentList={data.csi_by_pk.csiquestion.config}
         />
-        {data.csi_by_pk.completedon ? (
+        {data.csi_by_pk.validuntil ? (
-          <>
-            {t("csi.fields.completedon")}
-            {": "}
-            <DateFormatter>{data.csi_by_pk.completedon}</DateFormatter>
-          </>
-        ) : data.csi_by_pk.validuntil ? (
           <>
             {t("csi.fields.validuntil")}
             {": "}

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) {
+    if (record) {
-      setresponseid(record.id);
+      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>
   );

client/src/pages/shop-csi/shop-csi.container.page.jsx

@@ -1,6 +1,6 @@
 import { useQuery } from "@apollo/client";
 import { Col, Row } from "antd";
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -30,7 +30,6 @@ export function ShopCsiContainer({
   setSelectedHeader,
 }) {
   const { t } = useTranslation();
-  const [responseid, setresponseid] = useState("");
 
   const { loading, error, data, refetch } = useQuery(
     QUERY_CSI_RESPONSE_PAGINATED,
@@ -63,11 +62,10 @@ export function ShopCsiContainer({
             loading={loading}
             responses={data ? data.csi : []}
             total={data ? data.csi_aggregate.aggregate.count : 0}
-            setresponseid={setresponseid}
           />
         </Col>
         <Col span={14}>
-          <CsiResponseFormContainer responseid={responseid} />
+          <CsiResponseFormContainer />
         </Col>
       </Row>
     </RbacWrapper>