From 09309dfef7012cfcbced700ac7d3749b538b4b8e Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Wed, 6 Nov 2019 22:59:43 +0400
Subject: [PATCH] Share gudie widget on the sidebar

---
 components/share-guide/index.js | 28 +++++++++++++++++++++++-----
 pages/guides/[guide].js         |  6 +++---
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/components/share-guide/index.js b/components/share-guide/index.js
index 9f0e86760..45ba1b2fb 100644
--- a/components/share-guide/index.js
+++ b/components/share-guide/index.js
@@ -1,16 +1,34 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faFacebookSquare, faRedditSquare, faTwitterSquare } from '@fortawesome/free-brands-svg-icons'
 
+import { getFacebookShareUrl, getRedditShareUrl, getTwitterShareUrl } from "lib/url";
 import { ShareIcon, ShareIconsList, ShareWrap } from './style';
 
-const ShareGuide = (props) => (
+const ShareGuide = ({
+  guide,
+  guide: {
+    author = {}
+  } = {}
+}) => (
   <ShareWrap>
     <ShareIconsList className="d-sm-none d-md-none d-lg-flex d-xl-flex">
-      <ShareIcon><a href="#"><FontAwesomeIcon icon={ faTwitterSquare } /></a></ShareIcon>
-      <ShareIcon><a href="#"><FontAwesomeIcon icon={ faFacebookSquare } /></a></ShareIcon>
-      <ShareIcon><a href="#"><FontAwesomeIcon icon={ faRedditSquare } /></a></ShareIcon>
+      <ShareIcon>
+        <a href={ getTwitterShareUrl({ text: `${guide.title} by @${author.twitter}`, url: guide.url })} target="_blank">
+          <FontAwesomeIcon icon={ faTwitterSquare } />
+        </a>
+      </ShareIcon>
+      <ShareIcon>
+        <a href={ getFacebookShareUrl({ text: guide.title, url: guide.url }) } target="_blank">
+          <FontAwesomeIcon icon={ faFacebookSquare } />
+        </a>
+      </ShareIcon>
+      <ShareIcon>
+        <a href={ getRedditShareUrl({ text: guide.title, url: guide.url })} target="_blank">
+          <FontAwesomeIcon icon={ faRedditSquare } />
+        </a>
+      </ShareIcon>
     </ShareIconsList>
   </ShareWrap>
 );
 
-export default ShareGuide;
\ No newline at end of file
+export default ShareGuide;
diff --git a/pages/guides/[guide].js b/pages/guides/[guide].js
index 529bdc88a..8e5dc688c 100644
--- a/pages/guides/[guide].js
+++ b/pages/guides/[guide].js
@@ -14,12 +14,12 @@ const Guide = ({ guide }) => {
 
   return (
     <GuideLayout>
-      <GuideHeader guide={guide} />
+      <GuideHeader guide={ guide } />
       <GuideBody>
         <guide.component />
-        <ShareGuide/>
+        <ShareGuide guide={ guide }/>
       </GuideBody>
-      <GuideFooter guide={guide} />
+      <GuideFooter guide={ guide } />
     </GuideLayout>
   );
 };