Skip to content
This repository was archived by the owner on Mar 7, 2024. It is now read-only.

Commit 507b58e

Browse files
Abhishek-kumar09Abhishek-kumar09
authored
Automate Blog page to fetch all the data from axios and render medium Articles (#141)
* Automate Blog page to fetch all the data from axios and render medium articles * Add Author to Blog Reader View"
1 parent 0652490 commit 507b58e

File tree

12 files changed

+433
-127
lines changed

12 files changed

+433
-127
lines changed

‎public/index.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
@media only screen and (min-width: 800px) {
2+
:root {
3+
scrollbar-color: #000000 white !important;
4+
scrollbar-width: thin !important;
5+
}
6+
::-webkit-scrollbar {
7+
width: 10px;
8+
background-color: #e2e2e2;
9+
}
10+
::-webkit-scrollbar-thumb {
11+
border-radius: 10px;
12+
background-color: #000000;
13+
animation: animate 6s linear infinite;
14+
}
15+
}

‎src/Routes.js‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -97,12 +97,15 @@ const renderRoutes = () => (
9797
)}
9898
/>
9999
<Route
100-
path="/blog"
100+
path="/blog/:id"
101101
exact
102102
render={props => (
103-
<MainLayout>
104-
<Blog {...props} />
105-
</MainLayout>
103+
<>
104+
<ScrollReset />
105+
<MainLayout>
106+
<Blog {...props} />
107+
</MainLayout>
108+
</>
106109
)}
107110
/>
108111

‎src/data/blogAuthors.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
// mentors data----------------
2+
3+
export const authors = {
4+
'Anuj Garg': {
5+
uname: 'KeenWarrior',
6+
avatar: '/static/images/members/anuj.png'
7+
},
8+
'Gaurav Beriwal': {
9+
uname: 'gauravberiwal',
10+
avatar: '/static/images/members/gaurav.png'
11+
},
12+
'Kunal Kushwaha': {
13+
uname: 'kunalkushwaha453',
14+
avatar: '/static/images/members/kunal.png'
15+
},
16+
'Ganga Chaturvedi': {
17+
uname: 'GangaChatrvedi',
18+
avatar: '/static/images/members/ganga.png'
19+
},
20+
'Ekta Mishra': {
21+
uname: 'darecoder',
22+
avatar: '/static/images/members/ekta.png'
23+
},
24+
Bharatbbhardwaj: {
25+
uname: 'bharatbhardwaj_57213',
26+
avatar: '/static/images/members/bharat.png'
27+
},
28+
Harsh: {
29+
uname: 'geemax.harsh',
30+
avatar: 'https://cdn-images-1.medium.com/max/200/0*wko7FINtLTDyVx3S.jpg'
31+
},
32+
'Satyam Mishra': {
33+
avatar:
34+
'https://cdn-images-1.medium.com/max/200/1*hRE9ZdtTFbCVW4Qdq0TtRA.png',
35+
uname: 'satyum'
36+
},
37+
'Abhishek Kumar': {
38+
uname: 'abhimait1909',
39+
avatar:
40+
'https://cdn-images-1.medium.com/max/200/1*z6MBz6R7qJIAaRwfeAHFQw.jpeg'
41+
}
42+
};
43+
44+
export default authors;

‎src/views/pages/BlogsView/Blog/BLogContent.js‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ const useStyles = makeStyles(theme => ({
3737
}
3838
}));
3939

40-
export default function Blogs() {
40+
export default function Blogs({ id }) {
4141
const classes = useStyles();
4242
const isMountedRef = useIsMountedRef();
4343
const [blog, setBlog] = useState(null);
@@ -61,14 +61,23 @@ export default function Blogs() {
6161
getEvents();
6262
}, [getEvents]);
6363

64-
if (blog === null) {
65-
return null;
64+
if (blog === null || blog[id] === undefined) {
65+
return (
66+
<div style={{ height: '50vh', width: '100vw' }}>
67+
<Typography
68+
align="center"
69+
style={{ margin: 'auto', fontWeight: 800, fontSize: '2.25rem' }}
70+
>
71+
Loading
72+
</Typography>
73+
</div>
74+
);
6675
}
6776

6877
return (
6978
<div>
7079
<div className={classes.blogText}>
71-
<Blog rawHtml={blog[7]} />
80+
<Blog rawHtml={blog[id]} />
7281
</div>
7382
<div className={classes.remaining}>
7483
<Typography className={classes.extraPadding} variant="h2">
@@ -85,6 +94,7 @@ export default function Blogs() {
8594
author={item.author}
8695
link={item.link}
8796
thumbnail={item.thumbnail}
97+
category={item.categories[0]}
8898
/>
8999
);
90100
})}

‎src/views/pages/BlogsView/Blog/Blog.js‎

Lines changed: 93 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
1-
import { makeStyles, Paper, Typography } from '@material-ui/core';
1+
import {
2+
Avatar,
3+
Box,
4+
Grid,
5+
makeStyles,
6+
Paper,
7+
Typography
8+
} from '@material-ui/core';
29
import React from 'react';
10+
import blogAuthors from '../../../../data/blogAuthors';
311

412
const useStyles = makeStyles(theme => ({
513
root: {
@@ -60,6 +68,21 @@ const useStyles = makeStyles(theme => ({
6068
},
6169
extraPadding: {
6270
padding: '20px 0px'
71+
},
72+
author: {
73+
marginBottom: 0,
74+
[theme.breakpoints.down('md')]: {
75+
margin: '20px 0px'
76+
}
77+
},
78+
avatarLarge: {
79+
width: '62px',
80+
height: '62px',
81+
margin: '12px 0px',
82+
marginRight: theme.spacing(2),
83+
'& img': {
84+
width: '100%'
85+
}
6386
}
6487
}));
6588

@@ -72,7 +95,7 @@ export default function Blog({ rawHtml }) {
7295
variant="h6"
7396
color="secondary"
7497
>
75-
Experience
98+
{rawHtml.categories[0]}
7699
</Typography>
77100
<Typography className={classes.extraBottompadding} variant="h3">
78101
{rawHtml.title}
@@ -83,6 +106,74 @@ export default function Blog({ rawHtml }) {
83106
>
84107
{rawHtml.pubDate.split(' ')[0].replaceAll('-', ' ')} | 7 min Read
85108
</Typography>
109+
<Grid container justify="space-between" alignItems="center">
110+
<Grid
111+
item
112+
className={classes.author}
113+
justify="flex-end"
114+
alignContent="flex-end"
115+
alignItems="flex-end"
116+
>
117+
<Box display="flex" alignItems="center">
118+
<Avatar
119+
className={classes.avatarLarge}
120+
alt=""
121+
width="20px"
122+
src={blogAuthors[rawHtml.author].avatar}
123+
/>
124+
<Box display="flex" flexDirection="column">
125+
<Box fontWeight="fontWeightBold">
126+
<Typography variant="h6">{rawHtml.author}</Typography>
127+
<Typography variant="caption">Learner</Typography>
128+
</Box>
129+
</Box>
130+
</Box>
131+
</Grid>
132+
<Grid>
133+
<Grid row container alignItems="center">
134+
<Typography
135+
display="inline"
136+
variant="caption"
137+
style={{ fontSize: '14px' }}
138+
>
139+
Share this Article
140+
</Typography>
141+
<Grid>
142+
<Grid container style={{ marginLeft: '12px' }}>
143+
<Grid>
144+
<img
145+
alt=""
146+
src="/static/images/icons/social/fb.svg"
147+
style={{ height: '34px', display: 'inline' }}
148+
/>
149+
</Grid>
150+
<Grid>
151+
<img
152+
alt=""
153+
src="/static/images/icons/social/ins.svg"
154+
style={{ height: '34px', display: 'inline' }}
155+
/>
156+
</Grid>
157+
<Grid>
158+
<img
159+
alt=""
160+
src="/static/images/icons/social/tw.svg"
161+
style={{ height: '34px', display: 'inline' }}
162+
/>
163+
</Grid>
164+
<Grid>
165+
<img
166+
alt=""
167+
src="/static/images/icons/social/yt.svg"
168+
style={{ height: '34px', display: 'inline' }}
169+
/>
170+
</Grid>
171+
</Grid>
172+
</Grid>
173+
</Grid>
174+
</Grid>
175+
</Grid>
176+
86177
<div
87178
dangerouslySetInnerHTML={{
88179
__html: rawHtml.description.replace(/\n/g, '<br />')

‎src/views/pages/BlogsView/Blog/BlogCard.js‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { Box, Grid, makeStyles, Paper, Typography } from '@material-ui/core';
22
import React from 'react';
3-
import { Link } from 'react-router-dom';
43

54
const useStyles = makeStyles(theme => ({
65
root: {
@@ -24,18 +23,18 @@ const useStyles = makeStyles(theme => ({
2423
}
2524
}));
2625

27-
export default function BlogCard({ title, link, author, thumbnail }) {
26+
export default function BlogCard({ title, link, author, thumbnail, category }) {
2827
const classes = useStyles();
2928

3029
return (
31-
<Link to={link} className={classes.link}>
30+
<a href={link} className={classes.link}>
3231
<Paper elevation={3} className={classes.root}>
3332
<Typography
3433
className={classes.extraPadding}
3534
variant="h6"
3635
color="secondary"
3736
>
38-
Experience
37+
{category}
3938
</Typography>
4039
<Grid container style={{ flex: '1 1 auto' }}>
4140
<Grid item xs={7} md={9}>
@@ -56,6 +55,6 @@ export default function BlogCard({ title, link, author, thumbnail }) {
5655
</Grid>
5756
</Grid>
5857
</Paper>
59-
</Link>
58+
</a>
6059
);
6160
}

‎src/views/pages/BlogsView/Blog/index.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,11 @@ import PublishBlog from '../PublishBlog';
55
import BlogContent from './BLogContent';
66
import Hero from './Hero';
77

8-
export default function Blog() {
8+
export default function Blog({ id, ...props }) {
99
return (
1010
<Page title="Blog">
11-
{/* <BlogCard /><BlogCard /><BlogCard /> */}
1211
<Hero />
13-
<BlogContent />
12+
<BlogContent id={props.match.params.id} />
1413
<PublishBlog />
1514
<Footer />
1615
</Page>

0 commit comments

Comments
 (0)