From 448196755d457e27ffc64244c1051ad3449bcde8 Mon Sep 17 00:00:00 2001
From: Helen Tang <helentang.93@gmail.com>
Date: Mon, 22 May 2017 08:59:05 -0700
Subject: [PATCH] Implements Facebook Button

---
 client/app/components/Article.jsx        | 10 +++++++--
 client/app/components/Body.jsx           |  8 +++++--
 client/app/components/FacebookButton.jsx | 28 ++++++++++++++++++++++++
 3 files changed, 42 insertions(+), 4 deletions(-)
 create mode 100644 client/app/components/FacebookButton.jsx

diff --git a/client/app/components/Article.jsx b/client/app/components/Article.jsx
index 525a547..75139cf 100644
--- a/client/app/components/Article.jsx
+++ b/client/app/components/Article.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import PocketButton from './pocketButton';
+import PocketButton from './PocketButton';
+import FacebookButton from './FacebookButton';
 
 class Article extends React.Component {
   constructor(props) {
@@ -17,7 +18,12 @@ class Article extends React.Component {
   render() {
     return (
       <div className="col-12 col-md-6">
-        <PocketButton link={this.state.link}/>
+        <div className="container-fluid">
+          <div className="row"> 
+            <FacebookButton link={this.state.link}/>
+            <PocketButton link={this.state.link}/>
+          </div>
+        </div>
         <a href={this.props.story.url} target="_blank" className="card-clickable">
           <div className="card">
             <img
diff --git a/client/app/components/Body.jsx b/client/app/components/Body.jsx
index 687fa5d..53d52a2 100644
--- a/client/app/components/Body.jsx
+++ b/client/app/components/Body.jsx
@@ -14,8 +14,12 @@ const Body = ({ collectData, findRetailers, history, chartData, storyPoint, rela
         <History history={history} collectData={collectData} findRetailers={findRetailers}/>
         <RelatedTopics relatedTopics={relatedTopics} collectData={collectData} findRetailers={findRetailers}/>
         <TrendChart chartData={chartData} storyPoint={storyPoint}/>
-        <RetailerList trend={chartData.trend} foundRetailers={chartData.retailers}/>
-        <ArticleList trend={chartData.trend} storyPoint={storyPoint}/>
+        <div className="container-fluid">
+          <div className="row"> 
+            <RetailerList trend={chartData.trend} foundRetailers={chartData.retailers}/>
+            <ArticleList trend={chartData.trend} storyPoint={storyPoint}/>
+          </div>
+        </div>
       </div>
     </div>
   );
diff --git a/client/app/components/FacebookButton.jsx b/client/app/components/FacebookButton.jsx
new file mode 100644
index 0000000..9875a67
--- /dev/null
+++ b/client/app/components/FacebookButton.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+const FacebookButton = (props) => {
+  return (
+    <div>
+      <div id="fb-root"></div>
+        <script>{(function(d, s, id) {
+          var js, fjs = d.getElementsByTagName(s)[0];
+          if (d.getElementById(id)) { return; }
+          js = d.createElement(s); js.id = id;
+          js.src = '//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9';
+          fjs.parentNode.insertBefore(js, fjs);
+        }(document, 'script', 'facebook-jssdk'))};</script>
+      <div className="fb-share-button" 
+            data-href={props.link} 
+            data-layout="button" 
+            data-size="small" 
+            data-mobile-iframe="true">
+        <a className="fb-xfbml-parse-ignore" 
+            target="_blank" 
+            href='https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;src=sdkpreparse'>
+          Share</a>
+      </div>
+    </div>    
+  );
+};
+
+export default FacebookButton;
\ No newline at end of file