file deletion and file info

client/src/components/excels/ExcelTable.tsx

@@ -10,22 +10,22 @@ const ExcelTable: React.FC<ExcelTableProps> = ({ excel }) => {
     <table className="min-w-full divide-y divide-gray-200">
       <thead className="bg-gray-50">
         <tr>
-          {excel.headerRow.map((header, index) => (
+          {excel.columns.map((col, index) => (
             <th
               key={index}
               className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
             >
-              {header}
+              {col}
             </th>
           ))}
         </tr>
       </thead>
       <tbody className="bg-white divide-y divide-gray-200">
-        {excel.bodyRows.map((row, index) => (
+        {excel.rows.map((row, index) => (
           <tr key={index} className="even:bg-gray-50">
-            {excel.headerRow.map((header) => (
-              <td key={header} className="px-6 py-4 whitespace-nowrap">
-                {row[header]}
+            {excel.columns.map((col) => (
+              <td key={col} className="px-6 py-4 whitespace-nowrap">
+                {row[col]}
               </td>
             ))}
           </tr>

client/src/components/excels/FileInfo.tsx

@@ -13,7 +13,7 @@ function FileInfo({ excel, onExcelInfoClose }: FileInfoProps) {
   return (
     <Paper className="w-full h-full flex flex-col gap-12">
       <div className="flex items-center justify-between">
-        <h2 className="text-xl font-bold">{excel.name}</h2>
+        <h2 className="text-xl font-bold">{excel.fileName}</h2>
         <Button onClick={onExcelInfoClose}>Close</Button>
       </div>
       <Divider />

client/src/components/excels/UploadedFiles.tsx

@@ -1,29 +1,21 @@
 import { Excel } from "../../types";
-import { APIFetcher } from "../../utils/fetcher";
 import Paper from "../Paper";
 import Button from "../ui/Button";
 import UploadedFileList from "./UploadedFileList";
 
 type UploadedFiles = {
   files: Excel[];
   onExcelInfoClick: (id: string) => void;
-  onExcelDownloadClick: (fileId: string, fileName: string) => void;
+  onExcelDownloadClick: (fileId: string, fileName: string) => Promise<void>;
+  onExcelRemoveClick: (fileId: string) => Promise<void>;
 };
 
 function UploadedFiles({
   files,
   onExcelInfoClick,
   onExcelDownloadClick,
+  onExcelRemoveClick,
 }: UploadedFiles) {
-  const handleDeleteClick = async (id: string) => {
-    try {
-      await APIFetcher<void, undefined>(`/excels/${id}`, "DELETE");
-      alert("File deleted successfully");
-    } catch (error) {
-      console.error("Failed to delete file:", error);
-    }
-  };
-
   return (
     <Paper className="flex-1 h-full overflow-auto">
       <h2 className="text-lg font-bold mb-2">Uploaded Files</h2>
@@ -37,7 +29,7 @@ function UploadedFiles({
             >
               Download
             </Button>
-            <Button variant="danger" onClick={() => handleDeleteClick(id)}>
+            <Button variant="danger" onClick={() => onExcelRemoveClick(id)}>
               Remove
             </Button>
           </div>

client/src/routes/excels.tsx

@@ -4,7 +4,6 @@ import { useAppContext } from "../context/useAppProvider";
 import { APIFetcher } from "../utils/fetcher";
 import UploadedFiles from "../components/excels/UploadedFiles";
 import PendingFiles from "../components/excels/PendingFiles";
-import { mocks } from "../mocks";
 import {
   Excel,
   ExcelsListResponse,
@@ -38,10 +37,16 @@ function Excels() {
     }
 
     const formData = new FormData();
-    Array.from(files).forEach((file) => {
-      formData.append("files", file);
+    files.forEach((file) => {
+      const cleanName = cleanFileName(file.name);
+      formData.append("files", new File([file], cleanName));
     });
 
+    // TODO: check if files length > 5, if so, sperate them into array of 5 files on each (cell) object in the array
+    // if there are 7 files for example, it will be [{file,file,file,file,file}, {file,file}] and get sent in chunks
+    // change to /excels/pending/${selectedUser.id}
+    // change to /excels/uploads/${selectedUser.id}
+    // on the server it will be /excels/:folderName/:userId
     try {
       const response = await APIFetcher<ExcelsUploadResponse>(
         `/excels/upload/${selectedUser.id}`,
@@ -59,14 +64,17 @@ function Excels() {
     }
   };
 
-  const handleExcelInfoClick = (id: string) => {
-    // TODO: Api Call
-    const findExcelFile = mocks.excelSpreadsheets.find((exc) => exc.id === id);
-    if (!findExcelFile) {
-      return;
-    }
+  const handleExcelInfoClick = async (fileId: string) => {
+    try {
+      const response = await APIFetcher<ExcelSpreadsheet>(
+        `/excels/${selectedUser.id}/uploads/${fileId}`,
+        "GET"
+      );
 
-    setExcelInfo(findExcelFile);
+      setExcelInfo(response);
+    } catch (error) {
+      console.error("Info error:", (error as Error).message);
+    }
   };
 
   const handleExcelInfoClose = () => {
@@ -94,6 +102,27 @@ function Excels() {
     }
   };
 
+  const handleExcelRemoveClick = async (fileId: string) => {
+    try {
+      await APIFetcher<void>(
+        `/excels/delete/${selectedUser.id}/${fileId}`,
+        "DELETE"
+      );
+
+      const filteredIdFromUploadedFiles = uploadedFiles.filter(
+        (file) => file.id !== fileId
+      );
+
+      setUploadedFiles(filteredIdFromUploadedFiles);
+    } catch (error) {
+      console.error("Failed to delete the file:", (error as Error).message);
+    }
+  };
+
+  const cleanFileName = (fileName: string) => {
+    return fileName.replace(/[^\x20-\x7E]/g, "");
+  };
+
   useEffect(() => {
     const getPendingUploadedFiles = async () => {
       try {
@@ -129,6 +158,7 @@ function Excels() {
               files={uploadedFiles}
               onExcelInfoClick={handleExcelInfoClick}
               onExcelDownloadClick={handleExcelDownloadClick}
+              onExcelRemoveClick={handleExcelRemoveClick}
             />
             <PendingFiles files={pendingFiles} />
           </div>

client/src/types/index.ts

@@ -20,10 +20,10 @@ export type ExcelRow = {
 };
 
 export type ExcelSpreadsheet = {
-  id: string;
-  name: string;
-  headerRow: string[];
-  bodyRows: ExcelRow[];
+  fileId: string;
+  fileName: string;
+  columns: string[];
+  rows: ExcelRow[];
 };
 
 export type ExcelsUploadResponse = {

server/src/excel/excel.controller.ts

@@ -17,6 +17,7 @@ import { Response } from 'express';
 export class ExcelController {
   constructor(private readonly excelService: ExcelService) {}
 
+  // TODO: change to /:userId, GET
   @Get('list/:userId')
   async listFiles(@Param('userId') userId: number) {
     const pendingFiles = await this.excelService.listFiles(userId, 'pending');
@@ -28,15 +29,15 @@ export class ExcelController {
     };
   }
 
-  @Get('read/:userId/:folder/:filename')
-  readFile(
+  @Get(':userId/uploads/:fileId')
+  async readFile(
     @Param('userId') userId: number,
-    @Param('folder') folder: 'uploads' | 'pending',
-    @Param('filename') filename: string,
-  ): string {
-    return this.excelService.readFile(userId, folder, filename);
+    @Param('fileId') fileId: number,
+  ) {
+    return await this.excelService.getCustomerData(userId, fileId);
   }
 
+  // TODO: change to /:folderName/:userId, POST
   @Post('upload/:userId')
   @UseInterceptors(FilesInterceptor('files', 10))
   async uploadFiles(
@@ -48,20 +49,28 @@ export class ExcelController {
     const pendingFiles = await this.excelService.listFiles(userId, 'pending');
     const uploadedFiles = await this.excelService.listFiles(userId, 'uploads');
 
+    console.log(`Pending file ${pendingFiles}`);
+    console.log(`Uploaded file ${uploadedFiles}`);
+
     return {
       message: 'Files processed successfully',
       pendingFiles,
       uploadedFiles,
     };
   }
 
-  @Delete('delete/:userId/:folder/:filename')
-  deleteFile(
+  @Delete('delete/:userId/:fileId')
+  async deleteFile(
     @Param('userId') userId: number,
-    @Param('folder') folder: 'uploads' | 'pending',
-    @Param('filename') filename: string,
-  ): void {
-    this.excelService.deleteFile(userId, folder, filename);
+    @Param('fileId') fileId: number,
+  ): Promise<{ fileId: number }> {
+    try {
+      await this.excelService.deleteFile(userId, fileId);
+      return { fileId };
+    } catch (error) {
+      console.error('Error deleting file:', error.message);
+      throw new NotFoundException(error.message);
+    }
   }
 
   @Get('download/:userId/:fileId')
@@ -76,10 +85,6 @@ export class ExcelController {
         fileId,
       );
 
-      console.log('before download');
-      console.log(filePath);
-      console.log(fileName);
-
       res.download(filePath, fileName, (err) => {
         if (err) {
           console.error('Error downloading the file:', err);