Skip to content

Commit

Permalink
fix(*): added live data for blog
Browse files Browse the repository at this point in the history
  • Loading branch information
@HoseaCodes
HoseaCodes committed Mar 24, 2022
1 parent 778f438 commit 6648ab7
Show file tree
Hide file tree
Showing 4 changed files with 70 additions and 86 deletions.
8 changes: 5 additions & 3 deletions src/Components/Article/MainContainer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<StyledMainContainer>
Expand All @@ -30,10 +32,10 @@ const MainContainer = (props) => {
</AlertP>
</Alert>
<JustifyContent AlignCenter>
<CircleImage src={"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT0k6I8WItSjK0JTttL3FwACOA6yugI29xvLw&usqp=CAU"}
<CircleImage src={user.avatar || "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT0k6I8WItSjK0JTttL3FwACOA6yugI29xvLw&usqp=CAU"}
alt="author" />
<div>
<NamePlate>Will Smith</NamePlate>
<NamePlate>{user.name || "Will Smith"}</NamePlate>
<WarppedDate>
<GrayText>{timeFormater}</GrayText>
<span>&nbsp;&#183;&nbsp;</span>
Expand Down Expand Up @@ -66,7 +68,7 @@ const MainContainer = (props) => {
</BlogCard>
</section>
</PaddingContent>
<RelatedPosts timeFormater={timeFormater} readTime={readTime}/>
<RelatedPosts user={user} articles={props.articles} timeFormater={timeFormater} readTime={readTime}/>
</StyledMainContainer>
)
}
Expand Down
88 changes: 35 additions & 53 deletions src/Components/Article/RelatedPosts.jsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 (
<MarginTop Whitesmoke>
<BlogCard RelatedPost>
<AlignContent>
<CircleImage Secondary src={"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT0k6I8WItSjK0JTttL3FwACOA6yugI29xvLw&usqp=CAU"}
alt="author"/>
<NamePlate>Will Smith</NamePlate>
<span>&nbsp;&#183;&nbsp;</span>
<GrayDiv>{timeFormater}</GrayDiv>
</AlignContent>
<AlignContent>
<div>
<h4> No Code Approach — Process Speech and convert to Text — Logic Apps</h4>
<p> 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={'100px'} width={'150px'} src={"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/>
<SideUserContainer Main>
<AlignContent>
<CircleImage Secondary src={"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT0k6I8WItSjK0JTttL3FwACOA6yugI29xvLw&usqp=CAU"}
alt="author" />
<NamePlate>Will Smith</NamePlate>
<span>&nbsp;&#183;&nbsp;</span>
<GrayDiv>{timeFormater}</GrayDiv>
</AlignContent>
<AlignContent>
<div>
<h4> No Code Approach — Process Speech and convert to Text — Logic Apps</h4>
<p> 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={'100px'} width={'150px'} src={"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>
</SideUserContainer>
<ArticleMainHr/>
{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>
<div style={{marginRight: '1rem'}}>
<h4>{articles.title || "No Code Approach — Process Speech and convert to Text — Logic Apps"}</h4>
<p style={{width: '80%'}}> {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..."}
</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>Read more from me</ReadMore>
</AlignContent>
Expand Down
55 changes: 27 additions & 28 deletions src/Components/Article/RightColumn.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<StyledRightContainer>
<AlignContent Center>
Expand All @@ -21,9 +26,11 @@ const RightColumn = () => {
<ArticleInput Search placeholder='Search' type="text"/>
</MarginTop >
<SideUserContainer Primary>
<CircleImage Secondary src={"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT0k6I8WItSjK0JTttL3FwACOA6yugI29xvLw&usqp=CAU"}
{/* <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>Will Smith</UserInfo>
<UserInfo Padding4>{user.name || "Will Smith"}</UserInfo>
<UserInfo GrayWPadding>119 Followers</UserInfo>
<UserInfo GrayWPadding>
Software Engineer | Python Programmer | Java Programmer | Tech Enthusiast | JavaScript Programmer | React Lover | Mobile Developer
Expand All @@ -35,30 +42,22 @@ const RightColumn = () => {
</SideUserContainer>
<SideUserContainer Primary>
<PostText>Related</PostText>
<PostContainer>
<SquareImage src={"https://okteto.com/static/ac268f62ae1c1edd1802a3b841bf2c5a/cover.png"}
alt="post" />
<SideUserContainer>
<h5>FastAPI: Complete API Development</h5>
<Subtitle Primary> FastAPI: Complete API Development</Subtitle>
</SideUserContainer>
</PostContainer>
<PostContainer Secondary>
<SquareImage src={"https://makeameme.org/media/templates/250/dr_evil_austin_powers.jpg"}
alt="post" />
<SideUserContainer>
<NoMargin>Handling MongoDb ObjectId in Python FastAPI</NoMargin>
<Subtitle Primary> Keep it simlpe but significant</Subtitle>
</SideUserContainer>
</PostContainer>
<PostContainer Secondary>
<SquareImage src={"https://miro.medium.com/max/1200/1*OdqgwkO9B5A29LP9Vb9rHQ.png"}
alt="post" />
<SideUserContainer>
<NoMargin>Pydantic — Better Data Validation for Python</NoMargin>
<Subtitle Primary> “Data validation and settings management using Python type hinting."</Subtitle>
</SideUserContainer>
</PostContainer>
{recentPosts.map(article => {
return (
<div key={article.id}>
<PostContainer>
<SquareImage src={article.images.url} alt="post" />
<SideUserContainer>
<Link to={`/blog/${article.id}`} rel="noopener noreferrer">
<h5>{article.title}</h5>
</Link>
<Subtitle Primary> {article.subtitle}</Subtitle>
</SideUserContainer>
</PostContainer>
<br/>
</div>
)
})}
</SideUserContainer>
<PageLinks >
<ArticleLink href='#' >Help</ArticleLink>
Expand Down
5 changes: 3 additions & 2 deletions src/Pages/Articles/Article/Article.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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([])

Expand All @@ -34,8 +35,8 @@ const ArticleItem = () => {
<>
<main className="blog-content">
<SideBar/>
<MainContainer timeFormater={timeFormater} readTime={readTime} detailArticle={detailArticle} />
<RightColumn/>
<MainContainer user={user} articles={articles} timeFormater={timeFormater} readTime={readTime} detailArticle={detailArticle} />
<RightColumn user={user} articles={articles}/>
</main>
</>
)
Expand Down

0 comments on commit 6648ab7

Please sign in to comment.