reorder modules

Author: webdevcody

.cursor/rules/my-code-rules.mdc

@@ -28,10 +28,16 @@ When a page is loading, please remember to add a loader to the route which shoul
 Here is a basic example of how to create a loader for a route, invoke a loader server function, fetch some data, and then access it in the route
 
 ```
-const loaderFn = createServerFn().handler(async () => {
-  const segments = await getSegments();
-  return { segments };
-});
+const loaderFn = createServerFn()
+  .validator(
+      z.object({
+        title: z.string(),
+      })
+  )
+  .handler(async () => {
+    const segments = await getSegments();
+    return { segments };
+  });
 
 export const Route = createFileRoute("/")({
   component: Home,
@@ -42,6 +48,42 @@ function Home() {
   const { segments } = Route.useLoaderData();
 ```
 
+## Validators
+
+You should always add a validator to server functions.
+
+```
+const createSegmentFn = createServerFn()
+  .middleware([adminMiddleware])
+  .validator(
+    z.object({
+      title: z.string(),
+      content: z.string(),
+      videoKey: z.string().optional(),
+      slug: z.string(),
+      moduleTitle: z.string(),
+      length: z.string().optional(),
+      isPremium: z.boolean(),
+    })
+  )
+  .handler(async ({ data }) => {
+```
+
+
 # File Naming Convention
 
 all files must be lowercase with hyphens.
+
+# Data Access Prefernce
+
+try to use the database.query method over doing manual select statements. here is an example of the query method: `await database.query.modules.findFirst(`
+
+# Link component
+
+never interpolate the to string, instead use props:
+
+```
+<Link 
+  to="/learn/$slug"
+  params={{ slug: continueSlug }}>Start Learning</Link>
+```

.env.sample

@@ -8,6 +8,9 @@ AWS_ACCESS_KEY_ID=S3RVER
 AWS_SECRET_ACCESS_KEY=S3RVER
 ADMIN_EMAIL=[email protected]
 STRIPE_SECRET_KEY=your_stripe_secret_key
-VITE_STRIPE_PUBLISHABLE_KEY=your_stripe_publishable_key
 STRIPE_WEBHOOK_SECRET=your_stripe_webhook_secret
-STRIPE_PRICE_ID=your_stripe_price_id
+STRIPE_PRICE_ID=your_stripe_price_id
+UPLOAD_DIR=./files
+
+VITE_STRIPE_PUBLISHABLE_KEY=your_stripe_publishable_key
+VITE_FILE_URL=http://localhost:3000/api/videos

.gitignore

@@ -20,4 +20,5 @@ yarn.lock
 /playwright-report/
 /blob-report/
 /playwright/.cache/
-s3/wdc-tanstack-starter-kit/
+s3/wdc-tanstack-starter-kit/
+files/*

app.config.ts

@@ -3,13 +3,7 @@ import tsConfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig({
   vite: {
-    plugins: [
-      tsConfigPaths({
-        projects: ["./tsconfig.json"],
-      }),
-    ],
-    ssr: {
-      noExternal: ["react-dropzone"],
-    },
+    plugins: [tsConfigPaths({ projects: ["./tsconfig.json"] })],
+    ssr: { noExternal: ["react-dropzone"] },
   },
 });

app/components/ui/switch.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+
+import { cn } from "~/lib/utils";
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };

app/data-access/modules.ts

@@ -0,0 +1,60 @@
+import { database } from "~/db";
+import { modules, segments } from "~/db/schema";
+import { eq } from "drizzle-orm";
+import type { Module, ModuleCreate } from "~/db/schema";
+
+export async function getModules() {
+  return database.select().from(modules).orderBy(modules.order);
+}
+
+export async function getModuleById(id: Module["id"]) {
+  const result = await database.query.modules.findFirst({
+    where: eq(modules.id, id),
+  });
+  return result;
+}
+
+export async function createModule(module: ModuleCreate) {
+  const result = await database.insert(modules).values(module).returning();
+  return result[0];
+}
+
+export async function getModuleByTitle(title: string) {
+  const result = await database
+    .select()
+    .from(modules)
+    .where(eq(modules.title, title))
+    .limit(1);
+  return result[0];
+}
+
+export async function getModulesWithSegments() {
+  return database.query.modules.findMany({
+    with: { segments: true },
+    orderBy: modules.order,
+  });
+}
+
+export async function updateModuleOrder(moduleId: number, newOrder: number) {
+  return database
+    .update(modules)
+    .set({ order: newOrder, updatedAt: new Date() })
+    .where(eq(modules.id, moduleId))
+    .returning();
+}
+
+export async function reorderModules(updates: { id: number; order: number }[]) {
+  // Use a transaction to ensure all updates happen together
+  return database.transaction(async (tx) => {
+    const results = [];
+    for (const update of updates) {
+      const [result] = await tx
+        .update(modules)
+        .set({ order: update.order, updatedAt: new Date() })
+        .where(eq(modules.id, update.id))
+        .returning();
+      results.push(result);
+    }
+    return results;
+  });
+}

app/data-access/segments.ts

@@ -4,7 +4,7 @@ import { and, eq } from "drizzle-orm";
 import type { Progress, Segment, SegmentCreate } from "~/db/schema";
 
 export async function getSegments() {
-  return database.select().from(segments).orderBy(segments.order);
+  return database.query.segments.findMany();
 }
 
 export type SegmentWithProgress = Segment & { progress: Progress | null };

app/db/schema.ts

@@ -60,6 +60,14 @@ export const sessions = tableCreator(
   (table) => [index("sessions_user_id_idx").on(table.userId)]
 );
 
+export const modules = tableCreator("module", {
+  id: serial("id").primaryKey(),
+  title: text("title").notNull(),
+  order: integer("order").notNull(),
+  createdAt: timestamp("created_at").notNull().defaultNow(),
+  updatedAt: timestamp("updated_at").notNull().defaultNow(),
+});
+
 export const segments = tableCreator(
   "segment",
   {
@@ -70,7 +78,9 @@ export const segments = tableCreator(
     order: integer("order").notNull(),
     length: text("length"),
     isPremium: boolean("isPremium").notNull().default(false),
-    moduleId: text("moduleId").notNull(),
+    moduleId: serial("moduleId")
+      .notNull()
+      .references(() => modules.id, { onDelete: "cascade" }),
     videoKey: text("videoKey"),
     createdAt: timestamp("created_at").notNull().defaultNow(),
     updatedAt: timestamp("updated_at").notNull().defaultNow(),
@@ -98,8 +108,16 @@ export const progress = tableCreator(
   ]
 );
 
-export const segmentsRelations = relations(segments, ({ many }) => ({
+export const modulesRelations = relations(modules, ({ many }) => ({
+  segments: many(segments),
+}));
+
+export const segmentsRelations = relations(segments, ({ one, many }) => ({
   attachments: many(attachments),
+  module: one(modules, {
+    fields: [segments.moduleId],
+    references: [modules.id],
+  }),
 }));
 
 export const attachments = tableCreator("attachment", {
@@ -128,3 +146,5 @@ export type Attachment = typeof attachments.$inferSelect;
 export type AttachmentCreate = typeof attachments.$inferInsert;
 export type Progress = typeof progress.$inferSelect;
 export type ProgressCreate = typeof progress.$inferInsert;
+export type Module = typeof modules.$inferSelect;
+export type ModuleCreate = typeof modules.$inferInsert;