From 2f68e9f1f2bc49462f1dd92e80e18717680c089e Mon Sep 17 00:00:00 2001 From: Ankit Kumar Date: Wed, 11 Jan 2023 00:48:37 +0530 Subject: [PATCH 1/7] added date with locale --- src/common/playlists/PlayHeaderInfo.jsx | 42 +++++++++++++++++-------- src/common/playlists/playlist.css | 6 ++-- 2 files changed, 33 insertions(+), 15 deletions(-) diff --git a/src/common/playlists/PlayHeaderInfo.jsx b/src/common/playlists/PlayHeaderInfo.jsx index 093f9ee765..94772334b7 100644 --- a/src/common/playlists/PlayHeaderInfo.jsx +++ b/src/common/playlists/PlayHeaderInfo.jsx @@ -1,19 +1,33 @@ import { IoMdArrowBack } from 'react-icons/io'; import { Link } from 'react-router-dom'; import LevelBadge from 'common/components/LevelBadge'; +import { format } from 'date-fns'; +import * as allLocales from 'date-fns/locale'; + +const Author = ({ user, githubUsername, playCreatedAt }) => { + function formatPlayDate() { + const locale = navigator.language.split('-').join(''); + const dnsLocale = allLocales[locale] ?? allLocales.enUS; + + return format(new Date(playCreatedAt), 'dd MMMM, yyyy', { + locale: dnsLocale + }); + } -const Author = ({ user, githubUsername }) => { return ( -
+
avatar - - {user?.displayName} - +
+ + {user?.displayName} + + Created on {formatPlayDate()} +
); }; @@ -32,7 +46,7 @@ const Tags = ({ tags }) => { const PlayHeaderInfo = ({ play }) => { return ( -
+
@@ -47,8 +61,10 @@ const PlayHeaderInfo = ({ play }) => { {!!play.play_tags.length && }
-
- {play.user && } +
+ {play.user && ( + + )}
diff --git a/src/common/playlists/playlist.css b/src/common/playlists/playlist.css index d1b00ab940..72aaeb7f60 100644 --- a/src/common/playlists/playlist.css +++ b/src/common/playlists/playlist.css @@ -414,10 +414,12 @@ .play-details .play-details-header .header-secondary { display: flex; - flex-direction: row; + /* flex-direction: row; */ + flex-direction: column; flex-wrap: wrap; grid-gap: 0.2rem 0.6rem; - align-items: center; + /* align-items: center; */ + align-items: start; } @media screen and (max-width: 768px) { From 7033c9552635547892463a56849ca8bcb745de34 Mon Sep 17 00:00:00 2001 From: Ankit Kumar Date: Fri, 20 Jan 2023 19:48:16 +0530 Subject: [PATCH 2/7] displayed creation date --- src/common/playlists/PlayHeader.jsx | 14 +++++++++++++- src/common/playlists/PlayHeaderInfo.jsx | 18 ++---------------- 2 files changed, 15 insertions(+), 17 deletions(-) diff --git a/src/common/playlists/PlayHeader.jsx b/src/common/playlists/PlayHeader.jsx index 3285cc64c6..f972364dc5 100644 --- a/src/common/playlists/PlayHeader.jsx +++ b/src/common/playlists/PlayHeader.jsx @@ -1,8 +1,19 @@ -import React from 'react'; +import React, { useState } from 'react'; import PlayHeaderInfo from './PlayHeaderInfo'; import PlayHeaderActions from './PlayHeaderActions'; +import { format } from 'date-fns'; +import * as allLocales from 'date-fns/locale'; const PlayHeader = ({ play }) => { + const [formattedPlayDate, setFormattedPlayDate] = useState(() => { + const locale = navigator.language.split('-').join(''); + const dnsLocale = allLocales[locale] ?? allLocales.enUS; + + return format(new Date(play.created_at), 'dd MMMM, yyyy', { + locale: dnsLocale + }); + }); + return ( <>
@@ -12,6 +23,7 @@ const PlayHeader = ({ play }) => {
{play.description} + Created on {formattedPlayDate}
diff --git a/src/common/playlists/PlayHeaderInfo.jsx b/src/common/playlists/PlayHeaderInfo.jsx index 94772334b7..a247fa0ecc 100644 --- a/src/common/playlists/PlayHeaderInfo.jsx +++ b/src/common/playlists/PlayHeaderInfo.jsx @@ -1,19 +1,8 @@ import { IoMdArrowBack } from 'react-icons/io'; import { Link } from 'react-router-dom'; import LevelBadge from 'common/components/LevelBadge'; -import { format } from 'date-fns'; -import * as allLocales from 'date-fns/locale'; - -const Author = ({ user, githubUsername, playCreatedAt }) => { - function formatPlayDate() { - const locale = navigator.language.split('-').join(''); - const dnsLocale = allLocales[locale] ?? allLocales.enUS; - - return format(new Date(playCreatedAt), 'dd MMMM, yyyy', { - locale: dnsLocale - }); - } +const Author = ({ user, githubUsername }) => { return (
avatar @@ -26,7 +15,6 @@ const Author = ({ user, githubUsername, playCreatedAt }) => { > {user?.displayName} - Created on {formatPlayDate()}
); @@ -62,9 +50,7 @@ const PlayHeaderInfo = ({ play }) => {
- {play.user && ( - - )} + {play.user && }
From d67115a9c48e2907fbaae6e71c2f565fe7e7ff3d Mon Sep 17 00:00:00 2001 From: Ankit Kumar Date: Sat, 28 Jan 2023 22:45:31 +0530 Subject: [PATCH 3/7] added creation date with dot seperator --- src/common/playlists/PlayHeader.jsx | 14 +------------- src/common/playlists/PlayHeaderInfo.jsx | 24 ++++++++++++++++++++---- 2 files changed, 21 insertions(+), 17 deletions(-) diff --git a/src/common/playlists/PlayHeader.jsx b/src/common/playlists/PlayHeader.jsx index f972364dc5..aab0f901c3 100644 --- a/src/common/playlists/PlayHeader.jsx +++ b/src/common/playlists/PlayHeader.jsx @@ -1,19 +1,8 @@ import React, { useState } from 'react'; import PlayHeaderInfo from './PlayHeaderInfo'; import PlayHeaderActions from './PlayHeaderActions'; -import { format } from 'date-fns'; -import * as allLocales from 'date-fns/locale'; const PlayHeader = ({ play }) => { - const [formattedPlayDate, setFormattedPlayDate] = useState(() => { - const locale = navigator.language.split('-').join(''); - const dnsLocale = allLocales[locale] ?? allLocales.enUS; - - return format(new Date(play.created_at), 'dd MMMM, yyyy', { - locale: dnsLocale - }); - }); - return ( <>
@@ -22,8 +11,7 @@ const PlayHeader = ({ play }) => {
- {play.description} - Created on {formattedPlayDate} + {/* {play.description} */}
diff --git a/src/common/playlists/PlayHeaderInfo.jsx b/src/common/playlists/PlayHeaderInfo.jsx index a247fa0ecc..cb2b8704ec 100644 --- a/src/common/playlists/PlayHeaderInfo.jsx +++ b/src/common/playlists/PlayHeaderInfo.jsx @@ -1,19 +1,33 @@ import { IoMdArrowBack } from 'react-icons/io'; import { Link } from 'react-router-dom'; import LevelBadge from 'common/components/LevelBadge'; +import { format } from 'date-fns'; +import * as allLocales from 'date-fns/locale'; +import { useState } from 'react'; + +const Author = ({ user, githubUsername, playCreatedAt }) => { + const [formattedPlayDate, setFormattedPlayDate] = useState(() => { + const locale = navigator.language.split('-').join(''); + const dnsLocale = allLocales[locale] ?? allLocales.enUS; + + return format(new Date(playCreatedAt), 'MMM dd, yyyy', { + locale: dnsLocale + }); + }); -const Author = ({ user, githubUsername }) => { return (
avatar -
+
{user?.displayName} + • + {formattedPlayDate}
@@ -50,7 +64,9 @@ const PlayHeaderInfo = ({ play }) => {
- {play.user && } + {play.user && ( + + )}
From 7d028a438f4fdbaf1ef7da56360ca59d0287a049 Mon Sep 17 00:00:00 2001 From: Ankit Kumar Date: Sun, 12 Feb 2023 11:59:02 +0530 Subject: [PATCH 4/7] displayed play description also --- src/common/playlists/PlayHeader.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/common/playlists/PlayHeader.jsx b/src/common/playlists/PlayHeader.jsx index aab0f901c3..131afaf06c 100644 --- a/src/common/playlists/PlayHeader.jsx +++ b/src/common/playlists/PlayHeader.jsx @@ -11,7 +11,7 @@ const PlayHeader = ({ play }) => {
- {/* {play.description} */} + {play.description} From 3a2de4363ad50c7b1893b636c700eeb3b4775e0b Mon Sep 17 00:00:00 2001 From: Ankit Kumar Date: Sun, 12 Feb 2023 12:14:47 +0530 Subject: [PATCH 5/7] added comments --- src/common/playlists/PlayHeaderInfo.jsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/common/playlists/PlayHeaderInfo.jsx b/src/common/playlists/PlayHeaderInfo.jsx index 051138db63..d778920ae7 100644 --- a/src/common/playlists/PlayHeaderInfo.jsx +++ b/src/common/playlists/PlayHeaderInfo.jsx @@ -8,9 +8,13 @@ import { email2Slug } from 'common/services/string'; const Author = ({ user, githubUsername, playCreatedAt }) => { const [formattedPlayDate, setFormattedPlayDate] = useState(() => { + // Get the locale from the local browser const locale = navigator.language.split('-').join(''); + + // Get matching locale from date-fns const dnsLocale = allLocales[locale] ?? allLocales.enUS; + // Return formatted date with the browser locale return format(new Date(playCreatedAt), 'MMM dd, yyyy', { locale: dnsLocale }); @@ -36,6 +40,8 @@ const Author = ({ user, githubUsername, playCreatedAt }) => { > {user?.displayName} • + + {/* Formatted date goes here */} {formattedPlayDate} From 93c3468ecfc533c5a7fba569d32b20d1642bcf75 Mon Sep 17 00:00:00 2001 From: Ankit Kumar Date: Sun, 12 Feb 2023 15:22:32 +0530 Subject: [PATCH 6/7] fixed eslint error --- src/common/playlists/PlayHeader.jsx | 2 +- src/common/playlists/PlayHeaderInfo.jsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/common/playlists/PlayHeader.jsx b/src/common/playlists/PlayHeader.jsx index 131afaf06c..3285cc64c6 100644 --- a/src/common/playlists/PlayHeader.jsx +++ b/src/common/playlists/PlayHeader.jsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React from 'react'; import PlayHeaderInfo from './PlayHeaderInfo'; import PlayHeaderActions from './PlayHeaderActions'; diff --git a/src/common/playlists/PlayHeaderInfo.jsx b/src/common/playlists/PlayHeaderInfo.jsx index d778920ae7..ab3121b099 100644 --- a/src/common/playlists/PlayHeaderInfo.jsx +++ b/src/common/playlists/PlayHeaderInfo.jsx @@ -6,8 +6,8 @@ import * as allLocales from 'date-fns/locale'; import { useState } from 'react'; import { email2Slug } from 'common/services/string'; -const Author = ({ user, githubUsername, playCreatedAt }) => { - const [formattedPlayDate, setFormattedPlayDate] = useState(() => { +const Author = ({ playCreatedAt, user }) => { + const [formattedPlayDate] = useState(() => { // Get the locale from the local browser const locale = navigator.language.split('-').join(''); @@ -80,7 +80,7 @@ const PlayHeaderInfo = ({ play }) => {
{play.user && ( - + )}
From b849e85ca0c4572d173d1c6731a285a02574d288 Mon Sep 17 00:00:00 2001 From: Ankit Kumar Date: Tue, 21 Feb 2023 20:39:41 +0530 Subject: [PATCH 7/7] fixed flex alignment --- src/common/playlists/PlayHeaderInfo.jsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/common/playlists/PlayHeaderInfo.jsx b/src/common/playlists/PlayHeaderInfo.jsx index ab3121b099..869c6dc24f 100644 --- a/src/common/playlists/PlayHeaderInfo.jsx +++ b/src/common/playlists/PlayHeaderInfo.jsx @@ -31,19 +31,18 @@ const Author = ({ playCreatedAt, user }) => { return (
avatar -
+
{user?.displayName} - • - - {/* Formatted date goes here */} - {formattedPlayDate} + • + + {/* Formatted date goes here */} + {formattedPlayDate}
);