From 2d10247f9bbb55c3418905e2249f6e71f637a9ba Mon Sep 17 00:00:00 2001 From: muhammedsirajudeen Date: Thu, 24 Apr 2025 19:42:34 +0530 Subject: [PATCH 1/3] feat: moved component based functionalities to App.tsx to enable use of hooks --- frontend/src/App.tsx | 76 +++++++++++ .../commonUI/CookieConsentBanner.tsx | 123 ++++++++++++++++++ frontend/src/main.tsx | 59 +-------- 3 files changed, 201 insertions(+), 57 deletions(-) create mode 100644 frontend/src/App.tsx create mode 100644 frontend/src/components/commonUI/CookieConsentBanner.tsx diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx new file mode 100644 index 0000000..7b1abce --- /dev/null +++ b/frontend/src/App.tsx @@ -0,0 +1,76 @@ +import { ColorModeProvider } from '@/components/ui/color-mode' +import { ChakraProvider } from '@chakra-ui/react' +import { MutationCache, QueryCache, QueryClient, QueryClientProvider } from '@tanstack/react-query' +import { RouterProvider, createRouter } from '@tanstack/react-router' +import { PostHogProvider } from 'posthog-js/react' +import { StrictMode, useState } from 'react' +import { OpenAPI } from './client' +import { ApiError } from './client' +import { AuthProvider } from './hooks/useAuthContext' +import { routeTree } from './routeTree.gen' +import { system } from './theme' +import CookieConsent from './components/commonUI/CookieConsentBanner' + +OpenAPI.BASE = import.meta.env.VITE_API_URL +OpenAPI.TOKEN = async () => { + return localStorage.getItem('access_token') || '' +} + + +const posthogApiKey = import.meta.env.VITE_POSTHOG_API_KEY +const posthogConfig = { + enabled: import.meta.env.PROD && !!posthogApiKey, + options: import.meta.env.VITE_POSTHOG_HOST ? { api_host: import.meta.env.VITE_POSTHOG_HOST } : {}, +} + +const handleApiError = (error: Error) => { + if (error instanceof ApiError && [401, 403].includes(error.status)) { + localStorage.removeItem('access_token') + window.location.href = '/login' + } + } + + +const queryClient = new QueryClient({ + queryCache: new QueryCache({ + onError: handleApiError, + }), + mutationCache: new MutationCache({ + onError: handleApiError, + }), +}) + +const router = createRouter({ routeTree }) + +declare module '@tanstack/react-router' { + interface Register { + router: typeof router + } +} + +const App = () => { + const [isPosthogEnabled, setIsPosthogEnabled] = useState(posthogConfig.enabled); + + return ( + + + + + + + {isPosthogEnabled ? ( + + + + ) : ( + + )} + + + + + + ); +}; + +export default App; \ No newline at end of file diff --git a/frontend/src/components/commonUI/CookieConsentBanner.tsx b/frontend/src/components/commonUI/CookieConsentBanner.tsx new file mode 100644 index 0000000..f9a0059 --- /dev/null +++ b/frontend/src/components/commonUI/CookieConsentBanner.tsx @@ -0,0 +1,123 @@ +import { useState, useEffect } from "react"; +import { + Box, + Button, + Flex, + Text, + Link, + VStack, + IconButton, +} from "@chakra-ui/react"; + +import { FaTimes as CloseIcon } from "react-icons/fa"; +const CookieConsent = () => { + const [hasConsented, setHasConsented] = useState(false); + const [isVisible, setIsVisible] = useState(false); + useEffect(() => { + const consent = localStorage.getItem("cookie-consent"); + if (consent) { + setHasConsented(true); + } else { + const timer = setTimeout(() => { + setIsVisible(true); + }, 300); + return () => clearTimeout(timer); + } + }, []); + + const handleAcceptAll = () => { + localStorage.setItem("cookie-consent", "all"); + setIsVisible(false); + setTimeout(() => setHasConsented(true), 300); + }; + + const handleAcceptNecessary = () => { + localStorage.setItem("cookie-consent", "necessary"); + setIsVisible(false); + setTimeout(() => setHasConsented(true), 300); + }; + + const handleClose = () => { + setIsVisible(false); + }; + + if (hasConsented) return null; + return ( + + + + We use cookies 🍪 + + To enhance your experience on FlashNotes. By continuing, you agree to our use of cookies as outlined in our + + Privacy Policy + . + + + + + + + + + + + + + ); +}; + +export default CookieConsent; diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx index 8e60b5f..e8d1c0c 100644 --- a/frontend/src/main.tsx +++ b/frontend/src/main.tsx @@ -1,69 +1,14 @@ import './i18n' -import { ColorModeProvider } from '@/components/ui/color-mode' -import { ChakraProvider } from '@chakra-ui/react' -import { MutationCache, QueryCache, QueryClient, QueryClientProvider } from '@tanstack/react-query' -import { RouterProvider, createRouter } from '@tanstack/react-router' -import { PostHogProvider } from 'posthog-js/react' import { StrictMode } from 'react' import ReactDOM from 'react-dom/client' -import { ApiError, OpenAPI } from './client' -import { AuthProvider } from './hooks/useAuthContext' -import { routeTree } from './routeTree.gen' -import { system } from './theme' - -OpenAPI.BASE = import.meta.env.VITE_API_URL -OpenAPI.TOKEN = async () => { - return localStorage.getItem('access_token') || '' -} - -const handleApiError = (error: Error) => { - if (error instanceof ApiError && [401, 403].includes(error.status)) { - localStorage.removeItem('access_token') - window.location.href = '/login' - } -} -const queryClient = new QueryClient({ - queryCache: new QueryCache({ - onError: handleApiError, - }), - mutationCache: new MutationCache({ - onError: handleApiError, - }), -}) - -const router = createRouter({ routeTree }) -declare module '@tanstack/react-router' { - interface Register { - router: typeof router - } -} - -const posthogApiKey = import.meta.env.VITE_POSTHOG_API_KEY -const posthogConfig = { - enabled: import.meta.env.PROD && !!posthogApiKey, - options: import.meta.env.VITE_POSTHOG_HOST ? { api_host: import.meta.env.VITE_POSTHOG_HOST } : {}, -} +import App from './App' const rootElement = document.getElementById('root') if (rootElement && !rootElement.innerHTML) { const root = ReactDOM.createRoot(rootElement) root.render( - - - - - {posthogConfig.enabled ? ( - - - - ) : ( - - )} - - - - + , ) } From ede1632cd9432e1e6afe4bacefdda9c1945e49ad Mon Sep 17 00:00:00 2001 From: muhammedsirajudeen Date: Thu, 24 Apr 2025 22:11:43 +0530 Subject: [PATCH 2/3] feat: Implemented logic to provide post hog based on user preferences --- frontend/src/App.tsx | 46 ++++++++++--------- .../commonUI/CookieConsentBanner.tsx | 24 ++++++---- 2 files changed, 39 insertions(+), 31 deletions(-) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 7b1abce..4c34ce2 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -49,28 +49,30 @@ declare module '@tanstack/react-router' { } const App = () => { - const [isPosthogEnabled, setIsPosthogEnabled] = useState(posthogConfig.enabled); - - return ( - - - - - - - {isPosthogEnabled ? ( - - - - ) : ( - - )} - - - - - - ); + const [isPosthogEnabled, setIsPosthogEnabled] = useState(false); + const onConsent=(status:boolean)=>{ + setIsPosthogEnabled(status) + } + return ( + + + + + + + {isPosthogEnabled && posthogConfig.enabled ? ( + + + + ) : ( + + )} + + + + + + ); }; export default App; \ No newline at end of file diff --git a/frontend/src/components/commonUI/CookieConsentBanner.tsx b/frontend/src/components/commonUI/CookieConsentBanner.tsx index f9a0059..5697c34 100644 --- a/frontend/src/components/commonUI/CookieConsentBanner.tsx +++ b/frontend/src/components/commonUI/CookieConsentBanner.tsx @@ -1,4 +1,4 @@ -import { useState, useEffect } from "react"; +import React, { useState, useEffect } from "react"; import { Box, Button, @@ -10,15 +10,21 @@ import { } from "@chakra-ui/react"; import { FaTimes as CloseIcon } from "react-icons/fa"; -const CookieConsent = () => { - const [hasConsented, setHasConsented] = useState(false); + +interface CookieConsentProps{ + consented:boolean + onConsent:(status:boolean)=>void +} + +const CookieConsent:React.FC = ({consented,onConsent}) => { const [isVisible, setIsVisible] = useState(false); useEffect(() => { const consent = localStorage.getItem("cookie-consent"); - if (consent) { - setHasConsented(true); + if (consent==="all") { + onConsent(true); } else { const timer = setTimeout(() => { + onConsent(false) setIsVisible(true); }, 300); return () => clearTimeout(timer); @@ -28,20 +34,20 @@ const CookieConsent = () => { const handleAcceptAll = () => { localStorage.setItem("cookie-consent", "all"); setIsVisible(false); - setTimeout(() => setHasConsented(true), 300); + setTimeout(() => onConsent(true), 300); }; const handleAcceptNecessary = () => { - localStorage.setItem("cookie-consent", "necessary"); + localStorage.setItem("cookie-consent", "deny"); setIsVisible(false); - setTimeout(() => setHasConsented(true), 300); + setTimeout(() => onConsent(false), 300); }; const handleClose = () => { setIsVisible(false); }; - if (hasConsented) return null; + if (consented) return null; return ( Date: Thu, 24 Apr 2025 22:18:20 +0530 Subject: [PATCH 3/3] feat: Removed redundant strict mode in App.tsx --- frontend/src/App.tsx | 36 +++++++++++++++++------------------- 1 file changed, 17 insertions(+), 19 deletions(-) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 4c34ce2..3247f89 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -3,7 +3,7 @@ import { ChakraProvider } from '@chakra-ui/react' import { MutationCache, QueryCache, QueryClient, QueryClientProvider } from '@tanstack/react-query' import { RouterProvider, createRouter } from '@tanstack/react-router' import { PostHogProvider } from 'posthog-js/react' -import { StrictMode, useState } from 'react' +import { useState } from 'react' import { OpenAPI } from './client' import { ApiError } from './client' import { AuthProvider } from './hooks/useAuthContext' @@ -54,24 +54,22 @@ const App = () => { setIsPosthogEnabled(status) } return ( - - - - - - - {isPosthogEnabled && posthogConfig.enabled ? ( - - - - ) : ( - - )} - - - - - + + + + + + {isPosthogEnabled && posthogConfig.enabled ? ( + + + + ) : ( + + )} + + + + ); };