consolidate showdata refactor

EveripediaNetwork · Jan 14, 2025 · 6f7383d · 6f7383d
1 parent 9514f5e
commit 6f7383d
Showing 1 changed file with 21 additions and 15 deletions.
diff --git a/src/components/client/StatsPage.tsx b/src/components/client/StatsPage.tsx
@@ -31,22 +31,31 @@ type Stat = {
   icon?: (props: IconProps) => JSX.Element
 }
 
-const ShowData = ({
-  value,
-  prefix,
-  isFetched,
-}: {
+interface NumericDisplayProps {
   value: number | undefined
   prefix?: string
   isFetched?: boolean
-}) => {
+  isFailedToFetchData?: boolean
+}
+
+const NumericDisplay = ({
+  value,
+  prefix,
+  isFetched,
+  isFailedToFetchData,
+}: NumericDisplayProps) => {
+  if (isFailedToFetchData) {
+    return '-'
+  }
+
   if (value === undefined && !isFetched) {
     return (
       <Spinner variant="primary" role="status" size="sm">
         <span>Loading...</span>
       </Spinner>
     )
   }
+
   return value ? (prefix || '') + Humanize.formatNumber(value) : '-'
 }
 
@@ -170,15 +179,12 @@ const StatsPage = () => {
                           fontSize={{ base: 'sm', md: 'md' }}
                           fontWeight="semibold"
                         >
-                          {isFailedToFetchData ? (
-                            '-'
-                          ) : (
-                            <ShowData
-                              value={item.value || 0}
-                              prefix={valuePrefix}
-                              isFetched={isFetched}
-                            />
-                          )}
+                          <NumericDisplay
+                            value={item.value || 0}
+                            prefix={valuePrefix}
+                            isFetched={isFetched}
+                            isFailedToFetchData={isFailedToFetchData}
+                          />
                         </Text>
                       </Flex>
                     )