From 5629db199ce578461c8c4dd36a2e8848d324d20d Mon Sep 17 00:00:00 2001 From: NlightN22 Date: Wed, 6 Mar 2024 02:28:53 +0700 Subject: [PATCH] resotore lint sidebar fixes add remove auth params --- src/App.tsx | 11 +++++++++++ src/index.tsx | 18 ++++++++++++++++-- src/router/AppRouter.tsx | 3 ++- src/shared/components/SideBar.tsx | 18 +++++++++--------- src/widgets/SelectedDayList.tsx | 3 +-- 5 files changed, 39 insertions(+), 14 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 98611de..15a8de1 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -10,6 +10,7 @@ import { Notifications } from '@mantine/notifications'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import RetryErrorPage from './pages/RetryErrorPage'; import { keycloakConfig } from '.'; +import { useLocation, useNavigate } from 'react-router-dom'; const queryClient = new QueryClient({ defaultOptions: { @@ -31,6 +32,8 @@ function App() { } const auth = useAuth() + const location = useLocation() + const navigate = useNavigate() // automatically sign-in useEffect(() => { @@ -54,6 +57,14 @@ function App() { return auth.signinRedirect()} /> } + if (hasAuthParams()) { + const urlParams = new URLSearchParams(location.search); + urlParams.delete('state'); + urlParams.delete('session_state'); + urlParams.delete('code'); + navigate(`${location.pathname}${urlParams.toString() ? '?' + urlParams.toString() : ''}`, { replace: true }) + } + if (!auth.isAuthenticated && !auth.isLoading && authErrorCounter < maxErrorAuthCounts) { if (hasAuthParams()) { diff --git a/src/index.tsx b/src/index.tsx index 3017658..e4ea18b 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -17,6 +17,22 @@ export const keycloakConfig: AuthProviderProps = { authority: oidpSettings.server, client_id: oidpSettings.clientId, redirect_uri: hostURL.toString(), + onSigninCallback: () => { + const currentUrl = new URL(window.location.href); + const params = currentUrl.searchParams; + console.log('params', params.toString()) + + params.delete('state'); + params.delete('session_state'); + params.delete('code'); + + const newUrl = `${window.location.pathname}${params.toString() ? '?' + params.toString() : ''}` + console.log('newUrl', newUrl) + + window.history.replaceState({}, document.title, newUrl) + } + + } const rootStore = new RootStore() @@ -32,9 +48,7 @@ root.render( - {/* */} - {/* */} diff --git a/src/router/AppRouter.tsx b/src/router/AppRouter.tsx index 93d155f..5e22d66 100644 --- a/src/router/AppRouter.tsx +++ b/src/router/AppRouter.tsx @@ -1,9 +1,10 @@ -import { Navigate, Route, Routes } from "react-router-dom"; +import { Navigate, Route, Routes, useLocation, useNavigate } from "react-router-dom"; import { routes } from "./routes"; import { v4 as uuidv4 } from 'uuid' import { routesPath } from "./routes.path"; const AppRouter = () => { + return ( {routes.map(({ path, component }) => diff --git a/src/shared/components/SideBar.tsx b/src/shared/components/SideBar.tsx index 34fc666..bf5c854 100644 --- a/src/shared/components/SideBar.tsx +++ b/src/shared/components/SideBar.tsx @@ -1,12 +1,12 @@ -import React, { useContext, useEffect, useRef, useState } from 'react'; -import { Aside, Button, createStyles, Navbar } from "@mantine/core"; +import { Aside, Button, Navbar, createStyles } from "@mantine/core"; import { useDisclosure } from "@mantine/hooks"; +import { observer } from 'mobx-react-lite'; +import React, { useContext, useEffect, useRef, useState } from 'react'; +import { Context } from '../..'; +import { dimensions } from '../dimensions/dimensions'; +import { strings } from '../strings/strings'; import { useMantineSize } from '../utils/mantine.size.convertor'; import { SideButton } from './SideButton'; -import { strings } from '../strings/strings'; -import { dimensions } from '../dimensions/dimensions'; -import { Context } from '../..'; -import { observer } from 'mobx-react-lite'; export interface SideBarProps { isHidden: (isHidden: boolean) => void, @@ -48,7 +48,7 @@ const SideBar = ({ isHidden, side, children }: SideBarProps) => { } else if (!sideBarsStore.rightVisible && side === 'right' && visible) { close() } - }, [sideBarsStore.rightVisible, close, open, side, visible]) + }, [sideBarsStore.rightVisible]) const [leftChildren, setLeftChildren] = useState(() => { if (children && side === 'left') return children @@ -71,7 +71,7 @@ const SideBar = ({ isHidden, side, children }: SideBarProps) => { useEffect(() => { isHidden(!visible) - }, [visible, isHidden]) + }, [visible]) // resize controller useEffect(() => { @@ -89,7 +89,7 @@ const SideBar = ({ isHidden, side, children }: SideBarProps) => { return () => { window.removeEventListener('resize', checkWindowSize); } - }, [visible, open, close, hideSizePx,]) + }, [visible]) return (
diff --git a/src/widgets/SelectedDayList.tsx b/src/widgets/SelectedDayList.tsx index d250d1d..2ef6b92 100644 --- a/src/widgets/SelectedDayList.tsx +++ b/src/widgets/SelectedDayList.tsx @@ -20,7 +20,6 @@ const SelectedDayList = ({ const { recordingsStore: recStore } = useContext(Context) const camera = recStore.filteredCamera const host = recStore.filteredHost - const playedItem = recStore.playedItem const { data, isPending, isError, refetch } = useQuery({ queryKey: [frigateQueryKeys.getRecordingsSummary, recStore.filteredCamera?.id, day], @@ -41,7 +40,7 @@ const SelectedDayList = ({ if (isPending) return if (isError) return - if (!camera || !host) return + if (!camera || !host) return
Please select host or camera
if (!data) return Not have response from server const stringDay = dateToQueryString(day)