From 8031b2906d2b90d7f4016965c8c91b5466ae2cc2 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Thu, 29 Aug 2024 11:26:12 -0400
Subject: [PATCH] fix: Assorted fixes from group memberships branch
 (tom/document-group-permissions)

---
 app/components/DocumentBreadcrumb.tsx |  4 +++-
 app/components/PlaceholderText.tsx    | 15 +++++++++++----
 app/models/base/Model.ts              |  5 ++++-
 app/scenes/Collection/index.tsx       |  5 +----
 app/stores/base/Store.ts              | 14 ++++++++------
 5 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/app/components/DocumentBreadcrumb.tsx b/app/components/DocumentBreadcrumb.tsx
index 96da0d700f..60bc7c1314 100644
--- a/app/components/DocumentBreadcrumb.tsx
+++ b/app/components/DocumentBreadcrumb.tsx
@@ -8,6 +8,7 @@ import Document from "~/models/Document";
 import Breadcrumb from "~/components/Breadcrumb";
 import Icon from "~/components/Icon";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
+import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import { MenuInternalLink } from "~/types";
 import {
@@ -67,6 +68,7 @@ const DocumentBreadcrumb: React.FC<Props> = ({
   const collection = document.collectionId
     ? collections.get(document.collectionId)
     : undefined;
+  const can = usePolicy(collection);
 
   React.useEffect(() => {
     void document.loadRelations();
@@ -74,7 +76,7 @@ const DocumentBreadcrumb: React.FC<Props> = ({
 
   let collectionNode: MenuInternalLink | undefined;
 
-  if (collection) {
+  if (collection && can.readDocument) {
     collectionNode = {
       type: "route",
       title: collection.name,
diff --git a/app/components/PlaceholderText.tsx b/app/components/PlaceholderText.tsx
index 4785fbb69f..9d961a1276 100644
--- a/app/components/PlaceholderText.tsx
+++ b/app/components/PlaceholderText.tsx
@@ -5,8 +5,9 @@ import { s } from "@shared/styles";
 import Flex from "~/components/Flex";
 import { pulsate } from "~/styles/animations";
 
-export type Props = {
+export type Props = React.ComponentProps<typeof Flex> & {
   header?: boolean;
+  width?: number;
   height?: number;
   minWidth?: number;
   maxWidth?: number;
@@ -17,16 +18,22 @@ function PlaceholderText({ minWidth, maxWidth, ...restProps }: Props) {
   // We only want to compute the width once so we are storing it inside ref
   const widthRef = React.useRef(randomInteger(minWidth || 75, maxWidth || 100));
 
-  return <Mask width={widthRef.current} {...restProps} />;
+  return (
+    <Mask
+      width={`${widthRef.current / (restProps.header ? 2 : 1)}%`}
+      {...restProps}
+    />
+  );
 }
 
 const Mask = styled(Flex)<{
-  width: number;
+  width: number | string;
   height?: number;
   delay?: number;
   header?: boolean;
 }>`
-  width: ${(props) => (props.header ? props.width / 2 : props.width)}%;
+  width: ${(props) =>
+    typeof props.width === "number" ? `${props.width}px` : props.width};
   height: ${(props) =>
     props.height ? props.height : props.header ? 24 : 18}px;
   margin-bottom: 6px;
diff --git a/app/models/base/Model.ts b/app/models/base/Model.ts
index 679bbed7fb..13fb87b524 100644
--- a/app/models/base/Model.ts
+++ b/app/models/base/Model.ts
@@ -58,7 +58,10 @@ export default abstract class Model {
         properties.relationClassResolver().modelName
       );
       if ("fetch" in store) {
-        promises.push(store.fetch(this[properties.idKey]));
+        const id = this[properties.idKey];
+        if (id) {
+          promises.push(store.fetch(id));
+        }
       }
     }
 
diff --git a/app/scenes/Collection/index.tsx b/app/scenes/Collection/index.tsx
index 095ebc045a..16576102d8 100644
--- a/app/scenes/Collection/index.tsx
+++ b/app/scenes/Collection/index.tsx
@@ -113,10 +113,7 @@ function CollectionScene() {
     void fetchData();
   }, [collections, isFetching, collection, error, id, can]);
 
-  useCommandBarActions(
-    [editCollection],
-    ui.activeCollectionId ? [ui.activeCollectionId] : undefined
-  );
+  useCommandBarActions([editCollection], [ui.activeCollectionId ?? "none"]);
 
   if (!collection && error) {
     return <Search notFound />;
diff --git a/app/stores/base/Store.ts b/app/stores/base/Store.ts
index 567897d627..5e470c2106 100644
--- a/app/stores/base/Store.ts
+++ b/app/stores/base/Store.ts
@@ -104,6 +104,11 @@ export default abstract class Store<T extends Model> {
 
   @action
   remove(id: string): void {
+    const model = this.data.get(id);
+    if (!model) {
+      return;
+    }
+
     const inverseRelations = getInverseRelationsForModelClass(this.model);
 
     inverseRelations.forEach((relation) => {
@@ -134,12 +139,9 @@ export default abstract class Store<T extends Model> {
       this.rootStore.policies.remove(id);
     }
 
-    const model = this.data.get(id);
-    if (model) {
-      LifecycleManager.executeHooks(model.constructor, "beforeRemove", model);
-      this.data.delete(id);
-      LifecycleManager.executeHooks(model.constructor, "afterRemove", model);
-    }
+    LifecycleManager.executeHooks(model.constructor, "beforeRemove", model);
+    this.data.delete(id);
+    LifecycleManager.executeHooks(model.constructor, "afterRemove", model);
   }
 
   /**