Refactor Content component to fetch and display dynamic stats with loading state

Author: sanjaypinna

app/[locale]/(user)/components/Content.tsx

@@ -3,13 +3,43 @@
 import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
-import { SearchInput, Tag, Text } from 'opub-ui';
+import { graphql } from '@/gql';
+import { useQuery } from '@tanstack/react-query';
+import { SearchInput, Spinner, Tag, Text } from 'opub-ui';
 
+import { GraphQL } from '@/lib/api';
 import { cn } from '@/lib/utils';
 import Styles from '../page.module.scss';
 
+const statsInfo: any = graphql(`
+  query StatsList {
+    stats {
+      totalUsers
+      totalPublishedDatasets
+      totalPublishers
+      totalPublishedUsecases
+    }
+  }
+`);
+
+// const tagsInfo: any = graphql(`
+//   query TagsData {
+//     tags {
+//       id
+//       value
+//     }
+//   }
+// `);
+
 export const Content = () => {
   const router = useRouter();
+  const Stats: { data: any; isLoading: any } = useQuery([`statsDetails`], () =>
+    GraphQL(statsInfo, {}, [])
+  );
+  // const Tags: { data: any; isLoading: any } = useQuery([`tagDetails`], () =>
+  //   GraphQL(tagsInfo, {}, [])
+  // );
+
   const handleSearch = (value: string) => {
     if (value) {
       router.push(`/datasets?query=${encodeURIComponent(value)}`);
@@ -18,20 +48,20 @@ export const Content = () => {
   const Metrics = [
     {
       label: 'Datasets',
-      count: '2k',
+      count: Stats?.data?.stats?.totalPublishedDatasets,
     },
     {
       label: 'Use Cases',
-      count: '15',
+      count: Stats?.data?.stats?.totalPublishedUsecases,
     },
 
     {
-      label: 'Consumers',
-      count: '24k',
+      label: 'Publishers',
+      count: Stats?.data?.stats?.totalPublishers,
     },
     {
-      label: 'Publishers',
-      count: '56',
+      label: 'Users',
+      count: Stats?.data?.stats?.totalUsers,
     },
   ];
 
@@ -44,8 +74,8 @@ export const Content = () => {
     'Urban Development',
   ];
   return (
-    <main className="bg-primaryBlue py-6 md:py-10 md:px-8 lg:py-20">
-      <div className="container md:px-12 px-10 lg:px-8 flex items-center justify-around gap-20 ">
+    <main className="bg-primaryBlue py-6 md:px-8 md:py-10 lg:py-20">
+      <div className="container flex items-center justify-around gap-20 px-10 md:px-12 lg:px-8 ">
         <div className="flex flex-col gap-11 lg:w-[49%]">
           <div className="flex flex-col">
             <Text variant="heading3xl" color="onBgDefault">
@@ -62,21 +92,27 @@ export const Content = () => {
               with CivicDataLab{' '}
             </Text>
           </div>
-          <div className="flex flex-wrap items-center gap-4 md:gap-0 lg:gap-0 ">
-            {Metrics.map((item, index) => (
-              <div
-                key={index}
-                className="flex flex-col border-x-[1px] border-solid border-tertiaryAccent px-4"
-              >
-                <Text variant="heading3xl" className=" text-secondaryOrange">
-                  {item.count}
-                </Text>
-                <Text color="onBgDefault" className=" w-20">
-                  {item.label}
-                </Text>
-              </div>
-            ))}
-          </div>
+          {Stats.isLoading ? (
+            <div className=" flex w-fit justify-center rounded-2 bg-surfaceDefault p-4">
+              <Spinner />
+            </div>
+          ) : (
+            <div className="flex flex-wrap items-center gap-4 md:gap-0 lg:gap-0 ">
+              {Metrics.map((item, index) => (
+                <div
+                  key={index}
+                  className="flex flex-col border-x-[1px] border-solid border-tertiaryAccent px-4"
+                >
+                  <Text variant="heading3xl" className=" text-secondaryOrange">
+                    {item.count}
+                  </Text>
+                  <Text color="onBgDefault" className=" w-20 ">
+                    {item.label}
+                  </Text>
+                </div>
+              ))}
+            </div>
+          )}
           <div className="w-full">
             <SearchInput
               className={cn(Styles.Search)}