♻️ Frontend refactor: extracted drive item icon into own component

tdrive/frontend/src/app/views/client/body/drive/documents/document-icon.tsx

@@ -0,0 +1,54 @@
+import Avatar from '../../../../../atoms/avatar';
+import {
+  FileTypeArchiveIcon,
+  FileTypeDocumentIcon,
+  FileTypeLinkIcon,
+  FileTypeMediaIcon,
+  FileTypePdfIcon,
+  FileTypeSlidesIcon,
+  FileTypeSpreadsheetIcon,
+  FileTypeUnknownIcon,
+} from '@atoms/icons-colored';
+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';
+
+export const DocumentIcon = (props: {
+  item?: DriveItem;
+  className?: string;
+  fileType?: string;
+  blueiffyFolders?: boolean;
+}) => {
+  const fileType = props.fileType || fileUploadApiClient.mimeToType(
+    props.item?.last_version_cache?.file_metadata?.mime || '',
+  );
+  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
+        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} />
+    );
+};

tdrive/frontend/src/app/views/client/body/drive/documents/document-row.tsx

@@ -1,29 +1,18 @@
 import { DotsHorizontalIcon } from '@heroicons/react/outline';
 import { Button } from '@atoms/button/button';
-import {
-  FileTypeArchiveIcon,
-  FileTypeDocumentIcon,
-  FileTypeLinkIcon,
-  FileTypeMediaIcon,
-  FileTypePdfIcon,
-  FileTypeSlidesIcon,
-  FileTypeSpreadsheetIcon,
-  FileTypeUnknownIcon,
-} from '@atoms/icons-colored';
 import { Base, BaseSmall } from '@atoms/text';
 import Menu from '@components/menus/menu';
 import useRouterCompany from '@features/router/hooks/use-router-company';
 import { useDrivePreview } from '@features/drive/hooks/use-drive-preview';
 import { formatBytes } from '@features/drive/utils';
-import fileUploadApiClient from '@features/files/api/file-upload-api-client';
 import { useEffect, useState } from 'react';
-import Avatar from '../../../../../atoms/avatar';
 import { PublicIcon } from '../components/public-icon';
 import {CheckableIcon, DriveItemOverlayProps, DriveItemProps} from './common';
 import './style.scss';
 import { useHistory } from 'react-router-dom';
 import RouterServices from '@features/router/services/router-service';
 import useRouteState from 'app/features/router/hooks/use-route-state';
+import { DocumentIcon } from './document-icon';
 
 export const DocumentRow = ({
   item,
@@ -40,13 +29,6 @@ export const DocumentRow = ({
   const company = useRouterCompany();
   const { itemId } = useRouteState();
 
-  const fileType = fileUploadApiClient.mimeToType(
-    item?.last_version_cache?.file_metadata?.mime || '',
-  );
-
-  const metadata = item.last_version_cache?.file_metadata || {};
-  const hasThumbnails = !!metadata.thumbnails?.length || false;
-
   useEffect(() => {
     // close the preview if the item is not set or the user navigated away
     if(!itemId) {
@@ -90,34 +72,7 @@ export const DocumentRow = ({
           show={hover || checked}
           checked={checked}
           onCheck={onCheck}
-          fallback={
-            <>
-              {hasThumbnails ? (
-                <Avatar
-                  avatar={metadata.thumbnails?.[0]?.url}
-                  size="xs"
-                  type="square"
-                  title={metadata.name}
-                />
-              ) : fileType === 'image' || fileType === 'video' ? (
-                <FileTypeMediaIcon className={'h-5 w-5 shrink-0 text-gray-400'} />
-              ) : fileType === 'archive' ? (
-                <FileTypeArchiveIcon className={'h-5 w-5 shrink-0 text-gray-400'} />
-              ) : fileType === 'pdf' ? (
-                <FileTypePdfIcon className={'h-5 w-5 shrink-0 text-gray-400'} />
-              ) : fileType === 'document' ? (
-                <FileTypeDocumentIcon className={'h-5 w-5 shrink-0 text-gray-400'} />
-              ) : fileType === 'spreadsheet' ? (
-                <FileTypeSpreadsheetIcon className={'h-5 w-5 shrink-0 text-gray-400'} />
-              ) : fileType === 'slides' ? (
-                <FileTypeSlidesIcon className={'h-5 w-5 shrink-0 text-gray-400'} />
-              ) : fileType === 'link' ? (
-                <FileTypeLinkIcon className={'h-5 w-5 shrink-0 text-gray-400'} />
-              ) : (
-                <FileTypeUnknownIcon className={'h-5 w-5 shrink-0 text-gray-400'} />
-              )}
-            </>
-          }
+          fallback={<DocumentIcon item={item} />}
         />
       </div>
       <div className="grow text-ellipsis whitespace-nowrap overflow-hidden">