From e63cf4841047628ff868e2f3d2b49cba32fff331 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 17 Nov 2023 10:50:47 -0300
Subject: [PATCH] Made download number dynamic

---
 .../src/components/cardComponent/index.tsx    | 49 ++++++++++++-------
 1 file changed, 32 insertions(+), 17 deletions(-)

diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index 8ae0df35f..6eb4c3943 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -41,33 +41,48 @@ export default function CollectionCardComponent({
     data?.liked_by_user ?? false
   );
   const [likes_count, setLikes_count] = useState(data?.liked_by_count ?? 0);
+  const [downloads_count, setDownloads_count] = useState(
+    data?.downloads_count ?? 0
+  );
 
   const name = data.is_component ? "Component" : "Flow";
 
   useEffect(() => {
     if (data) {
-      setLiked_by_user(data.liked_by_user ?? false);
-      setLikes_count(data.liked_by_count ?? 0);
+      setLiked_by_user(data?.liked_by_user ?? false);
+      setLikes_count(data?.liked_by_count ?? 0);
+      setDownloads_count(data?.downloads_count ?? 0);
     }
-  }, [data, data.liked_by_count, data.liked_by_user]);
+  }, [data, data.liked_by_count, data.liked_by_user, data.downloads_count]);
 
   function handleInstall() {
+    const temp = downloads_count;
+    setDownloads_count((old) => old + 1);
     setLoading(true);
-    getComponent(data.id).then((res) => {
-      const newFlow = cloneFLowWithParent(res, res.id, data.is_component);
-      addFlow(true, newFlow)
-        .then((id) => {
-          setSuccessData({ title: `${name} Installed Successfully.` });
-          setLoading(false);
-        })
-        .catch((error) => {
-          setLoading(false);
-          setErrorData({
-            title: `Error installing the ${name}`,
-            list: [error["response"]["data"]["detail"]],
+    getComponent(data.id)
+      .then((res) => {
+        const newFlow = cloneFLowWithParent(res, res.id, data.is_component);
+        addFlow(true, newFlow)
+          .then((id) => {
+            setSuccessData({ title: `${name} Installed Successfully.` });
+            setLoading(false);
+          })
+          .catch((error) => {
+            setLoading(false);
+            setErrorData({
+              title: `Error installing the ${name}`,
+              list: [error["response"]["data"]["detail"]],
+            });
           });
+      })
+      .catch((err) => {
+        setLoading(false);
+        setErrorData({
+          title: `Error installing the ${name}`,
+          list: [err["response"]["data"]["detail"]],
         });
-    });
+        setDownloads_count(temp);
+      });
   }
 
   function handleLike() {
@@ -200,7 +215,7 @@ export default function CollectionCardComponent({
                   <ShadTooltip content="Downloads">
                     <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
                       <IconComponent name="DownloadCloud" className="h-4 w-4" />
-                      {data.downloads_count ?? 0}
+                      {downloads_count ?? 0}
                     </span>
                   </ShadTooltip>
                 </div>