From 01fa11f7307ba542f0aaa1af58109c6acb0267ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benedikt=20R=C3=B6tsch?= Date: Wed, 17 Mar 2021 21:44:47 +0100 Subject: [PATCH 1/4] feat(gatsby): use new default UI --- gatsby/gatsby-browser.js | 2 + gatsby/package.json | 10 +- .../consent-manager/decisions-form.js | 57 ----------- .../consent-manager/on-route-update.ts | 39 ++++++++ .../src/components/consent-manager/switch.js | 30 ------ ...nent.js => tailwind-fallback-component.js} | 19 ++-- .../consent-manager/tailwind-switch.tsx | 48 +++++++++ .../src/components/consent-manager/toggle.js | 28 ------ .../components/consent-manager/ui-context.js | 3 - .../src/components/consent-manager/wrapper.js | 40 ++++---- gatsby/src/components/image.js | 2 +- gatsby/src/pages/index.js | 2 +- gatsby/yarn.lock | 97 +++++++++++++------ 13 files changed, 192 insertions(+), 185 deletions(-) delete mode 100644 gatsby/src/components/consent-manager/decisions-form.js create mode 100644 gatsby/src/components/consent-manager/on-route-update.ts delete mode 100644 gatsby/src/components/consent-manager/switch.js rename gatsby/src/components/consent-manager/{fallback-component.js => tailwind-fallback-component.js} (70%) create mode 100644 gatsby/src/components/consent-manager/tailwind-switch.tsx delete mode 100644 gatsby/src/components/consent-manager/toggle.js delete mode 100644 gatsby/src/components/consent-manager/ui-context.js diff --git a/gatsby/gatsby-browser.js b/gatsby/gatsby-browser.js index adbd8fa..e807c1c 100644 --- a/gatsby/gatsby-browser.js +++ b/gatsby/gatsby-browser.js @@ -6,3 +6,5 @@ import "./src/styles/global.css" export const wrapRootElement = ({ element }) => { return {element} } + +export { onRouteUpdate } from "./src/components/consent-manager/on-route-update" diff --git a/gatsby/package.json b/gatsby/package.json index e950a28..74e2b8b 100644 --- a/gatsby/package.json +++ b/gatsby/package.json @@ -5,9 +5,10 @@ "version": "0.1.0", "author": "Kyle Mathews ", "dependencies": { - "@techboi/consent-manager": "^0.2.0", - "@techboi/consent-manager-integration-matomo": "^0.2.0", - "@techboi/consent-manager-integration-youtube": "^0.2.0", + "@consent-manager/core": "^0.4.1", + "@consent-manager/integration-matomo": "^0.4.1", + "@consent-manager/integration-youtube": "^0.4.1", + "@consent-manager/interface-default": "^0.4.1", "autoprefixer": "^10.2.5", "final-form": "^4.20.2", "gatsby": "^3.1.0", @@ -26,7 +27,8 @@ "react-final-form": "^6.5.2", "react-helmet": "^6.1.0", "react-icons": "^4.2.0", - "tailwindcss": "^2.0.3" + "tailwindcss": "^2.0.3", + "use-persisted-state": "^0.3.3" }, "devDependencies": { "prettier": "2.2.1" diff --git a/gatsby/src/components/consent-manager/decisions-form.js b/gatsby/src/components/consent-manager/decisions-form.js deleted file mode 100644 index 9f3181d..0000000 --- a/gatsby/src/components/consent-manager/decisions-form.js +++ /dev/null @@ -1,57 +0,0 @@ -import React, { useCallback, useContext } from "react" -import { Field, Form } from "react-final-form" - -import ConsentManagerUIContext from "./ui-context" -import { Switch } from "./switch" - -export const DecisionsForm = ({ integrations, initialValues, onSubmit }) => { - const { isOpen, setIsOpen } = useContext(ConsentManagerUIContext) - - const handleSubmitCb = useCallback( - ({ enabled }) => { - onSubmit({ enabled }) - setIsOpen(false) - }, - [onSubmit, setIsOpen] - ) - - return ( -
( - -

We care about your privacy!

-

Please select the services you want to share data with

-
- {integrations.map(({ id, title, Icon }) => ( - ( - - - {title || id} - - )} - type="checkbox" - name="enabled" - value={id} - /> - ))} -
- -
- )} - /> - ) -} diff --git a/gatsby/src/components/consent-manager/on-route-update.ts b/gatsby/src/components/consent-manager/on-route-update.ts new file mode 100644 index 0000000..2ce008a --- /dev/null +++ b/gatsby/src/components/consent-manager/on-route-update.ts @@ -0,0 +1,39 @@ +/** + * This is based on: + * https://github.com/kremalicious/gatsby-plugin-matomo/blob/main/src/gatsby-browser.js + */ + +const { getMatomoTracker } = require("@consent-manager/integration-matomo") + +module.exports = (function () { + return { + onRouteUpdate({ location, prevLocation }) { + const { track } = getMatomoTracker() + + const url = + location && location.pathname + location.search + location.hash + const prevUrl = + prevLocation && + prevLocation.pathname + prevLocation.search + prevLocation.hash + + // @todo this cound be a helper function in the getMatomoTracker for SPAs + const sendPageView = () => { + const { title } = document + + prevUrl && track("setReferrerUrl", prevUrl) + track("setCustomUrl", url) + track("setDocumentTitle", title) + track("trackPageView") + track("enableLinkTracking") + track("trackAllContentImpressions") + + if (process.env.gatsby_log_level === `verbose`) { + console.debug(`[Matomo] Page view for: ${url} - ${title}`) + } + } + + // This ensures plugins like react-helmet finished their work + window.setTimeout(sendPageView, 0) + }, + } +})() diff --git a/gatsby/src/components/consent-manager/switch.js b/gatsby/src/components/consent-manager/switch.js deleted file mode 100644 index 49c4ce3..0000000 --- a/gatsby/src/components/consent-manager/switch.js +++ /dev/null @@ -1,30 +0,0 @@ -import React from "react" - -export function Switch({ children, ...props }) { - const key = `${props.name}-${props.value}` - - return ( -