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