Fix like appearing when unauthorized

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

@@ -1,4 +1,4 @@
-import { useContext, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { alertContext } from "../../contexts/alertContext";
 import { FlowsContext } from "../../contexts/flowsContext";
 import { StoreContext } from "../../contexts/storeContext";
@@ -44,6 +44,13 @@ export default function CollectionCardComponent({
 
   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);
+    }
+  }, [data, data.liked_by_count, data.liked_by_user]);
+
   function handleInstall() {
     setLoading(true);
     getComponent(data.id).then((res) => {
@@ -97,10 +104,6 @@ export default function CollectionCardComponent({
     }
   }
 
-  const totalComponentsMetadata = () => {
-    return data?.metadata ? data.metadata["total"] : 0;
-  };
-
   return (
     <Card
       className={classNames(
@@ -181,7 +184,7 @@ export default function CollectionCardComponent({
                     <ShadTooltip content="Components">
                       <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
                         <IconComponent name="ToyBrick" className="h-4 w-4" />
-                        {totalComponentsMetadata()}
+                        {data?.metadata?.total ?? 0}
                       </span>
                     </ShadTooltip>
                   )}

src/frontend/src/types/store/index.ts

@@ -2,7 +2,7 @@ export type storeComponent = {
   id: string;
   is_component: boolean;
   tags?: { id: string; name: string }[];
-  metadata?: {};
+  metadata?: any;
   downloads_count?: number;
   name: string;
   description: string;