Skip to content

Commit 116a674

Browse files
jaskiratsingh2000jaskiratsingh2000
authored
Merge pull request #197 from AuraOfDivinity/194
Fixes #196- Fetching articles from Medium
2 parents e80e99e + e045962 commit 116a674

File tree

6 files changed

+322
-170
lines changed

6 files changed

+322
-170
lines changed

‎src/components/Activities/ActivityCard.css‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
.card.activity {
2+
width: 20rem;
3+
height: 400px;
4+
}
5+
6+
.card.activity:hover {
7+
box-shadow: 5px 10px 20px 1px rgba(0, 0, 0, 0.253);
8+
}
9+
10+
.card.activity.card-body {
11+
padding: 3rem 0;
12+
}
13+
14+
.card.activity.card-text {
15+
font-size: 0.9rem;
16+
padding: 0.4rem 1.9rem;
17+
}
18+
19+
.container.fluid.row {
20+
padding-top: 6rem;
21+
}
22+
23+
.card-img-top.activity {
24+
transform: scale(1);
25+
transition: transform 0.5s ease;
26+
height: 150px;
27+
object-fit: scale-down;
28+
}
29+
30+
.card-img-top.activity:hover {
31+
transform: scale(1.8);
32+
overflow: hidden;
33+
}
34+
35+
.btn.activity {
36+
color: #22247a;
37+
background-color: #fff;
38+
border-color: #22247a;
39+
}
40+
41+
.btn.activity:hover {
42+
color: #fff;
43+
background-color: #22247a;
44+
border-color: #22247a;
45+
}
46+
47+
.card-title.activity {
48+
font-weight: bold;
49+
}

‎src/components/Activities/ActivityCard.js‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1-
import React from 'react'
2-
import { Card } from 'react-bootstrap';
3-
const ActivityCard = (props) => {
4-
return (
5-
<Card style={{ width: '18rem',marginBottom:"2vh",border:"0px" }} className="shadow-lg">
6-
<Card.Img variant="top" src={props.activity.img} />
7-
<Card.Body>
8-
<Card.Title><h3 style={{textTransform: "capitalize"}}>{props.activity.title}</h3></Card.Title>
9-
<Card.Text style={{textTransform: "capitalize"}}>
10-
{props.activity.text}
11-
</Card.Text>
12-
<a href={props.activity.link} class="shadow lift mr-1" style={{color:"#22247A"}}><u>Read More</u></a>
13-
</Card.Body>
14-
</Card>
1+
import React from 'react';
2+
import './ActivityCard.css';
153

16-
)
17-
}
4+
const ActivityCard = props => {
5+
return (
6+
<div className='card text-center activity overflow-hidden'>
7+
<img src={props.activity.img} alt='' className='card-img-top activity' />
188

19-
export default ActivityCard
9+
<div className='card-body text-dark flex-column d-flex'>
10+
<h4 className='card-title activity' style={{ height: '100' }}>
11+
{props.activity.title}
12+
</h4>
13+
<p className='card-text text-secondary'>{props.activity.description}</p>
14+
</div>
15+
</div>
16+
);
17+
};
18+
19+
export default ActivityCard;

‎src/pages/Blogs/BlogList.css‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
.card.activity {
2+
width: 20rem;
3+
height: 400px;
4+
}
5+
6+
.card.activity:hover {
7+
box-shadow: 5px 10px 20px 1px rgba(0, 0, 0, 0.253);
8+
}
9+
10+
.card.activity.card-body {
11+
padding: 3rem 0;
12+
}
13+
14+
.card.activity.card-text {
15+
font-size: 0.9rem;
16+
padding: 0.4rem 1.9rem;
17+
}
18+
19+
.container.fluid.row {
20+
padding-top: 6rem;
21+
}
22+
23+
.card-img-top.activity {
24+
transform: scale(1);
25+
transition: transform 0.5s ease;
26+
height: 150px;
27+
object-fit: scale-down;
28+
}
29+
30+
.card-img-top.activity:hover {
31+
transform: scale(1.8);
32+
overflow: hidden;
33+
}
34+
35+
.btn.activity {
36+
color: #22247a;
37+
background-color: #fff;
38+
border-color: #22247a;
39+
}
40+
41+
.btn.activity:hover {
42+
color: #fff;
43+
background-color: #22247a;
44+
border-color: #22247a;
45+
}
46+
47+
.card-title.activity {
48+
font-weight: bold;
49+
height: 100px;
50+
}
51+
52+
::-webkit-scrollbar {
53+
width: 10px;
54+
}
55+
56+
/* Track */
57+
::-webkit-scrollbar-track {
58+
background: #f1f1f1;
59+
}
60+
61+
/* Handle */
62+
::-webkit-scrollbar-thumb {
63+
background: #3133aa;
64+
}
65+
66+
/* Handle on hover */
67+
::-webkit-scrollbar-thumb:hover {
68+
background: #22247a;
69+
}

‎src/pages/Blogs/BlogList.js‎

Lines changed: 95 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -1,123 +1,108 @@
1-
import React from 'react'
2-
import PropTypes from 'prop-types'
1+
import React from 'react';
2+
import './BlogList.css';
33

4-
export default function BlogList({title,content}) {
5-
return (
6-
<>
7-
<div class="mt-10">
8-
<main class="mt-5 pt-5">
9-
<div class="container">
4+
class BlogList extends React.Component {
5+
constructor(props) {
6+
super(props);
7+
this.state = {
8+
activities: [],
9+
visible: false,
10+
currentActivity: null
11+
};
12+
}
1013

11-
<section class="pt-5">
12-
<div class="wow fadeIn">
13-
<h2 class="h1 text-center mb-5">What is MDB?</h2>
14-
<p class="text-center">MDB is world's most popular Material Design framework for building responsive, mobile-first websites
15-
and apps. </p>
16-
<p class="text-center mb-5 pb-5">Trusted by over
17-
<strong>400 000</strong> developers and designers. Easy to use & customize. 400+ material UI elements, templates
18-
& tutorials.</p>
19-
</div>
20-
<div class="row wow fadeIn">
21-
<div class="col-lg-5 col-xl-4 mb-4">
22-
<div class="view overlay rounded z-depth-1-half">
23-
<div class="view overlay">
24-
<div class="embed-responsive embed-responsive-16by9">
25-
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/cXTThxoywNQ" allowfullscreen></iframe>
26-
</div>
27-
</div>
28-
</div>
29-
</div>
30-
31-
</div>
14+
componentDidMount() {
15+
let activities = [];
16+
fetch('https://medium-article-fetcher.herokuapp.com/posts', {
17+
crossDomain: true,
18+
method: 'GET',
19+
headers: { 'Content-Type': 'application/json' }
20+
})
21+
.then(res => {
22+
return res.json();
23+
})
24+
.then(resData => {
25+
for (let i = 0; i < resData.items.length; i++) {
26+
let obj = {};
27+
obj.title = resData.items[i].title;
28+
obj.link = resData.items[i].link;
29+
let m,
30+
urls = [],
31+
str = resData.items[i].content_encoded,
32+
rex = /<img[^>]+src="?([^"\s]+)"?\s*\/>/g;
3233

33-
<hr class="mb-5"/>
34-
<div class="row mt-3 wow fadeIn">
35-
<div class="col-lg-5 col-xl-4 mb-4">
36-
<div class="view overlay rounded z-depth-1">
37-
<img src="https://mdbootstrap.com/wp-content/uploads/2017/11/brandflow-tutorial-fb.jpg" class="img-fluid" alt=""/>
38-
<a href="/#/blog" target="_blank">
39-
<div class="mask rgba-white-slight"></div>
40-
</a>
41-
</div>
42-
</div>
43-
<div class="col-lg-7 col-xl-7 ml-xl-4 mb-4">
44-
<h3 class="mb-3 font-weight-bold dark-grey-text">
45-
<strong>Bootstrap Automation</strong>
46-
</h3>
47-
<p class="grey-text">Learn how to create a smart website which learns your user and reacts properly to his behavior.</p>
48-
<a href="/#/blog" class="btn btn-primary btn-md">Start tutorial
49-
<i class="fas fa-play ml-2"></i>
50-
</a>
51-
</div>
34+
while ((m = rex.exec(str))) {
35+
urls.push(m[1]);
36+
}
37+
obj.img = urls[0];
5238

53-
</div>
39+
let reg = /<\s*p[^>]*>([^<]*)<\s*\/\s*p\s*>/;
40+
let stream = resData.items[i].content_encoded.match(reg);
5441

55-
<hr class="mb-5"/>
56-
<div class="row wow fadeIn">
57-
<div class="col-lg-5 col-xl-4 mb-4">
58-
<div class="view overlay rounded z-depth-1">
59-
<img src="https://mdbootstrap.com/wp-content/uploads/2018/01/push-fb.jpg" class="img-fluid" alt=""/>
60-
<a href="/#/blog" target="_blank">
61-
<div class="mask rgba-white-slight"></div>
62-
</a>
63-
</div>
64-
</div>
65-
<div class="col-lg-7 col-xl-7 ml-xl-4 mb-4">
66-
<h3 class="mb-3 font-weight-bold dark-grey-text">
67-
<strong>Web Push notifications</strong>
68-
</h3>
69-
<p class="grey-text">Push messaging provides a simple and effective way to re-engage with your users and in this tutorial
70-
you'll learn how to add push notifications to your web app</p>
71-
<a href="/#/blog" target="_blank" class="btn btn-primary btn-md">Start tutorial
72-
<i class="fas fa-play ml-2"></i>
73-
</a>
74-
</div>
42+
obj.description =
43+
stream[1]
44+
.split(' ')
45+
.slice(0, 20)
46+
.join(' ') + '...';
7547

76-
</div>
48+
activities.push(obj);
49+
}
50+
this.setState({ activities: activities });
51+
})
52+
.catch(err => {
53+
console.log(err);
54+
});
55+
}
7756

78-
<hr class="mb-5"/>
79-
<nav class="d-flex justify-content-center wow fadeIn">
80-
<ul class="pagination pg-blue">
81-
<li class="page-item disabled">
82-
<a class="page-link" href="#" aria-label="Previous">
83-
<span aria-hidden="true">&laquo;</span>
84-
<span class="sr-only">Previous</span>
85-
</a>
86-
</li>
57+
render() {
58+
return (
59+
<div className='mt-10'>
60+
<main className='mt-5 pt-5'>
61+
<div className='container'>
62+
<section className='pt-5'>
63+
<div className='container-fluid d-flex space-between'>
64+
<div className='row'>
65+
{this.state.activities.map((currentActivity, index) => {
66+
return (
67+
<div
68+
className='col-lg-4 col-md-6 col-sm-12'
69+
style={{ marginBottom: '20px' }}
70+
>
71+
<div className='card text-center activity overflow-hidden'>
72+
<img
73+
src={currentActivity.img}
74+
alt=''
75+
className='card-img-top activity'
76+
/>
8777

88-
<li class="page-item active">
89-
<a class="page-link" href="#">1
90-
<span class="sr-only">(current)</span>
91-
</a>
92-
</li>
93-
<li class="page-item">
94-
<a class="page-link" href="#">2</a>
95-
</li>
96-
<li class="page-item">
97-
<a class="page-link" href="#">3</a>
98-
</li>
99-
<li class="page-item">
100-
<a class="page-link" href="#">4</a>
101-
</li>
102-
<li class="page-item">
103-
<a class="page-link" href="#">5</a>
104-
</li>
78+
<div className='card-body text-dark flex-column d-flex'>
79+
<h4 className='card-title activity'>
80+
{currentActivity.title}
81+
</h4>
82+
<p className='card-text text-secondary'>
83+
{currentActivity.description}
84+
</p>
10585

106-
<li class="page-item">
107-
<a class="page-link" href="#" aria-label="Next">
108-
<span aria-hidden="true">&raquo;</span>
109-
<span class="sr-only">Next</span>
86+
<a
87+
href={currentActivity.link}
88+
className='activity btn btn-outline-primary mt-auto btn-block align-self-end'
89+
style={{ marginTop: 'auto' }}
90+
>
91+
Read More
11092
</a>
111-
</li>
112-
</ul>
113-
</nav>
114-
93+
</div>
94+
</div>
95+
</div>
96+
);
97+
})}
98+
</div>
99+
</div>
115100
</section>
116-
117-
</div>
118-
</main>
119-
</div>
120-
</>
121-
);
101+
</div>
102+
</main>
103+
</div>
104+
);
105+
}
122106
}
123107

108+
export default BlogList;

‎src/pages/Home/Components/Activities.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.btn.activity {
2+
color: #22247a;
3+
background-color: #fff;
4+
border-color: #22247a;
5+
}
6+
7+
.btn.activity:hover {
8+
color: #fff;
9+
background-color: #22247a;
10+
border-color: #22247a;
11+
}

0 commit comments

Comments
 (0)