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

client/src/pages/jobs-detail/jobs-detail.page.container.jsx

@@ -0,0 +1,31 @@
+import { useQuery } from "@apollo/react-hooks";
+import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import AlertComponent from "../../components/alert/alert.component";
+import SpinComponent from "../../components/loading-spinner/loading-spinner.component";
+import { GET_JOB_BY_PK } from "../../graphql/jobs.queries";
+import JobsDetailPage from "./jobs-detail.page";
+
+function JobsDetailPageContainer({ match, location }) {
+  const { jobId } = match.params;
+  const { hash } = location;
+  const { t } = useTranslation();
+  const { loading, error, data } = useQuery(GET_JOB_BY_PK, {
+    variables: { id: jobId },
+    fetchPolicy: "network-only"
+  });
+
+  useEffect(() => {
+    document.title = loading
+      ? "..."
+      : t("titles.jobsdetail", {
+          ro_number: data.jobs_by_pk.ro_number
+        });
+  }, [loading, data, t]);
+
+  if (loading) return <SpinComponent />;
+  if (error) return <AlertComponent message={error.message} type='error' />;
+
+  return <JobsDetailPage hash={hash} data={data} jobId={jobId} match={match} />;
+}
+export default JobsDetailPageContainer;

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

@@ -1,34 +1,14 @@
-import React, { useEffect } from "react";
-import { useQuery } from "@apollo/react-hooks";
-import SpinComponent from "../../components/loading-spinner/loading-spinner.component";
-import AlertComponent from "../../components/alert/alert.component";
-import JobTombstone from "../../components/job-tombstone/job-tombstone.component";
-import { GET_JOB_BY_PK } from "../../graphql/jobs.queries";
-import { Tabs, Icon, Row } from "antd";
-import JobLinesContainer from "../../components/job-lines/job-lines.container.component";
+import { Icon, Row, Tabs } from "antd";
+import React from "react";
 import { useTranslation } from "react-i18next";
+import JobLinesContainer from "../../components/job-lines/job-lines.container.component";
+import JobTombstone from "../../components/job-tombstone/job-tombstone.component";
 import JobsDocumentsContainer from "../../components/jobs-documents/jobs-documents.container";
+import { FaRegStickyNote } from "react-icons/fa";
 
-function JobsDetailPage({ match, location }) {
-  const { jobId } = match.params;
-  const { hash } = location;
+function JobsDetailPage({ jobId, hash, data, match }) {
   const { t } = useTranslation();
-  const { loading, error, data } = useQuery(GET_JOB_BY_PK, {
-    variables: { id: jobId },
-    fetchPolicy: "network-only"
-  });
 
-  useEffect(() => {
-    document.title = loading
-      ? "..."
-      : t("titles.jobsdetail", {
-          ro_number: data.jobs_by_pk.ro_number
-        });
-  }, [loading, data, t]);
-
-  //const [selectedTab, setSelectedTab] = useState(hash ? hash : "#lines");
-  if (loading) return <SpinComponent />;
-  if (error) return <AlertComponent message={error.message} type='error' />;
   return (
     <div>
       <Row>
@@ -40,7 +20,7 @@ function JobsDetailPage({ match, location }) {
             tab={
               <span>
                 <Icon type='bars' />
-                Lines
+                {t("jobs.labels.lines")}
               </span>
             }
             key='#lines'>
@@ -50,7 +30,7 @@ function JobsDetailPage({ match, location }) {
             tab={
               <span>
                 <Icon type='dollar' />
-                Rates
+                {t("jobs.labels.rates")}
               </span>
             }
             key='#rates'>
@@ -60,7 +40,7 @@ function JobsDetailPage({ match, location }) {
             tab={
               <span>
                 <Icon type='tool1' />
-                Parts
+                {t("jobs.labels.parts")}
               </span>
             }
             key='#parts'>
@@ -70,12 +50,22 @@ function JobsDetailPage({ match, location }) {
             tab={
               <span>
                 <Icon type='file-image' />
-                Documents
+                {t("jobs.labels.documents")}
               </span>
             }
             key='#documents'>
             <JobsDocumentsContainer jobId={jobId} />
           </Tabs.TabPane>
+          <Tabs.TabPane
+            tab={
+              <span>
+                <Icon component={FaRegStickyNote} />
+                {t("jobs.labels.notes")}
+              </span>
+            }
+            key='#notes'>
+            lol notes here 
+          </Tabs.TabPane>
         </Tabs>
       </Row>
     </div>

client/src/pages/manage/manage.page.jsx

@@ -8,14 +8,18 @@ import HeaderContainer from "../../components/header/header.container";
 import FooterComponent from "../../components/footer/footer.component";
 import ErrorBoundary from "../../components/error-boundary/error-boundary.component";
 
+import './manage.page.styles.scss'
+
 const WhiteBoardPage = lazy(() => import("../white-board/white-board.page"));
 const JobsPage = lazy(() => import("../jobs/jobs.page"));
-const JobsDetailPage = lazy(() => import("../jobs-detail/jobs-detail.page"));
+const JobsDetailPage = lazy(() => import("../jobs-detail/jobs-detail.page.container"));
 const ProfilePage = lazy(() => import("../profile/profile.container.page"));
 const JobsDocumentsPage = lazy(() =>
   import("../../components/jobs-documents/jobs-documents.container")
 );
 
+
+
 const { Header, Content, Footer } = Layout;
 //This page will handle all routing for the entire application.
 export default function Manage({ match }) {
@@ -31,7 +35,7 @@ export default function Manage({ match }) {
         <HeaderContainer />
       </Header>
 
-      <Content>
+      <Content className="content-container">
         <ErrorBoundary>
           <Suspense
             fallback={<div>TODO: Suspended Loading in Manage Page...</div>}>

client/src/pages/manage/manage.page.styles.scss

@@ -0,0 +1 @@
+.content-container { overflow-y : scroll; }