From 64c4d1cd9a024430991b2e24532021099419ebd0 Mon Sep 17 00:00:00 2001
From: Max Alekseenko <nnwen0609@gmail.com>
Date: Tue, 27 Aug 2024 19:51:07 +0200
Subject: [PATCH] add rating count

---
 types/client/marketplace.ts             | 1 +
 ui/marketplace/Rating/Rating.tsx        | 2 ++
 ui/marketplace/Rating/TriggerButton.tsx | 8 +++++---
 ui/marketplace/Rating/useRatings.tsx    | 5 +++--
 4 files changed, 11 insertions(+), 5 deletions(-)

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 = ({
         <>
           <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 }
diff --git a/ui/marketplace/Rating/TriggerButton.tsx b/ui/marketplace/Rating/TriggerButton.tsx
index 309447a1b8..c94647efb8 100644
--- a/ui/marketplace/Rating/TriggerButton.tsx
+++ b/ui/marketplace/Rating/TriggerButton.tsx
@@ -1,4 +1,4 @@
-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!'
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<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) {