From 430c7e83e79f4447e7e58066735c1369c91f7bcc Mon Sep 17 00:00:00 2001 From: Eric Doughty-Papassideris Date: Sun, 7 Apr 2024 16:36:31 +0200 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20=20Frontend=20refactor:=20?= =?UTF-8?q?extracted=20drive=20item=20icon=20into=20own=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../search-popup/parts/drive-item-result.tsx | 33 +----------- .../body/drive/documents/document-icon.tsx | 54 +++++++++++++++++++ .../body/drive/documents/document-row.tsx | 49 +---------------- 3 files changed, 58 insertions(+), 78 deletions(-) create mode 100644 tdrive/frontend/src/app/views/client/body/drive/documents/document-icon.tsx 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 index 1e187f73..1e404b7d 100644 --- 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' ? ( - - ) : type === 'pdf' ? ( - - ) : type === 'document' ? ( - - ) : type === 'spreadsheet' ? ( - - ) : type === 'slides' ? ( - - ) : ( - - )} - + )} ); 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 new file mode 100644 index 00000000..3c350a13 --- /dev/null +++ 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 ? ( + + ) : props.item?.is_directory ? ( + + ) : fileType === 'image' || fileType === 'video' ? ( + + ) : fileType === 'archive' ? ( + + ) : fileType === 'pdf' ? ( + + ) : fileType === 'document' ? ( + + ) : fileType === 'spreadsheet' ? ( + + ) : fileType === 'slides' ? ( + + ) : fileType === 'link' ? ( + + ) : ( + + ); +}; 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 index 0579afce..30681bdc 100644 --- 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 ? ( - - ) : fileType === 'image' || fileType === 'video' ? ( - - ) : fileType === 'archive' ? ( - - ) : fileType === 'pdf' ? ( - - ) : fileType === 'document' ? ( - - ) : fileType === 'spreadsheet' ? ( - - ) : fileType === 'slides' ? ( - - ) : fileType === 'link' ? ( - - ) : ( - - )} - - } + fallback={} />