cookies consent

package-lock.json

@@ -2809,6 +2809,11 @@
       "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
       "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ=="
     },
+    "@types/cookie": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.3.3.tgz",
+      "integrity": "sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow=="
+    },
     "@types/eslint": {
       "version": "7.2.4",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.4.tgz",
@@ -18150,6 +18155,15 @@
         "crypto-random-string": "^1.0.0"
       }
     },
+    "universal-cookie": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-4.0.4.tgz",
+      "integrity": "sha512-lbRVHoOMtItjWbM7TwDLdl8wug7izB0tq3/YVKhT/ahB4VDvWMyvnADfnJI8y6fSvsjh51Ix7lTGC6Tn4rMPhw==",
+      "requires": {
+        "@types/cookie": "^0.3.3",
+        "cookie": "^0.4.0"
+      }
+    },
     "universalify": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-1.0.0.tgz",

package.json

@@ -22,6 +22,7 @@
     "react-scripts": "^4.0.0",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
+    "universal-cookie": "^4.0.4",
     "validator": "^13.1.1"
   },
   "scripts": {

src/App.js

@@ -25,6 +25,7 @@ import NewDish from "./components/Dialogs/NewDish";
 import EditDish from "./components/Dialogs/EditDish";
 import Dish from "./components/Dialogs/Dish";
 import HomeScreen from "./components/Output/HomeScreen";
+import Cookies from "./components/Dialogs/Cookies";
 
 const theme = createMuiTheme({
   palette: {
@@ -54,6 +55,7 @@ function App(props) {
           <div className="App">
             <AppBackdrop />
             <Notifier />
+            <Cookies/>
             <TopBar />
             <div className="main-container">
               <Switch>

src/App.scss

@@ -72,3 +72,18 @@ p {
   margin-top: auto;
   margin-bottom: auto;
 }
+
+.cookies-container {
+  max-width: 800px;
+  display: flex;
+  align-items: center;
+  position: fixed;
+  bottom: 24px;
+  background-color: #262626;
+  border-radius: 15px;
+  z-index: 5;
+  h5 {
+    font-weight: 400;
+    padding-left: 18px;
+  }
+}

src/components/Dialogs/Cookies.js

@@ -0,0 +1,35 @@
+import React, { useState, useEffect } from 'react';
+import ButtonPrimary from '../Input/ButtonPrimary';
+import UniversalCookies from "universal-cookie";
+
+export default function Cookies(props){
+    const cookies = new UniversalCookies();
+    const[visible, setVisible] = useState(true);
+
+    const setCookiesConsent = () => {
+        cookies.set('cookies-consent', true);
+        setVisible(false);
+    }
+
+    useEffect(() => {
+        const getCookies = new UniversalCookies();
+        const consent = getCookies.get('cookies-consent')
+        console.log(consent);
+        if(typeof(consent) !== "undefined"){
+            setVisible(false);
+        }
+    }, [])
+
+    if(visible){
+        return(
+            <div className="cookies-container">
+                <h5 className="cookies-text">Menui korzysta z ciasteczek (cookies). Dalsze korzystanie z serwisu oznacza zgodę na ich użycie.</h5>
+                <ButtonPrimary text="W porządku" onClick={setCookiesConsent}/>
+            </div>
+        )
+    } else {
+        return(
+            <div></div>
+        )
+    }
+}