#434

frontend/src/App.tsx

@@ -1,6 +1,6 @@
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { AnimatePresence, LayoutGroup, MotionConfig, motion } from 'framer-motion'
-import { createElement, Suspense, lazy, useEffect,
+import { createElement, Suspense, lazy, useCallback, useEffect, useRef,
 	 useLayoutEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { createBrowserRouter,
@@ -267,8 +267,19 @@ const RoutedApp = ({ locales }: { locales: AvailableLocale[] }) => {
 	? resolve ({ location, params: route.params, locale, targetLocale })
 	: switchLocalePath (location, targetLocale)
   }
-  const [user, setUser] = useState<User | null> (
+  const [user, setUserState] = useState<User | null> (
       () => client.getQueryData<User> (sessionKeys.current) ?? null)
+  const authority = useRef (user)
+  const setUser = useCallback<Dispatch<SetStateAction<User | null>>> (action => {
+    const next = typeof action === 'function' ? action (authority.current) : action
+    if (next?.id !== authority.current?.id || next?.role !== authority.current?.role)
+    {
+      client.cancelQueries ()
+      client.removeQueries ({ predicate: query => query.queryKey[0] !== 'session' })
+    }
+    authority.current = next
+    setUserState (next)
+  }, [client])
   const [status, setStatus] = useState (200)
   const behaviourSettings = useClientBehaviourSettings ()
   const animationMode = behaviourSettings.animation ?? 'normal'
@@ -317,7 +328,7 @@ const RoutedApp = ({ locales }: { locales: AvailableLocale[] }) => {
       }
     }) ()
     return () => { cancelled = true }
-  }, [])
+  }, [setUser])
 
   useEffect (() => {
     if (!(user))