refactor: store likes API (#2661)

* feat: create usePostLikeComponent hook to handle store like API

* refactor: use usePostLikeComponent hook to handle store likes

* [autofix.ci] apply automated fixes

* refactor: use mutate loading instead of managing loading with react state

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

src/frontend/src/components/cardComponent/hooks/use-handle-like.tsx

@@ -1,51 +0,0 @@
-import { postLikeComponent } from "../../../controllers/API";
-import { storeComponent } from "../../../types/store";
-
-const useLikeComponent = (
-  data: storeComponent,
-  name: string,
-  setLoadingLike: (value: boolean) => void,
-  likedByUser: boolean | null | undefined,
-  likesCount: number,
-  setLikedByUser: (value: any) => void,
-  setLikesCount: (value: any) => void,
-  setValidApiKey: (value: boolean) => void,
-  setErrorData: (value: { title: string; list: string[] }) => void,
-) => {
-  const handleLike = () => {
-    setLoadingLike(true);
-    if (likedByUser !== undefined || likedByUser !== null) {
-      const temp = likedByUser;
-      const tempNum = likesCount;
-      setLikedByUser((prev) => !prev);
-      setLikesCount((prev) => (temp ? prev - 1 : prev + 1));
-
-      postLikeComponent(data.id)
-        .then((response) => {
-          setLoadingLike(false);
-          setLikesCount(response.data.likes_count);
-          setLikedByUser(response.data.liked_by_user);
-        })
-        .catch((error) => {
-          setLoadingLike(false);
-          setLikesCount(tempNum);
-          setLikedByUser(temp);
-          if (error.response.status === 403) {
-            setValidApiKey(false);
-          } else {
-            console.error(error);
-            setErrorData({
-              title: `Error liking ${name}.`,
-              list: [error.response.data.detail],
-            });
-          }
-        });
-    }
-  };
-
-  return {
-    handleLike,
-  };
-};
-
-export default useLikeComponent;

src/frontend/src/components/cardComponent/index.tsx

@@ -1,3 +1,4 @@
+import { usePostLikeComponent } from "@/controllers/API/queries/store";
 import { useEffect, useState } from "react";
 import { createRoot } from "react-dom/client";
 import { Control } from "react-hook-form";
@@ -29,7 +30,6 @@ import { FormControl, FormField } from "../ui/form";
 import Loading from "../ui/loading";
 import useDataEffect from "./hooks/use-data-effect";
 import useInstallComponent from "./hooks/use-handle-install";
-import useLikeComponent from "./hooks/use-handle-like";
 import useDragStart from "./hooks/use-on-drag-start";
 import usePlaygroundEffect from "./hooks/use-playground-effect";
 import { convertTestName } from "./utils/convert-test-name";
@@ -61,7 +61,6 @@ export default function CollectionCardComponent({
   const cleanFlowPool = useFlowStore((state) => state.CleanFlowPool);
   const isStore = false;
   const [loading, setLoading] = useState(false);
-  const [loadingLike, setLoadingLike] = useState(false);
   const [likedByUser, setLikedByUser] = useState(data?.liked_by_user ?? false);
   const [likesCount, setLikesCount] = useState(data?.liked_by_count ?? 0);
   const [downloadsCount, setDownloadsCount] = useState(
@@ -123,17 +122,37 @@ export default function CollectionCardComponent({
     setErrorData,
   );
 
-  const { handleLike } = useLikeComponent(
+  const { mutate, isPending } = usePostLikeComponent();
-    data,
+
-    name,
+  const handleLikeWMutate = () => {
-    setLoadingLike,
+    if (likedByUser !== undefined || likedByUser !== null) {
-    likedByUser,
+      const temp = likedByUser;
-    likesCount,
+      const tempNum = likesCount;
-    setLikedByUser,
+      setLikedByUser((prev) => !prev);
-    setLikesCount,
+      setLikesCount((prev) => (temp ? prev - 1 : prev + 1));
-    setValidApiKey,
+      mutate(
-    setErrorData,
+        { componentId: data.id },
-  );
+        {
+          onSuccess: (res) => {
+            setLikesCount(res.data.likes_count);
+            setLikedByUser(res.data.liked_by_user);
+          },
+          onError: (error) => {
+            setLikesCount(tempNum);
+            setLikedByUser(temp);
+            if (error.response.status === 403) {
+              return setValidApiKey(false);
+            }
+            console.error(error);
+            setErrorData({
+              title: `Error liking ${name}.`,
+              list: [error.response.data.detail],
+            });
+          },
+        },
+      );
+    }
+  };
 
   const isSelectedCard =
     selectedFlowsComponentsCards?.includes(data?.id) ?? false;
@@ -365,7 +384,7 @@ export default function CollectionCardComponent({
                       }
                     >
                       <Button
-                        disabled={loadingLike}
+                        disabled={isPending}
                         variant="ghost"
                         size="icon"
                         className={
@@ -376,7 +395,7 @@ export default function CollectionCardComponent({
                           if (!authorized) {
                             return;
                           }
-                          handleLike();
+                          handleLikeWMutate();
                         }}
                         data-testid={`like-${data.name}`}
                       >

src/frontend/src/controllers/API/helpers/constants.ts

@@ -6,6 +6,7 @@ export const URLs = {
   FILES: `files`,
   VERSION: `version`,
   MESSAGES: `monitor/messages`,
+  STORE: `store`,
 } as const;
 
 export function getURL(key: keyof typeof URLs, params: any = {}) {

src/frontend/src/controllers/API/queries/store/index.ts

@@ -0,0 +1 @@
+export * from "./use-post-like-component";

src/frontend/src/controllers/API/queries/store/use-post-like-component.ts

@@ -0,0 +1,25 @@
+import { useMutationFunctionType } from "@/types/api";
+import { api } from "../../api";
+import { getURL } from "../../helpers/constants";
+import { UseRequestProcessor } from "../../services/request-processor";
+
+interface IPostLikeComponent {
+  componentId: string;
+}
+
+export const usePostLikeComponent: useMutationFunctionType<
+  IPostLikeComponent
+> = (options) => {
+  const { mutate } = UseRequestProcessor();
+
+  const postLikeComponent = async (
+    payload: IPostLikeComponent,
+  ): Promise<any> => {
+    const { componentId } = payload;
+    return await api.post<any>(`${getURL("STORE")}/users/likes/${componentId}`);
+  };
+
+  const mutation = mutate(["usePostLikeComponent"], postLikeComponent, options);
+
+  return mutation;
+};