From 0dea143aa5e420428797e1ea2f93d091fb2e3ace Mon Sep 17 00:00:00 2001 From: atepem <57289722+atepem@users.noreply.github.com> Date: Fri, 29 Nov 2024 12:59:06 +0000 Subject: [PATCH 1/4] style: changed date formatting and pr fixes --- common-util/api/index.js | 4 ++-- common-util/formatDate.js | 10 ++++++++++ common-util/useFetchApi.js | 5 ++++- components/Content/Article.jsx | 8 +++++--- components/Content/Articles.jsx | 4 ++-- components/Content/Videos.jsx | 9 ++++++--- components/HomepageSection/Media.jsx | 8 +++++--- pages/blog/[id].jsx | 4 +++- 8 files changed, 37 insertions(+), 15 deletions(-) create mode 100644 common-util/formatDate.js diff --git a/common-util/api/index.js b/common-util/api/index.js index c7b92f9e..1abe147d 100644 --- a/common-util/api/index.js +++ b/common-util/api/index.js @@ -3,13 +3,13 @@ import get from 'lodash/get'; import isFinite from 'lodash/isFinite'; import qs from 'qs'; -const URL = `${process.env.NEXT_PUBLIC_API_URL}/api`; +const API_URL = `${process.env.NEXT_PUBLIC_API_URL}/api`; const apiCall = async (subURL, params) => { const stringifyParams = qs.stringify(params); try { - const url = `${URL}/${subURL}${params ? '?' : ''}${stringifyParams}`; + const url = `${API_URL}/${subURL}${params ? '?' : ''}${stringifyParams}`; const response = await fetch(url); const json = await response.json(); return json; diff --git a/common-util/formatDate.js b/common-util/formatDate.js new file mode 100644 index 00000000..7a86c7f9 --- /dev/null +++ b/common-util/formatDate.js @@ -0,0 +1,10 @@ +export const formatDate = (date) => { + const newDate = new Date(date); + const options = { + day: '2-digit', + month: 'long', + year: '2-digit', + }; + const formattedDate = newDate.toLocaleDateString('en-GB', options); + return formattedDate.replace(/ /g, '-'); +}; diff --git a/common-util/useFetchApi.js b/common-util/useFetchApi.js index e7569f69..3e7dc641 100644 --- a/common-util/useFetchApi.js +++ b/common-util/useFetchApi.js @@ -34,7 +34,10 @@ export const useFetchVideos = (limit = 1000) => { thumbnail, video: videoUploaded, } = attributes || {}; - const imageFilename = `${process.env.NEXT_PUBLIC_API_URL}${get(thumbnail, 'data.attributes.url') || ''}`; + const thumbnailUrl = get(thumbnail, 'data.attributes.url'); + const imageFilename = thumbnailUrl + ? `${process.env.NEXT_PUBLIC_API_URL}${thumbnailUrl}` + : ''; const video_url = `${process.env.NEXT_PUBLIC_API_URL}${get(videoUploaded, 'data[0].attributes.url') || ''}`; return { diff --git a/components/Content/Article.jsx b/components/Content/Article.jsx index 7b08b58c..a031c428 100644 --- a/components/Content/Article.jsx +++ b/components/Content/Article.jsx @@ -5,6 +5,7 @@ import PropTypes from 'prop-types'; import { useMemo, useState } from 'react'; import { CARD_CLASS } from 'common-util/classes'; +import { formatDate } from 'common-util/formatDate'; const imageDomain = process.env.NEXT_PUBLIC_API_URL; @@ -22,12 +23,13 @@ const Article = ({ article, href, showReadTime, showDate }) => { const { title, datePublished, readTime } = article.attributes; const { url, width, height } = image || {}; + const formattedDate = formatDate(datePublished); const moreInfo = useMemo(() => { const moreInfoArray = []; - if (showDate && datePublished) { - moreInfoArray.push(datePublished); + if (showDate && formattedDate) { + moreInfoArray.push(formattedDate); } if (showReadTime && readTime) { @@ -35,7 +37,7 @@ const Article = ({ article, href, showReadTime, showDate }) => { } return moreInfoArray.join(' • '); - }, [showDate, datePublished, showReadTime, readTime]); + }, [showDate, formattedDate, showReadTime, readTime]); return ( diff --git a/components/Content/Articles.jsx b/components/Content/Articles.jsx index d8966292..2e3a31b1 100644 --- a/components/Content/Articles.jsx +++ b/components/Content/Articles.jsx @@ -8,7 +8,7 @@ import useSWR from 'swr'; import { Spinner } from '../Spinner'; import Article from './Article'; -const URL = `${process.env.NEXT_PUBLIC_API_URL}/api`; +const API_URL = `${process.env.NEXT_PUBLIC_API_URL}/api`; const subURL = 'blog-posts'; const fetcher = (...args) => fetch(...args).then((res) => res.json()); @@ -21,7 +21,7 @@ const Articles = ({ limit, showSeeAll, displayFolders }) => { const stringifyParams = qs.stringify(params); const { data, isLoading } = useSWR( - `${URL}/${subURL}${params ? '?' : ''}${stringifyParams}`, + `${API_URL}/${subURL}${params ? '?' : ''}${stringifyParams}`, fetcher, ); diff --git a/components/Content/Videos.jsx b/components/Content/Videos.jsx index 7a168471..2192e01e 100644 --- a/components/Content/Videos.jsx +++ b/components/Content/Videos.jsx @@ -6,6 +6,7 @@ import { Spinner } from 'components/Spinner'; import Image from 'next/image'; import { CARD_CLASS } from 'common-util/classes'; +import { formatDate } from 'common-util/formatDate'; const Video = ({ video }) => ( ( target="_blank" rel="noopener noreferrer" > -
{video.imageFilename && ( @@ -30,10 +31,12 @@ const Video = ({ video }) => ( {video.title}
- {video.date} + + {formatDate(video.date)} +
-
+ ); diff --git a/components/HomepageSection/Media.jsx b/components/HomepageSection/Media.jsx index fd4d6f13..68eea768 100644 --- a/components/HomepageSection/Media.jsx +++ b/components/HomepageSection/Media.jsx @@ -3,8 +3,10 @@ import Articles from 'components/Content/Articles'; import { Videos } from 'components/Content/Videos'; import SectionWrapper from 'components/Layout/SectionWrapper'; +const limit = 3; + const Media = () => { - const { videos, isLoading } = useFetchVideos(3); + const { videos, isLoading } = useFetchVideos(limit); return ( { customClasses="px-4 md:px-8 py-12 lg:p-24 border-b" >
- - + +
); diff --git a/pages/blog/[id].jsx b/pages/blog/[id].jsx index b561b3e5..7191e8d8 100644 --- a/pages/blog/[id].jsx +++ b/pages/blog/[id].jsx @@ -1,4 +1,5 @@ import { getBlog } from 'common-util/api'; +import { formatDate } from 'common-util/formatDate'; import Markdown from 'common-util/Markdown'; import PageWrapper from 'components/Layout/PageWrapper'; import Meta from 'components/Meta'; @@ -28,6 +29,7 @@ const BlogItem = () => { body: content, headerImage, } = blogItem.attributes; + const formattedDate = formatDate(datePublished); const imagePath = headerImage?.data?.[0]?.attributes?.formats?.large?.url; const imageUrl = `${process.env.NEXT_PUBLIC_API_URL}${imagePath}`; @@ -46,7 +48,7 @@ const BlogItem = () => { /> )}
{title}
-
{datePublished}
+
{formattedDate}
{content} From a196d5bad7ed1318614249ea0d8ddd9bb6aaaf02 Mon Sep 17 00:00:00 2001 From: atepem <57289722+atepem@users.noreply.github.com> Date: Fri, 29 Nov 2024 13:09:23 +0000 Subject: [PATCH 2/4] chore: common-util/useFetchApi.js Co-authored-by: Josh Miller <31908788+truemiller@users.noreply.github.com> --- common-util/useFetchApi.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/common-util/useFetchApi.js b/common-util/useFetchApi.js index 3e7dc641..317cfe90 100644 --- a/common-util/useFetchApi.js +++ b/common-util/useFetchApi.js @@ -38,7 +38,9 @@ export const useFetchVideos = (limit = 1000) => { const imageFilename = thumbnailUrl ? `${process.env.NEXT_PUBLIC_API_URL}${thumbnailUrl}` : ''; - const video_url = `${process.env.NEXT_PUBLIC_API_URL}${get(videoUploaded, 'data[0].attributes.url') || ''}`; + + const videoUploadedUrl = get(videoUploaded, 'data[0].attributes.url'); + const video_url = videoUploadedUrl ? `${process.env.NEXT_PUBLIC_API_URL}${videoUploadedUrl} : ''`; return { id, From e8e214cf2fe664f12f853396946b705c91e91b88 Mon Sep 17 00:00:00 2001 From: atepem <57289722+atepem@users.noreply.github.com> Date: Fri, 29 Nov 2024 13:13:42 +0000 Subject: [PATCH 3/4] chore: Update common-util/useFetchApi.js Co-authored-by: Josh Miller <31908788+truemiller@users.noreply.github.com> --- common-util/useFetchApi.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/common-util/useFetchApi.js b/common-util/useFetchApi.js index 317cfe90..131c5114 100644 --- a/common-util/useFetchApi.js +++ b/common-util/useFetchApi.js @@ -40,7 +40,7 @@ export const useFetchVideos = (limit = 1000) => { : ''; const videoUploadedUrl = get(videoUploaded, 'data[0].attributes.url'); - const video_url = videoUploadedUrl ? `${process.env.NEXT_PUBLIC_API_URL}${videoUploadedUrl} : ''`; + const video_url = videoUploadedUrl ? `${process.env.NEXT_PUBLIC_API_URL}${videoUploadedUrl}` : ''; return { id, From 45427a679b74b1315820683801dea18d8bbe346d Mon Sep 17 00:00:00 2001 From: atepem <57289722+atepem@users.noreply.github.com> Date: Fri, 29 Nov 2024 17:07:39 +0000 Subject: [PATCH 4/4] chore: changing up var names --- common-util/formatDate.js | 2 +- common-util/useFetchApi.js | 6 ++++-- components/Content/Article.jsx | 14 +++++++++----- components/HomepageSection/Media.jsx | 8 ++++---- 4 files changed, 18 insertions(+), 12 deletions(-) diff --git a/common-util/formatDate.js b/common-util/formatDate.js index 7a86c7f9..c9dbc03e 100644 --- a/common-util/formatDate.js +++ b/common-util/formatDate.js @@ -2,7 +2,7 @@ export const formatDate = (date) => { const newDate = new Date(date); const options = { day: '2-digit', - month: 'long', + month: 'short', year: '2-digit', }; const formattedDate = newDate.toLocaleDateString('en-GB', options); diff --git a/common-util/useFetchApi.js b/common-util/useFetchApi.js index 131c5114..0d63abe5 100644 --- a/common-util/useFetchApi.js +++ b/common-util/useFetchApi.js @@ -38,9 +38,11 @@ export const useFetchVideos = (limit = 1000) => { const imageFilename = thumbnailUrl ? `${process.env.NEXT_PUBLIC_API_URL}${thumbnailUrl}` : ''; - + const videoUploadedUrl = get(videoUploaded, 'data[0].attributes.url'); - const video_url = videoUploadedUrl ? `${process.env.NEXT_PUBLIC_API_URL}${videoUploadedUrl}` : ''; + const video_url = videoUploadedUrl + ? `${process.env.NEXT_PUBLIC_API_URL}${videoUploadedUrl}` + : ''; return { id, diff --git a/components/Content/Article.jsx b/components/Content/Article.jsx index a031c428..488429df 100644 --- a/components/Content/Article.jsx +++ b/components/Content/Article.jsx @@ -21,15 +21,19 @@ const Article = ({ article, href, showReadTime, showDate }) => { return data?.attributes?.formats?.large; }, [article]); - const { title, datePublished, readTime } = article.attributes; + const { + title, + datePublished: unFormattedDatePublished, + readTime, + } = article.attributes; const { url, width, height } = image || {}; - const formattedDate = formatDate(datePublished); + const datePublished = formatDate(unFormattedDatePublished); const moreInfo = useMemo(() => { const moreInfoArray = []; - if (showDate && formattedDate) { - moreInfoArray.push(formattedDate); + if (showDate && datePublished) { + moreInfoArray.push(datePublished); } if (showReadTime && readTime) { @@ -37,7 +41,7 @@ const Article = ({ article, href, showReadTime, showDate }) => { } return moreInfoArray.join(' • '); - }, [showDate, formattedDate, showReadTime, readTime]); + }, [showDate, datePublished, showReadTime, readTime]); return ( diff --git a/components/HomepageSection/Media.jsx b/components/HomepageSection/Media.jsx index 68eea768..6a32a3af 100644 --- a/components/HomepageSection/Media.jsx +++ b/components/HomepageSection/Media.jsx @@ -3,10 +3,10 @@ import Articles from 'components/Content/Articles'; import { Videos } from 'components/Content/Videos'; import SectionWrapper from 'components/Layout/SectionWrapper'; -const limit = 3; +const LIMIT = 3; const Media = () => { - const { videos, isLoading } = useFetchVideos(limit); + const { videos, isLoading } = useFetchVideos(LIMIT); return ( { customClasses="px-4 md:px-8 py-12 lg:p-24 border-b" >
- - + +
);