feat: Implement modal and button to create a vault (#59)

* feat: Create add vault button

* feat: Create add vault modal

* feat: link the modal and call the api

* feat: update vaults list

* fix: linter

Author: vbetsch

src/app/ui/workspace/page.tsx

@@ -12,6 +12,7 @@ import type { GetMyVaultsResponseDto } from '@shared/dto/responses/get-my-vaults
 import { useApi } from '@ui/hooks/useApi';
 import {
   Box,
+  Button,
   Card,
   CardContent,
   CardHeader,
@@ -20,17 +21,19 @@ import {
   TextField,
   Typography,
 } from '@mui/material';
+import AddVaultModal from '@ui/components/modals/AddVaultModal';
 
 export default function WorkspacePage(): JSX.Element {
   const [vaults, setVaults] = useState<VaultModelDto[]>([]);
   const [error, setError] = useState<Error | null>(null);
+  const [open, setOpen] = useState(false);
   const vaultsGateway: VaultsGateway = container.resolve(VaultsGateway);
 
   const { loading } = useApi<GetMyVaultsResponseDto>({
     request: () => vaultsGateway.getMyVaults(),
     onSuccess: data => setVaults(data.myVaults),
     onError: error => setError(error),
-    deps: [],
+    deps: [open],
   });
 
   const [searchTerm, setSearchTerm] = useState('');
@@ -51,16 +54,31 @@ export default function WorkspacePage(): JSX.Element {
         gap: '3rem',
       }}
     >
+      <AddVaultModal open={open} onClose={() => setOpen(false)} />
       <Typography variant={'h3'} textAlign={'left'}>
         My vaults
       </Typography>
-      <TextField
-        fullWidth
-        placeholder="Search…"
-        value={searchTerm}
-        onChange={e => setSearchTerm(e.target.value)}
-        sx={{ mb: 2 }}
-      />
+      <Box
+        sx={{
+          display: 'flex',
+          gap: '1rem',
+          width: '100%',
+        }}
+      >
+        <TextField
+          fullWidth
+          placeholder="Search…"
+          value={searchTerm}
+          onChange={e => setSearchTerm(e.target.value)}
+        />
+        <Button
+          variant="contained"
+          sx={{ minWidth: 150 }}
+          onClick={() => setOpen(true)}
+        >
+          Add a vault
+        </Button>
+      </Box>
       <ErrorMessage error={error} />
       <CircularLoader loading={loading} />
       {!loading && filteredVaults.length === 0 && (
@@ -74,7 +92,7 @@ export default function WorkspacePage(): JSX.Element {
           spacing={{ xs: 2, md: 3, lg: 3, xl: 4 }}
           columns={{ xs: 1, md: 2, lg: 3, xl: 3 }}
           overflow={'auto'}
-          height={'70vh'}
+          height={'65vh'}
         >
           {filteredVaults.map(vault => (
             <Grid key={vault.id} size={1}>

src/modules/ui/components/modals/AddVaultModal.tsx

@@ -0,0 +1,75 @@
+import type { JSX } from 'react';
+import React, { useState } from 'react';
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  TextField,
+} from '@mui/material';
+import { VaultsGateway } from '@ui/gateways/vaults.gateway';
+import { container } from 'tsyringe';
+import type { CreateVaultRequestDto } from '@shared/dto/requests/create-vault.request.dto';
+import ErrorMessage from '@ui/components/common/ErrorMessage';
+
+type AddVaultModalProps = {
+  open: boolean;
+  onClose: () => void;
+};
+
+export default function AddVaultModal(props: AddVaultModalProps): JSX.Element {
+  const [newLabel, setNewLabel] = useState<string>('');
+  const [newSecret, setNewSecret] = useState<string>('');
+  const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<Error | null>(null);
+  const vaultsGateway: VaultsGateway = container.resolve(VaultsGateway);
+
+  async function onCreate(data: CreateVaultRequestDto): Promise<void> {
+    setLoading(true);
+    try {
+      await vaultsGateway.createVault(data);
+      props.onClose();
+    } catch (error) {
+      if (error instanceof Error) setError(error);
+      else console.error('Unhandled API error:', error);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  const handleConfirm = async (): Promise<void> => {
+    await onCreate({ label: newLabel, secret: newSecret });
+  };
+
+  return (
+    <Dialog open={props.open} onClose={props.onClose}>
+      <DialogTitle>Add a vault</DialogTitle>
+      <DialogContent>
+        <TextField
+          autoFocus
+          margin="dense"
+          label="Label"
+          fullWidth
+          value={newLabel}
+          onChange={e => setNewLabel(e.target.value)}
+        />
+        <TextField
+          margin="dense"
+          label="Secret"
+          fullWidth
+          value={newSecret}
+          onChange={e => setNewSecret(e.target.value)}
+          sx={{ mt: 2 }}
+        />
+      </DialogContent>
+      <ErrorMessage error={error} />
+      <DialogActions>
+        <Button onClick={props.onClose}>Cancel</Button>
+        <Button onClick={handleConfirm} variant="contained" loading={loading}>
+          Create
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}

src/modules/ui/gateways/vaults.gateway.ts

@@ -1,6 +1,8 @@
 import { inject, injectable } from 'tsyringe';
 import { GetMyVaultsResponseDto } from '@shared/dto/responses/get-my-vaults.response.dto';
 import { LockliteApiRequestService } from '@ui/services/locklite-api-request.service';
+import { CreateVaultRequestDto } from '@shared/dto/requests/create-vault.request.dto';
+import { CreateVaultResponseDto } from '@shared/dto/responses/create-vault.response.dto';
 
 @injectable()
 export class VaultsGateway {
@@ -14,4 +16,13 @@ export class VaultsGateway {
       '/vaults'
     );
   }
+
+  public async createVault(
+    data: CreateVaultRequestDto
+  ): Promise<CreateVaultResponseDto> {
+    return await this._lockliteRequestService.post<CreateVaultResponseDto>(
+      '/vaults',
+      data
+    );
+  }
 }