fix(article): update articles frontend

HoseaCodes · Aug 12, 2023 · ca02b2c · ca02b2c
1 parent 21eb431
commit ca02b2c
Show file tree

Hide file tree

Showing 15 changed files with 894 additions and 346 deletions.
diff --git a/src/Components/Article/RelatedPosts.jsx b/src/Components/Article/RelatedPosts.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {MdBookmarkBorder} from 'react-icons/md';
 import {JustifyContent, AlignContent, Tag,
   BlogCard, GrayDiv} from '../../Layout/Container/styledArticle';
@@ -15,49 +15,58 @@ const RelatedPosts = (props) => {
   const {timeFormater, readTime} = props;
   const articles = props.articles;
   const user = props.user;
-  const recentPosts = articles.slice(0, 4)
   const history = useHistory()
+  const [idx, setIdx] = useState(4)
+  const [moreArticles, setMoreArticles] = useState(true)
+  const [recentPosts, setRecentPosts] = useState(articles.slice(0, idx))
 
   const handleReadMore = async () => {
-      history.push('/blog')
-}
+    setIdx(idx + 2)
+    if (articles.length > idx) {
+      setRecentPosts(articles.slice(0, (idx)))
+    }  else {
+      setRecentPosts(articles)
+      setMoreArticles(!moreArticles)
+    }
+  }
+
   return (
           <MarginTop Whitesmoke>
             {recentPosts.map(article => {
-                      return (
-                          <div key={article.id}>
-                            <BlogCard RelatedPost>
-                              <AlignContent>
-                                <CircleImage Secondary src={user.avatar ||"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT0k6I8WItSjK0JTttL3FwACOA6yugI29xvLw&usqp=CAU"}
-                                  alt="author"/>
-                                <NamePlate>{user.name || "Will Smith"}</NamePlate>
-                                <span>&nbsp;&#183;&nbsp;</span>
-                                <GrayDiv>{timeFormater}</GrayDiv>
-                              </AlignContent>
-                              <AlignContent Column>
-                                <div style={{marginRight: '1rem'}}>
-                                <Link to={`/blog/${article.id}`} rel="noopener noreferrer">
-                                  <h4>{article.title || "No Code Approach — Process Speech and convert to Text — Logic Apps"}</h4>
-                                </Link>
-                                  <p  style={{width: '80%'}}> {article.description || "Using Azure Cognitive Services Speech to Text and Logic apps No Code — Workflow style We can re use the same pattern for other Azure Cognitive..."}
-                                  </p>
-                                </div>
-                                <img height={'250rem'} width={'450rem'} src={article.images.url|| "https://tateeda.com/wp-content/uploads/2020/05/2.png"} alt="post"/>
-                              </AlignContent>
-                              <JustifyContent MiniPost>
-                                <AlignContent Inherit>
-                                  <Tag>Software</Tag>
-                                  <AlignContent Gray><span>{readTime} min read</span></AlignContent>
-                                </AlignContent>
-                                <MdBookmarkBorder style={{fontSize: '2.5rem'}}/>
-                              </JustifyContent>
-                            </BlogCard>
-                            <ArticleMainHr/>
-                          </div>
-                          )
-                        })}
+              return (
+                  <div key={article.id}>
+                    <BlogCard RelatedPost>
+                      <AlignContent>
+                        <CircleImage Secondary src={user.avatar ||"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT0k6I8WItSjK0JTttL3FwACOA6yugI29xvLw&usqp=CAU"}
+                          alt="author"/>
+                        <NamePlate>{user.name || "Will Smith"}</NamePlate>
+                        <span>&nbsp;&#183;&nbsp;</span>
+                        <GrayDiv>{timeFormater}</GrayDiv>
+                      </AlignContent>
+                      <AlignContent Column>
+                        <div style={{marginRight: '1rem'}}>
+                        <Link to={`/blog/${article.id}`} rel="noopener noreferrer">
+                          <h4>{article.title || "No Code Approach — Process Speech and convert to Text — Logic Apps"}</h4>
+                        </Link>
+                          <p  style={{width: '80%'}}> {article.description || "Using Azure Cognitive Services Speech to Text and Logic apps No Code — Workflow style We can re use the same pattern for other Azure Cognitive..."}
+                          </p>
+                        </div>
+                        <img height={'250rem'} width={'450rem'} src={article.images.url|| "https://tateeda.com/wp-content/uploads/2020/05/2.png"} alt="post"/>
+                      </AlignContent>
+                      <JustifyContent MiniPost>
+                        <AlignContent Inherit>
+                          <Tag>Software</Tag>
+                          <AlignContent Gray><span>{readTime} min read</span></AlignContent>
+                        </AlignContent>
+                        <MdBookmarkBorder style={{fontSize: '2.5rem'}}/>
+                      </JustifyContent>
+                    </BlogCard>
+                    <ArticleMainHr/>
+                  </div>
+                  )
+                })}
             <AlignContent CenterBtn>
-              <ReadMore onClick={handleReadMore}>Read more from me</ReadMore>
+              <ReadMore disabled={!moreArticles} onClick={handleReadMore}>Read more</ReadMore>
             </AlignContent>
           </MarginTop>
   )

diff --git a/src/Components/Article/RightColumn.jsx b/src/Components/Article/RightColumn.jsx
@@ -22,6 +22,7 @@ const RightColumn = (props) => {
   // const uri = window.location.pathname;
   const state = useContext(GlobalState);
   const [currentUser, setCurrentUser] = useState(props.user);
+  const [user] = state.userAPI.user
   const [isLoggedIn] = state.userAPI.isLoggedIn;
   const [search, setSearch] = useState('')
   const [comments, setComments] = useState({comments: []})
@@ -63,7 +64,7 @@ const RightColumn = (props) => {
     <>
       {
         props.viewComment ?
-          <StyledRightContainer>
+          <StyledRightContainer className='d-none d-lg-block'>
             <AlignContent>
               <div style={{display: 'flex', justifyContent: 'space-between', 
               width: '100%', alignItems: 'center'}}>
@@ -158,15 +159,15 @@ const RightColumn = (props) => {
             }
           </StyledRightContainer>
         :
-          <StyledRightContainer>
+          <StyledRightContainer className='d-none d-lg-block'>
             <AlignContent Center>
               {!isLoggedIn ?
               <>
                 <ArticleBtn RightColumn onClick={() => handleClick('register')} >Get Started</ArticleBtn>
                 <ArticleLinkColor Green href='/login'>Sign In</ArticleLinkColor>
               </>
               :
-                <h2>Welcome, {currentUser.name.split(' ')[0]}</h2>
+                <h2>Welcome, {user.name.split(' ')[0]}</h2>
               }
             </AlignContent>
                 <MarginTop RightCloumnSearch>

diff --git a/src/Components/NavBar/NavBar.css b/src/Components/NavBar/NavBar.css
@@ -98,4 +98,7 @@
   .left-nav.open {
     height: auto;
   }
+  .nav-combo {
+    justify-content: start;
+  }
 }
diff --git a/src/Components/Sticky/StickyFooter.jsx b/src/Components/Sticky/StickyFooter.jsx
@@ -40,11 +40,17 @@ const StickyFooter = ({id, likes, setViewComment, viewComment}) => {
                   </JustifyContent>
                 </JustifyContent>
                 <Font2>
-                  <FaFacebook/>
-                  <AiFillTwitterCircle/>
-                  <TiSocialLinkedinCircular/>
-                  <RiShareCircleFill/>
-                  <MdBookmarkBorder/>
+                  <a href="https://www.facebook.com/so.inthatthang" target="_blank" rel="noopener noreferrer">
+                    <FaFacebook style={{color: 'green'}}/>
+                  </a>
+                  <a href="https://twitter.com/DominiqueRHosea" target="_blank" rel="noopener noreferrer">
+                    <AiFillTwitterCircle  style={{color: 'green'}}/>
+                  </a>
+                  <a href="https://www.linkedin.com/in/dominique-hosea/" target="_blank" rel="noopener noreferrer">
+                    <TiSocialLinkedinCircular  style={{color: 'green'}}/>
+                  </a>
+                  {/* <RiShareCircleFill/> */}
+                  {/* <MdBookmarkBorder/> */}
                 </Font2>
               </JustifyContent>
             </div>

diff --git a/src/Components/Subscribe/Newsletter.jsx b/src/Components/Subscribe/Newsletter.jsx
@@ -8,15 +8,22 @@ import {JustifyContent, BlogNewsletter} from '../../Layout/Container/styledArtic
 
 const Newsletter = () => {
   return (
-        <BlogNewsletter>
+        <BlogNewsletter 
+        action="https://getform.io/f/7efda21f-ca67-48f6-8a1e-723776d4ae3b" method='POST'
+        className='d-none d-md-block'>
           <div>
             <h3>Sign up for Software Engineering News</h3>
             <BlogContent Author>By Dominique Hosea</BlogContent>
             <BlogContent Newsletter>Latest news from Analytics Vidhya on our Hackathons and some of our best articles!&nbsp;
               <u>Take a look.</u>
             </BlogContent>
             <JustifyContent SpaceAroundPaddingRight>
-              <ArticleInput placeholder='Your email' type="text" />
+              <ArticleInput 
+              name="email_address"
+              placeholder='Your email' type="text" />
+              <ArticleInput style={{display: 'none'}}
+              name="from" value={'Newsletter'}
+              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.

diff --git a/src/Components/Unused/Testimonial/Testimonials.jsx b/src/Components/Unused/Testimonial/Testimonials.jsx
@@ -27,7 +27,8 @@
 
 import React, { useState, useCallback } from "react";
 import { useTransition, animated } from "react-spring";
-import TwitterIcon from '@material-ui/icons/Twitter';
+// import TwitterIcon from '@material-ui/icons/Twitter';
+import { FaTwitter } from 'react-icons/fa'
 import './Testimonials.css'
 import Aaron from '../../icons/aaron.png'
 import Chengu from '../../icons/Chengu.png'
@@ -151,7 +152,7 @@ const Testimonials = () => {
                                     }}>
                                         <p style={{ opacity: '.6', margin: '0', lineHeight: '40px', letterSpacing: '1px' }}> Follow {step.fName} on Twitter</p>
                                         <a className='social' href={step.social} rel="noopener noreferrer" target="_blank">
-                                            <TwitterIcon fontSize="large" />
+                                            <FaTwitter fontSize="large" />
                                         </a>
                                     </div>
                                 </div>

diff --git a/src/Layout/Button/styledButton.jsx b/src/Layout/Button/styledButton.jsx
@@ -20,6 +20,11 @@ export const ReadMore = styled.button`
   color: white;
   border-radius: 20px;
   padding: 1.5% 3%;
+  ${props => props.disabled && css`
+    border: 1px solid #999999;
+    background-color: #cccccc;
+    color: #666666;
+  `}
 `;
 
 export const ArticleBtn = styled.button`

diff --git a/src/Layout/Container/styledArticle.jsx b/src/Layout/Container/styledArticle.jsx
@@ -137,7 +137,7 @@ export const BlogPost = styled.div`
   padding: 1%;
 `;
 
-export const BlogNewsletter = styled.div`
+export const BlogNewsletter = styled.form`
   background-color: whitesmoke;
   padding: 4%;
   margin-top: 8%;

diff --git a/src/Pages/Articles/Article/Article.jsx b/src/Pages/Articles/Article/Article.jsx
@@ -36,7 +36,7 @@ const ArticleItem = () => {
           <main className="blog-content">
             {
                 user.name !== "" && 
-                <SideBar/>
+                <SideBar className='d-none d-lg-block'/>
             }
             <MainContainer viewComment={viewComment} setViewComment={setViewComment}  user={user} articles={articles} timeFormater={timeFormater} readTime={readTime} detailArticle={detailArticle} />
             <RightColumn setViewComment={setViewComment} viewComment={viewComment} user={user} articles={articles}/>

diff --git a/src/Pages/Articles/ArticleCard.jsx b/src/Pages/Articles/ArticleCard.jsx
@@ -2,7 +2,8 @@ import React, {useContext} from 'react';
 import { Link } from 'react-router-dom';
 import './Articles.css'
 import BtnRender from './BtnRender';
-import VisibilityIcon from '@material-ui/icons/Visibility';
+// import VisibilityIcon from '@material-ui/icons/Visibility';
+import { AiFillEye } from 'react-icons/ai'
 import moment from 'moment-timezone'
 import { GlobalState } from '../../GlobalState';
 
@@ -33,7 +34,7 @@ const ArticleItem = (props) => {
                     >
                         <h2 className='article-card-header' >{title}</h2>
                     </Link>
-                    <p className="article-card-meta"><span>1 &nbsp;<VisibilityIcon /> &nbsp;</span>{timeFormater}</p>
+                    <p className="article-card-meta"><span>1 &nbsp;<AiFillEye /> &nbsp;</span>{timeFormater}</p>
                     <p className="work-content">{props.truncate(description)}</p>
                     <br />
                 </div>

diff --git a/src/Pages/Home/Home.css b/src/Pages/Home/Home.css
@@ -221,4 +221,8 @@
     margin: auto !important;
     width: 40% !important;
   }
+
+  .contact-group h2 {
+    font-size: 3.5rem !important;
+  }
 }