Fix request create buttons; custom submission handling and validation…

…; fetchUpdated DRY
oarepo · Mar 26, 2024 · 68ed716 · 68ed716
1 parent 1147232
commit 68ed716
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 66 deletions.
diff --git a/...emantic-ui/js/oarepo_requests_ui/record-requests/components/CreateRequestModalContent.jsx b/...emantic-ui/js/oarepo_requests_ui/record-requests/components/CreateRequestModalContent.jsx
@@ -13,15 +13,18 @@ import { CustomFields } from "react-invenio-forms";
  * @typedef {import("formik").FormikConfig} FormikConfig
  */
 
-/** @param {{ requestType: RequestType }} props */
-export const CreateRequestModalContent = ({ requestType, extraPreSubmitEvent }) => {
+/** @param {{ requestType: RequestType, customSubmitHandler: (e) => void }} props */
+export const CreateRequestModalContent = ({ requestType, customSubmitHandler }) => {
   const payloadUI = requestType?.payload_ui;
 
   const { isSubmitting, isValid, handleSubmit } = useFormikContext();
 
-  const customSubmitHandler = (event) => {
-    _isFunction(extraPreSubmitEvent) && extraPreSubmitEvent(event);
-    handleSubmit(event);
+  const onSubmit = (event) => {
+    if (_isFunction(customSubmitHandler)) {
+      customSubmitHandler(event?.nativeEvent?.submitter?.name);
+    } else {
+      handleSubmit(event);
+    }
   }
 
   return (
@@ -31,7 +34,7 @@ export const CreateRequestModalContent = ({ requestType, extraPreSubmitEvent })
           {requestType.description}
         </p>
       }
-      <Form onSubmit={customSubmitHandler} id="request-form">
+      <Form onSubmit={onSubmit} id="request-form">
         {payloadUI &&
           <Segment basic>
             <CustomFields

diff --git a/...heme/assets/semantic-ui/js/oarepo_requests_ui/record-requests/components/RequestModal.jsx b/...heme/assets/semantic-ui/js/oarepo_requests_ui/record-requests/components/RequestModal.jsx
@@ -30,6 +30,24 @@ const mapPayloadUiToInitialValues = (payloadUi) => {
   return initialValues;
 };
 
+const fetchUpdated = async (url, setter) => {
+  return axios({
+    method: 'get',
+    url: url,
+    headers: { 
+      'Content-Type': 'application/json', 
+      'Accept': 'application/vnd.inveniordm.v1+json' // TODO: add to events request
+    }
+  })
+    .then(response => {
+      console.log(response);
+      setter(response.data?.hits?.hits);
+    })
+    .catch(error => {
+      console.log(error);
+    });
+}
+
 /** @param {{ request: Request, requestTypes: RequestType[], requestModalType: RequestTypeEnum, isEventModal: boolean, triggerButton: ReactElement }} props */
 export const RequestModal = ({ request, requestTypes, requestModalType, isEventModal = false, triggerButton }) => {
   const [modalOpen, setModalOpen] = useState(false);
@@ -53,13 +71,7 @@ export const RequestModal = ({ request, requestTypes, requestModalType, isEventM
 
   const formik = useFormik({
     initialValues: !_isEmpty(request?.payload) ? { payload: request.payload } : mapPayloadUiToInitialValues(request?.payload_ui),
-    onSubmit: (values) => {
-      if (requestModalType === REQUEST_TYPE.SUBMIT) {
-        confirmAction(REQUEST_TYPE.SUBMIT);
-      } else if (requestModalType === REQUEST_TYPE.CREATE) {
-        confirmAction(REQUEST_TYPE.CREATE);
-      }
-    }
+    onSubmit: () => {}
   });
 
   useEffect(() => {
@@ -68,24 +80,6 @@ export const RequestModal = ({ request, requestTypes, requestModalType, isEventM
     }
   }, [error]);
 
-  const fetchUpdated = (url, setter) => {
-    axios({
-      method: 'get',
-      url: url,
-      headers: { 
-        'Content-Type': 'application/json', 
-        'Accept': 'application/vnd.inveniordm.v1+json' // TODO: add to events request
-      }
-    })
-      .then(response => {
-        console.log(response);
-        setter(response.data?.hits?.hits);
-      })
-      .catch(error => {
-        console.log(error);
-      });
-  }
-
   const callApi = async (url, method, data = formik.values, doNotHandleResolve = false) => {
     if (_isEmpty(url)) {
       console.log(`Wrong or empty URL: ${url} for method: ${method}`);
@@ -132,12 +126,9 @@ export const RequestModal = ({ request, requestTypes, requestModalType, isEventM
     if (_isEmpty(formik.values?.payload?.content) && Object.keys(formik.values?.payload).length <= 1) {
       createPayload = {};
     }
-    console.log("createAndSubmitRequest", createPayload);
     try {
-      await callApi(request.links.actions?.create, 'post', createPayload, true);
-      console.log("created");
-      await callApi(request.links.actions?.submit, 'post', formik.values, true);
-      console.log("submitted");
+      const createdRequest = await callApi(request.links.actions?.create, 'post', createPayload, true);
+      await callApi(createdRequest.data?.links?.actions?.submit, 'post', formik.values, true);
       fetchUpdated(record.links?.requests, setRequests);
       setModalOpen(false);
       formik.resetForm();
@@ -172,7 +163,6 @@ export const RequestModal = ({ request, requestTypes, requestModalType, isEventM
   }
 
   const confirmAction = (requestType, createAndSubmit = false) => {
-    console.log("confirmAction", requestType, createAndSubmit);
     /** @type {ConfirmProps} */
     let newConfirmDialogProps = {
       open: true,
@@ -231,9 +221,23 @@ export const RequestModal = ({ request, requestTypes, requestModalType, isEventM
     formik.resetForm();
   }
 
-  const extraPreSubmitEvent = (event) => {
-    if (event?.nativeEvent?.submitter?.name === "create-and-submit-request") {
-      confirmAction(REQUEST_TYPE.SUBMIT, true);
+  const customSubmitHandler = async (submitButtonName) => {
+    try {
+      await formik.submitForm();
+      if (submitButtonName === "create-and-submit-request") {
+        confirmAction(REQUEST_TYPE.SUBMIT, true);
+        return;
+      }
+      if (requestModalType === REQUEST_TYPE.SUBMIT) {
+        confirmAction(REQUEST_TYPE.SUBMIT);
+      } else if (requestModalType === REQUEST_TYPE.CREATE) {
+        sendRequest(REQUEST_TYPE.CREATE);
+      }
+    } catch (error) {
+      console.log(error);
+      setError(error);
+    } finally {
+      formik.setSubmitting(false);
     }
   }
 
@@ -271,8 +275,8 @@ export const RequestModal = ({ request, requestTypes, requestModalType, isEventM
           }
           <FormikContext.Provider value={formik}>
             {requestModalType === REQUEST_TYPE.CREATE &&
-              <CreateRequestModalContent requestType={request} extraPreSubmitEvent={extraPreSubmitEvent} /> ||
-              <RequestModalContent request={request} requestType={requestType} requestModalType={requestModalType} />
+              <CreateRequestModalContent requestType={request} customSubmitHandler={customSubmitHandler} fetchNewEvents={fetchUpdated} /> ||
+              <RequestModalContent request={request} requestType={requestType} requestModalType={requestModalType} customSubmitHandler={customSubmitHandler} />
             }
           </FormikContext.Provider>
         </Modal.Content>

diff --git a/...sets/semantic-ui/js/oarepo_requests_ui/record-requests/components/RequestModalContent.jsx b/...sets/semantic-ui/js/oarepo_requests_ui/record-requests/components/RequestModalContent.jsx
@@ -6,7 +6,6 @@ import { Button, Grid, List, Form, Divider, Comment } from "semantic-ui-react";
 import _isEmpty from "lodash/isEmpty";
 import _sortBy from "lodash/sortBy";
 import { useFormikContext } from "formik";
-import axios from "axios";
 
 import { CustomFields } from "react-invenio-forms";
 
@@ -54,34 +53,34 @@ const RequestSideInfo = ({ request, requestType, isSidebar = false }) => {
   )
 };
 
-/** @param {{ request: Request, requestModalType: RequestTypeEnum, requestType: RequestType }} props */
-export const RequestModalContent = ({ request, requestType, requestModalType }) => {
+/** @param {{ request: Request, requestModalType: RequestTypeEnum, requestType: RequestType, fetchNewEvents: (url: string, setter: (events: Event[]) => void) => Promise<Event>, customSubmitHandler: (e) => void }} props */
+export const RequestModalContent = ({ request, requestType, requestModalType, fetchNewEvents, customSubmitHandler }) => {
   /** @type {[Request[], (requests: Request[]) => void]} */
   const [requests, setRequests] = useContext(RequestContext);
 
   const actualRequest = requests.find(req => req.id === request.id);
 
   useEffect(() => {
-    axios
-      .get(request.links?.events, { 
-        headers: { 
-          'Content-Type': 'application/json',
-          'Accept': 'application/vnd.inveniordm.v1+json'
-        } 
-      })
-      .then(response => {
-        setRequests(requests => requests.map(req => {
-          if (req.id === request.id) {
-            req.events = response.data;
-          }
-          return req;
-        }));
-      })
-      .catch(error => {
-        console.log(error);
-      });
+    fetchNewEvents(request.links?.events, (events) => {
+      setRequests(requests => requests.map(req => {
+        if (req.id === request.id) {
+          req.events = events;
+        }
+        return req;
+      }));
+    });
   }, [actualRequest]);
 
+  const { isSubmitting, isValid, handleSubmit } = useFormikContext();
+
+  const onSubmit = (event) => {
+    if (_isFunction(customSubmitHandler)) {
+      customSubmitHandler(event?.nativeEvent?.submitter?.name);
+    } else {
+      handleSubmit(event);
+    }
+  }
+
   const payloadUI = requestType?.payload_ui;
   const eventTypes = requestType?.event_types;
 
@@ -96,8 +95,6 @@ export const RequestModalContent = ({ request, requestType, requestModalType })
   const renderSubmitForm = requestModalType === REQUEST_TYPE.SUBMIT && payloadUI;
   const renderReadOnlyData = (requestModalType === REQUEST_TYPE.ACCEPT || requestModalType === REQUEST_TYPE.CANCEL) && request?.payload;
 
-  const { isSubmitting, isValid, handleSubmit } = useFormikContext();
-
   return (
     <Grid doubling stackable>
       <Grid.Row>
@@ -112,7 +109,7 @@ export const RequestModalContent = ({ request, requestType, requestModalType })
           </Grid.Column>
           <Grid.Column width={13}>
             {renderSubmitForm &&
-              <Form onSubmit={handleSubmit} id="request-form">
+              <Form onSubmit={onSubmit} id="request-form">
                 <CustomFields
                   className="requests-form-cf"
                   config={payloadUI}