From 223e7e3d6aa277ba0816df32f5e7d5d3a7dd917a Mon Sep 17 00:00:00 2001
From: myl7 <myl@myl.moe>
Date: Tue, 8 Feb 2022 20:06:02 +0800
Subject: [PATCH] allow to customize datetime format via dayjs

---
 components/previews/AudioPreview.tsx |  7 ++-----
 config/site.config.js                |  5 +++++
 package.json                         |  1 +
 pnpm-lock.yaml                       |  6 ++++++
 utils/fileDetails.ts                 | 13 +++++--------
 5 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/components/previews/AudioPreview.tsx b/components/previews/AudioPreview.tsx
index e2eea60..5a10308 100644
--- a/components/previews/AudioPreview.tsx
+++ b/components/previews/AudioPreview.tsx
@@ -7,6 +7,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import DownloadButtonGroup from '../DownloadBtnGtoup'
 import { DownloadBtnContainer, PreviewContainer } from './Containers'
 import { LoadingIcon } from '../Loading'
+import { formatModifiedDateTime } from '../../utils/fileDetails'
 
 enum PlayerState {
   Loading,
@@ -36,11 +37,7 @@ const AudioPreview: FC<{ file: OdFileObject }> = ({ file }) => {
           <div className="flex w-full flex-col space-y-2">
             <div>{file.name}</div>
             <div className="pb-4 text-sm text-gray-500">
-              Last modified:{' '}
-              {new Date(file.lastModifiedDateTime).toLocaleString(undefined, {
-                dateStyle: 'short',
-                timeStyle: 'short',
-              })}
+              Last modified: {formatModifiedDateTime(file.lastModifiedDateTime)}
             </div>
 
             <ReactAudioPlayer
diff --git a/config/site.config.js b/config/site.config.js
index d4257ed..2230429 100644
--- a/config/site.config.js
+++ b/config/site.config.js
@@ -57,4 +57,9 @@ module.exports = {
       link: 'https://t.me/realSpencerWoo',
     },
   ],
+
+  // This is a day.js-style datetime format string to format datetimes in the app. Ref to
+  // https://day.js.org/docs/en/display/format for detailed specification. The default value is ISO 8601 full datetime
+  // without timezone and replacing T with space.
+  datetimeFormat: 'YYYY-MM-DD HH:mm:ss',
 }
diff --git a/package.json b/package.json
index 36a1669..5e09e22 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "axios": "^0.25.0",
     "cors": "^2.8.5",
     "crypto-js": "^4.1.1",
+    "dayjs": "^1.10.7",
     "emoji-regex": "^10.0.0",
     "flv.js": "^1.6.2",
     "ioredis": "^4.28.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f87579b..9550d51 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -22,6 +22,7 @@ specifiers:
   axios: ^0.25.0
   cors: ^2.8.5
   crypto-js: ^4.1.1
+  dayjs: ^1.10.7
   emoji-regex: ^10.0.0
   eslint: 8.8.0
   eslint-config-next: 12.0.10
@@ -68,6 +69,7 @@ dependencies:
   axios: 0.25.0
   cors: 2.8.5
   crypto-js: 4.1.1
+  dayjs: 1.10.7
   emoji-regex: 10.0.0
   flv.js: 1.6.2
   ioredis: 4.28.3
@@ -988,6 +990,10 @@ packages:
     resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
     dev: true
 
+  /dayjs/1.10.7:
+    resolution: {integrity: sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig==}
+    dev: false
+
   /debounce-promise/3.1.2:
     resolution: {integrity: sha512-rZHcgBkbYavBeD9ej6sP56XfG53d51CD4dnaw989YX/nZ/ZJfgRx/9ePKmTNiUiyQvh4mtrMoS3OAWW+yoYtpg==}
     dev: false
diff --git a/utils/fileDetails.ts b/utils/fileDetails.ts
index 56ecbfc..1eb61b7 100644
--- a/utils/fileDetails.ts
+++ b/utils/fileDetails.ts
@@ -1,3 +1,7 @@
+import dayjs from 'dayjs'
+
+import siteConfig from '../config/site.config'
+
 /**
  * Convert raw bits file/folder size into a human readable string
  *
@@ -20,12 +24,5 @@ export const humanFileSize = (size: number) => {
  * @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,
-  })
+  return dayjs(lastModifedDateTime).format(siteConfig.datetimeFormat)
 }