diff --git a/web/e.cash/data/__tests__/blog.test.js b/web/e.cash/data/__tests__/blog.test.js --- a/web/e.cash/data/__tests__/blog.test.js +++ b/web/e.cash/data/__tests__/blog.test.js @@ -2,7 +2,7 @@ // Distributed under the MIT software license, see the accompanying // file COPYING or http://www.opensource.org/licenses/mit-license.php. -import { getPageCount, getBlogPosts } from '../blog.js'; +import { getPageCount, getBlogPosts, formatTimestamp } from '../blog.js'; import { mockBlogPosts1, mockBlogPosts2, @@ -124,3 +124,22 @@ await expect(getBlogPosts()).rejects.toThrow('Failed to fetch api'); }); }); + +describe('formatTimestamp', () => { + it('should return a formatted date string for a valid timestamp', () => { + const timestamp = '2021-07-01T00:00:00Z'; + const expectedDateString = 'Jul 1, 2021'; + + const result = formatTimestamp(timestamp); + + expect(result).toEqual(expectedDateString); + }); + + it('should throw an error for an invalid timestamp', () => { + const invalidTimestamp = 'not-a-timestamp'; + + expect(() => { + formatTimestamp(invalidTimestamp); + }).toThrow('Invalid timestamp'); + }); +}); diff --git a/web/e.cash/data/blog.js b/web/e.cash/data/blog.js --- a/web/e.cash/data/blog.js +++ b/web/e.cash/data/blog.js @@ -47,3 +47,24 @@ }; return propsObj; } + +/** + * Convert a timestamp into a more readable format + * @param {string} timestamp - the timestamp to convert + * accepts UTC, Unix, and UTC string representation timestamps + * should throw error if non valid timestamp is passed to it + * @returns {string} formatted date string + */ +export const formatTimestamp = timestamp => { + const date = new Date(timestamp); + if (isNaN(date)) { + throw new Error('Invalid timestamp'); + } + const options = { + timeZone: 'UTC', + month: 'short', + day: 'numeric', + year: 'numeric', + }; + return date.toLocaleDateString('en-US', options); +}; diff --git a/web/e.cash/pages/blog.js b/web/e.cash/pages/blog.js --- a/web/e.cash/pages/blog.js +++ b/web/e.cash/pages/blog.js @@ -15,7 +15,9 @@ Tag, CardCtn, Card, + DateText, } from '/styles/pages/blog.js'; +import { formatTimestamp } from '/data/blog.js'; function Blog(props) { const featuredPosts = props.posts.slice(0, 3); @@ -40,6 +42,13 @@ /> + + {formatTimestamp( + post.attributes.publish_date + ? post.attributes.publish_date + : post.attributes.publishedAt, + )} + {index === 0 ? ( <>

{post.attributes.title}

@@ -69,6 +78,13 @@ /> + + {formatTimestamp( + post.attributes.publish_date + ? post.attributes.publish_date + : post.attributes.publishedAt, + )} +

{post.attributes.title}

diff --git a/web/e.cash/styles/pages/blog.js b/web/e.cash/styles/pages/blog.js --- a/web/e.cash/styles/pages/blog.js +++ b/web/e.cash/styles/pages/blog.js @@ -163,3 +163,11 @@ height: 150px; } `; + +export const DateText = styled.div` + color: ${props => props.theme.colors.primaryLight}; + font-size: 14px; + ${props => props.theme.breakpoint.medium} { + font-size: 12px; + } +`;