fixing hydration issue because of using process.env.

Author: webdevcody

Diff for: TODO.md

@@ -2,3 +2,7 @@
 
 - if a user has purcahsed a course, show a message in the /purchase page so they don't get confused if they happen to navigate to that page on accident and do not show the buy now button or pricing there. instead show a button which will redirect them to the learn/$first-slug (use the slug hook)
 - ability to download the entire video as a zip
+- if on last segment, show a "complete course" button and navigate to a certificate page
+- after clicking the Next Video button, I need to invalidate the queryClient cache for the "progress" entries
+- refactor the approach to instead just fetch the array of progress entries instead of doing the left join stuff
+- rename progress to completed_segments

Diff for: app/db/schema.ts

@@ -7,6 +7,7 @@ import {
   serial,
   text,
   timestamp,
+  uniqueIndex,
 } from "drizzle-orm/pg-core";
 
 const PREFIX = "app";
@@ -84,12 +85,17 @@ export const progress = tableCreator(
     userId: serial("userId")
       .notNull()
       .references(() => users.id, { onDelete: "cascade" }),
-    segmentId: serial("segmentId"),
+    segmentId: serial("segmentId").references(() => segments.id, {
+      onDelete: "cascade",
+    }),
     createdAt: timestamp("created_at").notNull().defaultNow(),
   },
-  (table) => [
-    index("progress_user_id_segment_id_idx").on(table.userId, table.segmentId),
-  ]
+  (table) => ({
+    uniqueConstraint: uniqueIndex("progress_user_segment_unique_idx").on(
+      table.userId,
+      table.segmentId
+    ),
+  })
 );
 
 export const segmentsRelations = relations(segments, ({ many }) => ({

Diff for: app/db/seed.ts

@@ -1,96 +1,8 @@
 import "dotenv/config";
 
-import { database } from "./index";
-import { accounts, profiles, users } from "~/db/schema";
-import { courses, segments } from "./schema";
-
-async function main() {
-  const [user] = await database
-    .insert(users)
-    .values({
-      email: "[email protected]",
-      emailVerified: undefined,
-    })
-    .onConflictDoNothing()
-    .returning();
-
-  const [account] = await database
-    .insert(accounts)
-    .values({
-      googleId: undefined,
-      userId: user.id,
-    })
-    .onConflictDoNothing()
-    .returning();
-
-  const [profile] = await database
-    .insert(profiles)
-    .values({
-      userId: user.id,
-      displayName: "Test User",
-    })
-    .onConflictDoNothing()
-    .returning();
-}
+async function main() {}
 
 async function seed() {
-  // Create a test user
-  const [user] = await database
-    .insert(users)
-    .values({
-      email: "[email protected]",
-    })
-    .returning();
-
-  // Create a course
-  const [course] = await database
-    .insert(courses)
-    .values({
-      userId: user.id,
-      title: "Introduction to TypeScript",
-      category: "Programming",
-      description: "Learn the basics of TypeScript",
-    })
-    .returning();
-
-  // Create 5 segments for the course
-  const segmentsData = [
-    {
-      courseId: course.id,
-      title: "TypeScript Basics",
-      content:
-        "Learn the basics of TypeScript including types, interfaces, and classes.",
-      order: 1,
-    },
-    {
-      courseId: course.id,
-      title: "Advanced Types",
-      content:
-        "Explore advanced TypeScript types like unions, intersections, and generics.",
-      order: 2,
-    },
-    {
-      courseId: course.id,
-      title: "TypeScript with React",
-      content: "Learn how to use TypeScript with React components and hooks.",
-      order: 3,
-    },
-    {
-      courseId: course.id,
-      title: "State Management",
-      content: "Implement state management in TypeScript applications.",
-      order: 4,
-    },
-    {
-      courseId: course.id,
-      title: "Testing TypeScript Code",
-      content: "Learn how to write tests for TypeScript applications.",
-      order: 5,
-    },
-  ];
-
-  await database.insert(segments).values(segmentsData);
-
   console.log("Database seeded!");
 }
 

Diff for: app/lib/auth.ts

@@ -2,9 +2,10 @@ import { createMiddleware } from "@tanstack/start";
 import { validateRequest } from "~/utils/auth";
 import { redirect } from "@tanstack/react-router";
 import { type User } from "~/db/schema";
+import { env } from "~/utils/env";
 
 export function isAdmin(user: User | null) {
-  return user?.email === process.env.ADMIN_EMAIL;
+  return user?.email === env.ADMIN_EMAIL;
 }
 
 export const authenticatedMiddleware = createMiddleware().server(

Diff for: app/routes/api/stripe/webhook.ts

@@ -1,8 +1,9 @@
 import { createAPIFileRoute } from "@tanstack/start/api";
 import { stripe } from "~/lib/stripe";
 import { updateUserToPremiumUseCase } from "~/use-cases/users";
+import { env } from "~/utils/env";
 
-const webhookSecret = process.env.STRIPE_WEBHOOK_SECRET!;
+const webhookSecret = env.STRIPE_WEBHOOK_SECRET!;
 
 export const APIRoute = createAPIFileRoute("/api/stripe/webhook")({
   POST: async ({ request }) => {

Diff for: app/routes/learn/$slug/_layout.index.tsx

@@ -315,14 +315,17 @@ function ViewSegment({
         </div>
       )}
 
-      {nextSegment && isLoggedIn && (
+      {isLoggedIn && (
         <div className="flex justify-end">
           <Button
             onClick={async () => {
               await markedAsWatchedFn({
                 data: { segmentId: currentSegmentId },
               });
-              setCurrentSegmentId(nextSegment.id);
+
+              if (nextSegment) {
+                setCurrentSegmentId(nextSegment.id);
+              }
             }}
           >
             Next Video <ArrowRight className="ml-2 h-4 w-4" />

Diff for: app/utils/env.ts

@@ -8,4 +8,5 @@ export const env = {
   STRIPE_SECRET_KEY: process.env.STRIPE_SECRET_KEY!,
   STRIPE_PRICE_ID: process.env.STRIPE_PRICE_ID!,
   STRIPE_WEBHOOK_SECRET: process.env.STRIPE_WEBHOOK_SECRET!,
+  ADMIN_EMAIL: process.env.ADMIN_EMAIL!,
 };

Diff for: app/utils/session.ts

@@ -2,6 +2,7 @@ import { type UserId } from "~/use-cases/types";
 import { createSession, generateSessionToken, validateRequest } from "./auth";
 import { AuthenticationError } from "~/use-cases/errors";
 import { getCookie, setCookie } from "vinxi/http";
+import { env } from "./env";
 
 const SESSION_COOKIE_NAME = "session";
 
@@ -12,7 +13,7 @@ export async function setSessionTokenCookie(
   setCookie(SESSION_COOKIE_NAME, token, {
     httpOnly: true,
     sameSite: "lax",
-    secure: process.env.NODE_ENV === "production",
+    secure: env.NODE_ENV === "production",
     expires: expiresAt,
     path: "/",
   });
@@ -22,7 +23,7 @@ export async function deleteSessionTokenCookie(): Promise<void> {
   setCookie(SESSION_COOKIE_NAME, "", {
     httpOnly: true,
     sameSite: "lax",
-    secure: process.env.NODE_ENV === "production",
+    secure: env.NODE_ENV === "production",
     maxAge: 0,
     path: "/",
   });

Diff for: drizzle/0006_right_sunfire.sql

@@ -0,0 +1,3 @@
+DROP INDEX "progress_user_id_segment_id_idx";--> statement-breakpoint
+ALTER TABLE "app_progress" ADD CONSTRAINT "app_progress_segmentId_app_segment_id_fk" FOREIGN KEY ("segmentId") REFERENCES "public"."app_segment"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+CREATE UNIQUE INDEX "progress_user_segment_unique_idx" ON "app_progress" USING btree ("userId","segmentId");