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

.github/workflows/main.yml

@@ -53,6 +53,7 @@ jobs:
           context: .
           push: ${{ !github.event.pull_request.head.repo.fork }}
           tags: ${{ steps.meta.outputs.tags }}
+          build-args: API_URL=DATABASE_URL=${{ secrets.DATABASE_URL }}
       - name: Build and Push Latest Docker Image
         id: build-and-push-latest
         uses: docker/build-push-action@v4
@@ -61,3 +62,4 @@ jobs:
           context: .
           push: true
           tags: ${{ env.REGISTRY }}/${{ env.OWNER }}/${{ env.IMAGE_NAME }}:latest
+          build-args: DATABASE_URL=${{ secrets.DATABASE_URL }}

Dockerfile

@@ -1,72 +1,40 @@
-# syntax=docker.io/docker/dockerfile:1
+# --- Stage 1: Dependencies ---
-
+FROM node:20-alpine AS dependencies
-FROM node:20-alpine AS base
-
-# Enable Corepack
 RUN corepack enable
-
+RUN corepack prepare yarn@stable --activate
-# Set Yarn to the latest stable version
-RUN yarn set version stable
-
-# Install dependencies only when needed
-FROM base AS deps
-# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
-RUN apk add --no-cache libc6-compat
 WORKDIR /app
+COPY package.json yarn.lock .yarnrc.yml ./
+RUN yarn install
 
-# Install dependencies based on the preferred package manager
+# --- Stage 2: Builder ---
-COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* .npmrc* ./
+FROM node:20-alpine AS builder
-RUN \
+RUN corepack enable
-  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+RUN corepack prepare yarn@stable --activate
-  elif [ -f package-lock.json ]; then npm ci; \
+ARG DATABASE_URL
-  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \
+ENV DATABASE_URL=${DATABASE_URL}
-  else echo "Lockfile not found." && exit 1; \
+RUN corepack enable
-  fi
+RUN corepack prepare yarn@stable --activate
-
-
-# Rebuild the source code only when needed
-FROM base AS builder
 WORKDIR /app
-COPY --from=deps /app/node_modules ./node_modules
+COPY --from=dependencies /app/node_modules ./node_modules
-COPY . .
+COPY . ./
+RUN yarn prisma-gen
+RUN yarn build
 
-# Next.js collects completely anonymous telemetry data about general usage.
+# --- Stage 3: Runner ---
-# Learn more here: https://nextjs.org/telemetry
+FROM node:20-alpine AS runner
-# Uncomment the following line in case you want to disable telemetry during the build.
+RUN corepack enable
-# ENV NEXT_TELEMETRY_DISABLED=1
+RUN corepack prepare yarn@stable --activate
-
+ARG DATABASE_URL
-RUN \
+ENV DATABASE_URL=${DATABASE_URL}
-  if [ -f yarn.lock ]; then yarn run build; \
+RUN corepack enable
-  elif [ -f package-lock.json ]; then npm run build; \
+RUN corepack prepare yarn@stable --activate
-  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build; \
-  else echo "Lockfile not found." && exit 1; \
-  fi
-
-# Production image, copy all the files and run next
-FROM base AS runner
 WORKDIR /app
-
+COPY --from=dependencies /app/node_modules ./node_modules
-ENV NODE_ENV=production
+COPY --from=builder /app/src/prisma/generated ./src/prisma/generated
-# Uncomment the following line in case you want to disable telemetry during runtime.
+COPY --from=builder /app/.next ./.next
-# ENV NEXT_TELEMETRY_DISABLED=1
+COPY --from=builder /app/.yarn ./.yarn
-
+COPY . ./
-RUN addgroup --system --gid 1001 nodejs
-RUN adduser --system --uid 1001 nextjs
-
-COPY --from=builder /app/public ./public
-
-# Automatically leverage output traces to reduce image size
-# https://nextjs.org/docs/advanced-features/output-file-tracing
-COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
-COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
-
-USER nextjs
 
 EXPOSE 3000
 
-ENV PORT=3000
+CMD ["yarn", "start"]
-
-# server.js is created by next build from the standalone output
-# https://nextjs.org/docs/pages/api-reference/config/next-config-js/output
-ENV HOSTNAME="0.0.0.0"
-CMD ["node", "server.js"]

next.config.ts

@@ -3,8 +3,7 @@ import type { NextConfig } from "next";
 const nextConfig: NextConfig = {
   experimental: {
     optimizePackageImports: ["@chakra-ui/react"]
-  },
+  }
-  output: "standalone"
 };
 
 export default nextConfig;

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, thirtyDayStatsError, thirtyDayStatsFetching]);
-    thirtyDayStats.getStatsRange,
-    thirtyDayStatsError,
-    thirtyDayStatsFetching
-  ]);
 
   return (
     <Fragment>
@@ -152,23 +148,46 @@ export default function Home() {
             </VStack>
           </VStack>
           <VStack gap={10} w="100%">
-            <StatsList
+            {totalGroups ? (
-              title="Total Stats"
+              <StatsList
-              loading={totalStatsFetching || totalGroupsFetching}
+                title="Total Stats"
-              error={totalStatsError || totalGroupsError}
+                loading={totalStatsFetching || totalGroupsFetching}
-              groups={totalGroups.getTotalGroups}
+                error={totalStatsError || totalGroupsError}
-              links={totalStats.getTotalStats.linksDeleted}
+                groups={totalGroups.getTotalGroups}
-              commands={totalStats.getTotalStats.commandResponses}
+                links={totalStats.getTotalStats.linksDeleted}
-              triggers={totalStats.getTotalStats.timesTriggered}
+                commands={totalStats.getTotalStats.commandResponses}
-            />
+                triggers={totalStats.getTotalStats.timesTriggered}
-            <StatsList
+              />
-              title="Today's Stats"
+            ) : (
-              loading={todaysStatsFetching}
+              <StatsList
-              error={todaysStatsError}
+                title="Total Stats"
-              links={todayStats.getTodayStats.linksDeleted}
+                loading={totalStatsFetching || totalGroupsFetching}
-              commands={todayStats.getTodayStats.commandResponses}
+                error={totalStatsError || totalGroupsError}
-              triggers={todayStats.getTodayStats.timesTriggered}
+                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}