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..c9dbc03e --- /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: 'short', + 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..0d63abe5 100644 --- a/common-util/useFetchApi.js +++ b/common-util/useFetchApi.js @@ -34,8 +34,15 @@ export const useFetchVideos = (limit = 1000) => { thumbnail, video: videoUploaded, } = attributes || {}; - const imageFilename = `${process.env.NEXT_PUBLIC_API_URL}${get(thumbnail, 'data.attributes.url') || ''}`; - const video_url = `${process.env.NEXT_PUBLIC_API_URL}${get(videoUploaded, 'data[0].attributes.url') || ''}`; + const thumbnailUrl = get(thumbnail, 'data.attributes.url'); + 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}` + : ''; return { id, diff --git a/components/Content/Article.jsx b/components/Content/Article.jsx index 7b08b58c..488429df 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; @@ -20,8 +21,13 @@ 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 datePublished = formatDate(unFormattedDatePublished); const moreInfo = useMemo(() => { const moreInfoArray = []; 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..6a32a3af 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}