Merge pull request #26 from andela/ft-social-share-164047033

feature-#164047033-User be able to share an Article through Facebook,Twitter and Email.
andela · May 3, 2019 · 40139f0 · 40139f0
2 parents 73c96f2 + 7fc571c
commit 40139f0
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 37 deletions.
diff --git a/package.json b/package.json
@@ -19,10 +19,10 @@
     "eslint-plugin-jsx-a11y": "^6.2.1",
     "eslint-plugin-react": "^7.12.4",
     "html-react-parser": "^0.7.0",
-    "import": "0.0.6",
     "jest-fetch-mock": "^2.1.2",
     "fetch-mock": "^7.3.1",
     "html-to-draftjs": "^1.4.0",
+    "import": "0.0.6",
     "jest-mock": "^24.7.0",
     "mdbreact": "^4.12.0",
     "moxios": "^0.4.0",
@@ -42,6 +42,7 @@
     "react-router": "^5.0.0",
     "react-router-dom": "^5.0.0",
     "react-scripts": "2.1.8",
+    "react-share": "^2.4.0",
     "react-social-login": "^3.4.4",
     "react-tag-input": "^6.4.0",
     "react-tagsinput": "^3.19.0",

diff --git a/src/actions/login.actions.js b/src/actions/login.actions.js
@@ -1,7 +1,6 @@
 import axios from 'axios';
 import { loginConstants } from '../constants/index';
 
-
 function success(user) {
   return {
     type: loginConstants.LOGIN_SUCCESS,
@@ -25,8 +24,8 @@ const loginAction = (email, password) => async (dispatch) => {
     })
     .then(res => res.data)
     .then((user) => {
-      dispatch(success(user));
       localStorage.setItem('user', JSON.stringify(user));
+      dispatch(success(user));
 
       // return user;
     })

diff --git a/src/components/Articles/ViewArticle.js b/src/components/Articles/ViewArticle.js
@@ -10,10 +10,10 @@ import Footer from '../static/Footer';
 import '../../App.scss';
 import './Articles.scss';
 import ArticleLiking from '../LikeDislikeArticle/like.dislike';
+import SocialShare from '../SocialShare/index';
 
 const readingTime = require('reading-time');
 
-
 export class GetArticle extends Component {
   constructor(props) {
     super(props);
@@ -31,9 +31,9 @@ export class GetArticle extends Component {
 
   componentWillReceiveProps(newProps) {
     const slug = newProps.match.params.slug;
-    if (newProps.errors.length>0) {
-      this.props.history.push(`/article/${slug}/404`)
-    } else{
+    if (newProps.errors.length > 0) {
+      this.props.history.push(`/article/${slug}/404`);
+    } else {
       const articles = [];
       const activeUser = [];
       articles.push(newProps.anArticle.article);
@@ -59,6 +59,7 @@ export class GetArticle extends Component {
     let articleAuthor;
     let articleDesc;
     let articleTags;
+    let articleSlug;
     let articleReadTime = {};
     const articleObject = this.state.anArticle;
     let articleDate;
@@ -67,11 +68,15 @@ export class GetArticle extends Component {
     if (articleObject != false) {
       articleBody = parse(articleObject[0].body);
       articleTitle = this.state.anArticle[0].title;
+      articleSlug = this.state.anArticle[0].slug;
       articleThisOne = parse(this.state.anArticle[0].body);
       articleAuthor = this.state.anArticle[0].author.username;
       articleDesc = this.state.anArticle[0].description;
       articleTags = this.state.anArticle[0].tag_list;
-      articleDate = this.state.anArticle[0].created_at.substr(0, this.state.anArticle[0].created_at.indexOf('T'));
+      articleDate = this.state.anArticle[0].created_at.substr(
+        0,
+        this.state.anArticle[0].created_at.indexOf('T'),
+      );
       articleReadTime = readingTime(this.state.anArticle[0].body).text;
     }
 
@@ -88,12 +93,11 @@ export class GetArticle extends Component {
     try {
       tagItems = articleTags.map(tagItem => (
         <div>
-          <i className="fas fa-tags"></i>
+          <i className="fas fa-tags" />
           <span>{tagItem}</span>
         </div>
       ));
-    } catch (e) {
-    }
+    } catch (e) {}
     return (
       <div className="App-header">
         <header>
@@ -103,70 +107,75 @@ export class GetArticle extends Component {
           <Container>
             <Row className="justify-content-md-center draw-line-horizontal">
               <h1>
-                <strong>
-                  { articleTitle }
-                </strong>
+                <strong>{articleTitle}</strong>
               </h1>
             </Row>
           </Container>
           <Container>
             <Row className="justify-content-md-center">
               <Col className="draw-line-vertical" sm={2}>
                 <div className="sidebar">
-                  <i className="fas fa-user"></i>
+                  <i className="fas fa-user" />
                   <strong> By </strong>
                   {articleAuthor}
                 </div>
                 <br />
                 <div className="sidebar">
-                  <i className="fas fa-list"></i>
+                  <i className="fas fa-list" />
                   <strong> Description: </strong>
                   {articleDesc}
                 </div>
                 <br />
                 <div className="sidebar">
-                  <i className="far fa-calendar-alt"></i>
+                  <i className="far fa-calendar-alt" />
                   <strong> Published: </strong>
                   {articleDate}
                 </div>
                 <br />
                 <div className="sidebar">
-                  <i className="fas fa-eye"></i>
-                  <span>
-                    {articleReadTime}
-                  </span>
+                  <i className="fas fa-eye" />
+                  <span>{articleReadTime}</span>
+                  <br />
+                  <br />
+                  <SocialShare title={articleTitle} slug={articleSlug} />
                 </div>
                 <br />
                 <div className="sidebar">
                   <h5>Tags</h5>
                   {tagItems}
                 </div>
+                <br />
+
                 <br />
                 <div>
-                  {loggedIn ?(
-                  <div>
-                    {currentUser.user.username===articleAuthor ?(
-                    <button type="button" class="btn btn-primary btn-sm" onClick={this.onClick}>Edit Article</button>
-                    ): (
+                  {loggedIn ? (
+                    <div>
+                      {currentUser.user.username === articleAuthor ? (
+                        <button
+                          type="button"
+                          className="btn btn-primary btn-sm"
+                          onClick={this.onClick}
+                        >
+                          Edit Article
+                        </button>
+                      ) : (
+                        ''
+                      )}
+                    </div>
+                  ) : (
                     ''
-                    )}
-                  </div>
-                   ): (
-                   ''
-                   )}
+                  )}
                 </div>
               </Col>
               <Col sm={10} className="view-font">
-                <div className="image-wrapper">
-                  { articleThisOne }
-                </div>
+                <div className="image-wrapper">{articleThisOne}</div>
                 <div className="liking">
                   <ArticleLiking slug={this.props.match.params.slug} />
                 </div>
+                <div className="image-wrapper">{articleThisOne}</div>
               </Col>
             </Row>
           </Container>
-
         </div>
         <br />
         <div className="footer-space" />
@@ -193,5 +202,7 @@ const mapStateToProps = state => ({
   errors: state.articles.errors,
 });
 
-
-export default connect(mapStateToProps, { fetchArticle })(GetArticle);
+export default connect(
+  mapStateToProps,
+  { fetchArticle },
+)(GetArticle);
diff --git a/src/components/SocialShare/index.js b/src/components/SocialShare/index.js
@@ -0,0 +1,56 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  FacebookShareButton,
+  EmailShareButton,
+  TwitterShareButton,
+  FacebookIcon,
+  EmailIcon,
+  TwitterIcon,
+} from 'react-share';
+import './social.scss';
+
+const SocialShare = ({ slug, title }) => (
+  <div>
+    <div>
+      <TwitterShareButton
+        url={`https://ah-olympians.herokuapp.com/article/${slug}`}
+        quote={title}
+        windowWidth={750}
+        windowHeight={600}
+        className="social"
+      >
+        <TwitterIcon size={32} round />
+      </TwitterShareButton>
+    </div>
+    <div>
+      <FacebookShareButton
+        url={`https://ah-olympians.herokuapp.com/article/${slug}`}
+        quote={title}
+        windowWidth={750}
+        windowHeight={600}
+        className="social"
+      >
+        <FacebookIcon size={32} round />
+      </FacebookShareButton>
+    </div>
+    <div>
+      <EmailShareButton
+        windowWidth={750}
+        windowHeight={600}
+        url={`https://ah-olympians.herokuapp.com/article/${slug}`}
+        quote={title}
+        className="social"
+      >
+        <EmailIcon size={32} round />
+      </EmailShareButton>
+    </div>
+  </div>
+);
+
+export default SocialShare;
+
+SocialShare.propTypes = {
+  slug: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+};
diff --git a/src/components/SocialShare/index.test.js b/src/components/SocialShare/index.test.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import SocialShare from './index';
+
+test('should test social sharing', () => {
+  const wrapper = shallow(<SocialShare />);
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/components/SocialShare/social.scss b/src/components/SocialShare/social.scss
@@ -0,0 +1,3 @@
+.social {
+  cursor: pointer;
+}