[FS-281]: Project Document Api Integration

.github/workflows/CI.yml

@@ -47,6 +47,7 @@ jobs:
     env:
       APP_API_ENDPOINT: /graphql
       NODE_ENV: development
+      APP_FILE_STORAGE_API_ENDPOINT: ${{vars.APP_FILE_STORAGE_API_ENDPOINT }}
       APP_GRAPHQL_SCHEMA_URL: ${{ vars.APP_GRAPHQL_SCHEMA_URL }}
       APP_AUTH0_AUDIENCE: ${{ vars.APP_AUTH0_AUDIENCE }}
       APP_AUTH0_DOMAIN: ${{ vars.APP_AUTH0_DOMAIN }}
@@ -84,6 +85,7 @@ jobs:
 
     environment: Preview
     env:
+      APP_FILE_STORAGE_API_ENDPOINT: ${{vars.APP_FILE_STORAGE_API_ENDPOINT }}
       APP_GRAPHQL_SCHEMA_URL: ${{ vars.APP_GRAPHQL_SCHEMA_URL }}
       APP_AUTH0_AUDIENCE: ${{ vars.APP_AUTH0_AUDIENCE }}
       APP_API_ENDPOINT: ${{ vars.APP_API_ENDPOINT }}

@types/vite-env.d.ts

@@ -1,4 +1,5 @@
 interface ImportMetaEnv {
+  readonly APP_FILE_STORAGE_API_ENDPOINT: string;
   readonly APP_API_ENDPOINT: string;
   readonly APP_GRAPHQL_SCHEMA_URL?: string;
   readonly APP_AUTH0_DOMAIN: string;

app/Dashboard/Projects/ProjectDetail/_components/CreateProjectDocument/CreateProjectDocumentForm/CreateProjectDocumentForm.tsx

@@ -2,19 +2,18 @@ import { debug, DebugScopes } from '@camp/debug';
 import {
   ControlledDateInput,
   ControlledFileUpload,
-  FileUpload,
   showNotification,
 } from '@camp/design';
 import {
   createResolver,
   documentFileValidator,
   documentSchema,
 } from '@camp/domain';
+import { fileStorageApi } from '@camp/file-storage-api';
 import { messages } from '@camp/messages';
 import { tid } from '@camp/test';
 import { Button, createStyles, Group, Stack, TextInput } from '@mantine/core';
-import { Controller, useForm } from 'react-hook-form';
-import type { SafeParseError, SafeParseSuccess } from 'zod';
+import { useForm } from 'react-hook-form';
 
 import { createProjectDocumentFormIds as ids } from './CreateProjectDocumentForm.ids';
 
@@ -42,25 +41,6 @@ const useStyle = createStyles(theme => ({
   },
 }));
 
-// FIXME replace with actual upload
-
-// eslint-disable-next-line fp/no-let
-let x = 0;
-
-const uploadDocument = () => {
-  return new Promise<void>((res, rej) => {
-    setTimeout(() => {
-      x++;
-      if (x === 3) rej();
-      else res();
-    }, 1000);
-  });
-};
-
-const unUploadDocument = () => {
-  return uploadDocument();
-};
-
 export const CreateProjectDocumentForm = ({ dismiss }: Props) => {
   const t = messages.projectDetail.addDocument.form;
   const { handleSubmit, register, formState, control } = useForm<FormSchema>({
@@ -100,22 +80,25 @@ export const CreateProjectDocumentForm = ({ dismiss }: Props) => {
           required
           label={t.documentsInput.label}
           helper={t.documentsInput.maxSize}
-          upload={uploadDocument}
-          unUpload={unUploadDocument}
+          upload={fileStorageApi.upload}
+          unUpload={fileStorageApi.unUpload}
           filter={(files): File[] => {
-            const res = files.map(f => documentFileValidator.safeParse(f));
-            const firstError = res.find(
-              r => !r.success,
-            ) as SafeParseError<File> | null;
+            const res = files.map(f => {
+              const parsed = documentFileValidator.safeParse(f);
+              return {
+                file: f,
+                error: !parsed.success ? parsed.error : undefined,
+              };
+            });
+
+            const firstError = res.find(r => r.error);
 
             if (firstError != null)
               showNotification({
-                message: firstError.error.issues[0]!.message,
+                message: firstError.error!.issues[0]!.message,
                 type: 'failure',
               });
-            return res
-              .filter((r): r is SafeParseSuccess<File> => r.success)
-              .map(r => r.data);
+            return res.filter(r => !r.error).map(r => r.file);
           }}
         />
 

cypress.config.ts

@@ -19,6 +19,7 @@ const envs = new Config({
   }),
   api: Config.object({
     endpoint: Config.string().required(),
+    fileEndpoint: Config.string().required(),
     secret: Config.string().required(),
   }),
 }).parse({
@@ -36,6 +37,7 @@ const envs = new Config({
   api: {
     endpoint: process.env.APP_API_ENDPOINT,
     secret: process.env.APP_HASURA_ADMIN_SECRET,
+    fileEndpoint: process.env.APP_FILE_STORAGE_API_ENDPOINT,
   },
 });
 
@@ -48,6 +50,7 @@ export default defineConfig({
     defaultCommandTimeout: 10000,
     experimentalMemoryManagement: true,
     env: {
+      APP_FILE_STORAGE_API_ENDPOINT: envs.get('api.fileEndpoint'),
       APP_AUTH0_AUDIENCE: envs.get('auth0.audience'),
       APP_AUTH0_DOMAIN: envs.get('auth0.domain'),
       APP_AUTH0_CLIENT_ID: envs.get('auth0.clientId'),

libs/config/config.ts

@@ -1,6 +1,10 @@
 import { z } from 'zod';
 
 const Config = z.object({
+  fileStorageApiEndpoint: z.union([
+    z.string().url(),
+    z.string().regex(/^\/.*$/),
+  ]),
   apiEndpoint: z.union([z.string().url(), z.string().regex(/^\/.*$/)]),
   schemaUrl: z.string().url().optional(),
   hasuraSecret: z.string().optional(),
@@ -22,6 +26,7 @@ const Config = z.object({
 export type Config = z.infer<typeof Config>;
 
 export const config = Config.parse({
+  fileStorageApiEndpoint: import.meta.env.APP_FILE_STORAGE_API_ENDPOINT,
   apiEndpoint: import.meta.env.APP_API_ENDPOINT,
   schemaUrl: import.meta.env.APP_GRAPHQL_SCHEMA_URL,
   hasuraSecret: import.meta.env.APP_HASURA_ADMIN_SECRET,

libs/design/FileUpload/ControlledFileUpload.tsx

@@ -1,6 +1,7 @@
 import type { Control, FieldValues, Path, PathValue } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
 
+import type { RemoteDocument } from '../../domain';
 import type { FileUploadProps } from './FileUpload';
 import { FileUpload } from './FileUpload';
 
@@ -23,24 +24,22 @@ export const ControlledFileUpload = <T extends FieldValues>({
       defaultValue={defaultValue}
       render={({ field }) => (
         <FileUpload
-          onDelete={i => {
-            // FIXME we should get the uploaded file here and set it
+          onDelete={deletedDoc => {
             if (Array.isArray(field.value))
               field.onChange({
                 target: {
-                  value: (field.value as any[]).filter(
-                    (_, index) => i !== index,
+                  value: (field.value as RemoteDocument[]).filter(
+                    doc => doc.id !== deletedDoc.id,
                   ),
                   name: field.name,
                 },
               });
           }}
-          onAdd={file => {
-            // FIXME we should get the uploaded file here and set it
+          onAdd={remote => {
             if (Array.isArray(field.value))
               field.onChange({
                 target: {
-                  value: [...field.value, file],
+                  value: [...field.value, remote],
                   name: field.name,
                 },
               });

libs/design/FileUpload/File.tsx

@@ -12,6 +12,7 @@ interface Props {
 
 export const File = ({ file, onRemove }: Props) => {
   const [isDeleting, setIsDeleting] = useState(false);
+  const loading = isDeleting || file.status === 'Uploading';
 
   return (
     <Group
@@ -35,8 +36,8 @@ export const File = ({ file, onRemove }: Props) => {
             setIsDeleting(false);
           }
         }}
-        loading={isDeleting}
-        disabled={isDeleting}
+        loading={loading}
+        disabled={loading}
       >
         <TrashIcon size="18px" />
       </ActionIcon>

libs/design/FileUpload/FileState.ts

@@ -1,10 +1,13 @@
+import type { RemoteDocument } from '../../domain';
+
 interface BaseFile {
   id: number;
   file: File;
 }
 
 export interface SuccessFile extends BaseFile {
   status: 'Success';
+  remote: RemoteDocument;
 }
 
 interface UploadingFile extends BaseFile {

libs/design/FileUpload/FileUpload.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
+import type { FailedFile, SuccessFile } from './FileState';
 import type { FileUploadProps } from './FileUpload';
 import { FileUpload } from './FileUpload';
 
@@ -28,12 +29,34 @@ export const Disabled: Story = {
 export const WithFiles: Story = {
   args: {
     defaultFiles: [
-      { name: 'Some Random Name' } as File,
-      { name: 'Some Random Name Which is long' } as File,
-      { name: 'Some Random Name Which is very very long' } as File,
+      {
+        name: 'Some Random Name',
+        remote: { id: 'x', url: 'https://nowhere.com' },
+        status: 'Success',
+        id: 123,
+        file: new File([], 'random'),
+      } as SuccessFile,
+      {
+        name: 'Some Random Name Which is long',
+        remote: { id: 'x', url: 'https://nowhere.com' },
+        status: 'Success',
+        id: 123,
+        file: new File([], 'random'),
+      } as SuccessFile,
+      {
+        name: 'Some Random Name Which is very very long',
+        remote: { id: 'x', url: 'https://nowhere.com' },
+        status: 'Success',
+        id: 123,
+        file: new File([], 'random'),
+      } as SuccessFile,
       {
         name: 'Some Random Name Which is even longer than what we had before',
-      } as File,
+        remote: { id: 'x', url: 'https://nowhere.com' },
+        status: 'Success',
+        id: 123,
+        file: new File([], 'random'),
+      } as SuccessFile,
     ],
   },
 };
@@ -43,10 +66,30 @@ export const Error: Story = {
     variant: 'error',
     required: true,
     defaultFiles: [
-      { name: 'Some Random Name' } as File,
-      { name: 'Some Random Name Which is long' } as File,
-      { name: 'Some Random Name Which is long' } as File,
-      { name: 'Some Random Name Which is long' } as File,
+      {
+        name: 'Some Random Name',
+        status: 'Failed',
+        id: 123,
+        file: new File([], 'random'),
+      } as FailedFile,
+      {
+        name: 'Some Random Name Which is long',
+        status: 'Failed',
+        id: 123,
+        file: new File([], 'random'),
+      } as FailedFile,
+      {
+        name: 'Some Random Name Which is long',
+        status: 'Failed',
+        id: 123,
+        file: new File([], 'random'),
+      } as FailedFile,
+      {
+        name: 'Some Random Name Which is long',
+        status: 'Failed',
+        id: 123,
+        file: new File([], 'random'),
+      } as FailedFile,
     ],
   },
 };