- Fix an issue with not having an upper context to store intermediate values. Thus allowing me to fix the top level 'Add Task'

Signed-off-by: Dave Richer <dave@imexsystems.ca>

client/src/components/task-list/task-list.container.jsx

@@ -4,7 +4,7 @@ import { useMutation, useQuery } from "@apollo/client";
 import { MUTATION_TOGGLE_TASK_COMPLETED, MUTATION_TOGGLE_TASK_DELETED } from "../../graphql/tasks.queries.js";
 import { pageLimit } from "../../utils/config.js";
 import AlertComponent from "../alert/alert.component.jsx";
-import React from "react";
+import React, { useContext, useEffect } from "react";
 import TaskListComponent from "./task-list.component.jsx";
 import { notification } from "antd";
 import { useTranslation } from "react-i18next";
@@ -14,6 +14,7 @@ import AuditTrailMapping from "../../utils/AuditTrailMappings.js";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors.js";
 import dayjs from "../../utils/day";
+import { SharedModalContext } from "../../providers/shared-modal.provider.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -40,6 +41,8 @@ export function TaskListContainer({
   const searchParams = queryString.parse(useLocation().search);
   const { page, sortcolumn, sortorder, deleted, completed, mine } = searchParams;
   const dispatch = useDispatch();
+  const { updateTaskQuery } = useContext(SharedModalContext); // Use the context
+
   const { loading, error, data, refetch } = useQuery(query[Object.keys(query)[0]], {
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only",
@@ -163,6 +166,11 @@ export function TaskListContainer({
     }
   };
 
+  // Update the Last Task Paginated Query
+  useEffect(() => {
+    updateTaskQuery(Object.keys(query)[0]);
+  }, [query]);
+
   if (error) return <AlertComponent message={error.message} type="error" />;
 
   return (

client/src/components/task-upsert-modal/task-upsert-modal.container.jsx

@@ -1,6 +1,6 @@
 import { useMutation, useQuery } from "@apollo/client";
 import { Form, Modal, notification } from "antd";
-import React, { useEffect, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -17,6 +17,7 @@ import dayjs from "../../utils/day";
 import { insertAuditTrail } from "../../redux/application/application.actions.js";
 import AuditTrailMapping from "../../utils/AuditTrailMappings.js";
 import { isEqual } from "lodash";
+import { SharedModalContext } from "../../providers/shared-modal.provider.jsx";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
@@ -46,6 +47,7 @@ export function TaskUpsertModalContainer({ bodyshop, currentUser, taskUpsert, to
     variables: { id: jobIdState },
     skip: !jobIdState
   });
+  const { taskQuery } = useContext(SharedModalContext);
 
   const {
     loading: taskLoading,
@@ -133,6 +135,8 @@ export function TaskUpsertModalContainer({ bodyshop, currentUser, taskUpsert, to
     // We have a relationship query, so we need to refetch the query
     if (query && Object.keys(query).length) {
       taskObject.refetchQueries.push(Object.keys(query)[0]);
+    } else if (taskQuery) {
+      taskObject.refetchQueries.push(taskQuery);
     }
 
     const taskData = await updateTask(taskObject);
@@ -203,6 +207,8 @@ export function TaskUpsertModalContainer({ bodyshop, currentUser, taskUpsert, to
     // We have a relationship query, so we need to refetch the query
     if (query && Object.keys(query).length) {
       newTaskObject.refetchQueries.push(Object.keys(query)[0]);
+    } else if (taskQuery) {
+      newTaskObject.refetchQueries.push(taskQuery);
     }
 
     const newTaskData = await insertTask(newTaskObject);

client/src/graphql/jobs.queries.js

@@ -2087,7 +2087,7 @@ export const DELETE_JOB = gql`
 `;
 
 export const QUERY_GET_TASKS_JOB_DETAILS_BY_ID = gql`
-  query GetTasksJobDetailsById($id: uuid!) {
+  query QUERY_GET_TASKS_JOB_DETAILS_BY_ID($id: uuid!) {
     jobs_by_pk(id: $id) {
       id
       joblines {

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

@@ -27,6 +27,7 @@ import { setJoyRideFinished } from "../../redux/application/application.actions.
 import { selectEnableJoyRide, selectJoyRideSteps } from "../../redux/application/application.selectors.js";
 import InstanceRenderManager from "../../utils/instanceRenderMgr.js";
 import "./manage.page.styles.scss";
+import { SharedModalProvider } from "../../providers/shared-modal.provider.jsx";
 
 const JobsPage = lazy(() => import("../jobs/jobs.page"));
 
@@ -151,8 +152,8 @@ export function Manage({ conflict, bodyshop, enableJoyRide, joyRideSteps, setJoy
         />
       }
     >
+      <SharedModalProvider>
         <PaymentModalContainer />
-
         <CardPaymentModalContainer />
         <TaskUpsertModalContainer />
         <BreadCrumbs />
@@ -569,6 +570,7 @@ export function Manage({ conflict, bodyshop, enableJoyRide, joyRideSteps, setJoy
             }
           />
         </Routes>
+      </SharedModalProvider>
     </Suspense>
   );
 

client/src/providers/shared-modal.provider.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+// Create a context
+export const SharedModalContext = React.createContext({});
+
+export const SharedModalProvider = ({ children }) => {
+  const [taskQuery, setTaskQuery] = React.useState([]);
+
+  const updateTaskQuery = (query) => {
+    setTaskQuery(query);
+  };
+
+  return <SharedModalContext.Provider value={{ taskQuery, updateTaskQuery }}>{children}</SharedModalContext.Provider>;
+};