fix(*): update blog page

HoseaCodes · Jul 30, 2023 · 56aba14 · 56aba14
1 parent 0a0b463
commit 56aba14
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 28 deletions.
diff --git a/src/API/UserAPI.jsx b/src/API/UserAPI.jsx
@@ -6,7 +6,7 @@ const initialState = {
     "name": "",
     "email": "",
     "password": "",
-    "avatar": {},
+    "avatar": "",
     "title" : "",
     "location" : "",
     "work" : [],

diff --git a/src/Components/Article/MainContainer.jsx b/src/Components/Article/MainContainer.jsx
@@ -20,19 +20,25 @@ const MainContainer = (props) => {
   const timeFormater = props.timeFormater;
   const readTime = props.readTime;
   const user = props.user
-
+  const avatar = user.avatar === "" ?
+  "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT0k6I8WItSjK0JTttL3FwACOA6yugI29xvLw&usqp=CAU"
+  : user.avatar; 
   return (
         <StyledMainContainer>
           <PaddingContent>
             <section>
-              <Alert transition="false" variant="light">
-                <AlertP>
-                  You have <strong style={{ color: 'black' }}>1</strong> free member-only story left this month.&nbsp;
-                  <AlertLink href="#">Sign up for Medium and get an extra one.</AlertLink>
-                </AlertP>
-              </Alert>
+              {
+                user.name !== "" && 
+                <Alert transition="false" variant="light">
+                  <AlertP>
+                    You have <strong style={{ color: 'black' }}>1</strong> free member-only story left this month.&nbsp;
+                    <AlertLink href="#">Sign up for Medium and get an extra one.</AlertLink>
+                  </AlertP>
+                </Alert>
+
+              }
               <JustifyContent AlignCenter>
-                <CircleImage src={user.avatar || "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT0k6I8WItSjK0JTttL3FwACOA6yugI29xvLw&usqp=CAU"}
+                <CircleImage src={avatar}
                     alt="author" />
                 <div>
                   <NamePlate>{user.name || "Will Smith"}</NamePlate>
@@ -49,7 +55,7 @@ const MainContainer = (props) => {
                 <BlogTitle>{title}</BlogTitle>
                 <BlogSubTitle>{subtitle}</BlogSubTitle>
                 <BlogDisplayImage src={images.url} alt={title}  />
-                <BlogPhotoCredit>Photo Credit by <u>You</u></BlogPhotoCredit>
+                <BlogPhotoCredit>Photo Credit by &nbsp;<u>You</u></BlogPhotoCredit>
               <BlogCard>
                 <br />
                 <BlogPost>

diff --git a/src/Components/Article/RightColumn.jsx b/src/Components/Article/RightColumn.jsx
@@ -1,4 +1,4 @@
-import React, {useContext} from 'react';
+import React, {useContext, useState} from 'react';
 import {PageLinks, StyledRightContainer, AlignContent, SideUserContainer,
   PostContainer} from '../../Layout/Container/styledArticle';
 import {SquareImage, CircleImage} from '../../Layout/Image/styledImage';
@@ -14,17 +14,25 @@ import { GlobalState } from '../../GlobalState';
 
 const RightColumn = ({user, articles}) => {
 
-  const shuffleArray = (arr) => arr.sort(() => 0.5 - Math.random());
-  const uri = window.location.pathname;
-  const recentPosts = shuffleArray(articles)
-        .filter((article) => article._id !== uri.split('/')[2])
-        .slice(0, 5);
   const history = useHistory();
+  const uri = window.location.pathname;
   const state = useContext(GlobalState);
-  const [isLoggedIn] = state.userAPI.isLoggedIn
+  const [isLoggedIn] = state.userAPI.isLoggedIn;
+  const [search, setSearch] = useState('')
 
-  console.log(user)
+  const shuffleArray = (arr) => arr.sort(() => 0.5 - Math.random());
+  const recentPosts = shuffleArray(articles)
+        .filter((article) => {
+          article._id !== uri.split('/')[2]
+          return article.title.toLowerCase().indexOf(
+            search.toLowerCase()) !== -1;
+        })
+        .slice(0, 5);
 
+  const updateSearch = event => {
+    const { value } = event.target
+    setSearch(value.substr(0, 20))
+  }
   const handleClick= async (e) => {
     history.push(`/${e}`)
   }
@@ -41,11 +49,13 @@ const RightColumn = ({user, articles}) => {
               }
             </AlignContent>
                 <MarginTop RightCloumnSearch>
-                  <ArticleInput Search placeholder='Search' type="text"/>
+                  <ArticleInput Search 
+                  placeholder='Search' 
+                  type="text"
+                  value={search}
+                  onChange={updateSearch}/>
                 </MarginTop >
                 <SideUserContainer Primary>
-                  {/* <CircleImage Secondary src={"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT0k6I8WItSjK0JTttL3FwACOA6yugI29xvLw&usqp=CAU"}
-                            alt="author" /> */}
                   <CircleImage Secondary src={user.avatar || "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT0k6I8WItSjK0JTttL3FwACOA6yugI29xvLw&usqp=CAU"}
                             alt="author" />
                   <UserInfo Padding4>{user.name || "Will Smith"}</UserInfo>

diff --git a/src/Components/Subscribe/Newsletter.jsx b/src/Components/Subscribe/Newsletter.jsx
@@ -19,7 +19,7 @@ const Newsletter = () => {
               <ArticleInput placeholder='Your email' type="text" />
               <ArticleBtn><AiOutlineMail style={{fontSize: '2.5rem'}}/>&nbsp;  Get this newsletter</ArticleBtn>
             </JustifyContent>
-            <MarginTop>By signing up, you will create a Medium account if you don"’"t already have one.
+            <MarginTop>By signing up, you will create a Medium account if you don’t already have one.
               Review our Privacy Policy for more information about our privacy practices.</MarginTop>
           </div>
         </BlogNewsletter>

diff --git a/src/Pages/Articles/Article/Article.jsx b/src/Pages/Articles/Article/Article.jsx
@@ -30,11 +30,13 @@ const ArticleItem = () => {
     const avgWordsMinRead = 238
     const wordCount = markdown.length + 700
     const readTime = Math.round(wordCount / avgWordsMinRead)
-
     return (
         <>
           <main className="blog-content">
-            <SideBar/>
+            {
+                user.name !== "" && 
+                <SideBar/>
+            }
             <MainContainer user={user} articles={articles} timeFormater={timeFormater} readTime={readTime} detailArticle={detailArticle} />
             <RightColumn user={user} articles={articles}/>
           </main>

diff --git a/src/Pages/Articles/Articles.jsx b/src/Pages/Articles/Articles.jsx
@@ -116,16 +116,16 @@ const Articles = () => {
 
     let taggedArticles = []
     if (tagsShow === "All") {
-        taggedArticles = currentPosts
+        taggedArticles = filteredArticles
     }
     else if (tagsShow === "JavaScript") {
-        taggedArticles = currentPosts.filter(item => item.category.includes("JavaScript"))
+        taggedArticles = filteredArticles.filter(item => item.category.includes("JavaScript"))
     }
     else if (tagsShow === "Python") {
-        taggedArticles = currentPosts.filter(item => item.category.includes("Python"))
+        taggedArticles = filteredArticles.filter(item => item.category.includes("Python"))
     }
     else if (tagsShow === "Software Engineer") {
-        taggedArticles = currentPosts.filter(item => item.category.includes("Software Engineer"))
+        taggedArticles = filteredArticles.filter(item => item.category.includes("Software Engineer"))
     }
 
     // Load this effect on mount