[Feature #163518655] share the article via email, facebook, and twitter

andela · May 7, 2019 · 39cb319 · 39cb319
1 parent 5e445d0
commit 39cb319
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 5 deletions.
diff --git a/src/assets/img/paper-plane.svg b/src/assets/img/paper-plane.svg
diff --git a/src/styles/pages/_article.scss b/src/styles/pages/_article.scss
@@ -5,20 +5,28 @@ body {
     padding-top: 5em;
     border-radius: 5px;
     .article-share {
+      position: fixed;
+      left: 0;
       @include column;
       width: 10%;
-      order: 1;
       padding-top: 2.5em;
       .share-icons {
         display: flex;
         flex-direction: column;
+        justify-content: center;
+        align-items: center;
         .share-icon {
-          margin-top: 1em;
+          width: 30px;
+          height: 30px;
+          &:not(:first-child) {
+            margin-top: 1em;
+          }
         }
       }
     }
 
     .article {
+      margin-left: 10%;
       @include column;
       width: 70%;
       @include border-left-right;

diff --git a/src/views/ReadArticle.js b/src/views/ReadArticle.js
@@ -23,6 +23,7 @@ import authorImage from "../assets/img/user.jpg";
 import dislikeIcon from "../assets/img/dislike-icon.svg";
 import heartIcon from "../assets/img/heart.svg";
 import bookmarkIcon from "../assets/img/bookmark-icons.svg";
+import emailIcon from "../assets/img/paper-plane.svg";
 
 export const mapStateToProps = state => ({
   currentUser: state.login.currentUser,
@@ -203,7 +204,10 @@ export class Article extends Component {
       ({ username, firstName, lastName, image } = author);
     }
     const isAuthor = isCurrentUserAuthor(username, currentUser);
-
+    const {
+      location: { host, pathname }
+    } = window;
+    const currentUrl = `${host}${pathname}`;
     return (
       <div>
         {message && message !== "Article found successfully" ? (
@@ -305,8 +309,24 @@ export class Article extends Component {
                 <img className="share-icon" src={thumbsUp} alt="logo" />
                 <img className="share-icon" src={dislikeIcon} alt="logo" />
                 <img className="share-icon" src={bookmarkIcon} alt="logo" />
-                <img className="share-icon" src={facebookIcon} alt="logo" />
-                <img className="share-icon" src={twitterIcon} alt="logo" />
+                <a
+                  className="share-icon"
+                  href={`https://www.facebook.com/sharer/sharer.php?&u=${currentUrl}`}
+                >
+                  <img className="share-icon" src={facebookIcon} alt="logo" />
+                </a>
+                <a
+                  className="share-icon"
+                  href={`http://twitter.com/share?url=${currentUrl}&text=Hello world, also found this relevant&hashtags=authorsHeaven,software development`}
+                >
+                  <img className="share-icon" src={twitterIcon} alt="logo" />
+                </a>
+                <a
+                  className="share-icon"
+                  href={`mailto:?subject=Sharing the inspiring article&body=${currentUrl}`}
+                >
+                  <img className="share-icon" src={emailIcon} alt="logo" />
+                </a>
               </div>
             </aside>
             <div className="right article-others">