feat(file): preview image after uploading

__mock-server__/file-server/server.js

@@ -5,7 +5,8 @@ const app = express();
 global.__basedir = __dirname;
 
 var corsOptions = {
-  origin: 'http://localhost:3000'
+  origin: 'http://localhost:3000',
+  credentials: true
 };
 
 app.use(cors(corsOptions));

src/components/home/ChooseFileBox.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { Dialog, DialogBody } from '@material-tailwind/react';
 import { ArrowUpTrayIcon } from '@heroicons/react/24/outline';
 import { useOrderWorkflowBox } from '@components/order';
+import { useFileStore } from '@states/home';
 import { useOrderWorkflowStore } from '@states/order';
 
 export function useChooseFileBox() {
@@ -10,12 +11,21 @@ export function useChooseFileBox() {
 
   const ChooseFileBox = () => {
     const { setOrderStep } = useOrderWorkflowStore();
+    const { uploadFile } = useFileStore();
+
     const handleOpenBox = () => setOpenBox(!openBox);
+    const handleUploadDocument = async (event: React.ChangeEvent<HTMLInputElement>) => {
+      if (event.target.files) {
+        await uploadFile(event.target.files[0]);
+        setOpenBox(false);
+        openOrderWorkflowBox();
+        setOrderStep(1);
+      }
+    };
 
     return (
       <>
         <Dialog
-          size='xs'
           className='2xl:max-w-fit 2xl:w-fit 2xl:min-w-fit lg:max-w-fit lg:w-fit lg:min-w-fit max-w-fit w-fit min-w-fit'
           open={openBox}
           handler={handleOpenBox}
@@ -25,7 +35,7 @@ export function useChooseFileBox() {
               htmlFor='dropzone-file'
               className='flex flex-col items-center w-[310px] h-[148px] gap-4 p-4 lg:w-[384px] lg:h-[190px] lg:p-7 border-2 border-blue/1 border-dashed rounded-lg cursor-pointer bg-blue-50 hover:bg-blue-100'
             >
-              <div className='flex gap-4'>
+              <div className='flex items-center gap-4'>
                 <ArrowUpTrayIcon
                   strokeWidth={2}
                   className='bg-blue/1 text-white rounded-full w-[40px] h-[40px] p-2 lg:w-[48px] lg:h-[48px] lg:p-3'
@@ -35,7 +45,7 @@ export function useChooseFileBox() {
                 </span>
               </div>
 
-              <div className='text-sm lg:text-base gap-1'>
+              <div className='text-sm lg:text-base'>
                 <span className='font-semibold h-[32px]'>Allowed formats:</span> .doc, .docx, .xls,
                 .xlsx, .ppt, .jpg, .png, .pdf
                 <div className='text-sm lg:text-base'>
@@ -47,11 +57,7 @@ export function useChooseFileBox() {
                 id='dropzone-file'
                 type='file'
                 className='hidden'
-                onChange={() => {
-                  setOpenBox(false);
-                  openOrderWorkflowBox();
-                  setOrderStep(1);
-                }}
+                onChange={handleUploadDocument}
               />
             </label>
           </DialogBody>

src/components/order/UploadDocumentForm.tsx

@@ -1,13 +1,17 @@
 import { Button } from '@material-tailwind/react';
+import { useFileStore } from '@states/home';
 import { useOrderWorkflowStore } from '@states/order';
 
 // Tan's first-task in here.
 export function UploadDocumentForm() {
   const { setOrderStep } = useOrderWorkflowStore();
+  const { fileTarget } = useFileStore();
+  console.log(fileTarget);
 
   return (
     <>
       <div>UploadDocumentForm</div>
+      {fileTarget && <img src={fileTarget.url} alt='docs' width='30%' />}
       <Button onClick={() => setOrderStep(2)}>Save</Button>
     </>
   );

src/constants/errorMessage.ts

@@ -0,0 +1 @@
+export const FILE_NOT_FOUND = 'File not found!';

src/constants/index.ts

@@ -2,6 +2,7 @@
  * @file Automatically generated by barrelsby.
  */
 
+export * from './errorMessage';
 export * from './home';
 export * from './menuBar';
 export * from './screen';

src/services/common/common.ts

@@ -10,6 +10,11 @@ export const mockServer = axios.create({
   withCredentials: true
 });
 
+export const mockFileServer = axios.create({
+  baseURL: 'http://localhost:3003',
+  withCredentials: true
+});
+
 export async function invoke<R = unknown, D = unknown>(call: Promise<AxiosResponse<R, D>>) {
   try {
     const response = await call;

src/services/home/file.ts

@@ -0,0 +1,16 @@
+import { mockFileServer, invoke } from '@services/common';
+
+export const fileService = {
+  upload: (file: File) => {
+    const formData = new FormData();
+    formData.append('file', file);
+    return invoke<{ message: string }>(
+      mockFileServer.post('/upload', formData, {
+        headers: {
+          'Content-Type': 'multipart/form-data'
+        }
+      })
+    );
+  },
+  getAll: () => invoke<FileData[]>(mockFileServer.get('/files'))
+};

src/services/home/index.ts

@@ -2,6 +2,7 @@
  * @file Automatically generated by barrelsby.
  */
 
+export * from './file';
 export * from './order';
 export * from './slide';
 export * from './userInfo';

src/states/home/file.ts

@@ -0,0 +1,37 @@
+import { create } from 'zustand';
+import { FILE_NOT_FOUND } from '@constants';
+import { fileService } from '@services/home';
+
+export const useFileStore = create<FileStore>()((set, get) => ({
+  fileStatus: 'UNINIT',
+  fileAll: [],
+  fileTarget: {
+    name: '',
+    url: ''
+  },
+  uploadFile: async (file) => {
+    set(() => ({ fileStatus: 'PENDING' }));
+    try {
+      await fileService.upload(file);
+      await get().getAllFiles();
+      const fileTarget = get().getFileByName(file.name);
+      set(() => ({ fileTarget: fileTarget, fileStatus: 'SUCCESS' }));
+    } catch (err) {
+      set(() => ({ fileStatus: 'REJECT' }));
+    }
+  },
+  getAllFiles: async () => {
+    set(() => ({ fileStatus: 'PENDING' }));
+    try {
+      const fileAll = await fileService.getAll();
+      set(() => ({ fileAll: fileAll, fileStatus: 'SUCCESS' }));
+    } catch (err) {
+      set(() => ({ fileStatus: 'REJECT' }));
+    }
+  },
+  getFileByName: (name) => {
+    const file = get().fileAll.find((item) => item.name === name);
+    if (!file) throw new Error(FILE_NOT_FOUND);
+    return file;
+  }
+}));

src/states/home/index.ts

@@ -2,6 +2,7 @@
  * @file Automatically generated by barrelsby.
  */
 
+export * from './file';
 export * from './order';
 export * from './slide';
 export * from './userInfo';

src/types/home/file.d.ts

@@ -0,0 +1,13 @@
+type FileData = {
+  name: string;
+  url: string;
+};
+
+type FileStore = {
+  fileStatus: StoreStatus;
+  fileAll: FileData[];
+  fileTarget: FileData;
+  uploadFile: (file: File) => Promise<void>;
+  getAllFiles: () => Promise<void>;
+  getFileByName: (name: string) => FileData;
+};