Utilized new components.

src/app/page.tsx

@@ -1,20 +1,76 @@
+/* eslint-disable react-hooks/set-state-in-effect */
 "use client";
 
-import GetTotalGroupsQuery from "@/graphql/queries/getTotalGroups";
-import { Heading, Skeleton, Text } from "@chakra-ui/react";
+import { useEffect, useState } from "react";
+import { Fragment } from "react/jsx-runtime";
+import { Box, Heading, Skeleton, Text } from "@chakra-ui/react";
 import { Icon } from "@iconify/react";
 import { useQuery } from "@urql/next";
-import { Fragment } from "react/jsx-runtime";
+import Get30DayStatsQuery from "@/graphql/queries/get30DayStats";
+import GetTotalGroupsQuery from "@/graphql/queries/getTotalGroups";
+import lineChartArr from "@/lib/lineChartArray";
+import LinksDeletedChart from "./LinksDeletedChart";
+import { LineChartArr } from "@/types/LineChartStats";
 
 export default function Home() {
-  const [{ fetching, data, error }] = useQuery({ query: GetTotalGroupsQuery });
+  // Total Groups //
+
+  const [
+    {
+      fetching: totalGroupsFetching,
+      data: totalGroups,
+      error: totalGroupsError
+    }
+  ] = useQuery({
+    query: GetTotalGroupsQuery
+  });
+
+  // 30 Day Stats //
+
+  // Dates
+  const [currDate, setCurrDate] = useState<Date>();
+  const [date30DaysAgo, setDate30DaysAgo] = useState<Date>();
+
+  useEffect(() => {
+    setCurrDate(new Date());
+    setDate30DaysAgo(new Date(new Date().setDate(new Date().getDay() - 30)));
+  }, []);
+
+  const [
+    {
+      fetching: thirtyDayStatsFetching,
+      data: thirtyDayStats,
+      error: thirtyDayStatsError
+    }
+  ] = useQuery({
+    query: Get30DayStatsQuery,
+    variables: {
+      stateDate: currDate,
+      endDate: date30DaysAgo
+    }
+  });
+
+  // Line Chart Data
+  const [lineChartArrState, setLineChartArrState] = useState<LineChartArr>(
+    [] as LineChartArr
+  );
+
+  useEffect(() => {
+    if (!thirtyDayStatsFetching && thirtyDayStats.getStatsRange) {
+      setLineChartArrState(lineChartArr(thirtyDayStats.getStatsRange));
+    }
+  }, [
+    thirtyDayStats.getStatsRange,
+    thirtyDayStatsError,
+    thirtyDayStatsFetching
+  ]);
 
   return (
     <Fragment>
       <Heading>{`Total number of groups the bot has helped`}</Heading>
-      <Skeleton loading={fetching} width="2rem">
+      <Skeleton loading={totalGroupsFetching} width="2rem">
         <Text fontSize="2xl">
-          {error || !data || !data.getTotalGroups ? (
+          {totalGroupsError || !totalGroups || !totalGroups.getTotalGroups ? (
             <Icon
               color="yellow"
               icon="solar:danger-triangle-broken"
@@ -22,10 +78,13 @@ export default function Home() {
               height="24"
             />
           ) : (
-            `${data.getTotalGroups}`
+            `${totalGroups.getTotalGroups}`
           )}
         </Text>
       </Skeleton>
+      <Box w="80%" mx={6}>
+        <LinksDeletedChart lineChartData={lineChartArrState} />
+      </Box>
     </Fragment>
   );
 }