feat(button): Added share button (#162) (#173)

docker-compose.yml

@@ -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

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>

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,
+};

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();
+  });
+});

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"
+/>
+`;

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,
       };