fix: Update local storage when creating/deleting pins (#8504)

* fix: Update local storage when creating/deleting pins

* reuse

* use urlId

app/hooks/usePinnedDocuments.ts

@@ -2,13 +2,14 @@ import * as React from "react";
 import usePersistedState from "~/hooks/usePersistedState";
 import useStores from "./useStores";
 
-export function usePinnedDocuments(
-  urlId: "home" | string,
-  collectionId?: string
-) {
+type UrlId = "home" | string;
+
+export const pinsCacheKey = (urlId: UrlId) => `pins-${urlId}`;
+
+export function usePinnedDocuments(urlId: UrlId, collectionId?: string) {
   const { pins } = useStores();
   const [pinsCacheCount, setPinsCacheCount] = usePersistedState<number>(
-    `pins-${urlId}`,
+    pinsCacheKey(urlId),
     0
   );
 

app/models/Document.ts

@@ -27,6 +27,7 @@ import { client } from "~/utils/ApiClient";
 import { settingsPath } from "~/utils/routeHelpers";
 import Collection from "./Collection";
 import Notification from "./Notification";
+import Pin from "./Pin";
 import View from "./View";
 import ArchivableModel from "./base/ArchivableModel";
 import Field from "./decorators/Field";
@@ -465,12 +466,17 @@ export default class Document extends ArchivableModel implements Searchable {
   };
 
   @action
-  pin = (collectionId?: string | null) =>
-    this.store.rootStore.pins.create({
+  pin = async (collectionId?: string | null) => {
+    const pin = new Pin({}, this.store.rootStore.pins);
+
+    await pin.save({
       documentId: this.id,
       ...(collectionId ? { collectionId } : {}),
     });
 
+    return pin;
+  };
+
   @action
   unpin = (collectionId?: string) => {
     const pin = this.store.rootStore.pins.orderedData.find(

app/models/Pin.ts

@@ -1,8 +1,12 @@
 import { observable } from "mobx";
+import PinsStore from "~/stores/PinsStore";
+import { setPersistedState } from "~/hooks/usePersistedState";
+import { pinsCacheKey } from "~/hooks/usePinnedDocuments";
 import Collection from "./Collection";
 import Document from "./Document";
 import Model from "./base/Model";
 import Field from "./decorators/Field";
+import { AfterCreate, AfterDelete, AfterRemove } from "./decorators/Lifecycle";
 import Relation from "./decorators/Relation";
 
 class Pin extends Model {
@@ -26,6 +30,29 @@ class Pin extends Model {
   @observable
   @Field
   index: string;
+
+  @AfterCreate
+  @AfterDelete
+  @AfterRemove
+  static updateCache(model: Pin) {
+    const pins = model.store as PinsStore;
+
+    const isHome = !model.collectionId;
+    if (isHome) {
+      setPersistedState(pinsCacheKey("home"), pins.home.length);
+      return;
+    }
+
+    const collection = pins.rootStore.collections.get(model.collectionId);
+    if (!collection) {
+      return;
+    }
+
+    setPersistedState(
+      pinsCacheKey(collection.urlId),
+      pins.inCollection(collection.id).length
+    );
+  }
 }
 
 export default Pin;

app/scenes/Collection/index.tsx

@@ -73,10 +73,13 @@ const CollectionScene = observer(function _CollectionScene() {
   const sidebarContext = useLocationSidebarContext();
 
   const id = params.id || "";
+  const urlId = id.split("-").pop() ?? "";
+
   const collection: Collection | null | undefined =
     collections.getByUrl(id) || collections.get(id);
   const can = usePolicy(collection);
-  const { pins, count } = usePinnedDocuments(id, collection?.id);
+
+  const { pins, count } = usePinnedDocuments(urlId, collection?.id);
   const [collectionTab, setCollectionTab] = usePersistedState<CollectionPath>(
     `collection-tab:${collection?.id}`,
     collection?.hasDescription