Merge pull request #377 from myl7/date

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

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',
 }

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",

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

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)
 }