add rating count

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

ui/marketplace/Rating/Rating.tsx

@@ -51,6 +51,7 @@ const Rating = ({
         <>
           <Stars filledIndex={ (rating?.value || 0) - 1 }/>
           <Text fontSize="md" ml={ 2 }>{ rating?.value }</Text>
+          { rating?.count && <Text variant="secondary" fontSize="md" ml={ 1 }>({ rating?.count })</Text> }
         </>
       ) }
       <Box ref={ popoverRef }>
@@ -58,6 +59,7 @@ const Rating = ({
           <PopoverTrigger>
             <TriggerButton
               rating={ rating?.value }
+              count={ rating?.count }
               fullView={ fullView }
               isActive={ isOpen }
               onClick={ onToggle }

ui/marketplace/Rating/TriggerButton.tsx

-import { Button, chakra, useColorModeValue, Tooltip, useDisclosure } from '@chakra-ui/react';
+import { Button, chakra, useColorModeValue, Tooltip, useDisclosure, Text } from '@chakra-ui/react';
 import React from 'react';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
@@ -7,6 +7,7 @@ import IconSvg from 'ui/shared/IconSvg';
 
 type Props = {
   rating?: number;
+  count?: number;
   fullView?: boolean;
   isActive: boolean;
   onClick: () => 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<HTMLButtonElement>,
 ) => {
   const textColor = useColorModeValue('blackAlpha.800', 'whiteAlpha.800');
@@ -75,8 +76,9 @@ const TriggerButton = (
           />
         ) }
         { (rating && !fullView) ? (
-          <chakra.span color={ textColor } transition="inherit">
+          <chakra.span color={ textColor } transition="inherit" display="inline-flex">
             { rating }
+            <Text variant="secondary" ml={ 1 }>({ count })</Text>
           </chakra.span>
         ) : (
           'Rate it!'

ui/marketplace/Rating/useRatings.tsx

@@ -28,11 +28,12 @@ export type RateFunction = (
 
 function formatRatings(data: Airtable.Records<Airtable.FieldSet>) {
   return data.reduce((acc: Record<string, AppRating>, record) => {
-    const fields = record.fields as { appId: string | Array<string>; rating: number | undefined };
+    const fields = record.fields as { appId: string | Array<string>; 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) {