feat: add social media sharing buttons

godlak1 · Jan 20, 2021 · aa5373a · aa5373a
1 parent 5567153
commit aa5373a
Show file tree

Hide file tree

Showing 5 changed files with 166 additions and 2 deletions.
diff --git a/web/package.json b/web/package.json
@@ -91,6 +91,7 @@
     "react-icons": "3.11.0",
     "react-loader-spinner": "3.1.14",
     "react-redux": "7.2.1",
+    "react-share": "4.3.1",
     "reactstrap": "8.5.1",
     "recharts": "2.0.0-beta.8",
     "redux": "4.0.5",
@@ -103,7 +104,8 @@
     "reselect": "4.0.0",
     "serialize-javascript": "5.0.1",
     "styled-components": "5.1.1",
-    "typeface-open-sans": "0.0.75"
+    "typeface-open-sans": "0.0.75",
+    "url-join": "4.0.1"
   },
   "devDependencies": {
     "@babel/core": "7.11.5",
@@ -164,6 +166,7 @@
     "@types/serialize-javascript": "5.0.0",
     "@types/styled-components": "5.1.2",
     "@types/terser-webpack-plugin": "4.1.0",
+    "@types/url-join": "4.0.0",
     "@types/webpack": "4.41.22",
     "@types/webpackbar": "4.0.0",
     "@typescript-eslint/eslint-plugin": "4.0.1",

diff --git a/web/src/components/Common/SharingPanel.tsx b/web/src/components/Common/SharingPanel.tsx
@@ -0,0 +1,125 @@
+import React from 'react'
+
+import urljoin from 'url-join'
+import { useRouter } from 'next/router'
+
+import {
+  EmailIcon,
+  EmailShareButton,
+  FacebookIcon,
+  FacebookShareButton,
+  LinkedinIcon,
+  LinkedinShareButton,
+  TwitterIcon,
+  TwitterShareButton,
+  VKIcon,
+  VKShareButton,
+  WeiboIcon,
+  WeiboShareButton,
+  WhatsappIcon,
+  WhatsappShareButton,
+} from 'react-share'
+
+import {
+  DOMAIN,
+  FACEBOOK_HASHTAG,
+  PROJECT_NAME,
+  TWITTER_HASHTAGS,
+  TWITTER_RELATED,
+  TWITTER_USERNAME_RAW,
+} from 'src/constants'
+import styled from 'styled-components'
+import { Col, Row } from 'reactstrap'
+
+const SOCIAL_ICON_SIZE = 30
+
+const SharingPanelH1 = styled.h1`
+  font-size: 1.33rem;
+  margin: 15px auto;
+`
+
+const SharingPanelWrapper = styled.aside`
+  margin: 0 auto 15px;
+`
+
+const SharingButton = styled.span`
+  margin: 3px;
+
+  & > button,
+  & > button > svg {
+    width: ${SOCIAL_ICON_SIZE}px;
+    height: ${SOCIAL_ICON_SIZE}px;
+    border-radius: ${SOCIAL_ICON_SIZE / 2}px;
+  }
+`
+
+export function SharingPanel() {
+  const { asPath } = useRouter()
+  const url = urljoin(DOMAIN, asPath)
+
+  return (
+    <Row noGutters>
+      <Col>
+        <Row noGutters>
+          <Col className="d-flex text-center">
+            <SharingPanelH1>{'Share'}</SharingPanelH1>
+          </Col>
+        </Row>
+
+        <Row noGutters>
+          <Col className="d-flex">
+            <SharingPanelWrapper>
+              <SharingButton title={'Send in an Email'}>
+                <EmailShareButton url={url} subject={PROJECT_NAME} body={`\n${url}\n`}>
+                  <EmailIcon size={SOCIAL_ICON_SIZE} />
+                </EmailShareButton>
+              </SharingButton>
+
+              <SharingButton title={'Share on Twitter'}>
+                <TwitterShareButton
+                  url={url}
+                  title={PROJECT_NAME}
+                  via={TWITTER_USERNAME_RAW}
+                  hashtags={TWITTER_HASHTAGS}
+                  related={TWITTER_RELATED}
+                >
+                  <TwitterIcon size={SOCIAL_ICON_SIZE} />
+                </TwitterShareButton>
+              </SharingButton>
+
+              <SharingButton title={'Share on Facebook'}>
+                <FacebookShareButton url={url} quote={PROJECT_NAME} hashtag={FACEBOOK_HASHTAG}>
+                  <FacebookIcon size={SOCIAL_ICON_SIZE} />
+                </FacebookShareButton>
+              </SharingButton>
+
+              <SharingButton title={'Share on WhatsApp'}>
+                <WhatsappShareButton url={url} title={PROJECT_NAME}>
+                  <WhatsappIcon size={SOCIAL_ICON_SIZE} />
+                </WhatsappShareButton>
+              </SharingButton>
+
+              <SharingButton title={'Share on LinkedIn'}>
+                <LinkedinShareButton url={url} title={PROJECT_NAME}>
+                  <LinkedinIcon size={SOCIAL_ICON_SIZE} />
+                </LinkedinShareButton>
+              </SharingButton>
+
+              <SharingButton title={'Share on VK'}>
+                <VKShareButton url={url} title={PROJECT_NAME}>
+                  <VKIcon size={SOCIAL_ICON_SIZE} />
+                </VKShareButton>
+              </SharingButton>
+
+              <SharingButton title={'Share on Weibo'}>
+                <WeiboShareButton url={url} title={PROJECT_NAME}>
+                  <WeiboIcon size={SOCIAL_ICON_SIZE} />
+                </WeiboShareButton>
+              </SharingButton>
+            </SharingPanelWrapper>
+          </Col>
+        </Row>
+      </Col>
+    </Row>
+  )
+}
diff --git a/web/src/components/Layout/Footer.tsx b/web/src/components/Layout/Footer.tsx
@@ -4,6 +4,7 @@ import { Col, Container, Row } from 'reactstrap'
 import styled from 'styled-components'
 
 import { PROJECT_NAME, COMPANY_NAME } from 'src/constants'
+import { SharingPanel } from 'src/components/Common/SharingPanel'
 import { LinkExternal } from 'src/components/Link/LinkExternal'
 import { TeamCredits } from 'src/components/Common/TeamCredits'
 import { PoweredBy } from 'src/components/Common/PoweredBy'
@@ -43,6 +44,12 @@ export function FooterContent() {
 
   return (
     <FooterContainer fluid tag="footer">
+      <Row noGutters>
+        <Col>
+          <SharingPanel />
+        </Col>
+      </Row>
+
       <Row noGutters>
         <Col>
           <TeamCredits />

diff --git a/web/src/constants.ts b/web/src/constants.ts
@@ -15,3 +15,7 @@ export const URL_GITHUB_FRIENDLY = 'github.com/hodcroftlab/covariants' as const
 
 export const TWITTER_USERNAME_RAW = 'firefoxx66' as const
 export const TWITTER_USERNAME_FRIENDLY = `@${TWITTER_USERNAME_RAW}`
+export const TWITTER_HASHTAGS = [PROJECT_NAME]
+export const TWITTER_RELATED = [TWITTER_USERNAME_RAW]
+
+export const FACEBOOK_HASHTAG = PROJECT_NAME
diff --git a/web/yarn.lock b/web/yarn.lock
@@ -2318,6 +2318,11 @@
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.3.tgz#9c088679876f374eb5983f150d4787aa6fb32d7e"
   integrity sha512-FvUupuM3rlRsRtCN+fDudtmytGO6iHJuuRKS1Ss0pG5z8oX0diNEw94UEL7hgDbpN94rgaK5R7sWm6RrSkZuAQ==
 
+"@types/[email protected]":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@types/url-join/-/url-join-4.0.0.tgz#72eff71648a429c7d4acf94e03780e06671369bd"
+  integrity sha512-awrJu8yML4E/xTwr2EMatC+HBnHGoDxc2+ImA9QyeUELI1S7dOCIZcyjki1rkwoA8P2D2NVgLAJLjnclkdLtAw==
+
 "@types/webpack-sources@*":
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/@types/webpack-sources/-/webpack-sources-2.1.0.tgz#8882b0bd62d1e0ce62f183d0d01b72e6e82e8c10"
@@ -4734,7 +4739,7 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
-[email protected], debug@^2.2.0, debug@^2.3.3, debug@^2.6.9:
+[email protected], debug@^2.1.3, debug@^2.2.0, debug@^2.3.3, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
@@ -8266,6 +8271,13 @@ jsonfile@^6.0.1:
   optionalDependencies:
     graceful-fs "^4.1.6"
 
+jsonp@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/jsonp/-/jsonp-0.2.1.tgz#a65b4fa0f10bda719a05441ea7b94c55f3e15bae"
+  integrity sha1-pltPoPEL2nGaBUQep7lMVfPhW64=
+  dependencies:
+    debug "^2.1.3"
+
 jsprim@^1.2.2:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
@@ -10795,6 +10807,14 @@ react-resize-detector@^4.2.1:
     raf-schd "^4.0.2"
     resize-observer-polyfill "^1.5.1"
 
+[email protected]:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/react-share/-/react-share-4.3.1.tgz#2eac80bc5e3f1c6d83c7315342db1fd2f21009d3"
+  integrity sha512-ikh0y8NKxhU7dQBXh1Jccd1ANLb9WNYaSonln33yLyNYo2HTBRp9D6HkTsFlgX/2J9GPsGLqhzzpDNiVKx3WVA==
+  dependencies:
+    classnames "^2.2.5"
+    jsonp "^0.2.1"
+
 react-side-effect@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.1.tgz#66c5701c3e7560ab4822a4ee2742dee215d72eb3"
@@ -13139,6 +13159,11 @@ urix@^0.1.0:
   resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
   integrity sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=
 
+[email protected]:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/url-join/-/url-join-4.0.1.tgz#b642e21a2646808ffa178c4c5fda39844e12cde7"
+  integrity sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==
+
 [email protected]:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-4.1.0.tgz#c7d6b0d6b0fccd51ab3ffc58a78d32b8d89a7be2"