CLEANUP on Jobs page. Now uses search param instead of state.

client/package.json

@@ -22,6 +22,7 @@
     "graphql": "^14.6.0",
     "i18next": "^19.3.4",
     "node-sass": "^4.13.1",
+    "query-string": "^6.11.1",
     "react": "^16.13.1",
     "react-apollo": "^3.1.3",
     "react-barcode": "^1.4.0",

client/src/components/job-detail-cards/job-detail-cards.component.jsx

@@ -63,7 +63,6 @@ function JobDetailCards({ selectedJob, setInvoiceEnterContext }) {
       />
       <PageHeader
         ghost={false}
-        onBack={() => window.history.back()}
         tags={
           <span key="job-status">
             {data.jobs_by_pk.status ? (
@@ -96,7 +95,7 @@ function JobDetailCards({ selectedJob, setInvoiceEnterContext }) {
           </Button>,
           <Link
             key="documents"
-            to={`/manage/jobs/${data.jobs_by_pk.id}#documents`}
+            to={`/manage/jobs/${data.jobs_by_pk.id}?documents`}
           >
             <Button>
               <FileImageFilled />

client/src/components/job-detail-cards/job-detail-cards.notes.component.jsx

@@ -17,7 +17,7 @@ export default function JobDetailCardsNotesComponent({ loading, data }) {
     <CardTemplate
       loading={loading}
       title={t("jobs.labels.cards.notes")}
-      extraLink={`/manage/jobs/${data.id}#notes`}
+      extraLink={`/manage/jobs/${data.id}?notes`}
     >
       {data ? (
         <Container>

client/src/components/jobs-list/jobs-list.component.jsx

@@ -7,15 +7,14 @@ import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import PhoneFormatter from "../../utils/PhoneFormatter";
 import { alphaSort } from "../../utils/sorters";
 import StartChatButton from "../chat-open-button/chat-open-button.component";
+import { useHistory } from "react-router-dom";
 
 export default withRouter(function JobsList({
   searchTextState,
   refetch,
   loading,
   jobs,
-  selectedJob,
+  selectedJob
-  setSelectedJob,
-  history
 }) {
   const [state, setState] = useState({
     sortedInfo: {},
@@ -23,7 +22,7 @@ export default withRouter(function JobsList({
   });
 
   const { t } = useTranslation();
-
+  const history = useHistory();
   const setSearchText = searchTextState[1];
   const columns = [
     {
@@ -31,22 +30,18 @@ export default withRouter(function JobsList({
       dataIndex: "ro_number",
       key: "ro_number",
       width: "8%",
-      // onFilter: (value, record) => record.ro_number.includes(value),
-      // filteredValue: state.filteredInfo.text || null,
       sorter: (a, b) =>
         alphaSort(
-          a.ro_number ? a.ro_number : "EST-" + a.est_number,
+          a.ro_number ? a.ro_number : a.est_number,
-          b.ro_number ? b.ro_number : "EST-" + b.est_number
+          b.ro_number ? b.ro_number : b.est_number
         ),
       sortOrder:
         state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
 
       render: (text, record) => (
-        <span>
+        <Link to={"/manage/jobs/" + record.id}>
-          <Link to={"/manage/jobs/" + record.id}>
+          {record.ro_number ? record.ro_number : record.est_number}
-            {record.ro_number ? record.ro_number : "EST-" + record.est_number}
+        </Link>
-          </Link>
-        </span>
       )
     },
     {
@@ -61,10 +56,9 @@ export default withRouter(function JobsList({
       render: (text, record) => {
         return record.owner ? (
           <Link to={"/manage/owners/" + record.owner.id}>
-            {record.ownr_fn} {record.ownr_ln}
+            {`${record.ownr_fn} ${record.ownr_ln}`}
           </Link>
         ) : (
-          // t("jobs.errors.noowner")
           <span>{`${record.ownr_fn} ${record.ownr_ln}`}</span>
         );
       }
@@ -81,9 +75,7 @@ export default withRouter(function JobsList({
             <PhoneFormatter>{record.ownr_ph1}</PhoneFormatter>
             <StartChatButton phone={record.ownr_ph1} />
           </span>
-        ) : (
+        ) : null;
-          t("general.labels.unknown")
-        );
       }
     },
     {
@@ -113,7 +105,8 @@ export default withRouter(function JobsList({
               ""} ${record.v_model_desc || ""}`}
           </Link>
         ) : (
-          t("jobs.errors.novehicle")
+          <span>{`${record.v_model_yr || ""} ${record.v_make_desc ||
+            ""} ${record.v_model_desc || ""}`}</span>
         );
       }
     },
@@ -127,11 +120,7 @@ export default withRouter(function JobsList({
       sortOrder:
         state.sortedInfo.columnKey === "plate_no" && state.sortedInfo.order,
       render: (text, record) => {
-        return record.plate_no ? (
+        return record.plate_no ? record.plate_no : "";
-          <span>{record.plate_no}</span>
-        ) : (
-          t("general.labels.unknown")
-        );
       }
     },
     {
@@ -186,19 +175,12 @@ export default withRouter(function JobsList({
     setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
   };
 
-  // const handleChange = event => {
-  //   const { value } = event.target;
-  //   setState({ ...state, filterinfo: { text: [value] } });
-  // };
-
   const handleOnRowClick = record => {
     if (record) {
       if (record.id) {
-        setSelectedJob(record.id);
+        history.push({ search: `selected=${record.id}` });
-        return;
       }
     }
-    setSelectedJob(null);
   };
 
   return (
@@ -212,7 +194,7 @@ export default withRouter(function JobsList({
                 <SyncOutlined />
               </Button>
               <Input.Search
-                placeholder="Search..."
+                placeholder={t("general.labels.search")}
                 onChange={e => {
                   setSearchText(e.target.value);
                 }}
@@ -226,7 +208,13 @@ export default withRouter(function JobsList({
         columns={columns.map(item => ({ ...item }))}
         rowKey="id"
         dataSource={jobs}
-        rowSelection={{ selectedRowKeys: [selectedJob] }}
+        rowSelection={{
+          onSelect: record => {
+            handleOnRowClick(record);
+          },
+          selectedRowKeys: [selectedJob],
+          type: "radio"
+        }}
         onChange={handleTableChange}
         onRow={(record, rowIndex) => {
           return {

client/src/pages/error-not-found/error-not-found.page.jsx

@@ -1,5 +0,0 @@
-import React from "react";
-
-export default function ErrorNotFound() {
-  return <div>Uh oh, we couldn't find the page you're looking for.</div>;
-}

client/src/pages/jobs/jobs.page.jsx

@@ -1,27 +1,22 @@
 import { useQuery } from "@apollo/react-hooks";
+import queryString from "query-string";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
 import AlertComponent from "../../components/alert/alert.component";
+import EnterInvoiceModalContainer from "../../components/invoice-enter-modal/invoice-enter-modal.container";
 import JobDetailCards from "../../components/job-detail-cards/job-detail-cards.component";
 import JobsList from "../../components/jobs-list/jobs-list.component";
 import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
-
 import { selectBodyshop } from "../../redux/user/user.selectors";
 
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import EnterInvoiceModalContainer from "../../components/invoice-enter-modal/invoice-enter-modal.container";
-
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
 
-export default connect(
+export function JobsPage({ location, bodyshop }) {
-  mapStateToProps,
-  null
-)(function JobsPage({ match, location, bodyshop }) {
   const { loading, error, data, refetch } = useQuery(QUERY_ALL_ACTIVE_JOBS, {
-    fetchPolicy: "network-only",
     variables: {
       statuses: bodyshop.md_ro_statuses.open_statuses || ["Open"]
     }
@@ -32,8 +27,7 @@ export default connect(
     document.title = t("titles.jobs");
   }, [t]);
 
-  const { hash } = location;
+  const search = queryString.parse(location.search);
-  const [selectedJob, setSelectedJob] = useState(hash ? hash.substr(1) : null);
   const searchTextState = useState("");
   const searchText = searchTextState[0];
   if (error) return <AlertComponent message={error.message} type="error" />;
@@ -45,11 +39,11 @@ export default connect(
         searchTextState={searchTextState}
         refetch={refetch}
         loading={loading}
-        selectedJob={selectedJob}
+        selectedJob={search.selected}
-        setSelectedJob={setSelectedJob}
+        //setSelectedJob={setSelectedJob}
         jobs={
           data
-            ? searchTextState[0] === ""
+            ? searchText === ""
               ? data.jobs
               : data.jobs.filter(
                   j =>
@@ -79,7 +73,9 @@ export default connect(
             : null
         }
       />
-      <JobDetailCards selectedJob={selectedJob} />
+      <JobDetailCards selectedJob={search.selected} />
     </div>
   );
-});
+}
+
+export default connect(mapStateToProps, null)(JobsPage);

client/yarn.lock

@@ -10643,6 +10643,15 @@ query-string@^4.1.0:
     object-assign "^4.1.0"
     strict-uri-encode "^1.0.0"
 
+query-string@^6.11.1:
+  version "6.11.1"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.11.1.tgz#ab021f275d463ce1b61e88f0ce6988b3e8fe7c2c"
+  integrity sha512-1ZvJOUl8ifkkBxu2ByVM/8GijMIPx+cef7u3yroO3Ogm4DOdZcF5dcrWTIlSHe3Pg/mtlt6/eFjObDfJureZZA==
+  dependencies:
+    decode-uri-component "^0.2.0"
+    split-on-first "^1.0.0"
+    strict-uri-encode "^2.0.0"
+
 querystring-es3@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
@@ -12583,6 +12592,11 @@ spdy@^4.0.1:
     select-hose "^2.0.0"
     spdy-transport "^3.0.0"
 
+split-on-first@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/split-on-first/-/split-on-first-1.1.0.tgz#f610afeee3b12bce1d0c30425e76398b78249a5f"
+  integrity sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==
+
 split-string@^3.0.1, split-string@^3.0.2:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
@@ -12726,6 +12740,11 @@ strict-uri-encode@^1.0.0:
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
   integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=
 
+strict-uri-encode@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
+  integrity sha1-ucczDHBChi9rFC3CdLvMWGbONUY=
+
 string-convert@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/string-convert/-/string-convert-0.2.1.tgz#6982cc3049fbb4cd85f8b24568b9d9bf39eeff97"