Fixes #192- Fetching articles from Medium

Author: AuraOfDivinity

src/components/Activities/ActivityCard.js

@@ -1,19 +1,48 @@
-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 { Card } from "react-bootstrap";
+const ActivityCard = props => {
+  return (
+    <div>
+      <Card
+        style={{
+          width: "65em",
+          marginBottom: "2vh",
+          border: "1px solid #d4d0cf"
+        }}
+        className="shadow-lg"
+      >
+        <Card.Img
+          variant="top"
+          src={props.activity.img}
+          style={{ height: "175px", objectFit: "cover" }}
+        />
+        <Card.Body>
+          <Card.Title>
+            <div style={{ width: "300px", margin: "0 auto" }}>
+              <h3
+                style={{
+                  textTransform: "capitalize",
+                  overflowWrap: "break-word"
+                }}
+              >
+                {props.activity.title}
+              </h3>
+            </div>
+          </Card.Title>
+          <Card.Text style={{ textTransform: "capitalize" }}>
+            {props.activity.text}
+          </Card.Text>
+          <a
+            href={props.activity.link}
+            class="btn btn-sm btn-primary"
+            style={{ backgroundColor: "#22247A" }}
+          >
+            Read More
+          </a>
+        </Card.Body>
+      </Card>
+    </div>
+  );
+};
 
-    )
-}
-
-export default ActivityCard
+export default ActivityCard;

src/pages/Home/Components/Activities.js

@@ -1,49 +1,72 @@
-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, { Component } from "react";
+import ActivityCard from "../../../components/Activities/ActivityCard";
+import KWoC from "../images/kwoc_logo.png";
+import workshop19 from "../images/workshop.jpg";
+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 => {
+        for (let i = 0; i < 4; i++) {
+          let obj = {};
+          obj.title = resData.items[i].title;
+          obj.link = resData.items[i].link;
 
-const Activities = () => {
+          let m,
+            urls = [],
+            str = resData.items[i].content_encoded,
+            rex = /<img[^>]+src="?([^"\s]+)"?\s*\/>/g;
+
+          while ((m = rex.exec(str))) {
+            urls.push(m[1]);
+          }
+          obj.img = urls[0];
+          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 class="container">
+          <div
+            class="row"
+            style={{
+              display: "flex",
+              justifyContent: "space-around"
+            }}
+          >
+            {this.state.activities.map((currentActivity, index) => {
+              return <ActivityCard key={index} activity={currentActivity} />;
+            })}
+          </div>
+        </div>
+      </div>
+    );
+  }
 }
 
-export default Activities
+export default Activities;