feat: add link endpoint creation

src/app/shared-links/Components/AddLinkDialog.tsx

@@ -1,14 +1,13 @@
 'use client';
 import {
   Dialog,
-  DialogTitle,
   DialogContent,
   TextField,
-  DialogActions,
   Button,
-  styled,
+  Alert,
+  Grid,
 } from '@mui/material';
-import { FC, useEffect } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 
 import { StyledDialogActions } from '@/app/components/StyledDialogActions';
@@ -38,6 +37,8 @@ export const AddLinkDialog: FC<AddLinkDialogProps> = ({
   callback,
 }) => {
   const { session } = useAuth();
+  const [hasError, setHasError] = useState(false);
+  const [disableButton, setDisableButton] = useState(false);
 
   const {
     reset,
@@ -48,17 +49,30 @@ export const AddLinkDialog: FC<AddLinkDialogProps> = ({
   } = useForm<TCreateSHLinkDto>();
 
   const onSubmitForm = async (data: TCreateSHLinkDto) => {
+    setDisableButton(true);
     try {
       const transformedData = removeUndefinedValues(data);
-      await apiSharedLink.createLink(transformedData);
-      callback?.();
+      const { data: createdLink } =
+        await apiSharedLink.createLink(transformedData);
+      await apiSharedLink
+        .createEndpoint(createdLink['id'])
+        .then(() => {
+          callback?.();
+        })
+        .catch(() => {
+          setHasError(true);
+        });
     } catch (error) {
       console.error('Failed to create link:', error);
     }
   };
 
   useEffect(() => {
-    if (open) reset();
+    if (open) {
+      reset();
+      setHasError(false);
+      setDisableButton(false);
+    }
   }, [open]);
 
   useEffect(() => {
@@ -68,10 +82,17 @@ export const AddLinkDialog: FC<AddLinkDialogProps> = ({
 
   return (
     <Dialog open={!!open} fullWidth maxWidth="xs" onClose={() => onClose?.()}>
-      <StyledDialogTitle>Create a new Link</StyledDialogTitle>
-      <DialogContent style={{ padding: '5px 8px' }}>
-        <form onSubmit={handleSubmit(onSubmitForm)}>
+      <form onSubmit={handleSubmit(onSubmitForm)}>
+        <StyledDialogTitle>Create a new Link</StyledDialogTitle>
+        <DialogContent style={{ padding: '5px 8px' }}>
           <StyledDialogContent>
+            {hasError && (
+              <Grid pb={2}>
+                <Alert severity="error">
+                  The creation of the endpoint is failed
+                </Alert>
+              </Grid>
+            )}
             <TextField
               label="User id"
               error={!!errors.userId}
@@ -81,9 +102,8 @@ export const AddLinkDialog: FC<AddLinkDialogProps> = ({
               {...register('userId', {})}
             />
             <TextField
-              label="Name"
+              label="Name *"
               error={!!errors.name}
-              required
               helperText={errors.name ? errors.name.message : null}
               placeholder="Name"
               {...register('name', { required: 'Required field' })}
@@ -104,21 +124,21 @@ export const AddLinkDialog: FC<AddLinkDialogProps> = ({
               })}
             />
           </StyledDialogContent>
-        </form>
-      </DialogContent>
-      <StyledDialogActions>
-        <Button color="inherit" variant="contained" onClick={onClose}>
-          Cancel
-        </Button>
-        <Button
-          type="submit"
-          color="success"
-          variant="contained"
-          onClick={handleSubmit(onSubmitForm)}
-        >
-          Create
-        </Button>
-      </StyledDialogActions>
+        </DialogContent>
+        <StyledDialogActions>
+          <Button color="inherit" variant="contained" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button
+            type="submit"
+            color="success"
+            variant="contained"
+            disabled={disableButton}
+          >
+            Create
+          </Button>
+        </StyledDialogActions>
+      </form>
     </Dialog>
   );
 };

src/app/utils/api.class.ts

@@ -43,6 +43,15 @@ export class ApiSHLink extends BaseApi {
     return await this.create({ url: `/${EEndpoint.shareLinks}`, data });
   }
 
+  async createEndpoint(linkId: string) {
+    return await this.create({
+      url: `/${EEndpoint.shareLinks}/${linkId}/endpoints`,
+      data: {
+        urlPath: '/$summary',
+      },
+    });
+  }
+
   async deactivateLink(id: string) {
     return await this.delete({ url: `/share-links/${id}/deactivate` });
   }