From aa837d6656755b6324f6d40be00edd439d6a9855 Mon Sep 17 00:00:00 2001
From: rtcamp <aer17013@gmail.com>
Date: Mon, 15 Feb 2021 14:05:02 +0100
Subject: [PATCH] Added social share buttons

---
 package-lock.json                          | 33 +++++++++++++++++++-
 package.json                               |  3 +-
 pages/product/[slug].js                    | 14 +++++++++
 src/components/social-share/SocialShare.js | 35 ++++++++++++++++++++++
 4 files changed, 83 insertions(+), 2 deletions(-)
 create mode 100644 src/components/social-share/SocialShare.js

diff --git a/package-lock.json b/package-lock.json
index 2d45f45..8a6625c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5241,6 +5241,29 @@
             "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz",
             "integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM="
         },
+        "jsonp": {
+            "version": "0.2.1",
+            "resolved": "https://registry.npmjs.org/jsonp/-/jsonp-0.2.1.tgz",
+            "integrity": "sha1-pltPoPEL2nGaBUQep7lMVfPhW64=",
+            "requires": {
+                "debug": "^2.1.3"
+            },
+            "dependencies": {
+                "debug": {
+                    "version": "2.6.9",
+                    "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+                    "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+                    "requires": {
+                        "ms": "2.0.0"
+                    }
+                },
+                "ms": {
+                    "version": "2.0.0",
+                    "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+                    "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+                }
+            }
+        },
         "jsonparse": {
             "version": "1.3.1",
             "resolved": "https://registry.npmjs.org/jsonparse/-/jsonparse-1.3.1.tgz",
@@ -8212,6 +8235,15 @@
             "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
             "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg=="
         },
+        "react-share": {
+            "version": "4.3.1",
+            "resolved": "https://registry.npmjs.org/react-share/-/react-share-4.3.1.tgz",
+            "integrity": "sha512-ikh0y8NKxhU7dQBXh1Jccd1ANLb9WNYaSonln33yLyNYo2HTBRp9D6HkTsFlgX/2J9GPsGLqhzzpDNiVKx3WVA==",
+            "requires": {
+                "classnames": "^2.2.5",
+                "jsonp": "^0.2.1"
+            }
+        },
         "react-transition-group": {
             "version": "4.4.1",
             "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
@@ -11221,4 +11253,3 @@
         }
     }
 }
-
diff --git a/package.json b/package.json
index b20e2e7..87e1050 100644
--- a/package.json
+++ b/package.json
@@ -51,6 +51,7 @@
         "react": "^17.0.1",
         "react-bootstrap": "^1.4.3",
         "react-dom": "^17.0.1",
+        "react-share": "^4.3.1",
         "url-loader": "^2.3.0",
         "validator": "^11.1.0",
         "woocommerce-api": "^1.5.0"
@@ -71,4 +72,4 @@
         "prettier": "^2.2.1",
         "serialize-javascript": "^2.1.2"
     }
-}
\ No newline at end of file
+}
diff --git a/pages/product/[slug].js b/pages/product/[slug].js
index 1926ce6..21fb44e 100644
--- a/pages/product/[slug].js
+++ b/pages/product/[slug].js
@@ -2,15 +2,27 @@ import Layout from '../../src/components/layouts/Layout';
 import AddToCartButton from '../../src/components/cart/AddToCartButton';
 import client from '../../src/apollo/ApolloClient';
 import Image from '../../src/components/Image';
+import SocialShare from '../../src/components/social-share/SocialShare';
+
 import { 
     PRODUCT_QUERY,
     PRODUCT_SLUGS 
 } from '../../src/queries';
 
+import { useRouter } from 'next/router'
+
+
+
+
 const Product = ({data}) => {
 
     const { product } = data || {}
 
+    const router = useRouter();
+
+
+    const path = router.asPath; // url path: starts with backslash (/) 
+
     return (
         <Layout>
             {product ? (
@@ -30,6 +42,7 @@ const Product = ({data}) => {
                                 </span>
                             </p>
                             <AddToCartButton product={product} />
+                           
                         </div>
                     </div>
                     <div className="product-container" key={product?.id}>
@@ -37,6 +50,7 @@ const Product = ({data}) => {
                             className="product-description"
                             dangerouslySetInnerHTML={{ __html: product?.description }}
                         />
+                         <SocialShare path={path} />
                     </div>
                 </div>
             ) : (
diff --git a/src/components/social-share/SocialShare.js b/src/components/social-share/SocialShare.js
new file mode 100644
index 0000000..2720b26
--- /dev/null
+++ b/src/components/social-share/SocialShare.js
@@ -0,0 +1,35 @@
+import React from 'react'
+import config from '../../../client-config';
+
+import {
+    FacebookShareButton,
+    FacebookIcon,
+    TwitterShareButton,
+    TwitterIcon,
+    WhatsappShareButton,
+    WhatsappIcon
+} from "react-share";
+
+
+
+const SocialShare = ( { path } ) => {
+    
+    const { siteUrl }  = config;
+    const shareUrl = `${siteUrl}${path}`;
+
+    return (
+        <div className="social-share">
+            <FacebookShareButton url={shareUrl}>
+                <FacebookIcon size={32} round={true} />
+            </FacebookShareButton>
+            <TwitterShareButton url={shareUrl}> 
+                <TwitterIcon size={32} round={true} />
+            </TwitterShareButton>
+            <WhatsappShareButton url={shareUrl}>
+                <WhatsappIcon size={32} round={true} />
+            </WhatsappShareButton>
+        </div>
+    )
+}
+
+export default SocialShare