♻️(front) refactor file preview icons

The previous implementation was not using the extension to guess
the type of the file. But in somes cases it is required, the grist
file were showing up as sql files. Also make the implementation
lighter directly based on FilePreviewType. Also remove some dead
code.

Author: NathanVss

src/frontend/apps/drive/src/features/explorer/components/icons/ItemIcon.tsx

@@ -14,6 +14,8 @@ import {
   IconSize,
 } from "@gouvfr-lasuite/ui-kit";
 import { useMemo } from "react";
+import { FilePreviewType } from "@/features/ui/preview/files-preview/FilesPreview";
+import { getExtensionFromName } from "../../utils/utils";
 
 type ItemIconProps = {
   item: Item;
@@ -95,30 +97,29 @@ export const getItemIcon = (
   return ICONS[type][category];
 };
 
-export const getIconByMimeType = (
-  mimeType: string,
-  type: "mini" | "normal"
-) => {
-  const category = getMimeCategory(mimeType);
-  return ICONS[type][category];
-};
-
-type IconFromMimeTypeProps = {
-  mimeType: string;
-  size?: "small" | "medium" | "large" | "xlarge";
-  type?: "mini" | "normal";
-};
-
-export const IconFromMimeType = ({
-  mimeType,
+/**
+ * Used by the FilePreview component to display the file icon.
+ * The FilePreview only uses FilePreviewType, not Item, so it needs a
+ * dedicated component to display the file icon.
+ */
+export const FileIcon = ({
+  file,
   size = "medium",
   type = "normal",
-}: IconFromMimeTypeProps) => {
-  const mimeIcon = getIconByMimeType(mimeType, type);
+}: {
+  file: FilePreviewType;
+  size?: "small" | "medium" | "large" | "xlarge";
+  type?: "mini" | "normal";
+}) => {
+  const category = getMimeCategory(
+    file.mimetype,
+    getExtensionFromName(file.title)
+  );
+  const icon = ICONS[type][category];
 
   return (
     <img
-      src={mimeIcon.src}
+      src={icon.src}
       alt=""
       className={`item-icon ${size}`}
       draggable="false"

src/frontend/apps/drive/src/features/explorer/utils/mimeTypes.ts

@@ -41,36 +41,6 @@ export enum MimeCategory {
   GRIST = "grist",
 }
 
-export const MIME_TO_ICON = {
-  [MimeCategory.CALC]: mimeCalc,
-  [MimeCategory.DOC]: mimeDoc,
-  [MimeCategory.IMAGE]: mimeImage,
-  [MimeCategory.OTHER]: mimeOther,
-  [MimeCategory.PDF]: mimePdf,
-  [MimeCategory.POWERPOINT]: mimePowerpoint,
-  [MimeCategory.AUDIO]: mimeAudio,
-  [MimeCategory.VIDEO]: mimeVideo,
-  [MimeCategory.ARCHIVE]: mimeArchive,
-  [MimeCategory.SUSPICIOUS]: mimeSuspicious,
-  [MimeCategory.SQLITE]: mimeSQLite,
-  [MimeCategory.GRIST]: mimeGrist,
-};
-
-export const MIME_TO_ICON_MINI = {
-  [MimeCategory.CALC]: mimeCalcMini,
-  [MimeCategory.DOC]: mimeDocMini,
-  [MimeCategory.IMAGE]: mimeImageMini,
-  [MimeCategory.OTHER]: mimeOther,
-  [MimeCategory.PDF]: mimePdfMini,
-  [MimeCategory.POWERPOINT]: mimePowerpointMini,
-  [MimeCategory.AUDIO]: mimeAudioMini,
-  [MimeCategory.VIDEO]: mimeVideoMini,
-  [MimeCategory.ARCHIVE]: mimeArchiveMini,
-  [MimeCategory.SUSPICIOUS]: mimeSuspicious,
-  [MimeCategory.SQLITE]: mimeSQLiteMini,
-  [MimeCategory.GRIST]: mimeGristMini,
-};
-
 export const ICONS = {
   mini: {
     [MimeCategory.CALC]: mimeCalcMini,

src/frontend/apps/drive/src/features/explorer/utils/utils.ts

@@ -68,6 +68,10 @@ export const timeAgo = (date: Date) => {
 /** TODO: test */
 export const getExtension = (item: Item, useTitle = false) => {
   const str = useTitle ? item.title : item.filename;
+  return getExtensionFromName(str);
+};
+
+export const getExtensionFromName = (str: string) => {
   if (!str) {
     return null;
   }

src/frontend/apps/drive/src/features/ui/preview/error/ErrorPreview.tsx

@@ -3,7 +3,7 @@ import { FilePreviewType } from "../files-preview/FilesPreview";
 
 import { Button } from "@openfun/cunningham-react";
 import { Icon, IconType } from "@gouvfr-lasuite/ui-kit";
-import { IconFromMimeType } from "@/features/explorer/components/icons/ItemIcon";
+import { FileIcon } from "@/features/explorer/components/icons/ItemIcon";
 import { downloadFile } from "@/features/items/utils";
 import { useCallback } from "react";
 
@@ -21,7 +21,7 @@ export const ErrorPreview = ({ file }: ErrorPreviewProps) => {
   return (
     <div className="file-preview-error">
       <div className="file-preview-error__icon">
-        <IconFromMimeType mimeType={file.mimetype} size="xlarge" />
+        <FileIcon file={file} size="xlarge" />
       </div>
       <div className="file-preview-error__title">
         {t("file_preview.error.title")}

src/frontend/apps/drive/src/features/ui/preview/files-preview/FilesPreview.tsx

@@ -12,7 +12,7 @@ import { AudioPlayer } from "../audio-player/AudioPlayer";
 import { PreviewPdf } from "../pdf-preview/PreviewPdf";
 
 import { NotSupportedPreview } from "../not-supported/NotSupportedPreview";
-import { getIconByMimeType } from "@/features/explorer/components/icons/ItemIcon";
+import { FileIcon } from "@/features/explorer/components/icons/ItemIcon";
 import { useTranslation } from "react-i18next";
 import { SuspiciousPreview } from "../suspicious/SuspiciousPreview";
 import { WopiEditor } from "../wopi/WopiEditor";
@@ -174,13 +174,7 @@ export const FilePreview = ({
                 )}
 
                 <div className="file-preview-title">
-                  <img
-                    src={getIconByMimeType(currentFile.mimetype, "mini").src}
-                    alt=""
-                    width={24}
-                    className={`item-icon`}
-                    draggable="false"
-                  />
+                  <FileIcon file={currentFile} type="mini" size="small" />
                   <h1 className="file-preview-title">
                     {removeFileExtension(currentFile?.title || title)}
                   </h1>

src/frontend/apps/drive/src/features/ui/preview/not-supported/NotSupportedPreview.tsx

@@ -3,7 +3,7 @@ import { FilePreviewType } from "../files-preview/FilesPreview";
 
 import { Button } from "@openfun/cunningham-react";
 import { Icon, IconType } from "@gouvfr-lasuite/ui-kit";
-import { IconFromMimeType } from "@/features/explorer/components/icons/ItemIcon";
+import { FileIcon } from "@/features/explorer/components/icons/ItemIcon";
 import { useCallback } from "react";
 
 interface NotSupportedPreviewProps {
@@ -24,7 +24,7 @@ export const NotSupportedPreview = ({
   return (
     <div className="file-preview-unsupported">
       <div className="file-preview-unsupported__icon">
-        <IconFromMimeType mimeType={file.mimetype} size="xlarge" />
+        <FileIcon file={file} size="xlarge" />
       </div>
       <p className="file-preview-unsupported__title">
         {t("file_preview.unsupported.title")}