chore: Improve relationship loading, include policies (#6321)

Use model where available in usePolicy

app/scenes/Collection.tsx

@@ -55,7 +55,7 @@ function CollectionScene() {
   const id = params.id || "";
   const collection: Collection | null | undefined =
     collections.getByUrl(id) || collections.get(id);
-  const can = usePolicy(collection?.id || "");
+  const can = usePolicy(collection);
 
   React.useEffect(() => {
     setLastVisitedPath(currentPath);

app/scenes/Document/Shared.tsx

@@ -102,7 +102,7 @@ function SharedDocumentScene(props: Props) {
   )
     ? (searchParams.get("theme") as Theme)
     : undefined;
-  const can = usePolicy(response?.document.id ?? "");
+  const can = usePolicy(response?.document);
   const theme = useBuildTheme(response?.team?.customTheme, themeOverride);
 
   React.useEffect(() => {

app/scenes/Document/components/CommentThread.tsx

@@ -71,7 +71,7 @@ function CommentThread({
     document,
     comment: thread,
   });
-  const can = usePolicy(document.id);
+  const can = usePolicy(document);
 
   const commentsInThread = comments
     .inThread(thread.id)

app/scenes/Document/components/Comments.tsx

@@ -23,7 +23,7 @@ function Comments() {
   const match = useRouteMatch<{ documentSlug: string }>();
   const document = documents.getByUrl(match.params.documentSlug);
   const focusedComment = useFocusedComment();
-  const can = usePolicy(document?.id);
+  const can = usePolicy(document);
 
   useKeyDown("Escape", () => document && ui.collapseComments(document?.id));
 

app/scenes/Document/components/DataLoader.tsx

@@ -78,7 +78,7 @@ function DataLoader({ match, children }: Props) {
   const isEditRoute =
     match.path === matchDocumentEdit || match.path.startsWith(settingsPath());
   const isEditing = isEditRoute || !user?.separateEditMode;
-  const can = usePolicy(document?.id);
+  const can = usePolicy(document);
   const location = useLocation<LocationState>();
 
   React.useEffect(() => {

app/scenes/Document/components/DocumentMeta.tsx

@@ -32,7 +32,7 @@ function TitleDocumentMeta({ to, document, revision, ...rest }: Props) {
   const totalViewers = documentViews.length;
   const onlyYou = totalViewers === 1 && documentViews[0].userId;
   const viewsLoadedOnMount = React.useRef(totalViewers > 0);
-  const can = usePolicy(document.id);
+  const can = usePolicy(document);
 
   const Wrapper = viewsLoadedOnMount.current ? React.Fragment : Fade;
 

app/scenes/Document/components/DocumentTitle.tsx

@@ -73,7 +73,6 @@ const DocumentTitle = React.forwardRef(function _DocumentTitle(
   const ref = React.useRef<RefHandle>(null);
   const [emojiPickerIsOpen, handleOpen, handleClose] = useBoolean();
   const { editor } = useDocumentContext();
-
   const can = usePolicy(documentId);
 
   const handleClick = React.useCallback(() => {

app/scenes/Document/components/Editor.tsx

@@ -78,7 +78,7 @@ function DocumentEditor(props: Props, ref: React.RefObject<any>) {
     multiplayer,
     ...rest
   } = props;
-  const can = usePolicy(document.id);
+  const can = usePolicy(document);
 
   const childRef = React.useRef<HTMLDivElement>(null);
   const focusAtStart = React.useCallback(() => {

app/scenes/Document/components/Header.tsx

@@ -111,7 +111,7 @@ function DocumentHeader({
   });
 
   const { isDeleted, isTemplate } = document;
-  const can = usePolicy(document?.id);
+  const can = usePolicy(document);
   const canToggleEmbeds = team?.documentEmbeds;
   const toc = (
     <Tooltip

app/scenes/Document/components/SharePopover.tsx

@@ -58,7 +58,7 @@ function SharePopover({
   const [urlSlug, setUrlSlug] = React.useState("");
   const timeout = React.useRef<ReturnType<typeof setTimeout>>();
   const buttonRef = React.useRef<HTMLButtonElement>(null);
-  const can = usePolicy(share ? share.id : "");
+  const can = usePolicy(share);
   const documentAbilities = usePolicy(document);
   const collection = document.collectionId
     ? collections.get(document.collectionId)