resotore lint sidebar fixes

add remove auth params

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 <RetryErrorPage backVisible={false} mainVisible={false} onRetry={() => 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()) {

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(
   <Context.Provider value={rootStore}>
     <AuthProvider {...keycloakConfig}>
       <BrowserRouter>
-        {/* <React.StrictMode> */}
         <App />
-        {/* </React.StrictMode> */}
       </BrowserRouter>
     </AuthProvider>
   </Context.Provider>

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>
             {routes.map(({ path, component }) =>

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<React.ReactNode>(() => {
         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 (
         <div>

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 <CenterLoader />
     if (isError) return <RetryErrorPage onRetry={handleRetry} />
-    if (!camera || !host) return <CenterLoader />
+    if (!camera || !host) return <Center><Text>Please select host or camera</Text></Center>
     if (!data) return <Text>Not have response from server</Text>
 
     const stringDay = dateToQueryString(day)