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

linagora · May 13, 2024 · 430c7e8 · 430c7e8
1 parent 579b649
commit 430c7e8
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 78 deletions.
diff --git a/tdrive/frontend/src/app/components/search-popup/parts/drive-item-result.tsx b/tdrive/frontend/src/app/components/search-popup/parts/drive-item-result.tsx
@@ -5,21 +5,11 @@ import { onDriveItemDownloadClick } from '../common';
 import ResultContext from './result-context';
 import { Button } from '@atoms/button/button';
 import { DownloadIcon } from '@atoms/icons-agnostic';
-import {
-  FileTypeArchiveIcon,
-  FileTypeDocumentIcon,
-  FileTypePdfIcon,
-  FileTypeSlidesIcon,
-  FileTypeSpreadsheetIcon,
-  FileTypeUnknownIcon,
-} from '@atoms/icons-colored';
 import * as Text from '@atoms/text';
-import { useCompanyApplications } from '@features/applications/hooks/use-company-applications';
 import { DriveItem } from '@features/drive/types';
 import FileUploadAPIClient from '@features/files/api/file-upload-api-client';
 import { formatDate } from '@features/global/utils/format-date';
 import { formatSize } from '@features/global/utils/format-file-size';
-import useRouterWorkspace from '@features/router/hooks/use-router-workspace';
 import { useSearchModal } from '@features/search/hooks/use-search';
 import { SearchInputState } from '@features/search/state/search-input';
 import { UserType } from '@features/users/types/user';
@@ -30,18 +20,13 @@ import { useHistory } from 'react-router-dom';
 import RouterServices from '@features/router/services/router-service';
 import { useCurrentUser } from 'app/features/users/hooks/use-current-user';
 import useRouterCompany from 'app/features/router/hooks/use-router-company';
+import { DocumentIcon } from '@views/client/body/drive/documents/document-icon';
 
 export default (props: { driveItem: DriveItem & { user?: UserType }}) => {
   const history = useHistory();
   const input = useRecoilValue(SearchInputState);
-  const currentWorkspaceId = useRouterWorkspace();
-  const companyApplications = useCompanyApplications();
   const { user } = useCurrentUser();
   const [_, setParentId] = useRecoilState(DriveCurrentFolderAtom({ initialFolderId: 'user_'+user?.id }));
-  const tdriveDriveApplicationId =
-    companyApplications.applications.find(application => {
-      return application.identity.code === 'tdrive_drive';
-    })?.id || '';
   const file = props.driveItem;
   const name = file?.name;
   const extension = name?.split('.').pop();
@@ -128,21 +113,7 @@ export const FileResultMedia = (props: {
         duration={type === 'video' ? extension : undefined}
       />
       {(!['image', 'video'].includes(type) || !url) && (
-        <>
-          {type === 'archive' ? (
-            <FileTypeArchiveIcon className={iconClassName} />
-          ) : type === 'pdf' ? (
-            <FileTypePdfIcon className={iconClassName} />
-          ) : type === 'document' ? (
-            <FileTypeDocumentIcon className={iconClassName} />
-          ) : type === 'spreadsheet' ? (
-            <FileTypeSpreadsheetIcon className={iconClassName} />
-          ) : type === 'slides' ? (
-            <FileTypeSlidesIcon className={iconClassName} />
-          ) : (
-            <FileTypeUnknownIcon className={iconClassName} />
-          )}
-        </>
+          <DocumentIcon item={file} fileType={type} className={iconClassName} />
       )}
     </div>
   );

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
@@ -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} />
+    );
+};
diff --git a/tdrive/frontend/src/app/views/client/body/drive/documents/document-row.tsx b/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">