Allow usePolicy to fetch missing policies

app/components/CollectionDescription.tsx

@@ -25,7 +25,7 @@ function CollectionDescription({ collection }: Props) {
   const [isExpanded, setExpanded] = React.useState(false);
   const [isEditing, setEditing] = React.useState(false);
   const [isDirty, setDirty] = React.useState(false);
-  const can = usePolicy(collection.id);
+  const can = usePolicy(collection);
 
   const handleStartEditing = React.useCallback(() => {
     setEditing(true);

app/components/DocumentListItem.tsx

@@ -49,8 +49,8 @@ function DocumentListItem(
   ref: React.RefObject<HTMLAnchorElement>
 ) {
   const { t } = useTranslation();
-  const currentUser = useCurrentUser();
-  const currentTeam = useCurrentTeam();
+  const user = useCurrentUser();
+  const team = useCurrentTeam();
   const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
 
   const {
@@ -70,7 +70,7 @@ function DocumentListItem(
     !!document.title.toLowerCase().includes(highlight.toLowerCase());
   const canStar =
     !document.isDraft && !document.isArchived && !document.isTemplate;
-  const can = usePolicy(currentTeam.id);
+  const can = usePolicy(team);
   const canCollection = usePolicy(document.collectionId);
 
   return (
@@ -96,7 +96,7 @@ function DocumentListItem(
             highlight={highlight}
             dir={document.dir}
           />
-          {document.isBadgedNew && document.createdBy.id !== currentUser.id && (
+          {document.isBadgedNew && document.createdBy.id !== user.id && (
             <Badge yellow>{t("New")}</Badge>
           )}
           {canStar && (

app/components/EventListItem.tsx

@@ -33,7 +33,7 @@ type Props = {
 const EventListItem = ({ event, latest, document, ...rest }: Props) => {
   const { t } = useTranslation();
   const location = useLocation();
-  const can = usePolicy(document.id);
+  const can = usePolicy(document);
   const opts = {
     userName: event.actor.name,
   };

app/components/Sidebar/App.tsx

@@ -36,7 +36,7 @@ function AppSidebar() {
   const { documents } = useStores();
   const team = useCurrentTeam();
   const user = useCurrentUser();
-  const can = usePolicy(team.id);
+  const can = usePolicy(team);
 
   React.useEffect(() => {
     if (!user.isViewer) {

app/components/Sidebar/components/CollectionLink.tsx

@@ -44,7 +44,7 @@ const CollectionLink: React.FC<Props> = ({
   const { dialogs, documents, collections } = useStores();
   const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
   const [isEditing, setIsEditing] = React.useState(false);
-  const canUpdate = usePolicy(collection.id).update;
+  const canUpdate = usePolicy(collection).update;
   const { t } = useTranslation();
   const history = useHistory();
   const inStarredSection = useStarredContext();

app/components/Sidebar/components/CollectionLinkChildren.tsx

@@ -25,7 +25,7 @@ function CollectionLinkChildren({
   expanded,
   prefetchDocument,
 }: Props) {
-  const can = usePolicy(collection.id);
+  const can = usePolicy(collection);
   const { showToast } = useToasts();
   const manualSort = collection.sort.field === "index";
   const { documents } = useStores();

app/components/Sidebar/components/DraggableCollectionLink.tsx

@@ -39,7 +39,7 @@ function DraggableCollectionLink({
   const [expanded, setExpanded] = React.useState(
     collection.id === ui.activeCollectionId && !locationStateStarred
   );
-  const can = usePolicy(collection.id);
+  const can = usePolicy(collection);
   const belowCollectionIndex = belowCollection ? belowCollection.index : null;
 
   // Drop to reorder collection

app/components/SocketProvider.tsx

@@ -8,6 +8,7 @@ import RootStore from "~/stores/RootStore";
 import Collection from "~/models/Collection";
 import Document from "~/models/Document";
 import FileOperation from "~/models/FileOperation";
+import Group from "~/models/Group";
 import Pin from "~/models/Pin";
 import Star from "~/models/Star";
 import Team from "~/models/Team";
@@ -237,8 +238,7 @@ class SocketProvider extends React.Component<Props> {
     this.socket.on(
       "documents.update",
       (event: PartialWithId<Document> & { title: string; url: string }) => {
-        const document = documents.get(event.id);
-        document?.updateFromJson(event);
+        documents.patch(event);
 
         if (event.collectionId) {
           const collection = collections.get(event.collectionId);
@@ -264,6 +264,14 @@ class SocketProvider extends React.Component<Props> {
       }
     );
 
+    this.socket.on("groups.create", (event: PartialWithId<Group>) => {
+      groups.add(event);
+    });
+
+    this.socket.on("groups.update", (event: PartialWithId<Group>) => {
+      groups.patch(event);
+    });
+
     this.socket.on("groups.delete", (event: WebsocketEntityDeletedEvent) => {
       groups.remove(event.modelId);
     });
@@ -299,7 +307,7 @@ class SocketProvider extends React.Component<Props> {
     });
 
     this.socket.on("pins.update", (event: PartialWithId<Pin>) => {
-      pins.add(event);
+      pins.patch(event);
     });
 
     this.socket.on("pins.delete", (event: WebsocketEntityDeletedEvent) => {
@@ -311,7 +319,7 @@ class SocketProvider extends React.Component<Props> {
     });
 
     this.socket.on("stars.update", (event: PartialWithId<Star>) => {
-      stars.add(event);
+      stars.patch(event);
     });
 
     this.socket.on("stars.delete", (event: WebsocketEntityDeletedEvent) => {