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

@@ -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;
+  }
+}

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">
+                <button
-                  <IconComponent name="Heart" className="h-4 w-4" />
+                  onClick={handleLike}
-                  {data.liked_by_count ?? 0}
+                  className="flex items-center gap-1.5 text-xs text-foreground"
-                </span>
+                >
+                  <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">

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(() => {

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;
 };