Creation date added to Play header (reactplay#960)

* added date with locale * displayed creation date * added creation date with dot seperator * displayed play description also * added comments * fixed eslint error * fixed flex alignment --------- Co-authored-by: Tapas Adhikary <[email protected]> Co-authored-by: Koustov <[email protected]>
villAsh · Feb 26, 2023 · 3d6e54d · 3d6e54d
1 parent 34b4e20
commit 3d6e54d
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 15 deletions.
diff --git a/src/common/playlists/PlayHeaderInfo.jsx b/src/common/playlists/PlayHeaderInfo.jsx
@@ -1,9 +1,25 @@
 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';
 import { email2Slug } from 'common/services/string';
 
-const Author = ({ user }) => {
+const Author = ({ playCreatedAt, user }) => {
+ const [formattedPlayDate] = 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
+ });
+ });
+
  const getHostName = () => {
  var url = window.location.href;
  var arr = url.split('/');
@@ -13,16 +29,21 @@ const Author = ({ user }) => {
  };
 
  return (
- <div className="header-author flex items-center gap-2">
+ <div className="flex items-center gap-2 header-author">
  <img alt="avatar" className="rounded-full" height="25px" src={user?.avatarUrl} width="25px" />
- <a
- className="play-anchor"
- href={`${getHostName()}/contributors/${email2Slug(user.email)}/badges`}
- rel="noopener noreferrer"
- target="_blank"
- >
- <strong>{user?.displayName}</strong>
- </a>
+ <div className="flex items-center gap-2">
+ <a
+ href={`${getHostName()}/contributors/${email2Slug(user.email)}/badges`}
+ rel="noopener noreferrer"
+ target="_blank"
+ >
+ <strong>{user?.displayName}</strong>
+ </a>
+ <span className="text-gray-400">&bull;</span>
+
+ {/* Formatted date goes here */}
+ <small className="m-0 font-medium text-left header-desc">{formattedPlayDate}</small>
+ </div>
  </div>
  );
 };
@@ -41,7 +62,7 @@ const Tags = ({ tags }) => {
 
 const PlayHeaderInfo = ({ play }) => {
  return (
- <div className="header-leftcol overflow-hidden">
+ <div className="overflow-hidden header-leftcol">
  <div className="header-leftcol-action">
  <Link className="action" to="/plays">
  <IoMdArrowBack className="icon" size="24px" />
@@ -56,8 +77,10 @@ const PlayHeaderInfo = ({ play }) => {
  {!!play.play_tags.length && <Tags tags={play.play_tags} />}
  </div>
  </div>
- <div className="header-secondary">
- {play.user && <Author githubUsername={play.github} user={play.user} />}
+ <div className="mt-1 header-secondary">
+ {play.user && (
+ <Author githubUsername={play.github} playCreatedAt={play.created_at} user={play.user} />
+ )}
  </div>
  </div>
  </div>

diff --git 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) {