Fixed production issues, fixed render issues, adde

d secret and env variables into dockerfile and gihub actions files, remade dockerfile and github actions

added build stage

fix build step

remove the second section

asdas

test new file

fix env variables

env

enable corepack

test yarn install

new base

remove corepack

fix yarn install

yarn install

new base (again)

new base

corepack

install yarn

enable corepack

revert base

fix yarn

yarn install

fix build errors

new file

remove in-line comment

update copy command

copy node_monudes

test

workdir top level

ls app folder

test ls

update yarn install

copy more files

remove copy

fix copy

move workdir to top level

fix copy

check folder

test

fix copy - last try

prisma gen

database url secret / env variable for ci/cd

args

env var

args

fix env

fix copy

fix build file name

fix start command

added copy

ANOTHER COPY

copy prisma generated files, fix start command

remove standalone config

fix urql url

update display

.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}