Set subscribe/unsubscribe state correctly for documents (#4266)

app/hooks/useRequest.ts

@@ -0,0 +1,43 @@
+import * as React from "react";
+
+type RequestResponse<T> = {
+  /** The return value of the request function. */
+  data: T | undefined;
+  /** The request error, if any. */
+  error: unknown;
+  /** Whether the request is currently in progress. */
+  loading: boolean;
+  /** Function to start the request. */
+  request: () => Promise<T | undefined>;
+};
+
+/**
+ * A hook to make an API request and track its state within a component.
+ *
+ * @param requestFn The function to call to make the request, it should return a promise.
+ * @returns
+ */
+export default function useRequest<T = unknown>(
+  requestFn: () => Promise<T>
+): RequestResponse<T> {
+  const [data, setData] = React.useState<T>();
+  const [loading, setLoading] = React.useState<boolean>(false);
+  const [error, setError] = React.useState();
+
+  const request = React.useCallback(async () => {
+    setLoading(true);
+    try {
+      const response = await requestFn();
+      setData(response);
+      return response;
+    } catch (err) {
+      setError(err);
+    } finally {
+      setLoading(false);
+    }
+
+    return undefined;
+  }, [requestFn]);
+
+  return { data, loading, error, request };
+}

app/menus/DocumentMenu.tsx

@@ -43,6 +43,7 @@ import useActionContext from "~/hooks/useActionContext";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useMobile from "~/hooks/useMobile";
 import usePolicy from "~/hooks/usePolicy";
+import useRequest from "~/hooks/useRequest";
 import useStores from "~/hooks/useStores";
 import useToasts from "~/hooks/useToasts";
 import { MenuItem } from "~/types";
@@ -79,7 +80,7 @@ function DocumentMenu({
   onClose,
 }: Props) {
   const team = useCurrentTeam();
-  const { policies, collections, documents } = useStores();
+  const { policies, collections, documents, subscriptions } = useStores();
   const { showToast } = useToasts();
   const menu = useMenuState({
     modal,
@@ -96,6 +97,22 @@ function DocumentMenu({
   const { t } = useTranslation();
   const isMobile = useMobile();
   const file = React.useRef<HTMLInputElement>(null);
+  const { data, loading, request } = useRequest(() =>
+    subscriptions.fetchPage({
+      documentId: document.id,
+      event: "documents.update",
+    })
+  );
+
+  const handleOpen = React.useCallback(async () => {
+    if (!data && !loading) {
+      request();
+    }
+
+    if (onOpen) {
+      onOpen();
+    }
+  }, [data, loading, onOpen, request]);
 
   const handleRestore = React.useCallback(
     async (
@@ -219,7 +236,7 @@ function DocumentMenu({
       <ContextMenu
         {...menu}
         aria-label={t("Document options")}
-        onOpen={onOpen}
+        onOpen={handleOpen}
         onClose={onClose}
       >
         <Template