feature/cookie-notice

package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@material-ui/core": "^4.11.3",
     "@material-ui/icons": "^4.11.2",
+    "@material-ui/lab": "^4.0.0-alpha.57",
     "gatsby": "^2.31.1",
     "gatsby-image": "^2.10.0",
     "gatsby-plugin-google-gtag": "^2.7.0",

src/components/Layout/index.jsx

@@ -1,16 +1,20 @@
 import React, { useContext } from 'react';
-import { graphql, useStaticQuery } from 'gatsby';
+import { graphql, useStaticQuery, navigate } from 'gatsby';
 import { CssBaseline } from '@material-ui/core';
+import Alert from '@material-ui/lab/Alert';
 import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
 import DefaultAppBar from '../DefaultAppBar';
 import Footer from '../Footer';
 import { MainContext } from '../../contexts/MainContextProvider';
 import ThemeSelector from '../../utils/ThemeSelector';
 import './index.css';
+import { setHasAcceptedCookieNotice } from '../../reducers/MainReducer/Actions';
 
 const Layout = ({ children }) => {
-  const [state] = useContext(MainContext);
-  const { themeIndex, themeColorIndex } = state;
+  const [state, dispatch] = useContext(MainContext);
+  const { themeIndex, themeColorIndex, hasAcceptedCookieNotice } = state;
   const data = useStaticQuery(graphql`query {
       site {
         siteMetadata {
@@ -37,11 +41,53 @@ const Layout = ({ children }) => {
     },
   });
 
+  /**
+   * Accept cookies
+   */
+  const acceptCookies = () => {
+    dispatch(setHasAcceptedCookieNotice(true));
+  };
+
+  /**
+   * Go to the GDPR site
+   */
+  const gotoGdpr = () => {
+    navigate('http://ec.europa.eu/ipg/basics/legal/cookies/index_en.htm');
+  };
+
   return (
     <ThemeProvider theme={theme}>
       <CssBaseline />
       <DefaultAppBar title={data.site.siteMetadata.title} />
       {children}
+      {hasAcceptedCookieNotice ? null : (
+        <Alert
+          severity="warning"
+          style={{ position: 'sticky', bottom: 0, marginTop: 10 }}
+        >
+          <Typography>
+            We might use cookies to ensure that we give you the best experience on our website.
+            If you continue to use this site we will assume that you are happy with it.
+          </Typography>
+
+          <Button
+            variant="contained"
+            color="secondary"
+            onClick={gotoGdpr}
+            style={{ marginRight: 5 }}
+          >
+            Decline
+          </Button>
+
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={acceptCookies}
+          >
+            Agree
+          </Button>
+        </Alert>
+      )}
       <Footer
         facebookUrl={data.site.siteMetadata.facebook}
         githubUrl={data.site.siteMetadata.github}

src/contexts/MainContextProvider/index.jsx

@@ -5,6 +5,7 @@ const themeIndex = typeof window !== 'undefined' && localStorage.themeIndex ? pa
 const themeColorIndex = typeof window !== 'undefined' && localStorage.themeColorIndex
   ? parseFloat(localStorage.themeColorIndex)
   : 0;
+const hasAcceptedCookieNotice = typeof window !== 'undefined' && localStorage.hasAcceptedCookieNotice ? localStorage.hasAcceptedCookieNotice === 'true' : false;
 
 const initState = {
   pageIndex: 0,
@@ -14,6 +15,7 @@ const initState = {
     defaultColor: '#3f50b5',
   },
   blogLimit: 0,
+  hasAcceptedCookieNotice,
 };
 
 export const MainContext = createContext(initState);

src/reducers/MainReducer/Actions/actionTypes.js

@@ -2,3 +2,4 @@ export const SET_PAGE_INDEX = 'SET_PAGE_INDEX';
 export const SET_THEME_INDEX = 'SET_THEME_INDEX';
 export const SET_THEME_COLOR_INDEX = 'SET_THEME_COLOR_INDEX';
 export const SET_BLOG_LIMIT = 'SET_BLOG_LIMIT';
+export const SET_HAS_ACCEPTED_COOKIE_NOTICE = 'HAS_ACCEPTED_COOKIE_NOTICE';

src/reducers/MainReducer/Actions/index.js

@@ -1,8 +1,8 @@
 import {
-  SET_BLOG_LIMIT,
+  SET_BLOG_LIMIT, SET_HAS_ACCEPTED_COOKIE_NOTICE,
   SET_PAGE_INDEX,
   SET_THEME_COLOR_INDEX,
-  SET_THEME_INDEX,
+  SET_THEME_INDEX
 } from './actionTypes';
 
 export const setPageIndex = (index) => ({
@@ -24,3 +24,8 @@ export const setBlogLimit = (limit) => ({
   type: SET_BLOG_LIMIT,
   payload: limit,
 });
+
+export const setHasAcceptedCookieNotice = (hasAccepted) => ({
+  type: SET_HAS_ACCEPTED_COOKIE_NOTICE,
+  payload: hasAccepted,
+});

src/reducers/MainReducer/index.jsx

@@ -1,5 +1,6 @@
 import {
   SET_BLOG_LIMIT,
+  SET_HAS_ACCEPTED_COOKIE_NOTICE,
   SET_PAGE_INDEX,
   SET_THEME_COLOR_INDEX,
   SET_THEME_INDEX,
@@ -29,6 +30,12 @@ const MainReducer = (state, action) => {
         ...state,
         blogLimit: action.payload,
       };
+    case SET_HAS_ACCEPTED_COOKIE_NOTICE:
+      localStorage.hasAcceptedCookieNotice = action.payload;
+      return {
+        ...state,
+        hasAcceptedCookieNotice: action.payload,
+      };
     default:
       return state;
   }

yarn.lock

@@ -2074,6 +2074,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@material-ui/lab@npm:^4.0.0-alpha.57":
+  version: 4.0.0-alpha.57
+  resolution: "@material-ui/lab@npm:4.0.0-alpha.57"
+  dependencies:
+    "@babel/runtime": ^7.4.4
+    "@material-ui/utils": ^4.11.2
+    clsx: ^1.0.4
+    prop-types: ^15.7.2
+    react-is: ^16.8.0 || ^17.0.0
+  peerDependencies:
+    "@material-ui/core": ^4.9.10
+    "@types/react": ^16.8.6 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0
+    react-dom: ^16.8.0 || ^17.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 5d1a078800822d2d3ffcc6162a8867ab83a72b23103f2b1aeaf56135e16a3ade6672673c4c70a481aad467bd67ca31447a5bbb55d66260cc785baedde597d182
+  languageName: node
+  linkType: hard
+
 "@material-ui/styles@npm:^4.11.3":
   version: 4.11.3
   resolution: "@material-ui/styles@npm:4.11.3"
@@ -4931,6 +4952,7 @@ __metadata:
   dependencies:
     "@material-ui/core": ^4.11.3
     "@material-ui/icons": ^4.11.2
+    "@material-ui/lab": ^4.0.0-alpha.57
     eslint-config-airbnb: ^18.2.1
     eslint-plugin-import: ^2.22.1
     eslint-plugin-jsx-a11y: ^6.4.1