fix(page header): formats date in page header

Formats the date in the PageHeader components closes #181
anguspiv · Nov 15, 2022 · 6110d8b · 6110d8b
1 parent a05f366
commit 6110d8b
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/src/components/molecules/PageHeader/PageHeader.jsx b/src/components/molecules/PageHeader/PageHeader.jsx
@@ -5,6 +5,7 @@ import Image from 'next/image';
 import { spacing, media } from '@styles/utils';
 import { BreadCrumbs } from '@components/molecules/BreadCrumbs';
 import { TagList } from '@components/molecules/TagList';
+import { formatDate } from '@utils/date';
 
 const headerCss = css`
   display: flex;
@@ -90,14 +91,15 @@ export function PageHeader({
 }) {
   const hasDetails = !!publishDate;
   const imageTop = variant === 'imageTop';
+  const formattedDate = formatDate(publishDate);
 
   return (
     <header css={headerCss}>
       <h1 css={titleCss}>{title}</h1>
       {!!location?.pathname && <BreadCrumbs location={location} />}
       {hasDetails && (
         <div css={detailsCss}>
-          {publishDate && <span css={detailCss}>{publishDate}</span>}
+          {formattedDate && <span css={detailCss}>{formattedDate}</span>}
           {!!readingTime && <span css={readingTimeCss}>Reading Time: {readingTime} min.</span>}
         </div>
       )}

diff --git a/src/components/molecules/PageHeader/PageHeader.test.jsx b/src/components/molecules/PageHeader/PageHeader.test.jsx
@@ -15,7 +15,7 @@ describe('<PageHeader />', () => {
       <PageHeader
         title="Test Title"
         location={location}
-        publishDate="Dec. 2, 2010"
+        publishDate="2010-12-02"
         readingTime={10}
         tags={['Test Tag']}
         excerpt={excerpt}
@@ -26,7 +26,7 @@ describe('<PageHeader />', () => {
     expect(screen.getByRole('heading', { name: 'Test Title' })).toBeInTheDocument();
     expect(screen.getByRole('link', { name: 'Somewhere' })).toHaveAttribute('href', '/somewhere');
     expect(screen.getByText('Else Where')).toBeInTheDocument();
-    expect(screen.getByText('Dec. 2, 2010')).toBeInTheDocument();
+    expect(screen.getByText('Dec. 2nd, 2010')).toBeInTheDocument();
     expect(screen.getByText('Reading Time: 10 min.')).toBeInTheDocument();
     expect(screen.getByRole('link', { name: 'Test Tag' })).toHaveAttribute(
       'href',
@@ -51,7 +51,7 @@ describe('<PageHeader />', () => {
       <PageHeader
         title="Test Title"
         location={location}
-        publishDate="Dec. 2, 2010"
+        publishDate="2010-12-02"
         readingTime={10}
         tags={['Test Tag']}
         excerpt={excerpt}