chore: Quick refactor to usePolicy hook (#3161)

app/components/CollectionDescription.tsx

@@ -10,6 +10,7 @@ import Editor from "~/components/Editor";
 import LoadingIndicator from "~/components/LoadingIndicator";
 import NudeButton from "~/components/NudeButton";
 import useDebouncedCallback from "~/hooks/useDebouncedCallback";
+import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import useToasts from "~/hooks/useToasts";
 
@@ -18,13 +19,13 @@ type Props = {
 };
 
 function CollectionDescription({ collection }: Props) {
-  const { collections, policies } = useStores();
+  const { collections } = useStores();
   const { showToast } = useToasts();
   const { t } = useTranslation();
   const [isExpanded, setExpanded] = React.useState(false);
   const [isEditing, setEditing] = React.useState(false);
   const [isDirty, setDirty] = React.useState(false);
-  const can = policies.abilities(collection.id);
+  const can = usePolicy(collection.id);
 
   const handleStartEditing = React.useCallback(() => {
     setEditing(true);

app/components/DocumentListItem.tsx

@@ -17,7 +17,7 @@ import Tooltip from "~/components/Tooltip";
 import useBoolean from "~/hooks/useBoolean";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useCurrentUser from "~/hooks/useCurrentUser";
-import useStores from "~/hooks/useStores";
+import usePolicy from "~/hooks/usePolicy";
 import DocumentMenu from "~/menus/DocumentMenu";
 import { hover } from "~/styles";
 import { newDocumentPath } from "~/utils/routeHelpers";
@@ -46,7 +46,6 @@ function DocumentListItem(
   ref: React.RefObject<HTMLAnchorElement>
 ) {
   const { t } = useTranslation();
-  const { policies } = useStores();
   const currentUser = useCurrentUser();
   const currentTeam = useCurrentTeam();
   const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
@@ -67,8 +66,8 @@ function DocumentListItem(
     !!document.title.toLowerCase().includes(highlight.toLowerCase());
   const canStar =
     !document.isDraft && !document.isArchived && !document.isTemplate;
-  const can = policies.abilities(currentTeam.id);
-  const canCollection = policies.abilities(document.collectionId);
+  const can = usePolicy(currentTeam.id);
+  const canCollection = usePolicy(document.collectionId);
 
   return (
     <DocumentLink

app/components/EventListItem.tsx

@@ -15,7 +15,7 @@ import Event from "~/models/Event";
 import Avatar from "~/components/Avatar";
 import Item, { Actions } from "~/components/List/Item";
 import Time from "~/components/Time";
-import useStores from "~/hooks/useStores";
+import usePolicy from "~/hooks/usePolicy";
 import RevisionMenu from "~/menus/RevisionMenu";
 import { documentHistoryUrl } from "~/utils/routeHelpers";
 
@@ -27,9 +27,8 @@ type Props = {
 
 const EventListItem = ({ event, latest, document }: Props) => {
   const { t } = useTranslation();
-  const { policies } = useStores();
   const location = useLocation();
-  const can = policies.abilities(document.id);
+  const can = usePolicy(document.id);
   const opts = {
     userName: event.actor.name,
   };

app/components/Sidebar/App.tsx

@@ -13,6 +13,7 @@ import Text from "~/components/Text";
 import { inviteUser } from "~/actions/definitions/users";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useCurrentUser from "~/hooks/useCurrentUser";
+import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import AccountMenu from "~/menus/AccountMenu";
 import OrganizationMenu from "~/menus/OrganizationMenu";
@@ -36,12 +37,13 @@ import TrashLink from "./components/TrashLink";
 
 function AppSidebar() {
   const { t } = useTranslation();
-  const { ui, policies, documents } = useStores();
+  const { ui, documents } = useStores();
   const team = useCurrentTeam();
   const user = useCurrentUser();
   const { query } = useKBar();
   const location = useLocation();
   const history = useHistory();
+  const can = usePolicy(team.id);
 
   React.useEffect(() => {
     documents.fetchDrafts();
@@ -56,7 +58,6 @@ function AppSidebar() {
     }),
     [dndArea]
   );
-  const can = policies.abilities(team.id);
 
   const handleSearch = React.useCallback(() => {
     const isSearching = location.pathname.startsWith(searchPath());

app/components/Sidebar/Settings.tsx

@@ -23,7 +23,7 @@ import SlackIcon from "~/components/SlackIcon";
 import ZapierIcon from "~/components/ZapierIcon";
 import env from "~/env";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
-import useStores from "~/hooks/useStores";
+import usePolicy from "~/hooks/usePolicy";
 import Sidebar from "./Sidebar";
 import Header from "./components/Header";
 import Section from "./components/Section";
@@ -37,8 +37,7 @@ function SettingsSidebar() {
   const { t } = useTranslation();
   const history = useHistory();
   const team = useCurrentTeam();
-  const { policies } = useStores();
-  const can = policies.abilities(team.id);
+  const can = usePolicy(team.id);
 
   const returnToApp = React.useCallback(() => {
     history.push("/home");

app/components/Sidebar/components/CollectionLink.tsx

@@ -12,6 +12,7 @@ import DocumentReparent from "~/scenes/DocumentReparent";
 import CollectionIcon from "~/components/CollectionIcon";
 import Modal from "~/components/Modal";
 import useBoolean from "~/hooks/useBoolean";
+import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import CollectionMenu from "~/menus/CollectionMenu";
 import CollectionSortMenu from "~/menus/CollectionSortMenu";
@@ -65,7 +66,7 @@ function CollectionLink({
     setIsEditing(isEditing);
   }, []);
 
-  const { ui, documents, policies, collections } = useStores();
+  const { ui, documents, collections } = useStores();
   const [expanded, setExpanded] = React.useState(
     collection.id === ui.activeCollectionId
   );
@@ -78,7 +79,7 @@ function CollectionLink({
   }, [expanded]);
 
   const manualSort = collection.sort.field === "index";
-  const can = policies.abilities(collection.id);
+  const can = usePolicy(collection.id);
   const belowCollectionIndex = belowCollection ? belowCollection.index : null;
 
   // Drop to re-parent document
@@ -112,7 +113,7 @@ function CollectionLink({
       }
     },
     canDrop: () => {
-      return policies.abilities(collection.id).update;
+      return can.update;
     },
     collect: (monitor) => ({
       isOver: !!monitor.isOver({

app/components/Sidebar/components/DropToImport.tsx

@@ -6,6 +6,7 @@ import { useTranslation } from "react-i18next";
 import styled, { css } from "styled-components";
 import LoadingIndicator from "~/components/LoadingIndicator";
 import useImportDocument from "~/hooks/useImportDocument";
+import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import useToasts from "~/hooks/useToasts";
 
@@ -19,7 +20,7 @@ type Props = {
 
 function DropToImport({ disabled, children, collectionId, documentId }: Props) {
   const { t } = useTranslation();
-  const { documents, policies } = useStores();
+  const { documents } = useStores();
   const { showToast } = useToasts();
   const { handleFiles, isImporting } = useImportDocument(
     collectionId,
@@ -28,7 +29,7 @@ function DropToImport({ disabled, children, collectionId, documentId }: Props) {
   const targetId = collectionId || documentId;
   invariant(targetId, "Must provide either collectionId or documentId");
 
-  const can = policies.abilities(targetId);
+  const can = usePolicy(targetId);
   const handleRejection = React.useCallback(() => {
     showToast(
       t("Document not supported – try Markdown, Plain text, HTML, or Word"),