Refactor jobs detail page to use container. Refresh detail cards on note add.

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

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { useQuery } from "@apollo/react-hooks";
 import AlertComponent from "../alert/alert.component";
@@ -15,50 +16,61 @@ import JobDetailCardsNotesComponent from "./job-detail-cards.notes.component";
 import JobDetailCardsDamageComponent from "./job-detail-cards.damage.component";
 import JobDetailCardsTotalsComponent from "./job-detail-cards.totals.component";
 import JobDetailCardsDocumentsComponent from "./job-detail-cards.documents.component";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 
 import "./job-detail-cards.styles.scss";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 import NoteAddModal from "../note-add-modal/note-add-modal.component";
 
 export default function JobDetailCards({ selectedJob }) {
-  const { loading, error, data } = useQuery(QUERY_JOB_CARD_DETAILS, {
+  const { loading, error, data, refetch } = useQuery(QUERY_JOB_CARD_DETAILS, {
     fetchPolicy: "network-only",
     variables: { id: selectedJob },
     skip: !selectedJob
   });
   const [noteModalVisible, setNoteModalVisible] = useState(false);
-
   const { t } = useTranslation();
 
   if (!selectedJob) {
     return <div>{t("jobs.errors.nojobselected")}</div>;
   }
-
+  if (loading) return <LoadingSpinner />;
   if (error) return <AlertComponent message={error.message} type='error' />;
 
   return (
     <div className='job-cards-container'>
       <NoteAddModal
-        jobId={data?.jobs_by_pk.id}
+        jobId={data.jobs_by_pk.id}
         visible={noteModalVisible}
         changeVisibility={setNoteModalVisible}
+        refetch={refetch}
       />
       <PageHeader
         ghost={false}
         onBack={() => window.history.back()}
-        tags={<Tag color='blue'>{data?.jobs_by_pk.job_status?.name}</Tag>}
+        tags={
+          <span key='job-status'>
+            {data.jobs_by_pk.job_status ? (
+              <Tag color='blue'>{data.jobs_by_pk.job_status.name}</Tag>
+            ) : null}
+          </span>
+        }
         title={
           loading
             ? t("general.labels.loading")
-            : data?.jobs_by_pk.ro_number
-            ? `${t("jobs.fields.ro_number")} ${data?.jobs_by_pk.ro_number}`
-            : `${t("jobs.fields.est_number")} ${data?.jobs_by_pk.est_number}`
+            : data.jobs_by_pk.ro_number
+            ? `${t("jobs.fields.ro_number")} ${data.jobs_by_pk.ro_number}`
+            : `${t("jobs.fields.est_number")} ${data.jobs_by_pk.est_number}`
         }
         extra={[
-          <Button key='documents'>
-            <Icon type='file-image' />
-            {t("jobs.actions.addDocuments")}
-          </Button>,
+          <Link
+            key='documents'
+            to={`/manage/jobs/${data.jobs_by_pk.id}#documents`}>
+            <Button>
+              <Icon type='file-image' />
+              {t("jobs.actions.addDocuments")}
+            </Button>
+          </Link>,
           <Button key='printing'>
             <Icon type='printer' />
             {t("jobs.actions.printCenter")}

client/src/components/job-detail-cards/job-detail-cards.styles.scss

@@ -1,8 +1,3 @@
-.job-cards-container {
-  height: 45vh;
-  overflow-y: auto;
-}
-
 .job-cards {
   display: flex;
   flex-wrap: wrap;