feat: Add item count meta data to Highlight Card (#254)

* Added item count to each highlight card. * Added humanize number function to percentage label.
open-sauced · Aug 23, 2022 · 693479e · 693479e
1 parent 20df419
commit 693479e
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/components/organisms/Dashboard/dashboard.tsx b/components/organisms/Dashboard/dashboard.tsx
@@ -2,9 +2,10 @@ import useDashBoardData from "lib/hooks/useDashboardData";
 import Card from "../../atoms/Card/card";
 import ScatterChart from "components/molecules/ScatterChart/scatter-chart";
 import HighlightCard from "components/molecules/HighlightCard/highlight-card";
+import humanizeNumber from "lib/utils/humanizeNumber";
 
 export const Dashboard = (): JSX.Element => {
-  const { scatterOptions } = useDashBoardData();
+  const { scatterOptions, repoListMetaData, isLoading } = useDashBoardData();
 
   return (
     <div className="flex flex-col w-full gap-4">
@@ -17,7 +18,7 @@ export const Dashboard = (): JSX.Element => {
           increased={true}
           numChanged={38}
           percentage={40}
-          percentageLabel="of 49,999"
+          percentageLabel={isLoading ? "Loading..." : `of ${humanizeNumber(repoListMetaData.itemCount)}`}
         />
         <HighlightCard
           url="/hacktoberfest/pull%20requests"
@@ -27,7 +28,7 @@ export const Dashboard = (): JSX.Element => {
           increased={true}
           numChanged={98}
           percentage={80}
-          percentageLabel="of 49,999"
+          percentageLabel={isLoading ? "Loading..." : `of ${humanizeNumber(repoListMetaData.itemCount)}`}
         />
         <HighlightCard
           url="/hacktoberfest/pull%20requests"
@@ -37,7 +38,7 @@ export const Dashboard = (): JSX.Element => {
           increased={false}
           numChanged={38}
           percentage={37}
-          percentageLabel="of 49,999"
+          percentageLabel={isLoading ? "Loading..." : `of ${humanizeNumber(repoListMetaData.itemCount)}`}
         />
         <HighlightCard
           url="/hacktoberfest/pull%20requests"
@@ -47,7 +48,7 @@ export const Dashboard = (): JSX.Element => {
           increased={false}
           numChanged={85}
           percentage={77}
-          percentageLabel="of 49,999"
+          percentageLabel={isLoading ? "Loading..." : `of ${humanizeNumber(repoListMetaData.itemCount)}`}
         />
       </section>
       <section className="flex flex-col lg:flex-row max-w-full gap-4 mb-6">

diff --git a/lib/hooks/useDashboardData.ts b/lib/hooks/useDashboardData.ts
@@ -1,3 +1,5 @@
+import { useRepositoriesList } from "lib/hooks/useRepositoriesList";
+
 const useDashBoardData = () => {
   const scatterOptions = {
     xAxis: {},
@@ -60,9 +62,14 @@ const useDashBoardData = () => {
     ]
   };
 
+  const { repoList, isLoading } = useRepositoriesList();
+  const repoListMetaData = repoList.meta;
+
   return {
     scatterOptions,
-    areaChartOptions
+    areaChartOptions,
+    repoListMetaData,
+    isLoading
   };
 };