- Progress Commit

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

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

@@ -15,6 +15,7 @@ import {selectTaskUpsert} from "../../redux/modals/modals.selectors";
 import {selectBodyshop, selectCurrentUser} from "../../redux/user/user.selectors";
 import TaskUpsertModalComponent from "./task-upsert-modal.component";
 import {replaceUndefinedWithNull} from "../../utils/undefinedtonull.js";
+import {useNavigate} from "react-router-dom";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
@@ -32,6 +33,7 @@ export function TaskUpsertModalContainer({
                                            toggleModalVisible,
                                          }) {
   const {t} = useTranslation();
+  const history = useNavigate();
   const [insertTask] = useMutation(MUTATION_INSERT_NEW_TASK);
   const [updateTask] = useMutation(MUTATION_UPDATE_TASK);
   const {open, context, actions} = taskUpsert;
@@ -51,7 +53,11 @@ export function TaskUpsertModalContainer({
     skip: !jobIdState,
   });
 
-  const {loading: taskLoading, error: taskError, data: taskData} = useQuery(QUERY_GET_TASK_BY_ID, {
+  const {
+    loading: taskLoading, 
+    error: taskError, 
+    data: taskData
+  } = useQuery(QUERY_GET_TASK_BY_ID, {
     variables: {id: taskId},
     skip: !taskId,
   });
@@ -110,6 +116,12 @@ export function TaskUpsertModalContainer({
   }, [loading, error, data]);
 
 
+  const removeTaskIdFromUrl = () => {
+    const urlParams = new URLSearchParams(window.location.search);
+    urlParams.delete('taskid');
+    history(`${window.location.pathname}?${urlParams}`);
+  }
+  
   /**
    * Handle the form submit
    * @param formValues
@@ -124,8 +136,8 @@ export function TaskUpsertModalContainer({
           task: replaceUndefinedWithNull(values)
         },
       });
-      window.dispatchEvent( new CustomEvent('taskUpdated', {
-        detail: { message: 'A task has been created or edited.' },
+      window.dispatchEvent(new CustomEvent('taskUpdated', {
+        detail: {message: 'A task has been created or edited.'},
       }));
       notification["success"]({
         message: t("tasks.successes.updated"),
@@ -164,8 +176,8 @@ export function TaskUpsertModalContainer({
       if (refetch) await refetch();
       form.resetFields();
       toggleModalVisible();
-      window.dispatchEvent( new CustomEvent('taskUpdated', {
-        detail: { message: 'A task has been created or edited.' },
+      window.dispatchEvent(new CustomEvent('taskUpdated', {
+        detail: {message: 'A task has been created or edited.'},
       }));
       notification["success"]({
         message: t("tasks.successes.created"),
@@ -180,16 +192,18 @@ export function TaskUpsertModalContainer({
       okText={t("general.actions.save")}
       width="50%"
       onOk={() => {
+        removeTaskIdFromUrl();
         form.submit();
       }}
       onCancel={() => {
+        removeTaskIdFromUrl();
         toggleModalVisible();
       }}
 
       destroyOnClose
     >
       <Form form={form} onFinish={handleFinish} layout="vertical">
-        <TaskUpsertModalComponent form={form} loading={loading} error={error} data={data}
+        <TaskUpsertModalComponent form={form} loading={loading || (taskId && taskLoading)} error={error} data={data}
                                   selectedJobId={selectedJobId}
                                   setSelectedJobId={setSelectedJobId}
                                   selectedJobDetails={selectedJobDetails}/>

client/src/pages/tasks/allTasksPageContainer.jsx

@@ -1,6 +1,7 @@
 import React, {useEffect} from "react";
 import {useTranslation} from "react-i18next";
 import TasksPageComponent from "./tasks.page.component";
+import queryString from "query-string";
 
 import {connect} from "react-redux";
 import {createStructuredSelector} from "reselect";
@@ -9,6 +10,7 @@ import InstanceRenderManager from "../../utils/instanceRenderMgr.js";
 import {selectBodyshop, selectCurrentUser} from "../../redux/user/user.selectors.js";
 import TaskPageTypes from "./taskPageTypes.jsx";
 import {setModalContext} from "../../redux/modals/modals.actions.js";
+import {useLocation} from "react-router-dom";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -29,6 +31,7 @@ export function MyTasksPageContainer({
                                        setTaskUpsertContext
                                      }) {
   const {t} = useTranslation();
+  const searchParams = queryString.parse((useLocation().search));
   useEffect(() => {
     document.title = t("titles.all_tasks", {
       app: InstanceRenderManager({
@@ -48,8 +51,7 @@ export function MyTasksPageContainer({
   // This takes care of the ability to deep link a task from the URL (Dispatches the modal)
   useEffect(() => {
     // Check for a query string in the URL
-    const queryString = window.location.search;
-    const urlParams = new URLSearchParams(queryString);
+    const urlParams = new URLSearchParams(searchParams);
     const taskId = urlParams.get('taskid');
     if (taskId) {
       setTaskUpsertContext({
@@ -57,6 +59,7 @@ export function MyTasksPageContainer({
           taskId,
         },
       });
+      urlParams.delete('taskid');
     }
   }, [setTaskUpsertContext]);