[Favorites] Disable button while updating (#8936)

* [Favorites] Disable button while updating Description --- Fixes #8933 Risks --- na Deploy --- front * hover full * better hover handling
dust-tt · Nov 27, 2024 · f944289 · f944289
1 parent 29e271d
commit f944289
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 13 deletions.
diff --git a/front/components/assistant/AssistantActions.tsx b/front/components/assistant/AssistantActions.tsx
@@ -21,7 +21,7 @@ export function RemoveAssistantFromFavoritesDialog({
   show: boolean;
   onClose: () => void;
 }) {
-  const doUpdate = useUpdateUserFavorite({
+  const { updateUserFavorite } = useUpdateUserFavorite({
     owner,
     agentConfigurationId: agentConfiguration.sId,
   });
@@ -34,7 +34,7 @@ export function RemoveAssistantFromFavoritesDialog({
       validateLabel="Remove"
       validateVariant="warning"
       onValidate={async () => {
-        void doUpdate(false);
+        void updateUserFavorite(false);
         onClose();
       }}
     >

diff --git a/front/components/assistant/AssistantDetailsButtonBar.tsx b/front/components/assistant/AssistantDetailsButtonBar.tsx
@@ -42,7 +42,7 @@ export function AssistantDetailsButtonBar({
   const [showDeletionModal, setShowDeletionModal] = useState(false);
   const router = useRouter();
 
-  const updateUserFavorite = useUpdateUserFavorite({
+  const { updateUserFavorite, isUpdatingFavorite } = useUpdateUserFavorite({
     owner,
     agentConfigurationId: agentConfiguration.sId,
   });
@@ -122,18 +122,24 @@ export function AssistantDetailsButtonBar({
     <div className="flex flex-row items-center gap-2 px-1.5">
       <div className="group">
         <Button
-          icon={agentConfiguration.userFavorite ? StarIcon : StarStrokeIcon}
+          icon={
+            agentConfiguration.userFavorite || isUpdatingFavorite
+              ? StarIcon
+              : StarStrokeIcon
+          }
           size="sm"
           className="group-hover:hidden"
           variant="outline"
+          disabled={isUpdatingFavorite}
           onClick={() => updateUserFavorite(!agentConfiguration.userFavorite)}
         />
 
         <Button
-          icon={agentConfiguration.userFavorite ? StarStrokeIcon : StarIcon}
+          icon={StarIcon}
           size="sm"
           className="hidden group-hover:block"
           variant="outline"
+          disabled={isUpdatingFavorite}
           onClick={() => updateUserFavorite(!agentConfiguration.userFavorite)}
         />
       </div>

diff --git a/front/components/assistant/AssistantDropdownMenu.tsx b/front/components/assistant/AssistantDropdownMenu.tsx
@@ -48,13 +48,12 @@ export function AssistantDropdownMenu({
   isMoreInfoVisible,
   showAddRemoveToFavorite = false,
 }: AssistantDetailsMenuProps) {
-  const [isUpdatingFavorites, setIsUpdatingFavorite] = useState(false);
   const [showDeletionModal, setShowDeletionModal] = useState(false);
 
   const router = useRouter();
 
   const { user } = useUser();
-  const doFavoriteUpdate = useUpdateUserFavorite({
+  const { updateUserFavorite, isUpdatingFavorite } = useUpdateUserFavorite({
     owner,
     agentConfigurationId: agentConfiguration.sId,
   });
@@ -79,9 +78,7 @@ export function AssistantDropdownMenu({
   const allowDeletion = canDelete && (isBuilder(owner) || !isAgentWorkspace);
 
   const updateFavorite = async (favorite: boolean) => {
-    setIsUpdatingFavorite(true);
-    await doFavoriteUpdate(favorite);
-    setIsUpdatingFavorite(false);
+    await updateUserFavorite(favorite);
   };
 
   const dropdownButton = (() => {
@@ -163,7 +160,7 @@ export function AssistantDropdownMenu({
             <DropdownMenuItem
               label={isFavorite ? "Remove from favorites" : "Add to favorites"}
               icon={isFavorite ? StarIcon : StarStrokeIcon}
-              disabled={isUpdatingFavorites}
+              disabled={isUpdatingFavorite}
               onClick={async (e) => {
                 e.stopPropagation();
                 await updateFavorite(!isFavorite);

diff --git a/front/lib/swr/assistants.ts b/front/lib/swr/assistants.ts
@@ -6,7 +6,7 @@ import type {
   LightAgentConfigurationType,
   LightWorkspaceType,
 } from "@dust-tt/types";
-import { useCallback, useMemo } from "react";
+import { useCallback, useMemo, useState } from "react";
 import type { Fetcher } from "swr";
 import { useSWRConfig } from "swr";
 
@@ -426,8 +426,11 @@ export function useUpdateUserFavorite({
       disabled: true,
     });
 
+  const [isUpdatingFavorite, setIsUpdatingFavorite] = useState(false);
+
   const doUpdate = useCallback(
     async (userFavorite: boolean) => {
+      setIsUpdatingFavorite(true);
       try {
         const body: PostAgentUserFavoriteRequestBody = {
           agentId: agentConfigurationId,
@@ -471,6 +474,8 @@ export function useUpdateUserFavorite({
           type: "error",
         });
         return false;
+      } finally {
+        setIsUpdatingFavorite(false);
       }
     },
     [
@@ -481,5 +486,5 @@ export function useUpdateUserFavorite({
       sendNotification,
     ]
   );
-  return doUpdate;
+  return { updateUserFavorite: doUpdate, isUpdatingFavorite };
 }