From 414d2c54f27787bdbd5e944a97f62562cd76de37 Mon Sep 17 00:00:00 2001
From: Choubakawa <Choubakawa@users.noreply.github.com>
Date: Tue, 19 Jul 2022 03:08:20 +0200
Subject: [PATCH] feat(button): Added  share  button (#162) (#173)

---
 docker-compose.yml                            |  3 +-
 src/components/Home/Home.js                   | 14 +++++++-
 src/components/Share/Share.js                 | 33 +++++++++++++++++++
 src/components/Share/__test__/Share.test.js   | 15 +++++++++
 .../__test__/__snapshots__/Share.test.js.snap |  9 +++++
 src/config.js                                 |  2 ++
 6 files changed, 74 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Share/Share.js
 create mode 100644 src/components/Share/__test__/Share.test.js
 create mode 100644 src/components/Share/__test__/__snapshots__/Share.test.js.snap

diff --git a/docker-compose.yml b/docker-compose.yml
index fb2f072..2fa58ca 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -87,7 +87,7 @@ services:
       - SESSION=https://getsession.org/
       - THREEMA=https://threema.ch/en/
       - STREAMLABS=https://streamlabs.com/
-      - PRIVATEBIN=https://privatebin.net/ 
+      - PRIVATEBIN=https://privatebin.net/
       - AMAZON_AFFILIATE=https://affiliate-program.amazon.co.uk/
       - AMAZON_WISHLIST=https://www.amazon.co.uk/b?node=22758010031
       - APPLE_MUSIC=https://www.apple.com/uk/apple-music/
@@ -107,6 +107,7 @@ services:
       - TWITTER_IMAGE=https://pbs.twimg.com/profile_images/1286144221217316864/qIAsKOpB_400x400.jpg
       - TWITTER_SITE=@TechnoTimLive
       - TWITTER_CREATOR=@TechnoTimLive
+      - SHARE=https://technotim.live
     ports:
       - 8080:3000
     restart: unless-stopped
diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index d0f3fb5..0900399 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -1,6 +1,7 @@
 import React, { memo } from 'react';
 import Avatar from '../Avatar/Avatar';
 import Button from '../Button/Button';
+import Share from '../Share/Share';
 import { runtimeConfig } from '../../config';
 import githubLogo from '../../icons/github.svg';
 import instagramLogo from '../../icons/instagram.svg';
@@ -729,7 +730,18 @@ function Home(props) {
               )}
             </Sort>
             <div>
-              <p className="footer">{runtimeConfig.FOOTER}</p>
+              <p className="footer">
+                {runtimeConfig.FOOTER}
+                {runtimeConfig.SHARE &&
+                  runtimeConfig.OG_TITLE &&
+                  runtimeConfig.OG_DESCRIPTION && (
+                    <Share
+                      url={runtimeConfig.SHARE}
+                      title={runtimeConfig.OG_TITLE}
+                      text={runtimeConfig.OG_DESCRIPTION}
+                    />
+                  )}
+              </p>
             </div>
           </div>
         </div>
diff --git a/src/components/Share/Share.js b/src/components/Share/Share.js
new file mode 100644
index 0000000..2f7aa97
--- /dev/null
+++ b/src/components/Share/Share.js
@@ -0,0 +1,33 @@
+import React, { memo } from 'react';
+import { string } from 'prop-types';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+function Share(props) {
+  const { url, title, text } = props;
+
+  const handleSharing = async () => {
+    if (navigator.share) {
+      await navigator.share({
+        url,
+        title,
+        text,
+      });
+    }
+  };
+
+  return (
+    <>
+      <a className={'button'} rel="noopener noreferrer" onClick={handleSharing}>
+        <FontAwesomeIcon className="icon" icon="fas fa-share-nodes" />
+      </a>
+    </>
+  );
+}
+
+export default memo(Share);
+
+Share.propType = {
+  url: string.isRequired,
+  title: string.isRequired,
+  text: string.isRequired,
+};
diff --git a/src/components/Share/__test__/Share.test.js b/src/components/Share/__test__/Share.test.js
new file mode 100644
index 0000000..7cdc08f
--- /dev/null
+++ b/src/components/Share/__test__/Share.test.js
@@ -0,0 +1,15 @@
+import Share from '../Share';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import renderer from 'react-test-renderer';
+
+describe('<Share />', () => {
+  test('renders without exploding', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<Share />, div);
+  });
+  test('<Share /> snapshot', () => {
+    const tree = renderer.create(<Share />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});
diff --git a/src/components/Share/__test__/__snapshots__/Share.test.js.snap b/src/components/Share/__test__/__snapshots__/Share.test.js.snap
new file mode 100644
index 0000000..61532d2
--- /dev/null
+++ b/src/components/Share/__test__/__snapshots__/Share.test.js.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Share /> <Share /> snapshot 1`] = `
+<a
+  className="button"
+  onClick={[Function]}
+  rel="noopener noreferrer"
+/>
+`;
diff --git a/src/config.js b/src/config.js
index 9323f3d..3c0d8c5 100644
--- a/src/config.js
+++ b/src/config.js
@@ -111,6 +111,7 @@ export const runtimeConfig =
         SHAZAM: window?.env?.SHAZAM,
         MATOMO_URL: window?.env?.MATOMO_URL,
         MATOMO_SITE_ID: window?.env?.MATOMO_SITE_ID,
+        SHARE: window?.env?.SHARE,
       }
     : {
         // server
@@ -403,4 +404,5 @@ export const runtimeConfig =
         MATOMO_SITE_ID: nodeIsProduction
           ? process.env.MATOMO_SITE_ID
           : process.env.RAZZLE_MATOMO_SITE_ID,
+        SHARE: nodeIsProduction ? process.env.SHARE : process.env.RAZZLE_SHARE,
       };