Merge pull request #1204 from civictechindex/1182-cookies-pop-up-reappearing-and-wrong-color

[FIXED] Cookies pop up reappearing

Author: bruceplai

src/App.js

@@ -1,5 +1,5 @@
 /* eslint-disable max-lines-per-function */
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom';
 import { QueryParamProvider } from 'use-query-params';
 import Layout from './components/common/Layout';
@@ -29,17 +29,25 @@ const RouteTitled = ({ title, ...rest }) => {
       document.title = `Civic Tech Index — ${title}`;
     }
   });
-
   return <Route {...rest} />;
 };
 
+
+// conditional render for cookie
+const checkCookie = () => {
+  const cookieIsSet = document.cookie.includes('civictechindex_cookie_consent');
+  if (cookieIsSet) {
+    return null;
+  }
+  return <PopUp />;
+}
+
 const App = () => {
-  const [showModal, setShowModal] = useState(false);
   useStyles();
   return (
     <BrowserRouter>
       <ScrollToTop />
-      <PopUp showModal={showModal} setShowModal={setShowModal} />
+      {checkCookie()}
       <QueryParamProvider ReactRouterRoute={Route}>
         <Layout>
           <Switch>

src/pages/Privacy/PopUp.js

@@ -67,27 +67,28 @@ const useStyles = makeStyles((theme) => ({
 const PopUp = () => {
   const classes = useStyles();
   const date = new Date();
-  const setCookie = function (cookieEmail) {
-    let cookieValue, expDays;
-    date.setTime(date.getTime() + expDays);
-    const expires = 'expires=' + date.toUTCString();
-
-    document.cookie = `${cookieEmail}${cookieValue}';'${expires}';path=/'`;
 
-    return document.cookie;
+  const setCookie = (cookieEmail, cookieValue, expDays) => {
+    date.setTime(date.getTime() + (expDays * 24 * 60 * 60 * 1000));
+    const expires = 'expires=' + date.toUTCString();
+    const cookie = `${cookieEmail}=${cookieValue};${expires}`;
+    document.cookie = cookie;
+    return cookie;
   };
 
-  const deleteCookie = function (cookieEmail) {
+  const deleteCookie = (cookieEmail) => {
     date.setTime(date.getTime());
     const expires = 'expires=' + date.toUTCString();
-    document.cookie = `${cookieEmail}${expires}';path=/'`;
+    document.cookie = `${cookieEmail};${expires}`;
   };
+
   const acceptCookieConsent = () => {
     deleteCookie('civictechindex_cookie_consent');
-    setCookie('civictechindex_cookie_consent', 1, 30);
+    setCookie('civictechindex_cookie_consent', 1,30);
     document.getElementById('cookieNotice').style.display = 'none';
   };
 
+
   return (
     <Card className={classes.root} id='cookieNotice'>
       <CardHeader className={classes.headStyle}></CardHeader>