Prevent previously claimed tasks.

client/src/components/time-ticket-task-modal/time-ticket-task-modal.container.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 
 import { Form, Modal, notification } from "antd";
 import axios from "axios";
@@ -9,6 +9,8 @@ import { toggleModalVisible } from "../../redux/modals/modals.actions";
 import { selectTimeTicketTasks } from "../../redux/modals/modals.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import TimeTicketTaskModalComponent from "./time-ticket-task-modal.component";
+import { useApolloClient } from "@apollo/client";
+import { QUERY_COMPLETED_TASKS } from "../../graphql/jobs.queries";
 
 const mapStateToProps = createStructuredSelector({
   timeTicketTasksModal: selectTimeTicketTasks,
@@ -29,15 +31,41 @@ export function TimeTickeTaskModalContainer({
 }) {
   const [form] = Form.useForm();
   const { context, visible } = timeTicketTasksModal;
-
+  const [completedTasks, setCompletedTasks] = useState([]);
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
+  const client = useApolloClient();
 
   async function handleFinish(values) {
     calculateTickets({ values, handleFinish: true });
   }
+  const getCompletedTasks = useCallback(
+    async (jobid) => {
+      setLoading(true);
+
+      const { data } = await client.query({
+        query: QUERY_COMPLETED_TASKS,
+        variables: { jobid },
+      });
+
+      setCompletedTasks(data.jobs_by_pk.completed_tasks || []);
+      setLoading(false);
+    },
+    [client]
+  );
+  useEffect(() => {
+    if (visible) {
+      form.setFieldsValue({ ...context, task: null, timetickets: null });
+      if (context.jobid) {
+        getCompletedTasks(context.jobid);
+      }
+    }
+  }, [context.jobid, visible, getCompletedTasks, form, context]);
 
   async function handleValueChange(changedValues, allValues) {
+    if (changedValues.jobid) {
+      getCompletedTasks(changedValues.jobid);
+    }
     if (allValues.jobid && allValues.task) {
       calculateTickets({ values: allValues, handleFinish: false });
     }
@@ -93,7 +121,11 @@ export function TimeTickeTaskModalContainer({
         initialValues={context}
         onValuesChange={handleValueChange}
       >
-        <TimeTicketTaskModalComponent form={form} loading={loading} />
+        <TimeTicketTaskModalComponent
+          form={form}
+          loading={loading}
+          completedTasks={completedTasks}
+        />
       </Form>
     </Modal>
   );