chore: Quick refactor to usePolicy hook (#3161)

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"),