Remove collection fetch on document delete

app/components/SocketProvider.tsx

@@ -17,6 +17,7 @@ import {
   PartialWithId,
   WebsocketCollectionUpdateIndexEvent,
   WebsocketCollectionUserEvent,
+  WebsocketDocumentDeletedEvent,
   WebsocketEntitiesEvent,
   WebsocketEntityDeletedEvent,
 } from "~/types";
@@ -247,15 +248,23 @@ class SocketProvider extends React.Component<Props> {
       }
     );
 
-    this.socket.on("documents.delete", (event: WebsocketEntityDeletedEvent) => {
-      const document = documents.get(event.modelId);
+    this.socket.on(
+      "documents.delete",
+      (event: WebsocketDocumentDeletedEvent) => {
+        const document = documents.get(event.modelId);
+        const collection = collections.get(event.collectionId);
 
-      if (document) {
-        document.deletedAt = new Date().toISOString();
+        if (collection) {
+          collection.removeDocument(event.modelId);
+        }
+
+        if (document) {
+          document.deletedAt = new Date().toISOString();
+        }
+
+        policies.remove(event.modelId);
       }
-
-      policies.remove(event.modelId);
-    });
+    );
 
     this.socket.on(
       "documents.permanent_delete",

app/models/Collection.ts

@@ -101,6 +101,12 @@ export default class Collection extends ParanoidModel {
     return sortNavigationNodes(this.documents, this.sort);
   }
 
+  /**
+   * Updates the document identified by the given id in the collection in memory.
+   * Does not update the document in the database.
+   *
+   * @param document The document properties stored in the collection
+   */
   @action
   updateDocument(document: Pick<Document, "id" | "title" | "url">) {
     const travelNodes = (nodes: NavigationNode[]) =>
@@ -116,6 +122,27 @@ export default class Collection extends ParanoidModel {
     travelNodes(this.documents);
   }
 
+  /**
+   * Removes the document identified by the given id from the collection in
+   * memory. Does not remove the document from the database.
+   *
+   * @param documentId The id of the document to remove.
+   */
+  @action
+  removeDocument(documentId: string) {
+    this.documents = this.documents.filter(function f(node): boolean {
+      if (node.id === documentId) {
+        return false;
+      }
+
+      if (node.children) {
+        node.children = node.children.filter(f);
+      }
+
+      return true;
+    });
+  }
+
   @action
   updateIndex(index: string) {
     this.index = index;

app/scenes/Document/components/DataLoader.tsx

@@ -57,7 +57,7 @@ function DataLoader({ match, children }: Props) {
     : undefined;
   const isEditRoute = match.path === matchDocumentEdit;
   const isEditing = isEditRoute || !!auth.team?.collaborativeEditing;
-  const can = usePolicy(document);
+  const can = usePolicy(document?.id);
   const location = useLocation<LocationState>();
 
   React.useEffect(() => {

app/stores/BaseStore.ts

@@ -113,8 +113,8 @@ export default abstract class BaseStore<T extends BaseModel> {
   };
 
   @action
-  remove(id: string): boolean {
-    return this.data.delete(id);
+  remove(id: string): void {
+    this.data.delete(id);
   }
 
   save(

app/types.ts

@@ -188,6 +188,11 @@ export type WebsocketEntityDeletedEvent = {
   modelId: string;
 };
 
+export type WebsocketDocumentDeletedEvent = WebsocketEntityDeletedEvent & {
+  modelId: string;
+  collectionId: string;
+};
+
 export type WebsocketEntitiesEvent = {
   documentIds: { id: string; updatedAt?: string }[];
   collectionIds: { id: string; updatedAt?: string }[];