Fixes #196- Fetching articles from Medium

src/components/Activities/ActivityCard.css

@@ -0,0 +1,49 @@
+.card.activity {
+  width: 20rem;
+  height: 400px;
+}
+
+.card.activity:hover {
+  box-shadow: 5px 10px 20px 1px rgba(0, 0, 0, 0.253);
+}
+
+.card.activity.card-body {
+  padding: 3rem 0;
+}
+
+.card.activity.card-text {
+  font-size: 0.9rem;
+  padding: 0.4rem 1.9rem;
+}
+
+.container.fluid.row {
+  padding-top: 6rem;
+}
+
+.card-img-top.activity {
+  transform: scale(1);
+  transition: transform 0.5s ease;
+  height: 150px;
+  object-fit: scale-down;
+}
+
+.card-img-top.activity:hover {
+  transform: scale(1.8);
+  overflow: hidden;
+}
+
+.btn.activity {
+  color: #22247a;
+  background-color: #fff;
+  border-color: #22247a;
+}
+
+.btn.activity:hover {
+  color: #fff;
+  background-color: #22247a;
+  border-color: #22247a;
+}
+
+.card-title.activity {
+  font-weight: bold;
+}

src/components/Activities/ActivityCard.js

@@ -1,19 +1,27 @@
-import React from 'react'
-import { Card } from 'react-bootstrap';
-const ActivityCard = (props) => {
-    return (
-        <Card style={{ width: '18rem',marginBottom:"2vh",border:"0px" }} className="shadow-lg">
-			<Card.Img variant="top" src={props.activity.img} />
-			<Card.Body>
-                <Card.Title><h3 style={{textTransform: "capitalize"}}>{props.activity.title}</h3></Card.Title>
-				<Card.Text style={{textTransform: "capitalize"}}>
-					{props.activity.text}
-				</Card.Text>
-				<a href={props.activity.link} class="shadow lift mr-1" style={{color:"#22247A"}}><u>Read More</u></a>
-			</Card.Body>
-		</Card>
+import React from "react";
+import "./ActivityCard.css";
 
-    )
-}
+const ActivityCard = props => {
+  return (
+    <div className="card text-center activity overflow-hidden">
+      <img src={props.activity.img} alt="" className="card-img-top activity" />
 
-export default ActivityCard
+      <div className="card-body text-dark flex-column d-flex">
+        <h4 className="card-title activity" style={{ height: "200px" }}>
+          {props.activity.title}
+        </h4>
+        <p className="card-text text-secondary">{props.activity.description}</p>
+
+        <a
+          href={props.activity.link}
+          className="activity btn btn-outline-primary mt-auto btn-block align-self-end"
+          style={{ marginTop: "auto" }}
+        >
+          Read More
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default ActivityCard;

src/pages/Home/Components/Activities.js

@@ -1,49 +1,78 @@
-import React from 'react'
-import ActivityCard from '../../../components/Activities/ActivityCard'
-import KWoC from '../images/kwoc_logo.png'
-import workshop19 from '../images/workshop.jpg'
-import './common.css'
-var activities = [
-    {
-        img:'https://1.bp.blogspot.com/-Ig-v1tDXZt4/XDODmZvWp1I/AAAAAAAAB0A/KtbFdBPFVQw2O15FekkIR0Yg8MUp--rngCLcBGAs/s1600/GCI%2B-%2BVertical%2B-%2BGray%2BText%2B-%2BWhite%2BBG.png',
-        title:'Google CodeIN 2019-20',
-        text:'Competition for preschool.',
-        link:'/#/gci19'
-    },
-    {
-        img:'https://cdn.shortpixel.ai/spai/q_lossy+ret_img/https://numfocus.org/wp-content/uploads/2017/03/vertical-gsoc-logo_1-1.jpg',
-        title:'Google Summer of Code 2019',
-        text:'Competition for undergraduate students.',
-        link:'/#/gsoc19'
-    },
-    {
-        img:KWoC,
-        title:'Kharagpur Winter of Code 2019',
-        text:'Competition for undergraduate students.',
-        link:'/#/kwoc19'
-    },
-    {
-        img:workshop19,
-        title:'Organized a Workshop/ Event At New Delhi Together With Women Who Code',
-        text:'Competition for undergraduate students.',
-        link:'/#/workshop19'
-    },
-]
+import React from "react";
+import ActivityCard from "../../../components/Activities/ActivityCard";
+import "./common.css";
 
-const MapActivites = activities.map((activity,index)=>{return <ActivityCard key={index} activity={activity}/> })
+class Activities extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      activities: []
+    };
+  }
 
+  componentDidMount() {
+    let activities = [];
+    fetch("https://medium-article-fetcher.herokuapp.com/posts", {
+      crossDomain: true,
+      method: "GET",
+      headers: { "Content-Type": "application/json" }
+    })
+      .then(res => {
+        return res.json();
+      })
+      .then(resData => {
+        console.log(resData);
+        for (let i = 0; i < 3; i++) {
+          let obj = {};
+          obj.title = resData.items[i].title;
+          obj.link = resData.items[i].link;
+          let m,
+            urls = [],
+            str = resData.items[i].content_encoded,
+            rex = /<img[^>]+src="?([^"\s]+)"?\s*\/>/g;
 
-const Activities = () => {
+          while ((m = rex.exec(str))) {
+            urls.push(m[1]);
+          }
+          obj.img = urls[0];
+
+          let reg = /<\s*p[^>]*>([^<]*)<\s*\/\s*p\s*>/;
+          let stream = resData.items[i].content_encoded.match(reg);
+
+          obj.description =
+            stream[1]
+              .split(" ")
+              .slice(0, 20)
+              .join(" ") + "...";
+
+          activities.push(obj);
+        }
+        this.setState({ activities: activities }, () => {
+          console.log(this.state.activities);
+        });
+      })
+      .catch(err => {
+        console.log(err);
+      });
+  }
+  render() {
     return (
-        <div id="activity">
-				<h1 className="component-heading">Activities</h1>
-				<div class="container">
-				<div class="row"style={{display:"flex",justifyContent:"space-around"}}>
-                    {MapActivites}
-				</div>
-			</div>
-		</div>	
-    )
+      <div id="activity">
+        <h1 className="component-heading">Activities</h1>
+        <div className="container-fluid d-flex justify-content-center">
+          <div className="row">
+            {this.state.activities.map((currentActivity, index) => {
+              return (
+                <div className="col-md-4">
+                  <ActivityCard key={index} activity={currentActivity} />
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    );
+  }
 }
 
-export default Activities
+export default Activities;