diff --git a/app/scripts/components/common/cookie-consent/index.tsx b/app/scripts/components/common/cookie-consent/index.tsx
index d8145a992..bf8854615 100644
--- a/app/scripts/components/common/cookie-consent/index.tsx
+++ b/app/scripts/components/common/cookie-consent/index.tsx
@@ -1,12 +1,7 @@
import React, { useState, useEffect } from 'react';
import { Icon } from '@trussworks/react-uswds';
-import {
- COOKIE_CONSENT_KEY,
- SESSION_KEY,
-
- getCookie
-} from './utils';
+import { COOKIE_CONSENT_KEY, SESSION_KEY, getCookie } from './utils';
import {
USWDSAlert,
USWDSButton,
@@ -18,6 +13,7 @@ import './index.scss';
interface CookieConsentProps {
title?: string | undefined;
copy?: string | undefined;
+ pathname: string;
sessionStart: string | undefined;
setGoogleTagManager: () => void;
}
@@ -30,6 +26,7 @@ export const CookieConsent = ({
title,
copy,
sessionStart,
+ pathname,
setGoogleTagManager
}: CookieConsentProps) => {
const [cookieConsentResponded, SetCookieConsentResponded] =
@@ -51,9 +48,6 @@ export const CookieConsent = ({
)}; path=/; expires=${closeConsent ? '0' : setCookieExpiration()}`;
};
- const currentURL =
- typeof window !== 'undefined' ? window.location.href : null;
-
const setSessionData = () => {
if (typeof window !== 'undefined') {
const checkForSessionDate = window.sessionStorage.getItem(SESSION_KEY);
@@ -62,6 +56,7 @@ export const CookieConsent = ({
}
}
};
+
useEffect(() => {
if (sessionStart !== 'true' && !cookieConsentResponded) {
setSessionData();
@@ -74,7 +69,10 @@ export const CookieConsent = ({
if (!cookieConsentResponded && closeConsent) {
setCloseConsent(false);
}
- }, [currentURL]);
+ // to Rerender on route change
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [pathname]);
+
useEffect(() => {
const cookieValue = {
responded: cookieConsentResponded,
@@ -84,19 +82,12 @@ export const CookieConsent = ({
// Ignoring setcookie for now since it will make infinite rendering
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [
- cookieConsentResponded,
- cookieConsentAnswer,
- closeConsent,
- getCookie,
- setSessionData,
- currentURL
- ]);
+ }, [cookieConsentResponded, cookieConsentAnswer, closeConsent]);
return (
{
- //Adding debounce to conditional for animation out
+ // Adding debounce to conditional for animation out
setTimeout(() => {
!cookieConsentResponded;
}, 500) && (
diff --git a/app/scripts/components/common/cookie-consent/utils.test.ts b/app/scripts/components/common/cookie-consent/utils.test.ts
new file mode 100644
index 000000000..6b2f0bd2d
--- /dev/null
+++ b/app/scripts/components/common/cookie-consent/utils.test.ts
@@ -0,0 +1,21 @@
+import { readCookie, COOKIE_CONSENT_KEY } from './utils';
+
+describe('onCookie', () => {
+ let cookieValue;
+ beforeEach(() => {
+ cookieValue = { responded: false, answer: false };
+ // Mutating docmument cookie property for test
+ // eslint-disable-next-line fp/no-mutating-methods
+ Object.defineProperty(window.document, 'cookie', {
+ writable: true,
+ value: `CookieConsent={"responded":true,"answer":false}; _somethingelse=GS1.1.17303800; ${COOKIE_CONSENT_KEY}=${JSON.stringify(
+ cookieValue
+ )}`
+ });
+ });
+
+ it('should parse cookie value correctly', () => {
+ const cookieJsonVal = readCookie(COOKIE_CONSENT_KEY);
+ expect(JSON.parse(cookieJsonVal)).toMatchObject(cookieValue);
+ });
+});
diff --git a/app/scripts/components/common/cookie-consent/utils.ts b/app/scripts/components/common/cookie-consent/utils.ts
index 8c97a9db9..910ea1368 100644
--- a/app/scripts/components/common/cookie-consent/utils.ts
+++ b/app/scripts/components/common/cookie-consent/utils.ts
@@ -1,6 +1,15 @@
export const COOKIE_CONSENT_KEY = `veda--CookieConsent`;
export const SESSION_KEY = `veda--NewSession`;
+export const readCookie = (name: string): string => {
+ // Get name followed by anything except a semicolon
+ const cookiestring = RegExp(name + '=[^;]+').exec(document.cookie);
+ // Return everything after the equal sign, or an empty string if the cookie name not found
+ return decodeURIComponent(
+ cookiestring ? cookiestring.toString().replace(/^[^=]+./, '') : ''
+ );
+};
+
export const getCookie = (
SetCookieConsentResponded,
SetCookieConsentAnswer,
@@ -14,10 +23,3 @@ export const getCookie = (
SetCookieConsentAnswer(cookieContents.answer);
}
};
-
-const readCookie = (name) => {
- // Get name followed by anything except a semicolon
- const cookiestring = RegExp(name+'=[^;]+').exec(document.cookie);
- // Return everything after the equal sign, or an empty string if the cookie name not found
- return decodeURIComponent(cookiestring ? cookiestring.toString().replace(/^[^=]+./,'') : '');
-};
diff --git a/app/scripts/components/common/layout-root/index.tsx b/app/scripts/components/common/layout-root/index.tsx
index eac6e1a6b..9feb9c69f 100644
--- a/app/scripts/components/common/layout-root/index.tsx
+++ b/app/scripts/components/common/layout-root/index.tsx
@@ -5,7 +5,7 @@ import React, {
useEffect,
useState
} from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
import { useDeepCompareEffect } from 'use-deep-compare';
import styled from 'styled-components';
import { Outlet } from 'react-router';
@@ -56,6 +56,8 @@ function LayoutRoot(props: { children?: ReactNode }) {
const { children } = props;
const [sessionStart, setSesstionStart] = useState
();
const sessionItem = window.sessionStorage.getItem(SESSION_KEY);
+ const { pathname } = useLocation();
+
useEffect(() => {
!cookieConsentContent && setGoogleTagManager();
sessionItem && setSesstionStart(sessionItem);
@@ -81,7 +83,11 @@ function LayoutRoot(props: { children?: ReactNode }) {
}
+ logo={
+
+ }
/>
@@ -91,6 +97,7 @@ function LayoutRoot(props: { children?: ReactNode }) {
{...cookieConsentContent}
sessionStart={sessionStart}
setGoogleTagManager={setGoogleTagManager}
+ pathname={pathname}
/>
)}