Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(gdpr-cookie-consent): Switch to V2 + Vite #510

Merged
merged 3 commits into from
Jun 16, 2024
+169 −61
Merged

refactor(gdpr-cookie-consent): Switch to V2 + Vite #510

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6ee5b4d
refactor(gdpr-cookie-consent): Switch to V2 + Vite
machour Jun 16, 2024
73821a1
lint
machour Jun 16, 2024
5cc7233
use useRouteLoaderData instead of useLoaderData, and call it out
machour Jun 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
use useRouteLoaderData instead of useLoaderData, and call it out
@machour
machour committed Jun 16, 2024
commit 5cc72336f43dcb1b28e9fa2008d61ff6e3631478
5 changes: 2 additions & 3 deletions gdpr-cookie-consent/README.md
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
# GDPR Cookie Consent

Create a simple GDPR consent form.
Till the user doesn't click on the `Accept` button, she will see a banner prompting to accept cookies.
Create a simple GDPR consent form, displayed until the button click the `Accept` button.

## Preview

@@ -14,7 +13,7 @@ Open this example on [CodeSandbox](https://codesandbox.com):
Users will be presented with a GDPR consent form on every page [app/root.tsx](app/root.tsx) till they submit the accept button.
Once they submit the consent form, a dummy tracking [script](public/dummy-analytics-script.js) at the [app/root.tsx](app/root.tsx) will start tracking the user's data (open the browser console too see the dummy tracking message).

> If you want to reset the example delete the `gdpr-consent` cookie in the `Application`/`cookies` in the browser's developer tools.
> If you want to reset the example, delete the `gdpr-consent` cookie in the `Application`/`cookies` in the browser's developer tools.

The example is using [Remix Cookie API](https://remix.run/utils/cookies).

11 changes: 9 additions & 2 deletions gdpr-cookie-consent/app/root.tsx
View file
Original file line number Diff line number Diff line change
@@ -7,7 +7,7 @@ import {
ScrollRestoration,
json,
useFetcher,
useLoaderData,
useRouteLoaderData,
} from "@remix-run/react";
import { useEffect } from "react";

@@ -16,11 +16,18 @@ import { gdprConsent } from "~/cookies.server";
export const loader = async ({ request }: LoaderFunctionArgs) => {
const cookieHeader = request.headers.get("Cookie");
const cookie = (await gdprConsent.parse(cookieHeader)) || {};

return json({ track: cookie.gdprConsent });
};

export function Layout({ children }: { children: React.ReactNode }) {
const { track } = useLoaderData<typeof loader>();
// We use `useRouteLoaderData` here instead of `useLoaderData` because
// the <Layout /> component will also be used by the <ErrorBoundary />
// if an error is thrown somewhere in the app, and we can't call
// `useLoaderData()` while rendering an <ErrorBoundary />.
const rootLoaderData = useRouteLoaderData<{ track?: true }>("root");
const track = rootLoaderData?.track ?? false;

useEffect(() => {
if (track) {
const script = document.createElement("script");