Work on centralizing logic from actions

cultuurnet · Oct 31, 2024 · 0cd81f0 · 0cd81f0
1 parent ca1d229
commit 0cd81f0
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 14 deletions.
diff --git a/src/hooks/api/ownerships.ts b/src/hooks/api/ownerships.ts
@@ -39,7 +39,7 @@ const requestOwnership = async ({ headers, itemId, itemType, ownerId }) =>
     },
   });
 
-const useRequestOwnershipMutation = (configuration = {}) =>
+const useRequestOwnershipMutation = (configuration: UseQueryOptions = {}) =>
   useAuthenticatedMutation({
     mutationFn: requestOwnership,
     mutationKey: 'ownerships-request-ownership',

diff --git a/src/i18n/nl.json b/src/i18n/nl.json
@@ -1037,6 +1037,7 @@
       "request_modal": {
         "title": "Beheerder toevoegen aan {{name}}",
         "email": "E-mailadres",
+        "email_error": "Geen geldig e-mailadres",
         "actions": {
           "confirm": "Beheerder toevoegen",
           "cancel": "Annuleren"

diff --git a/src/pages/organizers/[organizerId]/ownerships/index.page.tsx b/src/pages/organizers/[organizerId]/ownerships/index.page.tsx
@@ -51,9 +51,8 @@ const Ownership = () => {
   const [requestToBeDeleted, setRequestToBeDeleted] =
     useState<OwnershipRequest>();
   const [selectedRequest, setSelectedRequest] = useState<OwnershipRequest>();
-  const isApproveAction = actionType === ActionType.APPROVE;
   const translationsPath = `organizers.ownerships.${ActionType}_modal`;
-  const { register, getValues } = useForm();
+  const { register, formState, getValues, setError } = useForm();
 
   const organizerId = useMemo(
     () => router.query.organizerId as string,
@@ -94,10 +93,13 @@ const Ownership = () => {
   });
 
   const requestOwnership = useRequestOwnershipMutation({
-    onSuccess: () =>
-      approveOwnershipRequestMutation.mutateAsync({
+    onSuccess: (response) => {
+      console.log({ response });
+      approveOwnershipRequestMutation.mutate({
         ownershipId: response.data.id,
-      }),
+      });
+    },
+    onError: (error) => setError('email', error.message),
   });
 
   const rejectOwnershipRequestMutation = useRejectOwnershipRequestMutation({
@@ -126,9 +128,8 @@ const Ownership = () => {
           ownershipId: selectedRequest.id,
         });
       case ActionType.REQUEST:
-        const email = getValues('email');
-        return requestOwnership.mutateAsync({
-          ownerEmail: email,
+        return requestOwnership.mutate({
+          ownerEmail: getValues('email'),
           itemType: 'organizer',
           itemId: organizer['@id'],
         });
@@ -264,7 +265,11 @@ const Ownership = () => {
           <Stack spacing={3.5} flex={1}>
             <Button
               variant={ButtonVariants.PRIMARY}
-              onClick={() => setIsOpen(true)}
+              onClick={() => {
+                setIsSuccessAlertVisible(false);
+                setActionType(ActionType.REQUEST);
+                setIsOpen(true);
+              }}
             >
               {t('organizers.ownerships.actions.add')}
             </Button>
@@ -282,19 +287,25 @@ const Ownership = () => {
           visible={isOpen}
           variant={ModalVariants.QUESTION}
           size={ModalSizes.MD}
-          title={t('organizers.ownerships.modal.title', {
+          title={t('organizers.ownerships.request_modal.title', {
             name: organizer.name,
           })}
-          confirmTitle={t('organizers.ownerships.modal.actions.confirm')}
-          cancelTitle={t('organizers.ownerships.modal.actions.cancel')}
+          confirmTitle={t(
+            'organizers.ownerships.request_modal.actions.confirm',
+          )}
+          cancelTitle={t('organizers.ownerships.request_modal.actions.cancel')}
           onConfirm={handleConfirm}
           onClose={() => setIsOpen(false)}
         >
           <Stack padding={4}>
             <FormElement
               id={'email'}
               Component={<Input type={'email'} {...register('email')} />}
-              label={t('organizers.ownerships.modal.email')}
+              label={t('organizers.ownerships.request_modal.email')}
+              error={
+                formState.errors.email &&
+                t(`organizers.ownerships.request_modal.email_error`)
+              }
             />
           </Stack>
         </Modal>