Added sync button to job header IO-544

client/src/components/jobs-available-table/jobs-available-table.container.jsx

@@ -9,10 +9,10 @@ import Axios from "axios";
 import Dinero from "dinero.js";
 import gql from "graphql-tag";
 import _ from "lodash";
-import React, { useState } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useHistory } from "react-router-dom";
+import { useHistory, useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import {
@@ -35,6 +35,8 @@ import HeaderFields from "./jobs-available-supplement.headerfields";
 import JobsAvailableTableComponent from "./jobs-available-table.component";
 import moment from "moment";
 import { INSERT_NEW_NOTE } from "../../graphql/notes.queries";
+import queryString from "query-string";
+
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   currentUser: selectCurrentUser,
@@ -44,7 +46,7 @@ export function JobsAvailableContainer({ bodyshop, currentUser }) {
   const { loading, error, data, refetch } = useQuery(QUERY_AVAILABLE_JOBS, {
     fetchPolicy: "network-only",
   });
-
+  const { clm_no, availableJobId } = queryString.parse(useLocation().search);
   const history = useHistory();
   const { t } = useTranslation();
 
@@ -302,11 +304,17 @@ export function JobsAvailableContainer({ bodyshop, currentUser }) {
     setOwnerModalVisible(true);
   };
 
-  const addJobAsSupp = (record) => {
+  const addJobAsSupp = useCallback((record) => {
     loadEstData({ variables: { id: record.id } });
     modalSearchState[1](record.clm_no);
     setJobModalVisible(true);
-  };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (availableJobId && clm_no)
+      addJobAsSupp({ id: availableJobId, clm_no: clm_no });
+  }, [addJobAsSupp, availableJobId, clm_no]);
 
   if (error) return <AlertComponent type="error" message={error.message} />;
   return (