From 7061657cdc50a04312f480389a5caeda6c9a97fb Mon Sep 17 00:00:00 2001 From: Hanbyul Jo Date: Mon, 4 Nov 2024 13:36:38 -0500 Subject: [PATCH] Move up path name logic, add cookie util test --- .../common/cookie-consent/index.tsx | 29 +++++++------------ .../common/cookie-consent/utils.test.ts | 21 ++++++++++++++ .../components/common/cookie-consent/utils.ts | 16 +++++----- .../components/common/layout-root/index.tsx | 11 +++++-- 4 files changed, 49 insertions(+), 28 deletions(-) create mode 100644 app/scripts/components/common/cookie-consent/utils.test.ts 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} /> )}