From d274fd083b71205d6aca3069fed6c5138f233a6a Mon Sep 17 00:00:00 2001 From: yihangx Date: Tue, 8 Oct 2024 01:52:36 -0700 Subject: [PATCH 1/3] implement cookie consent banner --- package.json | 3 +++ src/App.tsx | 38 ++++++++++++++++++++++++++++++++------ 2 files changed, 35 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index d2341f0d..cd7b252a 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ "@types/d3-selection": "^3.0.7", "@types/d3-zoom": "^3.0.5", "@types/jest": "^29.0.3", + "@types/js-cookie": "^3.0.3", "@types/lodash.debounce": "^4.0.7", "@types/papaparse": "^5.3.14", "@types/react": "^18.0.20", @@ -122,6 +123,7 @@ "html-react-parser": "^3.0.12", "idb-keyval": "^6.2.0", "immer": "^10.0.2", + "js-cookie": "^3.0.5", "keycloak-js": "25.0.1", "lodash": "^4.17.21", "lodash.debounce": "^4.0.8", @@ -133,6 +135,7 @@ "primereact": "^10.6.3", "react": "18.3.1", "react-color": "^2.19.3", + "react-cookie-consent": "^9.0.0", "react-dom": "18.3.1", "react-draggable": "^4.4.5", "react-error-boundary": "^4.0.13", diff --git a/src/App.tsx b/src/App.tsx index 5ca10c45..65b422a3 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,7 @@ import React, { Suspense, useContext, useEffect } from 'react' import CssBaseline from '@mui/material/CssBaseline' +import CookieConsent from 'react-cookie-consent'; +import Cookies from 'js-cookie'; import { createTheme, ThemeProvider } from '@mui/material/styles' import './index.css' import { Error } from './Error' @@ -82,19 +84,43 @@ const router = createBrowserRouter( ) export const App = (): React.ReactElement => { - const client = useContext(KeycloakContext) - const setClient = useCredentialStore((state) => state.setClient) + const client = useContext(KeycloakContext); + const setClient = useCredentialStore((state) => state.setClient); useEffect(() => { - setClient(client) - }, []) + setClient(client); + }, [client, setClient]); + + const removeAllCookies = () => { + const allCookies = Cookies.get(); + Object.keys(allCookies).forEach(cookieName => { + Cookies.remove(cookieName, { path: '/' }); + }); + }; return ( + + This site uses cookies to support Cytoscape Web’s network visualization tools and improve your experience. By accepting, you consent to our data practices.{" "} + Learn more + - ) -} + ); +}; From 0e5752a44f9af21d8f5ad675b920f7876d964bdc Mon Sep 17 00:00:00 2001 From: yihangx Date: Tue, 8 Oct 2024 01:53:55 -0700 Subject: [PATCH 2/3] implement cookie consent banner --- src/App.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.tsx b/src/App.tsx index 65b422a3..c20862db 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -111,7 +111,7 @@ export const App = (): React.ReactElement => { setDeclineCookie={false} flipButtons onDecline={removeAllCookies} - cookieName="myAppCookieConsent" + cookieName="cytoscapeWebCookieConsent" style={{ background: "#4F4F4F" }} buttonStyle={{ backgroundColor: "#0073B0", color: "#ffffff", fontSize: "13px" }} declineButtonStyle={{ color: "#ffffff", background: "#6c757d", fontSize: "13px" }} From a813814814e0f537f8c39b4478ca3d0e5b8800bb Mon Sep 17 00:00:00 2001 From: yihangx Date: Thu, 17 Oct 2024 00:54:49 -0700 Subject: [PATCH 3/3] Fix format --- src/App.tsx | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index c20862db..231b960a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,7 @@ import React, { Suspense, useContext, useEffect } from 'react' import CssBaseline from '@mui/material/CssBaseline' -import CookieConsent from 'react-cookie-consent'; -import Cookies from 'js-cookie'; +import CookieConsent from 'react-cookie-consent' +import Cookies from 'js-cookie' import { createTheme, ThemeProvider } from '@mui/material/styles' import './index.css' import { Error } from './Error' @@ -84,19 +84,19 @@ const router = createBrowserRouter( ) export const App = (): React.ReactElement => { - const client = useContext(KeycloakContext); - const setClient = useCredentialStore((state) => state.setClient); + const client = useContext(KeycloakContext) + const setClient = useCredentialStore((state) => state.setClient) useEffect(() => { - setClient(client); - }, [client, setClient]); + setClient(client) + }, [client, setClient]) const removeAllCookies = () => { - const allCookies = Cookies.get(); + const allCookies = Cookies.get() Object.keys(allCookies).forEach(cookieName => { - Cookies.remove(cookieName, { path: '/' }); - }); - }; + Cookies.remove(cookieName, { path: '/' }) + }) + } return ( @@ -109,7 +109,7 @@ export const App = (): React.ReactElement => { declineButtonText="Decline" enableDeclineButton setDeclineCookie={false} - flipButtons + flipButtons onDecline={removeAllCookies} cookieName="cytoscapeWebCookieConsent" style={{ background: "#4F4F4F" }} @@ -122,5 +122,5 @@ export const App = (): React.ReactElement => { - ); -}; + ) +}