Images upload as resized images. Added location hash for jobs detail page.

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

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { useQuery } from "@apollo/react-hooks";
 import SpinComponent from "../../components/loading-spinner/loading-spinner.component";
 import AlertComponent from "../../components/alert/alert.component";
@@ -7,9 +7,11 @@ 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 { useTranslation } from "react-i18next";
+import JobsDocumentsContainer from "../../components/jobs-documents/jobs-documents.container";
 
-function JobsDetailPage({ match }) {
+function JobsDetailPage({ match, location }) {
   const { jobId } = match.params;
+  const { hash } = location;
   const { t } = useTranslation();
   const { loading, error, data } = useQuery(GET_JOB_BY_PK, {
     variables: { id: jobId },
@@ -22,18 +24,19 @@ function JobsDetailPage({ match }) {
       : t("titles.jobsdetail", {
           ro_number: data.jobs_by_pk.ro_number
         });
-  }, [loading,data,t]);
+  }, [loading, data, t]);
 
+  const [selectedTab, setSelectedTab] = useState(hash ? hash : "#lines");
   if (loading) return <SpinComponent />;
   if (error) return <AlertComponent message={error.message} type='error' />;
-
+  console.log("selectedTab", selectedTab);
   return (
     <div>
       <Row>
         <JobTombstone job={data.jobs_by_pk} />
       </Row>
       <Row>
-        <Tabs defaultActiveKey='lines'>
+        <Tabs defaultActiveKey={selectedTab}>
           <Tabs.TabPane
             tab={
               <span>
@@ -41,7 +44,7 @@ function JobsDetailPage({ match }) {
                 Lines
               </span>
             }
-            key='lines'>
+            key='#lines'>
             <JobLinesContainer match={match} />
           </Tabs.TabPane>
           <Tabs.TabPane
@@ -51,7 +54,7 @@ function JobsDetailPage({ match }) {
                 Rates
               </span>
             }
-            key='rates'>
+            key='#rates'>
             Estimate Rates
           </Tabs.TabPane>
           <Tabs.TabPane
@@ -61,9 +64,19 @@ function JobsDetailPage({ match }) {
                 Parts
               </span>
             }
-            key='parts'>
+            key='#parts'>
             Estimate Parts
           </Tabs.TabPane>
+          <Tabs.TabPane
+            tab={
+              <span>
+                <Icon type='file-image' />
+                Documents
+              </span>
+            }
+            key='#documents'>
+            <JobsDocumentsContainer jobId={jobId} />
+          </Tabs.TabPane>
         </Tabs>
       </Row>
     </div>