From 4d4c242e2c1e9f092b9c53b5a771602dcd5adb7c Mon Sep 17 00:00:00 2001
From: Montassar Ghanmy <Monta.ghanmy@gmail.com>
Date: Thu, 27 Feb 2025 10:41:23 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20file=20icons=20for=20root?=
 =?UTF-8?q?=20upload=20(#826)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../file-type-icon-map.tsx                    | 44 +++++++++----------
 .../pending-root-row.tsx                      |  8 ++--
 2 files changed, 24 insertions(+), 28 deletions(-)

diff --git a/tdrive/frontend/src/app/components/file-uploads/pending-root-components/file-type-icon-map.tsx b/tdrive/frontend/src/app/components/file-uploads/pending-root-components/file-type-icon-map.tsx
index 8df50d0e..6960edd4 100644
--- a/tdrive/frontend/src/app/components/file-uploads/pending-root-components/file-type-icon-map.tsx
+++ b/tdrive/frontend/src/app/components/file-uploads/pending-root-components/file-type-icon-map.tsx
@@ -8,28 +8,24 @@ import {
 } from 'app/atoms/icons-colored';
 
 // Map mime types to their respective JSX icon elements
-export const fileTypeIconsMap = {
-  'application/pdf': <FileTypePdfIcon />,
-  'application/vnd.openxmlformats-officedocument.wordprocessingml.document': (
-    <FileTypeDocumentIcon />
-  ),
-  'application/msword': <FileTypeDocumentIcon />,
-  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': <FileTypeSpreadsheetIcon />,
-  'application/vnd.ms-excel': <FileTypeSpreadsheetIcon />,
-  'application/vnd.ms-powerpoint': <FileTypeSlidesIcon />,
-  'application/vnd.openxmlformats-officedocument.presentationml.presentation': (
-    <FileTypeSlidesIcon />
-  ),
-  'application/zip': <FileTypeArchiveIcon />,
-  'application/x-rar-compressed': <FileTypeArchiveIcon />,
-  'application/x-tar': <FileTypeArchiveIcon />,
-  'application/x-7z-compressed': <FileTypeArchiveIcon />,
-  'application/x-bzip': <FileTypeArchiveIcon />,
-  'application/x-bzip2': <FileTypeArchiveIcon />,
-  'application/x-gzip': <FileTypeArchiveIcon />,
-  'video/mp4': <FileTypeMediaIcon />,
-  'video/mpeg': <FileTypeMediaIcon />,
-  'video/ogg': <FileTypeMediaIcon />,
-  'video/webm': <FileTypeMediaIcon />,
-  'video/quicktime': <FileTypeMediaIcon />,
+export const fileTypeIconsMap: Record<string, JSX.Element> = {
+  pdf: <FileTypePdfIcon />,
+  doc: <FileTypeDocumentIcon />,
+  docx: <FileTypeDocumentIcon />,
+  xls: <FileTypeSpreadsheetIcon />,
+  xlsx: <FileTypeSpreadsheetIcon />,
+  ppt: <FileTypeSlidesIcon />,
+  pptx: <FileTypeSlidesIcon />,
+  zip: <FileTypeArchiveIcon />,
+  rar: <FileTypeArchiveIcon />,
+  tar: <FileTypeArchiveIcon />,
+  '7z': <FileTypeArchiveIcon />,
+  bz: <FileTypeArchiveIcon />,
+  bz2: <FileTypeArchiveIcon />,
+  gz: <FileTypeArchiveIcon />,
+  mp4: <FileTypeMediaIcon />,
+  mpeg: <FileTypeMediaIcon />,
+  ogg: <FileTypeMediaIcon />,
+  webm: <FileTypeMediaIcon />,
+  mov: <FileTypeMediaIcon />,
 };
diff --git a/tdrive/frontend/src/app/components/file-uploads/pending-root-components/pending-root-row.tsx b/tdrive/frontend/src/app/components/file-uploads/pending-root-components/pending-root-row.tsx
index 2c66893f..eeb99735 100644
--- a/tdrive/frontend/src/app/components/file-uploads/pending-root-components/pending-root-row.tsx
+++ b/tdrive/frontend/src/app/components/file-uploads/pending-root-components/pending-root-row.tsx
@@ -30,11 +30,11 @@ const PendingRootRow = ({
   const { restore } = useDriveActions();
   const { refresh, children } = useDriveItem(item?.parent_id || '');
 
-  const firstPendingFile = root.items[0];
   const uploadedFilesSize = root.uploadedSize;
   const uploadProgress = Math.floor((uploadedFilesSize / root.size) * 100);
   const isUploadCompleted = root.status === 'completed';
   const isFileRoot = rootKey.includes('.');
+  const fileType = isFileRoot ? rootKey.split('.').pop() : '';
 
   // Callback function to open the folder after the upload is completed
   const handleShowFolder = useCallback(() => {
@@ -122,7 +122,7 @@ const PendingRootRow = ({
         <div className="flex items-center">
           <div className="w-10 h-10 flex items-center justify-center bg-[#f3f3f7] rounded-md">
             <div className="w-full h-full flex items-center justify-center testid:upload-root-modal-row-type">
-              {itemTypeIcon(firstPendingFile?.type)}
+              {itemTypeIcon(fileType || '')}
             </div>
           </div>
           <p className="ml-4">
@@ -163,9 +163,9 @@ const PendingRootRow = ({
               </button>
             ) : (
               !['cancelled', 'failed'].includes(root.status) &&
-              firstPendingFile?.status !== 'error' && (
+              root?.status !== 'error' && (
                 <>
-                  {root.status === 'paused' ? (
+                  {root.status === 'failed' ? (
                     <button
                       onClick={() => pauseOrResumeRootUpload(rootKey)}
                       className="hover:bg-blue-100 p-2 rounded-md transition-all duration-200 testid:upload-root-modal-row-resume"