style: changed date formatting and pr fixes

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;

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, '-');
+};

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 {

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,20 +23,21 @@ 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) {
       moreInfoArray.push(`${readTime} ${readTime === 1 ? 'MIN' : 'MINS'} READ`);
     }
 
     return moreInfoArray.join(' • ');
-  }, [showDate, datePublished, showReadTime, readTime]);
+  }, [showDate, formattedDate, showReadTime, readTime]);
 
   return (
     <Link href={href}>

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,
   );
 

components/Content/Videos.jsx

@@ -6,14 +6,15 @@ 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 }) => (
   <a
     href={video.platform_link || video.drive_link || video.video_url}
     target="_blank"
     rel="noopener noreferrer"
   >
-    <article
+    <div
       className={`${CARD_CLASS} max-w-full h-full overflow-hidden min-h-[300px] `}
     >
       {video.imageFilename && (
@@ -30,10 +31,12 @@ const Video = ({ video }) => (
           {video.title}
         </h2>
         <div className="text-gray-500 mt-auto">
-          <span className="text-sm md:text-xl lg:text-sm">{video.date}</span>
+          <span className="text-sm md:text-xl lg:text-sm">
+            {formatDate(video.date)}
+          </span>
         </div>
       </div>
-    </article>
+    </div>
   </a>
 );
 

components/HomepageSection/Media.jsx

@@ -3,17 +3,19 @@ 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 (
     <SectionWrapper
       backgroundType="SUBTLE_GRADIENT"
       customClasses="px-4 md:px-8 py-12 lg:p-24 border-b"
     >
       <div className="max-w-screen-xl mx-auto flex flex-col gap-10">
-        <Videos isLoading={isLoading} videos={videos} limit={3} />
-        <Articles limit={3} tagFilter="bonds" showSeeAll />
+        <Videos isLoading={isLoading} videos={videos} limit={limit} />
+        <Articles limit={limit} tagFilter="bonds" showSeeAll />
       </div>
     </SectionWrapper>
   );

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 = () => {
           />
         )}
         <div className={`${TITLE.SMALL} mb-4`}>{title}</div>
-        <div className={`${TEXT} mb-4`}>{datePublished}</div>
+        <div className={`${TEXT} mb-4`}>{formattedDate}</div>
         <Markdown>{content}</Markdown>
       </div>
     </PageWrapper>