From 27459d1106431fc42b9ef7402ec5e6312ac164c7 Mon Sep 17 00:00:00 2001
From: Ethan Bonsignori <ebonsignori@gmail.com>
Date: Fri, 22 Mar 2024 10:18:42 -0700
Subject: [PATCH] add likes to blog list

---
 src/components/Theme.js          |   4 +-
 src/components/pages/BlogList.js | 116 ++++++++++++++++++++-----------
 2 files changed, 77 insertions(+), 43 deletions(-)

diff --git a/src/components/Theme.js b/src/components/Theme.js
index 9eeea99..e97eec3 100644
--- a/src/components/Theme.js
+++ b/src/components/Theme.js
@@ -17,7 +17,7 @@ const darkTheme = {
     navbarScroll: '#222222',
     activeTab: '#333333',
     text: '#fff',
-    otherText: '#3a4a5a',
+    otherText: '#EBEBEB',
   },
 };
 
@@ -32,7 +32,7 @@ const lightTheme = {
     navbarScroll: '#f5f5f5',
     activeTab: '#DEDEDE',
     text: '#3a4a5a',
-    otherText: '#fff',
+    otherText: '#202932',
   },
 };
 
diff --git a/src/components/pages/BlogList.js b/src/components/pages/BlogList.js
index a2521aa..a9101fc 100644
--- a/src/components/pages/BlogList.js
+++ b/src/components/pages/BlogList.js
@@ -1,18 +1,47 @@
 import { faCaretDown, faCaretUp } from '@fortawesome/free-solid-svg-icons';
+import { faHeart } from '@fortawesome/free-regular-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Link, Outlet, useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
-import blogPosts from '../../assets/blogPosts';
+import localBlogPosts from '../../assets/blogPosts';
+import { getBlogs } from '../../utils/blogApi';
 import breakpoints from '../../utils/breakpoints';
 import { fadeIn } from '../../utils/keyframes';
 import Headline from './shared/Headline';
 
 const BlogList = ({ darkMode, toggleTheme }) => {
+  const [loading, setLoading] = useState(false);
+  const [blogPosts, setBlogPosts] = useState([]);
   const [dateSort, setDateSort] = useState('descending');
   const [categorySort, setCategorySort] = useState('all');
   const navigate = useNavigate();
 
+  const mergeLocalAndDBBlogs = (dbBlogs) => {
+    const merged = [];
+    localBlogPosts.forEach((post) => {
+      const found = dbBlogs.find(
+        (d) => d.id === post.blogLink.replace(/-/g, ''),
+      );
+      merged.push({ ...post, likes: found?.likes ?? 0 });
+    });
+
+    return merged;
+  };
+
+  const fetchBlogPosts = async () => {
+    const data = await getBlogs();
+    const blogs = mergeLocalAndDBBlogs(data.blogs);
+
+    setBlogPosts(blogs);
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    fetchBlogPosts();
+    setLoading(true);
+  }, []);
+
   const handleDateSort = () => {
     if (dateSort === 'descending') {
       return setDateSort('ascending');
@@ -47,11 +76,15 @@ const BlogList = ({ darkMode, toggleTheme }) => {
             </BlogPostHeader>
             <BlogBlurb>{blog.blurb}</BlogBlurb>
           </BlogContent>
-          <BlogSplashImage image={blog.splash} />
         </BlogContentWrapper>
         <BlogDetails>
           <BlogCategory>{blog.category}</BlogCategory>
-          <span>{blog.createdAt}</span>
+          <BlogCreatedDate>{blog.createdAt}</BlogCreatedDate>
+          <BlogLikes>
+            <FontAwesomeIcon icon={faHeart} />
+            &nbsp;&nbsp;&nbsp;
+            {blog.likes}
+          </BlogLikes>
         </BlogDetails>
       </BlogPost>
     ));
@@ -59,30 +92,34 @@ const BlogList = ({ darkMode, toggleTheme }) => {
   return (
     <>
       <Headline title='BLOG' darkMode={darkMode} toggleTheme={toggleTheme} />
-      <BlogPostsWrapper>
-        <SortWrapper>
-          <SortButton title={dateSort} onClick={handleDateSort}>
-            Sort By Date&nbsp;
-            {dateSort === 'descending' ? (
-              <FontAwesomeIcon icon={faCaretDown} />
-            ) : (
-              <FontAwesomeIcon icon={faCaretUp} />
-            )}
-          </SortButton>
-          <SelectWrapper>
-            <label htmlFor='category'>Category: </label>
-            <SortSelect
-              id='category'
-              value={categorySort}
-              onChange={(e) => setCategorySort(e.target.value)}>
-              <option value='all'>All</option>
-              <option value='technology'>Technology</option>
-              <option value='life'>Life</option>
-            </SortSelect>
-          </SelectWrapper>
-        </SortWrapper>
-        {getBlogsJsx()}
-      </BlogPostsWrapper>
+      {loading ? (
+        <>Loading...</>
+      ) : (
+        <BlogPostsWrapper>
+          <SortWrapper>
+            <SortButton title={dateSort} onClick={handleDateSort}>
+              Sort By Date&nbsp;
+              {dateSort === 'descending' ? (
+                <FontAwesomeIcon icon={faCaretDown} />
+              ) : (
+                <FontAwesomeIcon icon={faCaretUp} />
+              )}
+            </SortButton>
+            <SelectWrapper>
+              <label htmlFor='category'>Category: </label>
+              <SortSelect
+                id='category'
+                value={categorySort}
+                onChange={(e) => setCategorySort(e.target.value)}>
+                <option value='all'>All</option>
+                <option value='technology'>Technology</option>
+                <option value='life'>Life</option>
+              </SortSelect>
+            </SelectWrapper>
+          </SortWrapper>
+          {getBlogsJsx()}
+        </BlogPostsWrapper>
+      )}
       <Outlet />
     </>
   );
@@ -107,18 +144,8 @@ const BlogContent = styled.div`
   flex-direction: column;
 `;
 
-const BlogSplashImage = styled.div`
-  background-image: url(${(props) => props.image});
-  background-size: contain;
-  background-position: center;
-  background-repeat: no-repeat;
-  width: 130px;
-  margin-left: 2em;
-  margin-right: 2em;
-
-  ${breakpoints.mobile} {
-    display: none;
-  }
+const BlogLikes = styled.div`
+  margin-left: 1em;
 `;
 
 const BlogPostHeader = styled.div`
@@ -141,7 +168,8 @@ const BlogLink = styled(Link)`
 
 const BlogDetails = styled.div`
   display: flex;
-  justify-content: space-between;
+  justify-content: left;
+  align-items: center;
   margin-top: 2em;
 `;
 
@@ -161,6 +189,12 @@ const BlogCategory = styled.div`
   padding: 0.2em 0.5em;
 `;
 
+const BlogCreatedDate = styled.div`
+  margin-left: 1em;
+  opacity: 0.7;
+  color: ${({ theme }) => theme.color.otherText};
+`;
+
 const BlogPostsWrapper = styled.div`
   display: flex;
   flex-direction: column;