fix(web): avoid redundant queries for unchanged reviewers (#1318)

* impl * fix: e2e test * fix: remove refetchQueries
reearth · Nov 25, 2024 · e1b0079 · e1b0079
1 parent d5919ef
commit e1b0079
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 39 deletions.
diff --git a/web/e2e/project/request.spec.ts b/web/e2e/project/request.spec.ts
@@ -45,7 +45,6 @@ test("Request creating, searching, updating reviewer, and approving has succeede
   await page.locator(".ant-select-selection-overflow").click();
   await page.locator(".ant-select-item").click();
   await page.getByRole("heading", { name: "Reviewer" }).click();
-  await closeNotification(page);
   await page.getByRole("button", { name: "Approve" }).click();
   await closeNotification(page);
   await expect(page.locator("tbody").getByText(requestTitle, { exact: true })).toBeHidden();

diff --git a/web/src/components/molecules/Request/Details/SidebarWrapper.tsx b/web/src/components/molecules/Request/Details/SidebarWrapper.tsx
@@ -54,7 +54,9 @@ const RequestSidebarWrapper: React.FC<Props> = ({
 
   const handleSubmit: FocusEventHandler<HTMLElement> | undefined = useCallback(async () => {
     const requestId = currentRequest?.id;
-    if (!requestId || selectedReviewers.length === 0) {
+    const isEqual =
+      JSON.stringify([...defaultValue].sort()) === JSON.stringify([...selectedReviewers].sort());
+    if (!requestId || selectedReviewers.length === 0 || isEqual) {
       hideViewReviewers();
       return;
     }
@@ -77,6 +79,7 @@ const RequestSidebarWrapper: React.FC<Props> = ({
     currentRequest?.id,
     currentRequest?.state,
     currentRequest?.title,
+    defaultValue,
     hideViewReviewers,
     onRequestUpdate,
     selectedReviewers,

diff --git a/web/src/components/organisms/Project/Content/ContentDetails/hooks.ts b/web/src/components/organisms/Project/Content/ContentDetails/hooks.ts
@@ -10,11 +10,7 @@ import {
   ItemField,
 } from "@reearth-cms/components/molecules/Content/types";
 import { Model } from "@reearth-cms/components/molecules/Model/types";
-import {
-  RequestUpdatePayload,
-  RequestState,
-  RequestItem,
-} from "@reearth-cms/components/molecules/Request/types";
+import { RequestState, RequestItem } from "@reearth-cms/components/molecules/Request/types";
 import { Group, Field } from "@reearth-cms/components/molecules/Schema/types";
 import { UserMember } from "@reearth-cms/components/molecules/Workspace/types";
 import { fromGraphQLItem } from "@reearth-cms/components/organisms/DataConverters/content";
@@ -32,7 +28,6 @@ import {
   useGetModelLazyQuery,
   useGetMeQuery,
   useUpdateItemMutation,
-  useUpdateRequestMutation,
   useSearchItemQuery,
   useGetGroupLazyQuery,
   FieldType as GQLFieldType,
@@ -532,32 +527,6 @@ export default () => {
     [createRequestMutation, currentProject?.id, t],
   );
 
-  const [updateRequestMutation, { loading: updateRequestLoading }] = useUpdateRequestMutation({
-    refetchQueries: ["GetRequests"],
-  });
-
-  const handleRequestUpdate = useCallback(
-    async (data: RequestUpdatePayload) => {
-      if (!data.requestId) return;
-      const request = await updateRequestMutation({
-        variables: {
-          requestId: data.requestId,
-          title: data.title,
-          description: data.description,
-          state: data.state as GQLRequestState,
-          reviewersId: data.reviewersId,
-          items: data.items,
-        },
-      });
-      if (request.errors || !request.data?.updateRequest) {
-        Notification.error({ message: t("Failed to update request.") });
-        return;
-      }
-      Notification.success({ message: t("Successfully updated request!") });
-      setRequestModalShown(false);
-    },
-    [updateRequestMutation, t],
-  );
   const handleModalClose = useCallback(() => setRequestModalShown(false), []);
 
   const handleModalOpen = useCallback(() => setRequestModalShown(true), []);
@@ -649,8 +618,6 @@ export default () => {
     handleNavigateToRequest,
     handleBack,
     handleRequestCreate,
-    updateRequestLoading,
-    handleRequestUpdate,
     handleModalClose,
     handleModalOpen,
     handleAddItemToRequestModalClose,

diff --git a/web/src/components/organisms/Project/Request/RequestDetails/hooks.ts b/web/src/components/organisms/Project/Request/RequestDetails/hooks.ts
@@ -3,9 +3,10 @@ import { useNavigate, useParams, useLocation } from "react-router-dom";
 
 import Notification from "@reearth-cms/components/atoms/Notification";
 import { User } from "@reearth-cms/components/molecules/AccountSettings/types";
-import { Request } from "@reearth-cms/components/molecules/Request/types";
+import { Request, RequestUpdatePayload } from "@reearth-cms/components/molecules/Request/types";
 import { fromGraphQLRequest } from "@reearth-cms/components/organisms/DataConverters/content";
 import {
+  useUpdateRequestMutation,
   useDeleteRequestMutation,
   useApproveRequestMutation,
   useAddCommentMutation,
@@ -14,6 +15,7 @@ import {
   useDeleteCommentMutation,
   useGetRequestQuery,
   Request as GQLRequest,
+  RequestState as GQLRequestState,
 } from "@reearth-cms/gql/graphql-client-api";
 import { useT } from "@reearth-cms/i18n";
 import { useProject, useWorkspace, useUserRights } from "@reearth-cms/state";
@@ -96,6 +98,30 @@ export default () => {
     [currentRequest?.createdBy?.id, currentRequest?.state, me?.id, userRights?.request.update],
   );
 
+  const [updateRequestMutation, { loading: updateRequestLoading }] = useUpdateRequestMutation();
+
+  const handleRequestUpdate = useCallback(
+    async (data: RequestUpdatePayload) => {
+      if (!data.requestId) return;
+      const request = await updateRequestMutation({
+        variables: {
+          requestId: data.requestId,
+          title: data.title,
+          description: data.description,
+          state: data.state as GQLRequestState,
+          reviewersId: data.reviewersId,
+          items: data.items,
+        },
+      });
+      if (request.errors || !request.data?.updateRequest) {
+        Notification.error({ message: t("Failed to update request.") });
+        return;
+      }
+      Notification.success({ message: t("Successfully updated request!") });
+    },
+    [updateRequestMutation, t],
+  );
+
   const [deleteRequestMutation, { loading: deleteLoading }] = useDeleteRequestMutation();
   const handleRequestDelete = useCallback(
     (requestsId: string[]) =>
@@ -227,9 +253,11 @@ export default () => {
     isApproveActionEnabled,
     isAssignActionEnabled,
     loading,
+    updateRequestLoading,
     deleteLoading,
     approveLoading,
     currentRequest,
+    handleRequestUpdate,
     handleRequestDelete,
     handleRequestApprove,
     handleCommentCreate,

diff --git a/web/src/components/organisms/Project/Request/RequestDetails/index.tsx b/web/src/components/organisms/Project/Request/RequestDetails/index.tsx
@@ -16,8 +16,10 @@ const RequestDetails: React.FC = () => {
     isAssignActionEnabled,
     currentRequest,
     loading,
+    updateRequestLoading,
     deleteLoading,
     approveLoading,
+    handleRequestUpdate,
     handleRequestApprove,
     handleRequestDelete,
     handleCommentCreate,
@@ -29,8 +31,7 @@ const RequestDetails: React.FC = () => {
 
   const { handleGetAsset } = useAssetHooks(false);
 
-  const { workspaceUserMembers, updateRequestLoading, handleRequestUpdate, handleGroupGet } =
-    useContentHooks();
+  const { workspaceUserMembers, handleGroupGet } = useContentHooks();
 
   return (
     <RequestDetailsMolecule