Added hash history to job detail page.

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

@@ -1,5 +1,5 @@
 import { useQuery } from "@apollo/react-hooks";
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import AlertComponent from "../../components/alert/alert.component";
 import SpinComponent from "../../components/loading-spinner/loading-spinner.component";
@@ -25,7 +25,13 @@ function JobsDetailPageContainer({ match, location }) {
 
   if (loading) return <SpinComponent />;
   if (error) return <AlertComponent message={error.message} type='error' />;
-
-  return <JobsDetailPage hash={hash} data={data} jobId={jobId} match={match} />;
+  return (
+    <JobsDetailPage
+      hash={hash ? hash.substring(1) : "#lines"}
+      data={data}
+      jobId={jobId}
+      match={match}
+    />
+  );
 }
 export default JobsDetailPageContainer;

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

@@ -1,5 +1,6 @@
 import { Icon, Row, Tabs } from "antd";
 import React from "react";
+import { withRouter } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import JobLinesContainer from "../../components/job-lines/job-lines.container.component";
 import JobTombstone from "../../components/job-tombstone/job-tombstone.component";
@@ -7,7 +8,7 @@ import JobsDocumentsContainer from "../../components/jobs-documents/jobs-documen
 import { FaRegStickyNote } from "react-icons/fa";
 import JobNotesContainer from "../../components/jobs-notes/jobs-notes.container";
 
-function JobsDetailPage({ jobId, hash, data, match }) {
+function JobsDetailPage({ jobId, hash, data, match, history }) {
   const { t } = useTranslation();
 
   return (
@@ -16,7 +17,11 @@ function JobsDetailPage({ jobId, hash, data, match }) {
         <JobTombstone job={data.jobs_by_pk} />
       </Row>
       <Row>
-        <Tabs defaultActiveKey={hash ? hash : "#lines"}>
+        <Tabs
+          defaultActiveKey={hash}
+          onChange={p => {
+            history.push(p);
+          }}>
           <Tabs.TabPane
             tab={
               <span>
@@ -65,11 +70,11 @@ function JobsDetailPage({ jobId, hash, data, match }) {
               </span>
             }
             key='#notes'>
-           <JobNotesContainer jobId={jobId} />
+            <JobNotesContainer jobId={jobId} />
           </Tabs.TabPane>
         </Tabs>
       </Row>
     </div>
   );
 }
-export default JobsDetailPage;
+export default withRouter(JobsDetailPage);