From 6648ab7b2a06a444c4c20ed2f2ae1243254e90ad Mon Sep 17 00:00:00 2001 From: hosead6168 Date: Thu, 24 Mar 2022 16:35:06 -0500 Subject: [PATCH] fix(*): added live data for blog --- src/Components/Article/MainContainer.jsx | 8 ++- src/Components/Article/RelatedPosts.jsx | 88 ++++++++++-------------- src/Components/Article/RightColumn.jsx | 55 ++++++++------- src/Pages/Articles/Article/Article.jsx | 5 +- 4 files changed, 70 insertions(+), 86 deletions(-) diff --git a/src/Components/Article/MainContainer.jsx b/src/Components/Article/MainContainer.jsx index 31097350..4a71f79a 100644 --- a/src/Components/Article/MainContainer.jsx +++ b/src/Components/Article/MainContainer.jsx @@ -15,9 +15,11 @@ import RelatedPosts from './RelatedPosts'; import StickyFooter from '../Sticky/StickyFooter'; const MainContainer = (props) => { + const { title, subtitle, description, images, markdown } = props.detailArticle; const timeFormater = props.timeFormater; const readTime = props.readTime; + const user = props.user return ( @@ -30,10 +32,10 @@ const MainContainer = (props) => { -
- Will Smith + {user.name || "Will Smith"} {timeFormater}  ·  @@ -66,7 +68,7 @@ const MainContainer = (props) => { - + ) } diff --git a/src/Components/Article/RelatedPosts.jsx b/src/Components/Article/RelatedPosts.jsx index de0f0dc7..164344bd 100644 --- a/src/Components/Article/RelatedPosts.jsx +++ b/src/Components/Article/RelatedPosts.jsx @@ -1,6 +1,6 @@ import React from 'react'; import {MdBookmarkBorder} from 'react-icons/md'; -import {JustifyContent, AlignContent, Tag, SideUserContainer, +import {JustifyContent, AlignContent, Tag, BlogCard, GrayDiv} from '../../Layout/Container/styledArticle'; import {CircleImage} from '../../Layout/Image/styledImage'; import {NamePlate} from '../../Layout/Text/styledText'; @@ -11,61 +11,43 @@ import {ReadMore} from '../../Layout/Button/styledButton'; const RelatedPosts = (props) => { const {timeFormater, readTime} = props; + const articles = props.articles; + const user = props.user; + const recentPosts = articles.slice(0, 4) return ( - - - - Will Smith -  ·  - {timeFormater} - - -
-

No Code Approach — Process Speech and convert to Text — Logic Apps

-

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... -

-
- post - - - - Software - {readTime} min read - - - - - - - - - Will Smith -  ·  - {timeFormater} - - -
-

No Code Approach — Process Speech and convert to Text — Logic Apps

-

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... -

-
- post - - - - Software - {readTime} min read - - - - - + {recentPosts.map(article => { + return ( +
+ + + + {user.name || "Will Smith"} +  ·  + {timeFormater} + + +
+

{articles.title || "No Code Approach — Process Speech and convert to Text — Logic Apps"}

+

{articles.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..."} +

+
+ post + + + + Software + {readTime} min read + + + + + +
+ ) + })} Read more from me diff --git a/src/Components/Article/RightColumn.jsx b/src/Components/Article/RightColumn.jsx index ee6344f6..ee615217 100644 --- a/src/Components/Article/RightColumn.jsx +++ b/src/Components/Article/RightColumn.jsx @@ -2,15 +2,20 @@ import React from 'react'; import {PageLinks, StyledRightContainer, AlignContent, SideUserContainer, PostContainer} from '../../Layout/Container/styledArticle'; import {SquareImage, CircleImage} from '../../Layout/Image/styledImage'; -import {UserInfo, PostText, NoMargin, Subtitle} from '../../Layout/Text/styledText'; +import {UserInfo, PostText, Subtitle} from '../../Layout/Text/styledText'; import {ArticleBtn} from '../../Layout/Button/styledButton'; import {ArticleLink, ArticleLinkColor} from '../../Layout/ATag/styledATag'; import {MdBookmarkBorder} from 'react-icons/md'; import { MarginTop } from '../../Layout/Margin/styledMargin'; import { ArticleInput } from '../../Layout/Input/styledInput'; +import { Link } from 'react-router-dom'; -const RightColumn = () => { +const RightColumn = ({user, articles}) => { + + + const recentPosts = articles.slice(0, 5) + console.log(user) return ( @@ -21,9 +26,11 @@ const RightColumn = () => { - */} + - Will Smith + {user.name || "Will Smith"} 119 Followers Software Engineer | Python Programmer | Java Programmer | Tech Enthusiast | JavaScript Programmer | React Lover | Mobile Developer @@ -35,30 +42,22 @@ const RightColumn = () => { Related - - - -
FastAPI: Complete API Development
- FastAPI: Complete API Development - - - - - - Handling MongoDb ObjectId in Python FastAPI - Keep it simlpe but significant - - - - - - Pydantic — Better Data Validation for Python - “Data validation and settings management using Python type hinting." - - + {recentPosts.map(article => { + return ( +
+ + + + +
{article.title}
+ + {article.subtitle} + + +
+
+ ) + })} Help diff --git a/src/Pages/Articles/Article/Article.jsx b/src/Pages/Articles/Article/Article.jsx index 084f6ba7..a44e69ce 100755 --- a/src/Pages/Articles/Article/Article.jsx +++ b/src/Pages/Articles/Article/Article.jsx @@ -10,6 +10,7 @@ import MainContainer from '../../../Components/Article/MainContainer'; const ArticleItem = () => { const params = useParams() const state = useContext(GlobalState) + const [user] = state.userAPI.user; const [articles] = state.articlesAPI.articles const [detailArticle, setdetailArticle] = useState([]) @@ -34,8 +35,8 @@ const ArticleItem = () => { <>
- - + +
)