🛂(frontend) invalidate doc query when lost connection

When the provider reports a lost connection,
we invalidate the doc query to refetch the document
data.
This ensures that if a user has lost is rights
to access a document, he will be redirected
to a 403 page without needing to refresh the page.

src/frontend/apps/impress/src/features/docs/doc-management/stores/useProviderStore.tsx

@@ -13,11 +13,14 @@ export interface UseCollaborationStore {
   destroyProvider: () => void;
   provider: HocuspocusProvider | undefined;
   isConnected: boolean;
+  hasLostConnection: boolean;
+  resetLostConnection: () => void;
 }
 
 const defaultValues = {
   provider: undefined,
   isConnected: false,
+  hasLostConnection: false,
 };
 
 export const useProviderStore = create<UseCollaborationStore>((set, get) => ({
@@ -36,8 +39,15 @@ export const useProviderStore = create<UseCollaborationStore>((set, get) => ({
       name: storeId,
       document: doc,
       onStatus: ({ status }) => {
-        set({
-          isConnected: status === WebSocketStatus.Connected,
+        set((state) => {
+          const nextConnected = status === WebSocketStatus.Connected;
+          return {
+            isConnected: nextConnected,
+            hasLostConnection:
+              state.isConnected && !nextConnected
+                ? true
+                : state.hasLostConnection,
+          };
         });
       },
     });
@@ -56,4 +66,5 @@ export const useProviderStore = create<UseCollaborationStore>((set, get) => ({
 
     set(defaultValues);
   },
+  resetLostConnection: () => set({ hasLostConnection: false }),
 }));

src/frontend/apps/impress/src/pages/docs/[id]/index.tsx

@@ -15,6 +15,7 @@ import {
   useCollaboration,
   useDoc,
   useDocStore,
+  useProviderStore,
 } from '@/docs/doc-management/';
 import { KEY_AUTH, setAuthUrl, useAuth } from '@/features/auth';
 import { getDocChildren, subPageToTree } from '@/features/docs/doc-tree/';
@@ -57,6 +58,7 @@ interface DocProps {
 }
 
 const DocPage = ({ id }: DocProps) => {
+  const { hasLostConnection, resetLostConnection } = useProviderStore();
   const {
     data: docQuery,
     isError,
@@ -87,6 +89,14 @@ const DocPage = ({ id }: DocProps) => {
   const { t } = useTranslation();
   const { authenticated } = useAuth();
 
+  // Invalidate when provider store reports a lost connection
+  useEffect(() => {
+    if (hasLostConnection && doc?.id) {
+      queryClient.invalidateQueries({ queryKey: [KEY_DOC, { id: doc.id }] });
+      resetLostConnection();
+    }
+  }, [hasLostConnection, doc?.id, queryClient, resetLostConnection]);
+
   useEffect(() => {
     if (!docQuery || isFetching) {
       return;