diff --git a/types/client/marketplace.ts b/types/client/marketplace.ts
index 800e7ecb6d..a6785311c7 100644
--- a/types/client/marketplace.ts
+++ b/types/client/marketplace.ts
@@ -29,6 +29,7 @@ export type MarketplaceAppOverview = MarketplaceAppPreview & MarketplaceAppSocia
export type AppRating = {
recordId: string;
value: number | undefined;
+ count?: number;
}
export type MarketplaceAppWithSecurityReport = MarketplaceAppOverview & {
diff --git a/ui/marketplace/Rating/Rating.tsx b/ui/marketplace/Rating/Rating.tsx
index 21d5bcf9b4..4884460e20 100644
--- a/ui/marketplace/Rating/Rating.tsx
+++ b/ui/marketplace/Rating/Rating.tsx
@@ -51,6 +51,7 @@ const Rating = ({
<>
{ rating?.value }
+ { rating?.count && ({ rating?.count }) }
>
) }
@@ -58,6 +59,7 @@ const Rating = ({
void;
@@ -24,7 +25,7 @@ const getTooltipText = (canRate: boolean | undefined) => {
};
const TriggerButton = (
- { rating, fullView, isActive, onClick, canRate }: Props,
+ { rating, count, fullView, isActive, onClick, canRate }: Props,
ref: React.ForwardedRef,
) => {
const textColor = useColorModeValue('blackAlpha.800', 'whiteAlpha.800');
@@ -75,8 +76,9 @@ const TriggerButton = (
/>
) }
{ (rating && !fullView) ? (
-
+
{ rating }
+ ({ count })
) : (
'Rate it!'
diff --git a/ui/marketplace/Rating/useRatings.tsx b/ui/marketplace/Rating/useRatings.tsx
index 7c4ff1aa9f..663b1b3667 100644
--- a/ui/marketplace/Rating/useRatings.tsx
+++ b/ui/marketplace/Rating/useRatings.tsx
@@ -28,11 +28,12 @@ export type RateFunction = (
function formatRatings(data: Airtable.Records) {
return data.reduce((acc: Record, record) => {
- const fields = record.fields as { appId: string | Array; rating: number | undefined };
+ const fields = record.fields as { appId: string | Array; rating: number | undefined; count?: number };
const appId = Array.isArray(fields.appId) ? fields.appId[0] : fields.appId;
acc[appId] = {
recordId: record.id,
value: fields.rating,
+ count: fields.count,
};
return acc;
}, {});
@@ -63,7 +64,7 @@ export default function useRatings() {
return;
}
try {
- const data = await airtable('apps_ratings').select({ fields: [ 'appId', 'rating' ] }).all();
+ const data = await airtable('apps_ratings').select({ fields: [ 'appId', 'rating', 'count' ] }).all();
const ratings = formatRatings(data);
setRatings(ratings);
} catch (error) {