diff --git a/components/FileListing.tsx b/components/FileListing.tsx index fa2beea..f0f82ba 100644 --- a/components/FileListing.tsx +++ b/components/FileListing.tsx @@ -10,6 +10,7 @@ import { ImageDecorator } from 'react-viewer/lib/ViewerProps' import { useRouter } from 'next/router' import dynamic from 'next/dynamic' +import { humanFileSize, formatModifiedDateTime } from '../utils/fileDetails' import { getExtension, getFileIcon, hasKey } from '../utils/getFileIcon' import { extensions, preview } from '../utils/getPreviewType' import { useProtectedSWRInfinite } from '../utils/fetchWithSWR' @@ -30,30 +31,15 @@ import CodePreview from './previews/CodePreview' import OfficePreview from './previews/OfficePreview' import AudioPreview from './previews/AudioPreview' import VideoPreview from './previews/VideoPreview' -import DownloadButtonGroup from './DownloadBtnGtoup' import PDFPreview from './previews/PDFPreview' import URLPreview from './previews/URLPreview' -import { DownloadBtnContainer, PreviewContainer } from './previews/Containers' +import DefaultPreview from './previews/DefaultPreview' +import { PreviewContainer } from './previews/Containers' // Disabling SSR for some previews (image gallery view, and PDF view) const ReactViewer = dynamic(() => import('react-viewer'), { ssr: false }) const EPUBPreview = dynamic(() => import('./previews/EPUBPreview'), { ssr: false }) -/** - * Convert raw bits file/folder size into a human readable string - * - * @param size File or folder size, in raw bits - * @returns Human readable form of the file or folder size - */ -const humanFileSize = (size: number) => { - if (size < 1024) return size + ' B' - const i = Math.floor(Math.log(size) / Math.log(1024)) - const num = size / Math.pow(1024, i) - const round = Math.round(num) - const formatted = round < 10 ? num.toFixed(2) : round < 100 ? num.toFixed(1) : round - return `${formatted} ${'KMGTPEZY'[i - 1]}B` -} - /** * Convert url query into path string * @@ -92,14 +78,7 @@ const FileListItem: FC<{
- {new Date(c.lastModifiedDateTime).toLocaleString('en-US', { - year: 'numeric', - month: '2-digit', - day: '2-digit', - hour: '2-digit', - minute: '2-digit', - hour12: false, - })} + {formatModifiedDateTime(c.lastModifiedDateTime)}
{humanFileSize(c.size)} @@ -600,22 +579,11 @@ const FileListing: FC<{ query?: ParsedUrlQuery }> = ({ query }) => { return default: - return {fileName} + return } + } else { + return } - - return ( - <> - - - - - - - - ) } return ( diff --git a/components/previews/DefaultPreview.tsx b/components/previews/DefaultPreview.tsx new file mode 100644 index 0000000..f26c21e --- /dev/null +++ b/components/previews/DefaultPreview.tsx @@ -0,0 +1,79 @@ +import { OdFileObject } from '../../types' +import { FC } from 'react' + +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' + +import { getFileIcon } from '../../utils/getFileIcon' +import { formatModifiedDateTime, humanFileSize } from '../../utils/fileDetails' + +import DownloadButtonGroup from '../DownloadBtnGtoup' +import { DownloadBtnContainer, PreviewContainer } from './Containers' + +const DefaultPreview: FC<{ file: OdFileObject }> = ({ file }) => { + return ( +
+ +
+
+ +
{file.name}
+
+ +
+
+
Last modified
+
{formatModifiedDateTime(file.lastModifiedDateTime)}
+
+ +
+
File size
+
{humanFileSize(file.size)}
+
+ +
+
MIME type
+
{file.file.mimeType}
+
+ +
+
Hashes
+ + + + + + + + + + + + + + + +
+ Quick XOR + + {file.file.hashes.quickXorHash} +
+ SHA1 + + {file.file.hashes.sha1Hash} +
+ SHA256 + + {file.file.hashes.sha256Hash} +
+
+
+
+ + + + +
+ ) +} + +export default DefaultPreview diff --git a/types/index.d.ts b/types/index.d.ts new file mode 100644 index 0000000..827a55e --- /dev/null +++ b/types/index.d.ts @@ -0,0 +1,15 @@ +export type OdFileObject = { + '@microsoft.graph.downloadUrl': string + name: string + size: number + id: string + lastModifiedDateTime: string + file: { + mimeType: string + hashes: { + quickXorHash: string + sha1Hash: string + sha256Hash: string + } + } +} diff --git a/utils/fileDetails.ts b/utils/fileDetails.ts new file mode 100644 index 0000000..56ecbfc --- /dev/null +++ b/utils/fileDetails.ts @@ -0,0 +1,31 @@ +/** + * Convert raw bits file/folder size into a human readable string + * + * @param size File or folder size, in raw bits + * @returns Human readable form of the file or folder size + */ +export const humanFileSize = (size: number) => { + if (size < 1024) return size + ' B' + const i = Math.floor(Math.log(size) / Math.log(1024)) + const num = size / Math.pow(1024, i) + const round = Math.round(num) + const formatted = round < 10 ? num.toFixed(2) : round < 100 ? num.toFixed(1) : round + return `${formatted} ${'KMGTPEZY'[i - 1]}B` +} + +/** + * Convert the last modified date time into locale friendly string + * + * @param lastModifedDateTime DateTime string in ISO format + * @returns Human readable form of the file or folder last modified date + */ +export const formatModifiedDateTime = (lastModifedDateTime: string) => { + return new Date(lastModifedDateTime).toLocaleString('en-US', { + year: 'numeric', + month: '2-digit', + day: '2-digit', + hour: '2-digit', + minute: '2-digit', + hour12: false, + }) +}