feat: move related articles fetch to repo

devflowinc · May 30, 2024 · 1b31957 · 1b31957
1 parent 19455e7
commit 1b31957
Show file tree

Hide file tree

Showing 9 changed files with 36,400 additions and 142 deletions.
diff --git a/api/relatedArticles.ts b/api/relatedArticles.ts
diff --git a/app/resource-center/Shared/BlogPostCard.tsx b/app/resource-center/Shared/BlogPostCard.tsx
@@ -13,12 +13,27 @@ export default function BlogPostCard({
 }) {
   const { path, date, title, authors } = blog
 
-  const getAuthorName = (authorID) => {
+  const getAuthorDetails = (authorID) => {
     if (Authors[authorID]) {
-      return Authors[authorID].name
+      return Authors[authorID]
     }
 
-    return ''
+    return {}
+  }
+
+  const renderAuthor = (author) => {
+    const authorData = getAuthorDetails(author)
+
+    return (
+      <div className="flex items-center gap-2">
+        <img
+          loading="lazy"
+          src={authorData.image_url}
+          className="my-auto inline-block aspect-square h-6 w-6 shrink-0 rounded-full"
+        />
+        <div className="text-xs capitalize">{authorData.name}</div>
+      </div>
+    )
   }
 
   return (
@@ -40,22 +55,13 @@ export default function BlogPostCard({
             </div>
           </div>
 
-          <div className="mt-16 flex w-full flex-col justify-between gap-5 py-px text-sm leading-5 max-md:mt-10 lg:flex-row">
-            <div className="flex items-center gap-2 font-medium text-stone-500 dark:text-white">
-              {authors && Array.isArray(authors) && (
-                <>
-                  <img
-                    loading="lazy"
-                    src={`https://dummyimage.com/300.png&text=${authors[0]?.slice(0, 1)}`}
-                    className="my-auto inline-block aspect-square h-6 w-4 w-6 shrink-0 rounded-full"
-                  />
-                  <div className="capitalize">{getAuthorName(authors[0])}</div>
-                </>
-              )}
+          <div className="mt-16 flex w-full flex-col items-end justify-between gap-5 py-px text-sm leading-5 max-md:mt-10 lg:flex-row">
+            <div className="flex flex-col gap-2 font-medium text-stone-500 dark:text-white">
+              {authors && Array.isArray(authors) && renderAuthor(authors[0])}
             </div>
             <div className="flex items-center gap-1.5 whitespace-nowrap text-stone-700 dark:text-stone-300">
               <Timer size={16} />
-              <div className="text-stone-700 dark:text-white">{blog.readingTime.text}</div>
+              <div className="text-xs text-stone-700 dark:text-white">{blog.readingTime.text}</div>
             </div>
           </div>
         </div>

diff --git a/components/RelatedArticles/RelatedArticles.tsx b/components/RelatedArticles/RelatedArticles.tsx
@@ -1,6 +1,4 @@
-'use client'
-
-import { fetchRelatedArticles } from '@/api/relatedArticles'
+import { RelatedArticleProps } from '@/layouts/PostLayout'
 import Link from 'next/link'
 import * as React from 'react'
 
@@ -35,51 +33,16 @@ const ArticleCard: React.FC<ArticleCardProps> = ({ title, publishedOn, url }) =>
   )
 }
 
-const RelatedArticles: React.FC = () => {
-  const [relatedArticles, setRelatedArticles] = React.useState<ArticleCardProps[]>([])
-  const [loadingRelatedArticles, setLoadingRelatedArticles] = React.useState(false)
-
-  React.useEffect(() => {
-    setLoadingRelatedArticles(true)
-
-    const blogPath = window.location.pathname
-    const AIRTABLE_URL = `${process.env.AIRTABLE_BASE_URL}?filterByFormula={blogURL}='${blogPath}'&maxRecords=1`
-
-    const options = {
-      method: 'GET',
-      headers: {
-        Authorization: `Bearer ${process.env.AIRTABLE_KEY}`,
-      },
-    }
-
-    const fetchAndCacheData = async () => {
-      try {
-        const articles = await fetchRelatedArticles(AIRTABLE_URL, blogPath, EXPIRY, options)
-
-        if (articles && Array.isArray(articles)) {
-          setRelatedArticles(articles)
-        }
-      } catch (error) {
-        console.error(error)
-      } finally {
-        setLoadingRelatedArticles(false)
-      }
-    }
-
-    fetchAndCacheData()
-  }, [])
-
+const RelatedArticles: React.FC<{
+  relatedArticles: RelatedArticleProps[]
+}> = ({ relatedArticles }) => {
   return (
     <div className="related-articles my-8 flex flex-col">
-      {!loadingRelatedArticles &&
-        relatedArticles &&
-        Array.isArray(relatedArticles) &&
-        relatedArticles.length > 0 && (
-          <h2 className="w-full px-5 text-sm font-semibold uppercase leading-5 tracking-wide text-gray-700 max-md:max-w-full">
-            {' '}
-            Related Articles{' '}
-          </h2>
-        )}
+      {relatedArticles && Array.isArray(relatedArticles) && relatedArticles.length > 0 && (
+        <h2 className="w-full text-sm font-semibold uppercase leading-5 tracking-wide text-white max-md:max-w-full">
+          Related Articles
+        </h2>
+      )}
 
       <section className="px5 mt-5">
         <div className="grid grid-cols-1 gap-5 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3">