diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx index 4fd4f3734..867d58b53 100644 --- a/src/frontend/src/components/cardComponent/index.tsx +++ b/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 ( - {totalComponentsMetadata()} + {data?.metadata?.total ?? 0} )} diff --git a/src/frontend/src/types/store/index.ts b/src/frontend/src/types/store/index.ts index 650d9b20a..a7fc9a6b8 100644 --- a/src/frontend/src/types/store/index.ts +++ b/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;