From 689fb9c88bec25d2a71b078728904d1ea3c52ec1 Mon Sep 17 00:00:00 2001 From: Jonasz Bigda Date: Mon, 30 Nov 2020 21:51:52 +0100 Subject: [PATCH] cookies consent --- package-lock.json | 14 +++++++++++++ package.json | 1 + src/App.js | 2 ++ src/App.scss | 17 ++++++++++++++- src/components/Dialogs/Cookies.js | 35 +++++++++++++++++++++++++++++++ 5 files changed, 68 insertions(+), 1 deletion(-) create mode 100644 src/components/Dialogs/Cookies.js diff --git a/package-lock.json b/package-lock.json index b58fa97..c51cd96 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 1877fef..27a0775 100644 --- a/package.json +++ b/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": { diff --git a/src/App.js b/src/App.js index 22cbf0f..13beb21 100644 --- a/src/App.js +++ b/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) {
+
diff --git a/src/App.scss b/src/App.scss index 07657e1..4e9111b 100644 --- a/src/App.scss +++ b/src/App.scss @@ -71,4 +71,19 @@ p { margin-left: 10px; margin-top: auto; margin-bottom: auto; -} \ No newline at end of file +} + +.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; + } +} diff --git a/src/components/Dialogs/Cookies.js b/src/components/Dialogs/Cookies.js new file mode 100644 index 0000000..8cd6ae9 --- /dev/null +++ b/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( +
+
Menui korzysta z ciasteczek (cookies). Dalsze korzystanie z serwisu oznacza zgodę na ich użycie.
+ +
+ ) + } else { + return( +
+ ) + } +} \ No newline at end of file