[LOCKLITE-104] Refactor components architecture

Makefile

@@ -34,6 +34,15 @@ format: node_modules
 tests: node_modules
 	npm test
 
+tests-shared: node_modules
+	npm run tests:units:shared
+
+tests-api: tests-shared
+	npm run tests:units:api
+
+tests-ui: tests-shared
+	npm run tests:units:ui
+
 coverage: node_modules
 	npm run test:cov
 
@@ -51,7 +60,7 @@ clean:
 	rm -rf .next node_modules package-lock.json
 	npm install
 
-.PHONY: up down dev build lint format tests coverage migrate reset_db clean
+.PHONY: up down dev build lint format tests tests-shared tests-api tests-ui coverage migrate reset_db clean
 
 # Aliases
 run: up dev

package.json

@@ -10,6 +10,10 @@
     "format:c": "prettier --check .",
     "format:w": "prettier --write .",
     "test": "jest",
+    "tests:units": "jest tests/units",
+    "tests:units:ui": "jest tests/units/modules/ui",
+    "tests:units:shared": "jest tests/units/modules/shared",
+    "tests:units:api": "jest tests/units/modules/api",
     "test:cov": "jest --coverage",
     "prisma:reset": "prisma migrate reset",
     "prisma:migrate": "prisma migrate dev --name"

src/app/api/vaults/route.ts

@@ -5,11 +5,11 @@ import { handleApiRequest } from '@api/helpers/api/handle-api-request';
 import type { VaultModelDto } from '@shared/dto/models/vault.model.dto';
 import { CreateVaultUseCase } from '@api/usecases/vaults/create-vault.usecase';
 import { GetMyVaultsUseCase } from '@api/usecases/vaults/get-my-vaults.usecase';
-import type { CreateVaultRequestDto } from '@shared/dto/input/requests/create-vault.request.dto';
 import { StatusCodes } from 'http-status-codes';
 import type { CreateVaultDataDto } from '@shared/dto/output/data/create-vault.data.dto';
 import type { GetMyVaultsDataDto } from '@shared/dto/output/data/get-my-vaults.data.dto';
 import type { HttpResponseDto } from '@shared/dto/output/responses/abstract/http.response.dto';
+import type { CreateVaultPayloadDto } from '@shared/dto/input/payloads/create-vault.payload.dto';
 
 /**
  * @swagger
@@ -56,7 +56,7 @@ export async function GET(): Promise<
  *       content:
  *         application/json:
  *           schema:
- *             $ref: '#/components/schemas/CreateVaultRequestDto'
+ *             $ref: '#/components/schemas/CreateVaultPayloadDto'
  *     responses:
  *       201:
  *         description: Returns the vault created
@@ -86,11 +86,12 @@ export async function GET(): Promise<
 export async function POST(
   request: NextRequest
 ): Promise<NextResponse<HttpResponseDto<CreateVaultDataDto>>> {
-  const params: CreateVaultRequestDto = await request.json();
+  const payload: CreateVaultPayloadDto = await request.json();
   const createVaultUseCase: CreateVaultUseCase =
     container.resolve(CreateVaultUseCase);
   return await handleApiRequest<CreateVaultDataDto>(async () => {
-    const vaultCreated: VaultModelDto = await createVaultUseCase.handle(params);
+    const vaultCreated: VaultModelDto =
+      await createVaultUseCase.handle(payload);
     const response: CreateVaultDataDto = { vaultCreated };
     return response;
   }, StatusCodes.CREATED);

src/app/ui/workspace/page.tsx

@@ -1,69 +1,12 @@
 'use client';
 
 import 'reflect-metadata';
-import React, { useMemo, useState } from 'react';
+import React from 'react';
 import type { JSX } from 'react';
-import type { VaultModelDto } from '@shared/dto/models/vault.model.dto';
-import ErrorMessage from '@ui/components/common/ErrorMessage';
-import CircularLoader from '@ui/components/common/CircularLoader';
-import { VaultsGateway } from '@ui/gateways/vaults.gateway';
-import { container } from 'tsyringe';
-import { useApi } from '@ui/hooks/useApi';
-import {
-  Box,
-  Button,
-  Card,
-  CardActions,
-  CardContent,
-  CardHeader,
-  Container,
-  Grid,
-  TextField,
-  Typography,
-} from '@mui/material';
-import AddVaultModal from '@ui/components/modals/AddVaultModal';
-import type { GetMyVaultsDataDto } from '@shared/dto/output/data/get-my-vaults.data.dto';
-import { UiLogger } from '@ui/logs/ui.logger';
+import DynamicVaultsList from '@ui/components/vaults/templates/DynamicVaultsList';
+import { Container, Typography } from '@mui/material';
 
 export default function WorkspacePage(): JSX.Element {
-  const [vaults, setVaults] = useState<VaultModelDto[]>([]);
-  const [error, setError] = useState<Error | null>(null);
-  const [open, setOpen] = useState(false);
-  const [deleteLoading, setDeleteLoading] = useState(false);
-  const vaultsGateway: VaultsGateway = container.resolve(VaultsGateway);
-
-  const { loading } = useApi<GetMyVaultsDataDto>({
-    request: () => vaultsGateway.getMyVaults(),
-    onSuccess: data => setVaults(data.myVaults),
-    onError: error => setError(error),
-    deps: [open, deleteLoading],
-  });
-
-  const [searchTerm, setSearchTerm] = useState('');
-  const filteredVaults: VaultModelDto[] = useMemo(
-    () =>
-      vaults.filter(v =>
-        v.label.toLowerCase().includes(searchTerm.toLowerCase())
-      ),
-    [vaults, searchTerm]
-  );
-
-  async function onDelete(id: string): Promise<void> {
-    setDeleteLoading(true);
-    try {
-      await vaultsGateway.deleteVault(id);
-    } catch (error) {
-      if (error instanceof Error) setError(error);
-      else UiLogger.error('Unhandled API error: ', error);
-    } finally {
-      setDeleteLoading(false);
-    }
-  }
-
-  async function deleteVault(id: string): Promise<void> {
-    await onDelete(id);
-  }
-
   return (
     <Container
       sx={{
@@ -73,87 +16,10 @@ export default function WorkspacePage(): JSX.Element {
         gap: '3rem',
       }}
     >
-      <AddVaultModal open={open} onClose={() => setOpen(false)} />
       <Typography variant={'h3'} textAlign={'left'}>
         My vaults
       </Typography>
-      <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 || deleteLoading} />
-      {!loading && !deleteLoading && filteredVaults.length === 0 && (
-        <Typography>
-          {searchTerm ? 'No vaults match your search' : 'No results found'}
-        </Typography>
-      )}
-      {filteredVaults.length > 0 && (
-        <Grid
-          container
-          spacing={{ xs: 2, md: 3, lg: 3, xl: 4 }}
-          columns={{ xs: 1, md: 2, lg: 3, xl: 3 }}
-          overflow={'auto'}
-          height={'65vh'}
-        >
-          {filteredVaults.map(vault => (
-            <Grid key={vault.id} size={1}>
-              <Card
-                sx={{
-                  bgcolor: 'background.paper',
-                }}
-              >
-                <CardHeader title={vault.label} />
-                <CardContent>
-                  <Box
-                    sx={{
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'space-between',
-                      gap: '1rem',
-                    }}
-                  >
-                    <Typography variant="body2" color="text.secondary">
-                      Secret:
-                    </Typography>
-                    <Typography
-                      variant="body2"
-                      color="text.secondary"
-                      fontFamily={'monospace'}
-                      overflow={'scroll'}
-                      textOverflow={'ellipsis'}
-                    >
-                      {vault.secret}
-                    </Typography>
-                  </Box>
-                </CardContent>
-                <CardActions>
-                  <Button color={'error'} onClick={() => deleteVault(vault.id)}>
-                    Delete
-                  </Button>
-                </CardActions>
-              </Card>
-            </Grid>
-          ))}
-        </Grid>
-      )}
+      <DynamicVaultsList />
     </Container>
   );
 }

src/modules/api/repositories/vaults.repository.ts

@@ -1,8 +1,8 @@
 import { injectable } from 'tsyringe';
 import { Vault } from '@prisma/generated';
 import prisma from '@lib/prisma';
-import { CreateVaultRequestDto } from '@shared/dto/input/requests/create-vault.request.dto';
 import { handlePrismaRequest } from '@api/helpers/prisma/handle-prisma-request';
+import { CreateVaultPayloadDto } from '@shared/dto/input/payloads/create-vault.payload.dto';
 
 @injectable()
 export class VaultsRepository {
@@ -22,9 +22,9 @@ export class VaultsRepository {
     );
   }
 
-  public async create(params: CreateVaultRequestDto): Promise<Vault> {
+  public async create(payload: CreateVaultPayloadDto): Promise<Vault> {
     return await handlePrismaRequest<Vault>(() =>
-      prisma.vault.create({ data: params })
+      prisma.vault.create({ data: payload })
     );
   }
 

src/modules/api/usecases/vaults/create-vault.usecase.ts

@@ -4,14 +4,14 @@ import { IUseCaseWithInput } from '@api/usecases/abstract/usecase.with-input.int
 import { Vault } from '@prisma/generated';
 import { VaultAdapter } from '@api/adapters/vault.adapter';
 import { VaultsRepository } from '@api/repositories/vaults.repository';
-import { CreateVaultRequestDto } from '@shared/dto/input/requests/create-vault.request.dto';
 import { VaultAlreadyExistsError } from '@api/errors/business/vaults/vault-already-exists.error';
 import { RequestedValueTooLongError } from '@api/errors/http/prisma/requested-value-too-long.error';
 import { VaultLabelTooLongError } from '@api/errors/business/vaults/vault-label-too-long.error';
+import { CreateVaultPayloadDto } from '@shared/dto/input/payloads/create-vault.payload.dto';
 
 @injectable()
 export class CreateVaultUseCase
-  implements IUseCaseWithInput<CreateVaultRequestDto, VaultModelDto>
+  implements IUseCaseWithInput<CreateVaultPayloadDto, VaultModelDto>
 {
   public constructor(
     @inject(VaultsRepository)
@@ -20,7 +20,7 @@ export class CreateVaultUseCase
     private readonly _vaultAdapter: VaultAdapter
   ) {}
 
-  public async handle(input: CreateVaultRequestDto): Promise<VaultModelDto> {
+  public async handle(input: CreateVaultPayloadDto): Promise<VaultModelDto> {
     const vaultsFound: number = await this._vaultsRepository.countByLabel(
       input.label
     );

src/modules/shared/dto/input/requests/create-vault.request.dto.ts → src/modules/shared/dto/input/payloads/create-vault.payload.dto.ts

@@ -2,7 +2,7 @@
  * @swagger
  * components:
  *   schemas:
- *     CreateVaultRequestDto:
+ *     CreateVaultPayloadDto:
  *       type: object
  *       required:
  *         - label
@@ -15,7 +15,7 @@
  *           type: string
  *           description: Password, token, or other sensitive string to store
  */
-export type CreateVaultRequestDto = {
+export type CreateVaultPayloadDto = {
   label: string;
   secret: string;
 };

src/modules/shared/services/request.service.ts → src/modules/shared/requests/request.service.ts

@@ -58,10 +58,9 @@ export abstract class RequestService {
     });
   }
 
-  public async delete<T>(url: string): Promise<number> {
-    const output: RequestServiceOutputType<T> = await this._request<T>(url, {
+  public async delete<T>(url: string): Promise<RequestServiceOutputType<T>> {
+    return await this._request<T>(url, {
       method: 'DELETE',
     });
-    return output.status;
   }
 }

src/modules/ui/components/common/ErrorMessage.tsx

@@ -1,15 +1,13 @@
 import React from 'react';
 import type { JSX } from 'react';
 import { Typography } from '@mui/material';
-import { UiLogger } from '@ui/logs/ui.logger';
 
 type ErrorProps = {
   error: Error | null;
 };
 
 export default function ErrorMessage(props: ErrorProps): JSX.Element | null {
   if (!props.error) return null;
-  UiLogger.error(null, props.error);
   return (
     <Typography sx={{ color: 'red' }}>
       Error: {props.error.message || 'Unknown error'}

src/modules/ui/components/common/SearchBar.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { JSX, Dispatch, SetStateAction } from 'react';
+import { TextField } from '@mui/material';
+
+type SearchBarProps = {
+  searchTerm: string;
+  setSearchTerm: Dispatch<SetStateAction<string>>;
+};
+
+export default function SearchBar(props: SearchBarProps): JSX.Element {
+  return (
+    <TextField
+      fullWidth
+      placeholder="Search…"
+      value={props.searchTerm}
+      onChange={e => props.setSearchTerm(e.target.value)}
+    />
+  );
+}