From 53470ff61e42e8696831e812597800c5168b98f3 Mon Sep 17 00:00:00 2001 From: spencerwooo Date: Sat, 5 Feb 2022 21:16:57 +0800 Subject: [PATCH] extract and cleanup some functions --- components/FileListing.tsx | 40 +++++++++++++++++++++----------- components/FolderGridLayout.tsx | 41 +++++++++++++-------------------- components/FolderListLayout.tsx | 30 ++++++++---------------- types/index.d.ts | 1 + 4 files changed, 52 insertions(+), 60 deletions(-) diff --git a/components/FileListing.tsx b/components/FileListing.tsx index 5f47705..6dbfa07 100644 --- a/components/FileListing.tsx +++ b/components/FileListing.tsx @@ -1,23 +1,17 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import toast, { Toaster } from 'react-hot-toast' import emojiRegex from 'emoji-regex' -import { useClipboard } from 'use-clipboard-copy' import { ParsedUrlQuery } from 'querystring' import { FC, MouseEventHandler, SetStateAction, useEffect, useRef, useState } from 'react' -import Link from 'next/link' import dynamic from 'next/dynamic' import { useRouter } from 'next/router' -import { layouts } from './SwitchLayout' - import useLocalStorage from '../utils/useLocalStorage' -import { humanFileSize, formatModifiedDateTime } from '../utils/fileDetails' -import { getFileIcon } from '../utils/getFileIcon' import { getPreviewType, preview } from '../utils/getPreviewType' import { useProtectedSWRInfinite } from '../utils/fetchWithSWR' -import { getBaseUrl } from '../utils/getBaseUrl' +import { getFileIcon } from '../utils/getFileIcon' import { DownloadingToast, downloadMultipleFiles, @@ -25,6 +19,7 @@ import { traverseFolder, } from './MultiFileDownloader' +import { layouts } from './SwitchLayout' import Loading, { LoadingIcon } from './Loading' import FourOhFour from './FourOhFour' import Auth from './Auth' @@ -36,14 +31,13 @@ import AudioPreview from './previews/AudioPreview' import VideoPreview from './previews/VideoPreview' import PDFPreview from './previews/PDFPreview' import URLPreview from './previews/URLPreview' -import DefaultPreview from './previews/DefaultPreview' -import { DownloadBtnContainer, PreviewContainer } from './previews/Containers' -import DownloadButtonGroup from './DownloadBtnGtoup' -import FolderListLayout from './FolderListLayout' - -import type { OdFileObject, OdFolderObject } from '../types' -import FolderGridLayout from './FolderGridLayout' import ImagePreview from './previews/ImagePreview' +import DefaultPreview from './previews/DefaultPreview' +import { PreviewContainer } from './previews/Containers' + +import type { OdFileObject, OdFolderChildren, OdFolderObject } from '../types' +import FolderListLayout from './FolderListLayout' +import FolderGridLayout from './FolderGridLayout' // Disabling SSR for some previews const EPUBPreview = dynamic(() => import('./previews/EPUBPreview'), { @@ -66,6 +60,24 @@ const queryToPath = (query?: ParsedUrlQuery) => { return '/' } +// Render the icon of a folder child (may be a file or a folder), use emoji if the name of the child contains emoji +const renderEmoji = (name: string) => { + const emoji = emojiRegex().exec(name) + return { render: emoji && !emoji.index, emoji } +} +export const formatChildName = (name: string) => { + const { render, emoji } = renderEmoji(name) + return render ? name.replace(emoji ? emoji[0] : '', '').trim() : name +} +export const ChildIcon: FC<{ child: OdFolderChildren }> = ({ child }) => { + const { render, emoji } = renderEmoji(child.name) + return render ? ( + {emoji ? emoji[0] : '📁'} + ) : ( + + ) +} + export const Checkbox: FC<{ checked: 0 | 1 | 2 onChange: () => void diff --git a/components/FolderGridLayout.tsx b/components/FolderGridLayout.tsx index e48bdaa..7f32807 100644 --- a/components/FolderGridLayout.tsx +++ b/components/FolderGridLayout.tsx @@ -1,29 +1,15 @@ -import type { OdFolderObject } from '../types' +import type { OdFolderChildren } from '../types' -import { useState } from 'react' import Link from 'next/link' -import emojiRegex from 'emoji-regex' +import { useState } from 'react' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { useClipboard } from 'use-clipboard-copy' -import { getFileIcon } from '../utils/getFileIcon' import { getBaseUrl } from '../utils/getBaseUrl' import { formatModifiedDateTime } from '../utils/fileDetails' -import { Checkbox, Downloading } from './FileListing' - -type OdFolderChildren = OdFolderObject['value'][number] +import { Checkbox, ChildIcon, Downloading, formatChildName } from './FileListing' const GridItem = ({ c }: { c: OdFolderChildren }) => { - const emojiIcon = emojiRegex().exec(c.name) - const renderEmoji = emojiIcon && !emojiIcon.index - - const ChildIcon = () => - renderEmoji ? ( - {emojiIcon ? emojiIcon[0] : '📁'} - ) : ( - - ) - // We use the generated medium thumbnail for rendering preview images const thumbnail = c.thumbnails && c.thumbnails.length > 0 ? c.thumbnails[0].medium : null @@ -43,7 +29,7 @@ const GridItem = ({ c }: { c: OdFolderChildren }) => { /> ) : (
- + {c.folder?.childCount} @@ -53,11 +39,9 @@ const GridItem = ({ c }: { c: OdFolderChildren }) => {
- - - - {renderEmoji ? c.name.replace(emojiIcon ? emojiIcon[0] : '', '').trim() : c.name} + + {formatChildName(c.name)}
{formatModifiedDateTime(c.lastModifiedDateTime)} @@ -109,8 +93,11 @@ const FolderGridLayout = ({
{folderChildren.map((c: OdFolderChildren) => ( -
-
+
+
{c.folder ? (
-
+
{!c.folder && !(c.name === '.password') && ( = ({ fileContent: c }) => { - const emojiIcon = emojiRegex().exec(c.name) - const renderEmoji = emojiIcon && !emojiIcon.index - return (
- {/*
{c.file ? c.file.mimeType : 'folder'}
*/}
- {renderEmoji ? ( - {emojiIcon ? emojiIcon[0] : '📁'} - ) : ( - - )} -
-
- {renderEmoji ? c.name.replace(emojiIcon ? emojiIcon[0] : '', '').trim() : c.name} +
+
{formatChildName(c.name)}
{formatModifiedDateTime(c.lastModifiedDateTime)} @@ -99,7 +84,10 @@ const FolderListLayout = ({
{folderChildren.map((c: OdFolderChildren) => ( -