From 24a7b2ca8a1b7c940b693ea4fd5532c1186437b9 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Wed, 1 Nov 2023 09:47:37 -0300
Subject: [PATCH] fix(API/index.ts): add postLikeComponent function to handle
 liking a component and update the liked_by_user and likes_count states
 accordingly fix(market-card.tsx): add handleLike function to handle liking a
 component and update the liked_by_user and likes_count states accordingly
 fix(market-card.tsx): update the Heart icon to be filled and have a
 destructive color if the component is liked by the user fix(market-card.tsx):
 update the number of likes to be the likes_count state
 fix(StorePage/index.tsx): set setErrorApiKey to false to clear any previous
 API key error feat(types/store/index.ts): add liked_by_user property to
 storeComponent type to indicate if the component is liked by the user

---
 src/frontend/src/controllers/API/index.ts     | 14 ++++++
 .../StorePage/components/market-card.tsx      | 46 +++++++++++++++++--
 src/frontend/src/pages/StorePage/index.tsx    |  1 +
 src/frontend/src/types/store/index.ts         |  1 +
 4 files changed, 57 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts
index 238451647..fc7c82a57 100644
--- a/src/frontend/src/controllers/API/index.ts
+++ b/src/frontend/src/controllers/API/index.ts
@@ -736,3 +736,17 @@ export async function getStoreTags() {
     throw error;
   }
 }
+
+export async function postLikeComponent(componentId: string) {
+  try {
+    const res = await api.post(
+      `${BASE_URL_API}store/users/likes/${componentId}`
+    );
+    if (res.status === 200) {
+      return res.data;
+    }
+  } catch (error) {
+    console.log("Error:", error);
+    throw error;
+  }
+}
diff --git a/src/frontend/src/pages/StorePage/components/market-card.tsx b/src/frontend/src/pages/StorePage/components/market-card.tsx
index eaf0d2cb5..b396c822d 100644
--- a/src/frontend/src/pages/StorePage/components/market-card.tsx
+++ b/src/frontend/src/pages/StorePage/components/market-card.tsx
@@ -14,10 +14,15 @@ import {
 import { alertContext } from "../../../contexts/alertContext";
 import { StoreContext } from "../../../contexts/storeContext";
 import { TabsContext } from "../../../contexts/tabsContext";
-import { getComponent, saveFlowStore } from "../../../controllers/API";
+import {
+  getComponent,
+  postLikeComponent,
+  saveFlowStore,
+} from "../../../controllers/API";
 import { FlowType } from "../../../types/flow";
 import { storeComponent } from "../../../types/store";
 import cloneFLowWithParent from "../../../utils/storeUtils";
+import { classNames } from "../../../utils/utils";
 
 export const MarketCardComponent = ({ data }: { data: storeComponent }) => {
   const { savedFlows } = useContext(StoreContext);
@@ -26,6 +31,8 @@ export const MarketCardComponent = ({ data }: { data: storeComponent }) => {
   const { addFlow } = useContext(TabsContext);
   const { setSuccessData, setErrorData } = useContext(alertContext);
   const flowData = useRef<FlowType>();
+  const [liked_by_user, setLiked_by_user] = useState(data.liked_by_user);
+  const [likes_count, setLikes_count] = useState(data.liked_by_count);
 
   useEffect(() => {
     setAdded(savedFlows.has(data.id) ? true : false);
@@ -62,6 +69,26 @@ export const MarketCardComponent = ({ data }: { data: storeComponent }) => {
     );
   }
 
+  function handleLike() {
+    if (liked_by_user !== undefined || liked_by_user !== null) {
+      const temp = liked_by_user;
+      setLiked_by_user((prev) => !prev);
+      console.log(data.id);
+      postLikeComponent(data.id)
+        .catch((error) => {
+          console.error(error);
+          setLiked_by_user(temp);
+          setErrorData({
+            title: "Error on liking component",
+            list: [error["response"]["data"]["detail"]],
+          });
+        })
+        .then((count) => {
+          setLikes_count(count);
+        });
+    }
+  }
+
   function handleInstall() {
     if (flowData.current) {
       addFlow(true, flowData.current!).then(() => {
@@ -155,10 +182,19 @@ export const MarketCardComponent = ({ data }: { data: storeComponent }) => {
                 </span>
               </ShadTooltip>
               <ShadTooltip content="Favorites">
-                <span className="flex items-center gap-1.5 text-xs text-foreground">
-                  <IconComponent name="Heart" className="h-4 w-4" />
-                  {data.liked_by_count ?? 0}
-                </span>
+                <button
+                  onClick={handleLike}
+                  className="flex items-center gap-1.5 text-xs text-foreground"
+                >
+                  <IconComponent
+                    name="Heart"
+                    className={classNames(
+                      "h-4 w-4 ",
+                      liked_by_user ? "fill-destructive stroke-destructive" : ""
+                    )}
+                  />
+                  {likes_count ?? 0}
+                </button>
               </ShadTooltip>
               <ShadTooltip content="Downloads">
                 <span className="flex items-center gap-1.5 text-xs text-foreground">
diff --git a/src/frontend/src/pages/StorePage/index.tsx b/src/frontend/src/pages/StorePage/index.tsx
index 82d862e96..713e6ded6 100644
--- a/src/frontend/src/pages/StorePage/index.tsx
+++ b/src/frontend/src/pages/StorePage/index.tsx
@@ -66,6 +66,7 @@ export default function StorePage(): JSX.Element {
       savedIds.add(flow.id);
     });
     setSavedFlows(savedIds);
+    setErrorApiKey(false);
   }
 
   useEffect(() => {
diff --git a/src/frontend/src/types/store/index.ts b/src/frontend/src/types/store/index.ts
index 3ca82ab8c..a5e8856f7 100644
--- a/src/frontend/src/types/store/index.ts
+++ b/src/frontend/src/types/store/index.ts
@@ -7,4 +7,5 @@ export type storeComponent = {
   name: string;
   description: string;
   liked_by_count: number;
+  liked_by_user?: boolean;
 };