From 1749cb8b534e46fd97db41fd0154e48e75a95c29 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Wed, 19 Jan 2022 05:32:23 -0800
Subject: [PATCH] Fix datetime from i18next

---
 src/components/library/AlbumView.tsx     |  9 +---
 src/components/playlist/PlaylistView.tsx | 53 +++++++++---------------
 2 files changed, 21 insertions(+), 41 deletions(-)

diff --git a/src/components/library/AlbumView.tsx b/src/components/library/AlbumView.tsx
index a38ba3f..4a851a5 100644
--- a/src/components/library/AlbumView.tsx
+++ b/src/components/library/AlbumView.tsx
@@ -7,7 +7,6 @@ import { ButtonToolbar, Whisper } from 'rsuite';
 import { useQuery, useQueryClient } from 'react-query';
 import { useParams, useHistory } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import moment from 'moment';
 import {
   DownloadButton,
   FavoriteButton,
@@ -41,6 +40,7 @@ import { addModalPage } from '../../redux/miscSlice';
 import { notifyToast } from '../shared/toast';
 import {
   filterPlayQueue,
+  formatDate,
   formatDuration,
   getAlbumSize,
   getPlayedSongsNotification,
@@ -382,12 +382,7 @@ const AlbumView = ({ ...rest }: any) => {
                     }
                   }}
                 >
-                  {t('Added {{val, datetime}}', {
-                    val: moment(data.created),
-                    formatParams: {
-                      val: { year: 'numeric', month: 'short', day: 'numeric' },
-                    },
-                  })}
+                  {t('Added {{val, datetime}}', { val: formatDate(data.created) })}
                   {data.genre.map((d: Genre, i: number) => {
                     return (
                       <span key={nanoid()}>
diff --git a/src/components/playlist/PlaylistView.tsx b/src/components/playlist/PlaylistView.tsx
index a7fd6fe..1b086b3 100644
--- a/src/components/playlist/PlaylistView.tsx
+++ b/src/components/playlist/PlaylistView.tsx
@@ -8,7 +8,6 @@ import { useHotkeys } from 'react-hotkeys-hook';
 import { useQuery, useQueryClient } from 'react-query';
 import { useParams, useHistory } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import moment from 'moment';
 import {
   DeleteButton,
   EditButton,
@@ -39,6 +38,8 @@ import {
   createRecoveryFile,
   errorMessages,
   filterPlayQueue,
+  formatDate,
+  formatDateTime,
   formatDuration,
   getCurrentEntryList,
   getPlayedSongsNotification,
@@ -543,41 +544,25 @@ const PlaylistView = ({ ...rest }) => {
               </PageHeaderSubtitleDataLine>
               <PageHeaderSubtitleDataLine>
                 {data.owner && t('By {{dataOwner}} • ', { dataOwner: data.owner })}
-                {data.created &&
-                  t('Created {{val, datetime}}', {
-                    val: moment(data.created),
-                    formatParams: {
-                      val: { year: 'numeric', month: 'short', day: 'numeric' },
-                    },
-                  })}
+                {data.created && t('Created {{val, datetime}}', { val: formatDate(data.created) })}
                 {data.changed &&
-                  t(' • Modified {{val, datetime}}', {
-                    val: moment(data.changed),
-                    formatParams: {
-                      val: {
-                        hour: 'numeric',
-                        minute: 'numeric',
-                        year: 'numeric',
-                        month: 'short',
-                        day: 'numeric',
-                      },
-                    },
-                  })}
+                  t(' • Modified {{val, datetime}}', { val: formatDateTime(data.changed) })}
               </PageHeaderSubtitleDataLine>
-              <CustomTooltip text={data.comment} placement="bottomStart" disabled={!data.comment}>
-                <PageHeaderSubtitleDataLine
-                  style={{
-                    minHeight: '1.2rem',
-                    maxHeight: '1.2rem',
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    whiteSpace: 'pre-wrap',
-                  }}
-                >
-                  <span>{data.comment ? data.comment : ''}</span>
-                </PageHeaderSubtitleDataLine>
-              </CustomTooltip>
-
+              {data.comment && (
+                <CustomTooltip text={data.comment} placement="bottomStart" disabled={!data.comment}>
+                  <PageHeaderSubtitleDataLine
+                    style={{
+                      minHeight: '1.2rem',
+                      maxHeight: '1.2rem',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                      whiteSpace: 'pre-wrap',
+                    }}
+                  >
+                    <span>{data.comment ? data.comment : ''}</span>
+                  </PageHeaderSubtitleDataLine>
+                </CustomTooltip>
+              )}
               <div style={{ marginTop: '10px' }}>
                 <ButtonToolbar>
                   <PlayButton