fix: mindshare related articles (#2340)

**ISSUES:**

1. Not showing related article(s) based on content from the manager

![image](https://github.com/zesty-io/website/assets/70579069/f90784bd-6d34-48ce-bf5e-ffe902ae484b)

![image](https://github.com/zesty-io/website/assets/70579069/ee3b9ed5-953c-4c10-876d-65bf692b0f2b)

2. Current article is showing in the related articles section

![image](https://github.com/zesty-io/website/assets/70579069/e09505a3-9720-4f10-a849-ed461ab99392)
![Screenshot 2024-01-30
021422](https://github.com/zesty-io/website/assets/70579069/631df9e6-f151-4b04-8c71-621c3cb7eb59)


**FIXED:** 
Prioritized to render (if there's any) related articles from content.
Otherwise render the latest articles excluding the current article page.



https://github.com/zesty-io/website/assets/70579069/b1db6a37-e6f2-41aa-ba68-e7516bf93879

---------

Co-authored-by: darwin.apolinario <darwin.apolinario@gmail.com>

package.json

@@ -2,7 +2,7 @@
   "name": "zesty-website",
   "author": "Zesty.io Platform Inc.",
   "email": "marketing@zesty.io",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "private": true,
   "scripts": {
     "dev": "NODE_OPTIONS='--inspect' next dev",

src/views/zesty/Article.js

@@ -55,6 +55,7 @@ import { getCookie, hasCookie, setCookie } from 'cookies-next';
 
 function Article({ content }) {
   const [newContent, setNewContent] = useState(content.article);
+  const [relatedArticles, setRelatedArticles] = useState([]);
   const { palette } = useTheme();
 
   const { data: latestArticles } = useFetch(
@@ -115,6 +116,12 @@ function Article({ content }) {
     verifyPathnameInCookie(window.location.pathname);
   }, []);
 
+  useEffect(() => {
+    setRelatedArticles(
+      getRelatedArticles(content?.related_articles, latestArticles),
+    );
+  }, [latestArticles]);
+
   const verifyPathnameInCookie = (path) => {
     if (!hasCookie(cookieName)) {
       setShowPopup(true);
@@ -135,6 +142,55 @@ function Article({ content }) {
     return new Date(inputDate) < currentDate;
   };
 
+  // Mutate and destructure related articles to match the structure of latestArticles
+  // Prioritize to return related instead of latest articles
+  const getRelatedArticles = (related, latest = []) => {
+    const relatedData = [];
+    let totalSliceCount = 4; // Default number of data to return
+    let result;
+
+    if (related?.data?.length > 4) {
+      totalSliceCount = related.data.length;
+      latest = [];
+    }
+
+    if (related !== null || related) {
+      related?.data.map(
+        ({ title, description, date, author, hero_image, meta }) => {
+          const articleDate = new Date(date);
+          relatedData.push({
+            title,
+            author: {
+              name: author?.data[0]?.name,
+              image: author?.data[0]?.headshot?.data[0].url,
+            },
+            description,
+            date:
+              articleDate.toLocaleString('default', { month: 'long' }) +
+              ' ' +
+              articleDate.getDate(),
+            image: hero_image?.data
+              ? hero_image.data[0].url
+              : FillerContent.image,
+            path: meta?.web?.uri,
+          });
+        },
+      );
+    }
+
+    // Merge related and latest articles into one array
+    // Removing duplicate and current article from result
+    result = [...relatedData, ...latest].filter(
+      (value, index, self) =>
+        index ===
+        self.findIndex(
+          (t) => t.title === value.title && t.title !== content?.title,
+        ),
+    );
+
+    return result.slice(0, totalSliceCount);
+  };
+
   const popupLeadCaptureProps = {
     title: content?.pop_up_title || 'FREE CMS BUYING GUIDE',
     description: content?.pop_up_description || 'DOWNLOAD CMS BUYING GUIDE',
@@ -630,7 +686,7 @@ function Article({ content }) {
             tags={tags}
             authorLink={authorLink}
           />
-          <BlogContent title="Related Articles" articles={latestArticles} />
+          <BlogContent title="Related Articles" articles={relatedArticles} />
         </Stack>
       </ThemeProvider>