Fixed production issues, fixed render issues, added secret and env variables into dockerfile and gihub actions files, remade dockerfile and github actions

src/app/StatsList.tsx

@@ -33,7 +33,7 @@ const StatsList = ({
         </Text>
       </VStack>
       <Flex w="80%" flexDirection={{ base: "column", md: "row" }} gap={4}>
-        {groups ? (
+        {groups && groups >= 0 ? (
           <SingleStatComponent
             loading={loading}
             title="Groups Bot Helped"

src/app/layout.tsx

@@ -20,7 +20,7 @@ export default function RootLayout({
       isClient: typeof window !== "undefined"
     });
     const client = createClient({
-      url: process.env.NEXT_PUBLIC_GRAPHQL_URL || "",
+      url: "/api/graphql",
       exchanges: [cacheExchange, ssr, fetchExchange],
       suspense: true
     });

src/app/page.tsx

@@ -85,14 +85,10 @@ export default function Home() {
   );
 
   useEffect(() => {
-    if (!thirtyDayStatsFetching && thirtyDayStats.getStatsRange) {
+    if (!thirtyDayStatsFetching && thirtyDayStats && !thirtyDayStatsError) {
       setLineChartArrState(lineChartArr(thirtyDayStats.getStatsRange));
     }
-  }, [
-    thirtyDayStats.getStatsRange,
-    thirtyDayStatsError,
-    thirtyDayStatsFetching
-  ]);
+  }, [thirtyDayStats, thirtyDayStatsError, thirtyDayStatsFetching]);
 
   return (
     <Fragment>
@@ -152,23 +148,46 @@ export default function Home() {
             </VStack>
           </VStack>
           <VStack gap={10} w="100%">
-            <StatsList
-              title="Total Stats"
-              loading={totalStatsFetching || totalGroupsFetching}
-              error={totalStatsError || totalGroupsError}
-              groups={totalGroups.getTotalGroups}
-              links={totalStats.getTotalStats.linksDeleted}
-              commands={totalStats.getTotalStats.commandResponses}
-              triggers={totalStats.getTotalStats.timesTriggered}
-            />
-            <StatsList
-              title="Today's Stats"
-              loading={todaysStatsFetching}
-              error={todaysStatsError}
-              links={todayStats.getTodayStats.linksDeleted}
-              commands={todayStats.getTodayStats.commandResponses}
-              triggers={todayStats.getTodayStats.timesTriggered}
-            />
+            {totalGroups ? (
+              <StatsList
+                title="Total Stats"
+                loading={totalStatsFetching || totalGroupsFetching}
+                error={totalStatsError || totalGroupsError}
+                groups={totalGroups.getTotalGroups}
+                links={totalStats.getTotalStats.linksDeleted}
+                commands={totalStats.getTotalStats.commandResponses}
+                triggers={totalStats.getTotalStats.timesTriggered}
+              />
+            ) : (
+              <StatsList
+                title="Total Stats"
+                loading={totalStatsFetching || totalGroupsFetching}
+                error={totalStatsError || totalGroupsError}
+                groups={0}
+                links={0}
+                commands={0}
+                triggers={0}
+              />
+            )}
+            {todayStats ? (
+              <StatsList
+                title="Today's Stats"
+                loading={todaysStatsFetching}
+                error={todaysStatsError}
+                links={todayStats.getTodayStats.linksDeleted}
+                commands={todayStats.getTodayStats.commandResponses}
+                triggers={todayStats.getTodayStats.timesTriggered}
+              />
+            ) : (
+              <StatsList
+                title="Today's Stats"
+                loading={todaysStatsFetching}
+                error={todaysStatsError}
+                links={0}
+                commands={0}
+                triggers={0}
+              />
+            )}
           </VStack>
           <VStack w="95%" gap="5vh">
             <VStack gap={1}>

src/components/charts/LineChart.tsx

@@ -32,7 +32,7 @@ const LineChartComponent = ({
           axisLine={false}
           dataKey={chart.key("day")}
           stroke={chart.color("border")}
-        // label={{ value: "Day", position: "bottom" }}
+          // label={{ value: "Day", position: "bottom" }}
         />
         <YAxis
           width="auto"
@@ -40,7 +40,7 @@ const LineChartComponent = ({
           tickLine={false}
           tickMargin={10}
           stroke={chart.color("border")}
-        // label={{ value: label, position: "left", angle: -90 }}
+          // label={{ value: label, position: "left", angle: -90 }}
         />
         <Tooltip
           animationDuration={100}