From 78f98fabe8b09bd33deada25df4d0b16e97480de Mon Sep 17 00:00:00 2001
From: Eric Doughty-Papassideris <edoughtypapassideris@linagora.com>
Date: Wed, 10 Apr 2024 10:22:28 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20=20frontend:=20document=20?=
 =?UTF-8?q?icon=20uses=20a=20lookup=20now=20(#50)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../body/drive/documents/document-icon.tsx    | 41 +++++++++----------
 1 file changed, 20 insertions(+), 21 deletions(-)

diff --git a/tdrive/frontend/src/app/views/client/body/drive/documents/document-icon.tsx b/tdrive/frontend/src/app/views/client/body/drive/documents/document-icon.tsx
index 3c350a13..0f970240 100644
--- a/tdrive/frontend/src/app/views/client/body/drive/documents/document-icon.tsx
+++ b/tdrive/frontend/src/app/views/client/body/drive/documents/document-icon.tsx
@@ -12,6 +12,18 @@ import {
 import { FolderIcon } from '@heroicons/react/solid';
 import fileUploadApiClient from '@features/files/api/file-upload-api-client';
 import type { DriveItem, FileMetadata } from 'app/features/drive/types';
+import { ComponentProps } from 'react';
+
+const FileTypeIcons: { [key: string]: (props: ComponentProps<'svg'>) => JSX.Element} = {
+  image: FileTypeMediaIcon,
+  video: FileTypeMediaIcon,
+  archive: FileTypeArchiveIcon,
+  pdf: FileTypePdfIcon,
+  document: FileTypeDocumentIcon,
+  spreadsheet: FileTypeSpreadsheetIcon,
+  slides: FileTypeSlidesIcon,
+  link: FileTypeLinkIcon,
+};
 
 export const DocumentIcon = (props: {
   item?: DriveItem;
@@ -24,31 +36,18 @@ export const DocumentIcon = (props: {
   );
   const metadata = (props.item?.last_version_cache?.file_metadata || {}) as FileMetadata;
   const className = props.className || 'h-5 w-5 shrink-0 text-gray-400';
-  return (metadata.thumbnails?.length || 0) > 0 ? (
-      <Avatar
+  const SpecificFileTypeIcon = FileTypeIcons[fileType] || FileTypeUnknownIcon;
+  return (
+    (metadata.thumbnails?.length || 0) > 0
+    ? <Avatar
         className={props.className}
         avatar={metadata.thumbnails?.[0]?.url}
         size="xs"
         type="square"
         title={metadata.name}
       />
-    ) : props.item?.is_directory ? (
-      <FolderIcon className={className + (props.blueiffyFolders || props.blueiffyFolders == null ? ' text-blue-500' : '')} />
-    ) : fileType === 'image' || fileType === 'video' ? (
-      <FileTypeMediaIcon className={className} />
-    ) : fileType === 'archive' ? (
-      <FileTypeArchiveIcon className={className} />
-    ) : fileType === 'pdf' ? (
-      <FileTypePdfIcon className={className} />
-    ) : fileType === 'document' ? (
-      <FileTypeDocumentIcon className={className} />
-    ) : fileType === 'spreadsheet' ? (
-      <FileTypeSpreadsheetIcon className={className} />
-    ) : fileType === 'slides' ? (
-      <FileTypeSlidesIcon className={className} />
-    ) : fileType === 'link' ? (
-      <FileTypeLinkIcon className={className} />
-    ) : (
-      <FileTypeUnknownIcon className={className} />
-    );
+    : props.item?.is_directory
+      ? <FolderIcon className={className + (props.blueiffyFolders || props.blueiffyFolders == null ? ' text-blue-500' : '')} />
+      : <SpecificFileTypeIcon className={className} />
+  );
 };