From 49e9012449c52e7cfdecbf313be34303f11d1246 Mon Sep 17 00:00:00 2001
From: Auraofdivinity <peirisasel373@gmail.com>
Date: Wed, 19 Feb 2020 11:49:00 +0530
Subject: [PATCH 1/4] Fixes #192- Fetching articles from Medium

---
 src/components/Activities/ActivityCard.js |  65 +++++++++----
 src/pages/Home/Components/Activities.js   | 109 +++++++++++++---------
 2 files changed, 113 insertions(+), 61 deletions(-)

diff --git a/src/components/Activities/ActivityCard.js b/src/components/Activities/ActivityCard.js
index ffe4eb5..0fb0d23 100644
--- a/src/components/Activities/ActivityCard.js
+++ b/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
\ No newline at end of file
+export default ActivityCard;
diff --git a/src/pages/Home/Components/Activities.js b/src/pages/Home/Components/Activities.js
index 91bea22..f901aa0 100644
--- a/src/pages/Home/Components/Activities.js
+++ b/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
\ No newline at end of file
+export default Activities;

From a616a0c165eaffa0ec52b0afe0fb16131c299df7 Mon Sep 17 00:00:00 2001
From: Auraofdivinity <peirisasel373@gmail.com>
Date: Thu, 20 Feb 2020 02:02:26 +0530
Subject: [PATCH 2/4] Requested changes

---
 src/components/Activities/ActivityCard.css | 49 ++++++++++++++++++
 src/components/Activities/ActivityCard.js  | 59 +++++++---------------
 src/pages/Home/Components/Activities.js    | 34 ++++++++-----
 3 files changed, 88 insertions(+), 54 deletions(-)
 create mode 100644 src/components/Activities/ActivityCard.css

diff --git a/src/components/Activities/ActivityCard.css b/src/components/Activities/ActivityCard.css
new file mode 100644
index 0000000..6dc3f13
--- /dev/null
+++ b/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;
+}
diff --git a/src/components/Activities/ActivityCard.js b/src/components/Activities/ActivityCard.js
index 0fb0d23..aeb47db 100644
--- a/src/components/Activities/ActivityCard.js
+++ b/src/components/Activities/ActivityCard.js
@@ -1,46 +1,25 @@
 import React from "react";
-import { Card } from "react-bootstrap";
+import "./ActivityCard.css";
+
 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 className="card text-center activity overflow-hidden">
+      <img src={props.activity.img} alt="" className="card-img-top activity" />
+
+      <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>
   );
 };
diff --git a/src/pages/Home/Components/Activities.js b/src/pages/Home/Components/Activities.js
index f901aa0..930d59f 100644
--- a/src/pages/Home/Components/Activities.js
+++ b/src/pages/Home/Components/Activities.js
@@ -1,7 +1,5 @@
-import React, { Component } from "react";
+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";
 
 class Activities extends React.Component {
@@ -23,11 +21,11 @@ class Activities extends React.Component {
         return res.json();
       })
       .then(resData => {
-        for (let i = 0; i < 4; i++) {
+        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,
@@ -37,6 +35,16 @@ class Activities extends React.Component {
             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 }, () => {
@@ -51,16 +59,14 @@ class Activities extends React.Component {
     return (
       <div id="activity">
         <h1 className="component-heading">Activities</h1>
-        <div class="container">
-          <div
-            class="row"
-            style={{
-              display: "flex",
-              justifyContent: "space-around"
-            }}
-          >
+        <div className="container-fluid d-flex justify-content-center">
+          <div className="row">
             {this.state.activities.map((currentActivity, index) => {
-              return <ActivityCard key={index} activity={currentActivity} />;
+              return (
+                <div className="col-md-4">
+                  <ActivityCard key={index} activity={currentActivity} />
+                </div>
+              );
             })}
           </div>
         </div>

From dd40b82b204defe2248192640be1cf65d1092a42 Mon Sep 17 00:00:00 2001
From: Auraofdivinity <peirisasel373@gmail.com>
Date: Sun, 23 Feb 2020 02:26:24 +0530
Subject: [PATCH 3/4] Requested Changes

---
 package.json                              |   1 +
 src/components/Activities/ActivityCard.js |  22 +-
 src/pages/Blogs/BlogList.css              |  69 ++++++
 src/pages/Blogs/BlogList.js               | 276 +++++++++++++---------
 src/pages/Home/Components/Activities.css  |  11 +
 src/pages/Home/Components/Activities.js   |  47 ++--
 6 files changed, 284 insertions(+), 142 deletions(-)
 create mode 100644 src/pages/Blogs/BlogList.css
 create mode 100644 src/pages/Home/Components/Activities.css

diff --git a/package.json b/package.json
index 651dfea..5ecc169 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "markdown-it-task-lists": "^2.1.1",
     "marked": "^0.8.0",
     "react": "^16.12.0",
+    "react-awesome-modal": "^2.0.5",
     "react-bootstrap": "^1.0.0-beta.16",
     "react-dom": "^16.12.0",
     "react-markdown": "^4.3.1",
diff --git a/src/components/Activities/ActivityCard.js b/src/components/Activities/ActivityCard.js
index aeb47db..fd268a3 100644
--- a/src/components/Activities/ActivityCard.js
+++ b/src/components/Activities/ActivityCard.js
@@ -1,24 +1,16 @@
-import React from "react";
-import "./ActivityCard.css";
+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" />
+    <div className='card text-center activity overflow-hidden'>
+      <img src={props.activity.img} alt='' className='card-img-top activity' />
 
-      <div className="card-body text-dark flex-column d-flex">
-        <h4 className="card-title activity" style={{ height: "200px" }}>
+      <div className='card-body text-dark flex-column d-flex'>
+        <h4 className='card-title activity' style={{ height: '100' }}>
           {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>
+        <p className='card-text text-secondary'>{props.activity.description}</p>
       </div>
     </div>
   );
diff --git a/src/pages/Blogs/BlogList.css b/src/pages/Blogs/BlogList.css
new file mode 100644
index 0000000..b4c292b
--- /dev/null
+++ b/src/pages/Blogs/BlogList.css
@@ -0,0 +1,69 @@
+.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;
+  height: 100px;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: #3133aa;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #22247a;
+}
diff --git a/src/pages/Blogs/BlogList.js b/src/pages/Blogs/BlogList.js
index 7e6fa33..9c34010 100644
--- a/src/pages/Blogs/BlogList.js
+++ b/src/pages/Blogs/BlogList.js
@@ -1,123 +1,183 @@
-import React from 'react'
-import PropTypes from 'prop-types'
+import React from 'react';
+import './BlogList.css';
+import Modal from 'react-awesome-modal';
 
-export default function BlogList({title,content}) {
-  return (
-    <>
-        <div class="mt-10">
-        <main class="mt-5 pt-5">
-        <div class="container">
+class BlogList extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      activities: [],
+      visible: false,
+      currentActivity: null
+    };
+  }
 
-            <section class="pt-5">
-                <div class="wow fadeIn">
-                    <h2 class="h1 text-center mb-5">What is MDB?</h2>
-                    <p class="text-center">MDB is world's most popular Material Design framework for building responsive, mobile-first websites
-                        and apps. </p>
-                    <p class="text-center mb-5 pb-5">Trusted by over
-                        <strong>400 000</strong> developers and designers. Easy to use & customize. 400+ material UI elements, templates
-                        & tutorials.</p>
-                </div>
-                <div class="row wow fadeIn">
-                    <div class="col-lg-5 col-xl-4 mb-4">
-                        <div class="view overlay rounded z-depth-1-half">
-                            <div class="view overlay">
-                                <div class="embed-responsive embed-responsive-16by9">
-                                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/cXTThxoywNQ" allowfullscreen></iframe>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+  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 < resData.items.length; 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;
 
-                </div>
+          while ((m = rex.exec(str))) {
+            urls.push(m[1]);
+          }
+          obj.img = urls[0];
 
-                <hr class="mb-5"/>
-                <div class="row mt-3 wow fadeIn">
-                    <div class="col-lg-5 col-xl-4 mb-4">
-                        <div class="view overlay rounded z-depth-1">
-                            <img src="https://mdbootstrap.com/wp-content/uploads/2017/11/brandflow-tutorial-fb.jpg" class="img-fluid" alt=""/>
-                            <a href="/#/blog" target="_blank">
-                                <div class="mask rgba-white-slight"></div>
-                            </a>
-                        </div>
-                    </div>
-                    <div class="col-lg-7 col-xl-7 ml-xl-4 mb-4">
-                        <h3 class="mb-3 font-weight-bold dark-grey-text">
-                            <strong>Bootstrap Automation</strong>
-                        </h3>
-                        <p class="grey-text">Learn how to create a smart website which learns your user and reacts properly to his behavior.</p>
-                        <a href="/#/blog" class="btn btn-primary btn-md">Start tutorial
-                            <i class="fas fa-play ml-2"></i>
-                        </a>
-                    </div>
+          let reg = /<\s*p[^>]*>([^<]*)<\s*\/\s*p\s*>/;
+          let stream = resData.items[i].content_encoded.match(reg);
 
-                </div>
+          let div = document.createElement('div');
+          div.innerHTML = resData.items[i].content_encoded;
 
-                <hr class="mb-5"/>
-                <div class="row wow fadeIn">
-                    <div class="col-lg-5 col-xl-4 mb-4">
-                        <div class="view overlay rounded z-depth-1">
-                            <img src="https://mdbootstrap.com/wp-content/uploads/2018/01/push-fb.jpg" class="img-fluid" alt=""/>
-                            <a href="/#/blog" target="_blank">
-                                <div class="mask rgba-white-slight"></div>
-                            </a>
-                        </div>
-                    </div>
-                    <div class="col-lg-7 col-xl-7 ml-xl-4 mb-4">
-                        <h3 class="mb-3 font-weight-bold dark-grey-text">
-                            <strong>Web Push notifications</strong>
-                        </h3>
-                        <p class="grey-text">Push messaging provides a simple and effective way to re-engage with your users and in this tutorial
-                            you'll learn how to add push notifications to your web app</p>
-                        <a href="/#/blog" target="_blank" class="btn btn-primary btn-md">Start tutorial
-                            <i class="fas fa-play ml-2"></i>
-                        </a>
-                    </div>
+          obj.longDescription = div.textContent || div.innerText || '';
 
-                </div>
+          obj.description =
+            stream[1]
+              .split(' ')
+              .slice(0, 20)
+              .join(' ') + '...';
 
-                <hr class="mb-5"/>
-                <nav class="d-flex justify-content-center wow fadeIn">
-                    <ul class="pagination pg-blue">
-                        <li class="page-item disabled">
-                            <a class="page-link" href="#" aria-label="Previous">
-                                <span aria-hidden="true">&laquo;</span>
-                                <span class="sr-only">Previous</span>
-                            </a>
-                        </li>
+          activities.push(obj);
+        }
+        this.setState({ activities: activities });
+      })
+      .catch(err => {
+        console.log(err);
+      });
+  }
 
-                        <li class="page-item active">
-                            <a class="page-link" href="#">1
-                                <span class="sr-only">(current)</span>
-                            </a>
-                        </li>
-                        <li class="page-item">
-                            <a class="page-link" href="#">2</a>
-                        </li>
-                        <li class="page-item">
-                            <a class="page-link" href="#">3</a>
-                        </li>
-                        <li class="page-item">
-                            <a class="page-link" href="#">4</a>
-                        </li>
-                        <li class="page-item">
-                            <a class="page-link" href="#">5</a>
-                        </li>
+  handleClick = currentActivity => {
+    this.setState(
+      {
+        currentActivity: currentActivity
+      },
+      () => {
+        this.setState({
+          visible: true
+        });
+      }
+    );
+  };
 
-                        <li class="page-item">
-                            <a class="page-link" href="#" aria-label="Next">
-                                <span aria-hidden="true">&raquo;</span>
-                                <span class="sr-only">Next</span>
-                            </a>
-                        </li>
-                    </ul>
-                </nav>
+  closeModal = () => {
+    this.setState({
+      visible: false
+    });
+  };
+
+  render() {
+    return (
+      <div className='mt-10'>
+        <main className='mt-5 pt-5'>
+          <div className='container'>
+            <section className='pt-5'>
+              <div className='container-fluid d-flex space-between'>
+                <div className='row'>
+                  {this.state.activities.map((currentActivity, index) => {
+                    return (
+                      <div
+                        className='col-lg-4 col-md-6 col-sm-12'
+                        style={{ marginBottom: '20px' }}
+                      >
+                        <div className='card text-center activity overflow-hidden'>
+                          <img
+                            src={currentActivity.img}
+                            alt=''
+                            className='card-img-top activity'
+                          />
 
+                          <div className='card-body text-dark flex-column d-flex'>
+                            <h4 className='card-title activity'>
+                              {currentActivity.title}
+                            </h4>
+                            <p className='card-text text-secondary'>
+                              {currentActivity.description}
+                            </p>
+
+                            <a
+                              href='#'
+                              className='activity btn btn-outline-primary mt-auto btn-block align-self-end'
+                              style={{ marginTop: 'auto' }}
+                              onClick={() => this.handleClick(currentActivity)}
+                            >
+                              Read More
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
             </section>
+          </div>
+        </main>
+        <Modal
+          visible={this.state.visible}
+          width='90%'
+          height='90%'
+          effect='fadeInUp'
+          onClickAway={() => this.closeModal()}
+        >
+          <div>
+            <img
+              src={
+                this.state.currentActivity ? this.state.currentActivity.img : ''
+              }
+              style={{
+                margin: '10px',
+                height: '200px',
+                objectFit: 'scale-down'
+              }}
+            ></img>
+            <h2 style={{ padding: '10px' }}>
+              {this.state.currentActivity
+                ? this.state.currentActivity.title
+                : ''}
+            </h2>
+            <div style={{ width: '100%', height: '100%' }}>
+              <p
+                style={{
+                  fontSize: '10',
+                  overflow: 'auto',
+                  display: 'block',
+                  height: '450px',
+                  margin: '10px'
+                }}
+              >
+                {this.state.currentActivity
+                  ? this.state.currentActivity.longDescription
+                  : ''}
+              </p>
+            </div>
 
-        </div>
-    </main>
-        </div>
-    </>
-  );
+            <button
+              type='button'
+              class='btn btn-danger btn-circle'
+              onClick={this.closeModal}
+            >
+              <i class='fa fa-times'></i>
+            </button>
+          </div>
+        </Modal>
+      </div>
+    );
+  }
 }
 
+export default BlogList;
diff --git a/src/pages/Home/Components/Activities.css b/src/pages/Home/Components/Activities.css
new file mode 100644
index 0000000..87b80c6
--- /dev/null
+++ b/src/pages/Home/Components/Activities.css
@@ -0,0 +1,11 @@
+.btn.activity {
+  color: #22247a;
+  background-color: #fff;
+  border-color: #22247a;
+}
+
+.btn.activity:hover {
+  color: #fff;
+  background-color: #22247a;
+  border-color: #22247a;
+}
diff --git a/src/pages/Home/Components/Activities.js b/src/pages/Home/Components/Activities.js
index 930d59f..7d66b77 100644
--- a/src/pages/Home/Components/Activities.js
+++ b/src/pages/Home/Components/Activities.js
@@ -1,27 +1,27 @@
-import React from "react";
-import ActivityCard from "../../../components/Activities/ActivityCard";
-import "./common.css";
+import React from 'react';
+import ActivityCard from '../../../components/Activities/ActivityCard';
+import './common.css';
 
 class Activities extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      activities: []
+      activities: [],
+      page: 'activities'
     };
   }
 
   componentDidMount() {
     let activities = [];
-    fetch("https://medium-article-fetcher.herokuapp.com/posts", {
+    fetch('https://medium-article-fetcher.herokuapp.com/posts', {
       crossDomain: true,
-      method: "GET",
-      headers: { "Content-Type": "application/json" }
+      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;
@@ -41,15 +41,13 @@ class Activities extends React.Component {
 
           obj.description =
             stream[1]
-              .split(" ")
+              .split(' ')
               .slice(0, 20)
-              .join(" ") + "...";
+              .join(' ') + '...';
 
           activities.push(obj);
         }
-        this.setState({ activities: activities }, () => {
-          console.log(this.state.activities);
-        });
+        this.setState({ activities: activities });
       })
       .catch(err => {
         console.log(err);
@@ -57,19 +55,30 @@ class Activities extends React.Component {
   }
   render() {
     return (
-      <div id="activity">
-        <h1 className="component-heading">Activities</h1>
-        <div className="container-fluid d-flex justify-content-center">
-          <div className="row">
+      <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 className='col-md-4'>
+                  <ActivityCard
+                    key={index}
+                    activity={currentActivity}
+                    page={this.state.page}
+                  />
                 </div>
               );
             })}
           </div>
         </div>
+        <a
+          href='/bloglist'
+          className='btn btn-outline-primary activity'
+          style={{ marginTop: '40px' }}
+        >
+          Continue to the Blogs Page
+        </a>
       </div>
     );
   }

From e045962d7e64663638d50817b69c3c5fb530aa0c Mon Sep 17 00:00:00 2001
From: Auraofdivinity <peirisasel373@gmail.com>
Date: Wed, 26 Feb 2020 11:29:41 +0530
Subject: [PATCH 4/4] Removing modal

---
 package.json                |  1 -
 src/pages/Blogs/BlogList.js | 77 +------------------------------------
 2 files changed, 1 insertion(+), 77 deletions(-)

diff --git a/package.json b/package.json
index 5ecc169..651dfea 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,6 @@
     "markdown-it-task-lists": "^2.1.1",
     "marked": "^0.8.0",
     "react": "^16.12.0",
-    "react-awesome-modal": "^2.0.5",
     "react-bootstrap": "^1.0.0-beta.16",
     "react-dom": "^16.12.0",
     "react-markdown": "^4.3.1",
diff --git a/src/pages/Blogs/BlogList.js b/src/pages/Blogs/BlogList.js
index 9c34010..88e57be 100644
--- a/src/pages/Blogs/BlogList.js
+++ b/src/pages/Blogs/BlogList.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import './BlogList.css';
-import Modal from 'react-awesome-modal';
 
 class BlogList extends React.Component {
   constructor(props) {
@@ -23,7 +22,6 @@ class BlogList extends React.Component {
         return res.json();
       })
       .then(resData => {
-        console.log(resData);
         for (let i = 0; i < resData.items.length; i++) {
           let obj = {};
           obj.title = resData.items[i].title;
@@ -41,11 +39,6 @@ class BlogList extends React.Component {
           let reg = /<\s*p[^>]*>([^<]*)<\s*\/\s*p\s*>/;
           let stream = resData.items[i].content_encoded.match(reg);
 
-          let div = document.createElement('div');
-          div.innerHTML = resData.items[i].content_encoded;
-
-          obj.longDescription = div.textContent || div.innerText || '';
-
           obj.description =
             stream[1]
               .split(' ')
@@ -61,25 +54,6 @@ class BlogList extends React.Component {
       });
   }
 
-  handleClick = currentActivity => {
-    this.setState(
-      {
-        currentActivity: currentActivity
-      },
-      () => {
-        this.setState({
-          visible: true
-        });
-      }
-    );
-  };
-
-  closeModal = () => {
-    this.setState({
-      visible: false
-    });
-  };
-
   render() {
     return (
       <div className='mt-10'>
@@ -110,10 +84,9 @@ class BlogList extends React.Component {
                             </p>
 
                             <a
-                              href='#'
+                              href={currentActivity.link}
                               className='activity btn btn-outline-primary mt-auto btn-block align-self-end'
                               style={{ marginTop: 'auto' }}
-                              onClick={() => this.handleClick(currentActivity)}
                             >
                               Read More
                             </a>
@@ -127,54 +100,6 @@ class BlogList extends React.Component {
             </section>
           </div>
         </main>
-        <Modal
-          visible={this.state.visible}
-          width='90%'
-          height='90%'
-          effect='fadeInUp'
-          onClickAway={() => this.closeModal()}
-        >
-          <div>
-            <img
-              src={
-                this.state.currentActivity ? this.state.currentActivity.img : ''
-              }
-              style={{
-                margin: '10px',
-                height: '200px',
-                objectFit: 'scale-down'
-              }}
-            ></img>
-            <h2 style={{ padding: '10px' }}>
-              {this.state.currentActivity
-                ? this.state.currentActivity.title
-                : ''}
-            </h2>
-            <div style={{ width: '100%', height: '100%' }}>
-              <p
-                style={{
-                  fontSize: '10',
-                  overflow: 'auto',
-                  display: 'block',
-                  height: '450px',
-                  margin: '10px'
-                }}
-              >
-                {this.state.currentActivity
-                  ? this.state.currentActivity.longDescription
-                  : ''}
-              </p>
-            </div>
-
-            <button
-              type='button'
-              class='btn btn-danger btn-circle'
-              onClick={this.closeModal}
-            >
-              <i class='fa fa-times'></i>
-            </button>
-          </div>
-        </Modal>
       </div>
     );
   }