From 1600ff6e2b14fc8e4c4bc802bb0b1acc8e323ba0 Mon Sep 17 00:00:00 2001 From: Jeremy Karlsson Date: Tue, 5 Nov 2019 16:58:04 +0100 Subject: [PATCH 1/8] Add information about having to install Gatsby CLI before running the dev server. #146 --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 4938d76..dc6639c 100644 --- a/README.md +++ b/README.md @@ -19,6 +19,8 @@ Then install dependencies yarn install ``` +If you have not used Gatsby before, make sure to [install the Gatsby CLI globally](https://github.com/gatsbyjs/gatsby#-get-up-and-running-in-5-minutes). + ## Running Start the development server and visit http://localhost:8000/ From 51b08c40c4e47b4b9158b08367e7ec30ccb3e6d2 Mon Sep 17 00:00:00 2001 From: Jeremy Karlsson Date: Tue, 5 Nov 2019 17:43:23 +0100 Subject: [PATCH 2/8] Add new NativeShareButton component that uses the Web Share API. --- .../SocialButtons/NativeShareButton.js | 44 +++++++++++++++++++ 1 file changed, 44 insertions(+) create mode 100644 src/components/SocialButtons/NativeShareButton.js diff --git a/src/components/SocialButtons/NativeShareButton.js b/src/components/SocialButtons/NativeShareButton.js new file mode 100644 index 0000000..11afbbb --- /dev/null +++ b/src/components/SocialButtons/NativeShareButton.js @@ -0,0 +1,44 @@ +import React from "react"; +import styles from "./styles.module.scss"; +import buttonStyles from "../../styles/Buttons.module.scss"; + +/** + * @typedef Props + * @prop {string} title + * @prop {string} text + * @prop {string} url + */ + +/** + * Renders a button that opens the Web Share API dialog + * with the, in Props, provided text, title and url. + * + * @param {Props} props + */ +export default function NativeShareButton(props) { + const { title, text, url } = props; + + async function openShareDialog() { + try { + await navigator.share({ + title, + text, + url + }); + } catch (shareError) { + // Handle share error maybe? + // This would be trying to share on unsecure origins... + } + } + + return ( + <> + + + ); +} From ca18a3a2d84d653b591699cc0c306d547538b9c9 Mon Sep 17 00:00:00 2001 From: Jeremy Karlsson Date: Tue, 5 Nov 2019 17:44:04 +0100 Subject: [PATCH 3/8] Add jsconfig.json file to make TypeScript linter in VSCode not give false errors when allowing type checks on JS-files locally. --- jsconfig.json | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 jsconfig.json diff --git a/jsconfig.json b/jsconfig.json new file mode 100644 index 0000000..6ed67a1 --- /dev/null +++ b/jsconfig.json @@ -0,0 +1,6 @@ +{ + "compilerOptions": { + "module": "esnext", + "target": "es2019" + } +} From 5ea60c4d9ae3516af1b234793658430e70e49499 Mon Sep 17 00:00:00 2001 From: Jeremy Karlsson Date: Tue, 5 Nov 2019 17:44:23 +0100 Subject: [PATCH 4/8] Conditionally render the new NativeShareButton if the Web Share API is available. --- src/components/ShareSocialCta/index.js | 130 +++++++++++++++++-------- 1 file changed, 87 insertions(+), 43 deletions(-) diff --git a/src/components/ShareSocialCta/index.js b/src/components/ShareSocialCta/index.js index d3ea8d0..e33e750 100644 --- a/src/components/ShareSocialCta/index.js +++ b/src/components/ShareSocialCta/index.js @@ -9,8 +9,70 @@ import TwitterButton from "../SocialButtons/TwitterButton"; import FacebookButton from "../SocialButtons/FacebookButton"; import WhatsappButton from "../SocialButtons/WhatsappButton"; import LinkedinButton from "../SocialButtons/LinkedInButton"; +import NativeShareButton from "../SocialButtons/NativeShareButton"; import EarthIcon from "../Images/Icons/EarthIcon.svg"; +function FallbackShareButtons({ + ctaTitle, + emailBody, + emailSubject, + facebookQuote, + facebookHashtag, + linkedinTitle, + linkedinDescription, + twitterTitle, + twitterAccount, + twitterHashtags, + url, + whatsappTitle, + currentUrl +}) { + return ( +
+
+ +
+
+ + {null} + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ ); +} + function ShareSocialCta({ children, ctaCopy, @@ -28,6 +90,29 @@ function ShareSocialCta({ whatsappTitle, currentUrl }) { + const webShareApi = "share" in navigator; + const propsForFallbackShareButtons = { + ctaTitle, + emailBody, + emailSubject, + facebookQuote, + facebookHashtag, + linkedinTitle, + linkedinDescription, + twitterTitle, + twitterAccount, + twitterHashtags, + url, + whatsappTitle, + currentUrl + }; + + const shareButtons = webShareApi ? ( + + ) : ( + + ); + return (
@@ -51,50 +136,9 @@ function ShareSocialCta({ Send this page to your friends, family and followers via our handy pre written message.

- -
-
- -
-
- - {null} - -
-
- -
-
- -
-
- -
-
- -
-
+ {shareButtons}
+ Thank you{" "} From af6aabc2155fc3f6bf8c65a865b10a715fdd863b Mon Sep 17 00:00:00 2001 From: Jeremy Karlsson Date: Tue, 5 Nov 2019 17:44:42 +0100 Subject: [PATCH 5/8] Revert "Add information about having to install Gatsby CLI before running the dev server. #146" This reverts commit 1600ff6e2b14fc8e4c4bc802bb0b1acc8e323ba0. --- README.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/README.md b/README.md index dc6639c..4938d76 100644 --- a/README.md +++ b/README.md @@ -19,8 +19,6 @@ Then install dependencies yarn install ``` -If you have not used Gatsby before, make sure to [install the Gatsby CLI globally](https://github.com/gatsbyjs/gatsby#-get-up-and-running-in-5-minutes). - ## Running Start the development server and visit http://localhost:8000/ From ae04040607778702fdae8253f2b6aa76689fd83d Mon Sep 17 00:00:00 2001 From: Jeremy Karlsson Date: Tue, 5 Nov 2019 17:52:25 +0100 Subject: [PATCH 6/8] Scope navigator to window so that maybe the tests pass. --- src/components/ShareSocialCta/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ShareSocialCta/index.js b/src/components/ShareSocialCta/index.js index e33e750..cde9727 100644 --- a/src/components/ShareSocialCta/index.js +++ b/src/components/ShareSocialCta/index.js @@ -90,7 +90,7 @@ function ShareSocialCta({ whatsappTitle, currentUrl }) { - const webShareApi = "share" in navigator; + const webShareApi = "share" in window.navigator; const propsForFallbackShareButtons = { ctaTitle, emailBody, From 050dd8670611e3975e447edd506346f63e429b16 Mon Sep 17 00:00:00 2001 From: Jeremy Karlsson Date: Tue, 5 Nov 2019 18:07:29 +0100 Subject: [PATCH 7/8] Allow JSX in jsconfig.json. Ignore node_modules. --- jsconfig.json | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/jsconfig.json b/jsconfig.json index 6ed67a1..854fdab 100644 --- a/jsconfig.json +++ b/jsconfig.json @@ -1,6 +1,10 @@ { "compilerOptions": { + "checkJs": true, "module": "esnext", - "target": "es2019" - } + "target": "es2019", + "moduleResolution": "node", + "jsx": "react" + }, + "exclude": ["node_modules", "**/node_modules/*"] } From ab58a2451af0e9033a80ccd61f23bda0538c52be Mon Sep 17 00:00:00 2001 From: Jeremy Karlsson Date: Tue, 5 Nov 2019 18:11:23 +0100 Subject: [PATCH 8/8] Add `typeof window !== "undefined"` to webShareApi bool. --- src/components/ShareSocialCta/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/ShareSocialCta/index.js b/src/components/ShareSocialCta/index.js index cde9727..b5cd2ed 100644 --- a/src/components/ShareSocialCta/index.js +++ b/src/components/ShareSocialCta/index.js @@ -90,7 +90,8 @@ function ShareSocialCta({ whatsappTitle, currentUrl }) { - const webShareApi = "share" in window.navigator; + const webShareApi = + typeof window !== "undefined" && "share" in window.navigator; const propsForFallbackShareButtons = { ctaTitle, emailBody,