New era

apps/gql/.env.example

@@ -1,2 +1,6 @@
 NODE_ENV=development
 DATABASE_URL=mysql://kampus:kampus@localhost:3306/kampus?schema=public
+
+NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
+CLERK_SECRET_KEY=
+CLERK_WEBHOOK_SECRET=

apps/gql/app/api/webhooks/clerk/route.ts

@@ -0,0 +1,102 @@
+import { headers } from "next/headers";
+import { type WebhookEvent } from "@clerk/nextjs/server";
+import { Webhook } from "svix";
+
+import { createClients } from "~/clients";
+import { env } from "~/env";
+
+export const dynamic = "force-dynamic";
+
+const { prisma: db } = createClients();
+
+export async function POST(req: Request) {
+  // Get the headers
+  const headerPayload = headers();
+  const svix_id = headerPayload.get("svix-id");
+  const svix_timestamp = headerPayload.get("svix-timestamp");
+  const svix_signature = headerPayload.get("svix-signature");
+
+  // If there are no headers, error out
+  if (!svix_id || !svix_timestamp || !svix_signature) {
+    return new Response("Error occured -- no svix headers", {
+      status: 400,
+    });
+  }
+
+  // Get the body
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+  const payload = await req.json();
+  const body = JSON.stringify(payload);
+
+  // Create a new SVIX instance with your secret.
+  const wh = new Webhook(env.CLERK_WEBHOOK_SECRET);
+
+  let evt: WebhookEvent;
+
+  // Verify the payload with the headers
+  try {
+    evt = wh.verify(body, {
+      "svix-id": svix_id,
+      "svix-timestamp": svix_timestamp,
+      "svix-signature": svix_signature,
+    }) as WebhookEvent;
+  } catch (err) {
+    console.error("Error verifying webhook:", err);
+    return new Response("Error occured", {
+      status: 400,
+    });
+  }
+
+  if (evt) {
+    // 👉 Parse the incoming event body into a ClerkWebhook object
+    try {
+      // 👉 `webhook.type` is a string value that describes what kind of event we need to handle
+
+      // 👉 If the type is "user.updated" the important values in the database will be updated in the users table
+      if (evt.type === "user.updated") {
+        const email = evt.data.email_addresses[0]?.email_address;
+        if (email) {
+          await db.user.update({
+            where: { id: evt.data.id },
+            data: {
+              username: evt.data.username || "",
+              name: `${evt.data.first_name ?? ""} ${evt.data.last_name ?? ""}`.trim() || null,
+              image: evt.data.image_url,
+              email,
+            },
+          });
+        }
+      }
+
+      // 👉 If the type is "user.created" create a record in the users table
+      if (evt.type === "user.created") {
+        const email = evt.data.email_addresses[0]?.email_address;
+        if (email) {
+          await db.user.create({
+            data: {
+              id: evt.data.id,
+              username: evt.data.username || "",
+              name: `${evt.data.first_name ?? ""} ${evt.data.last_name ?? ""}`.trim() || null,
+              image: evt.data.image_url,
+              email,
+            },
+          });
+        }
+      }
+
+      // 👉 If the type is "user.deleted", delete the user record and associated blocks
+      if (evt.type === "user.deleted") {
+        await db.user.delete({
+          where: { id: evt.data.id },
+        });
+      }
+
+      return new Response("", { status: 201 });
+    } catch (err) {
+      console.error(err);
+      return new Response("Error occured -- processing webhook data", {
+        status: 500,
+      });
+    }
+  }
+}

apps/gql/app/graphql/route.ts

@@ -1,5 +1,6 @@
 import { readFileSync } from "node:fs";
 import { join } from "node:path";
+import { currentUser } from "@clerk/nextjs";
 import { createSchema, createYoga } from "graphql-yoga";
 
 import { createActions } from "~/actions";
@@ -11,19 +12,24 @@ import { type KampusGQLContext } from "~/schema/types";
 const typeDefs = readFileSync(join(process.cwd(), "schema/schema.graphql"), "utf8").toString();
 const clients = createClients();
 
+async function getUserSession() {
+  const user = await currentUser();
+  return user ? { user: { id: user.id } } : null;
+}
+
 const { handleRequest } = createYoga<KampusGQLContext>({
   schema: createSchema<KampusGQLContext>({ typeDefs, resolvers }),
   logging: "debug",
   graphiql: true,
-  context: () => {
+  context: async () => {
     const loaders = createLoaders(clients);
     const actions = createActions(clients);
 
     return {
       loaders,
       actions,
       pasaport: {
-        session: null,
+        session: await getUserSession(),
       },
     } satisfies KampusGQLContext;
   },

apps/gql/env.ts

@@ -6,6 +6,9 @@ export const env = parseEnv(
     NODE_ENV: process.env.NODE_ENV,
     DATABASE_URL: process.env.DATABASE_URL,
     KAMPUS_ENV: process.env.KAMPUS_ENV,
+    NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
+    CLERK_SECRET_KEY: process.env.CLERK_SECRET_KEY,
+    CLERK_WEBHOOK_SECRET: process.env.CLERK_WEBHOOK_SECRET,
   },
   {
     NODE_ENV: z.enum(["development", "test", "production"]),
@@ -14,5 +17,7 @@ export const env = parseEnv(
       .url()
       .default("mysql://kampus:kampus@localhost:3306/kampus?schema=public&connect_timeout=300"),
     KAMPUS_ENV: z.enum(["development", "test", "production"]).default("development"),
+    NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: z.string().default("clerk-pub-key"),
+    CLERK_WEBHOOK_SECRET: z.string().default("clerk-webhook-secret"),
   }
 );

apps/gql/middleware.ts

@@ -0,0 +1,10 @@
+import { authMiddleware } from "@clerk/nextjs";
+
+export default authMiddleware({
+  // "/" will be accessible to all users
+  publicRoutes: ["/", "/graphql", "/api/webhooks(.*)"],
+});
+
+export const config = {
+  matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/", "/(api|graphql)(.*)"],
+};

apps/gql/package.json

@@ -28,6 +28,7 @@
     "vitest-mock-extended": "1.1.3"
   },
   "dependencies": {
+    "@clerk/nextjs": "4.27.5",
     "@graphql-tools/schema": "9.0.19",
     "@kampus/gql-utils": "*",
     "@kampus/prisma": "*",
@@ -40,6 +41,7 @@
     "graphql-scalars": "1.21.3",
     "graphql-yoga": "3.9.1",
     "object-hash": "3.0.0",
+    "svix": "1.15.0",
     "znv": "0.3.2",
     "zod": "3.21.4"
   }

apps/gql/schema/types.ts

@@ -5,6 +5,6 @@ export interface KampusGQLContext {
   loaders: DataLoaders;
   actions: DataActions;
   pasaport: {
-    session: null | { id: string; user: { id: string } };
+    session: null | { user: { id: string } };
   };
 }

apps/kampus/.env.example

@@ -3,3 +3,6 @@ NEXT_PUBLIC_GQL_URL=http://gql.localhost.kamp.us:4000/graphql
 NEXT_PUBLIC_KAMPUS_ENV=localhost
 
 RESEND_API_KEY="get-your-own-resend-api-key"
+
+NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
+CLERK_SECRET_KEY=

apps/kampus/app/ThemeProvider.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { type PropsWithChildren } from "react";
+import { Theme, ThemePanel } from "@radix-ui/themes";
+
+import "@radix-ui/themes/styles.css";
+
+import { ThemeProvider as KampusThemeProvider } from "@kampus/ui";
+
+export function ThemeProvider(props: PropsWithChildren) {
+  return (
+    <KampusThemeProvider attribute="class" defaultTheme="system" enableSystem>
+      <Theme>{props.children}</Theme>
+    </KampusThemeProvider>
+  );
+}

apps/kampus/app/layout.tsx

@@ -7,25 +7,26 @@ import { RelayEnvironmentProvider } from "~/features/relay/RelayEnvironmentProvi
 
 import "./globals.css";
 
-import { ThemeProvider } from "@kampus/ui";
-import { cn } from "~/../../packages/ui/utils";
+import { trTR } from "@clerk/localizations";
+import { ClerkProvider } from "@clerk/nextjs";
+
+import { ThemeProvider } from "./ThemeProvider";
 
 const inter = Inter({ subsets: ["latin"], variable: "--font-sans" });
 
 export const metadata = {
   title: "kamp.us",
-  description: "topluluk",
+  description: "dijital enstitü",
 };
 
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
-    <html lang="en">
-      <body className={cn(
-          "min-h-screen bg-background font-sans antialiased",
-          inter.variable
-        )}>
-        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-          <RelayEnvironmentProvider>{children}</RelayEnvironmentProvider>
+    <html lang="tr">
+      <body className={inter.variable}>
+        <ThemeProvider>
+          <ClerkProvider localization={trTR}>
+            <RelayEnvironmentProvider>{children}</RelayEnvironmentProvider>
+          </ClerkProvider>
           <Toaster />
         </ThemeProvider>
       </body>

apps/kampus/app/odin/mufredat/[[...lesson]]/OdinLesson.tsx

@@ -2,9 +2,8 @@
 
 import { graphql, usePreloadedQuery } from "react-relay";
 
-import { type SerializablePreloadedQuery } from "@kampus/relay";
-import useSerializablePreloadedQuery from "@kampus/relay/use-serializable-preloaded-query";
-
+import { type SerializablePreloadedQuery } from "~/features/relay";
+import useSerializablePreloadedQuery from "~/features/relay/use-serializable-preloaded-query";
 import { type OdinLessonQuery } from "~/app/odin/mufredat/[[...lesson]]/__generated__/OdinLessonQuery.graphql";
 import { OdinLessonActions } from "./OdinLessonActions";
 import { OdinLessonBody } from "./OdinLessonBody";

apps/kampus/app/odin/mufredat/[[...lesson]]/page.tsx

@@ -1,5 +1,4 @@
-import loadSerializableQuery from "@kampus/relay/load-serializable-query";
-
+import loadSerializableQuery from "~/features/relay/load-serializable-query";
 import OdinLessonQueryNode, {
   type OdinLessonQuery,
 } from "~/app/odin/mufredat/[[...lesson]]/__generated__/OdinLessonQuery.graphql";

apps/kampus/app/pano/@modal/(.)post/create/page.tsx

@@ -1,19 +1,24 @@
 "use client";
 
 import { useRouter } from "next/navigation";
-
-import { Dialog, DialogContent } from "@kampus/ui";
+import { Dialog, Theme } from "@radix-ui/themes";
 
 import { CreatePanoPostForm } from "~/app/pano/CreatePanoPostForm";
 
 export default function CreatePost({ searchParams }: { searchParams: { conn: string } }) {
   const router = useRouter();
 
   return (
-    <Dialog open onOpenChange={() => router.back()}>
-      <DialogContent className="sm:max-w-[425px]">
-        <CreatePanoPostForm connectionID={searchParams.conn} onCompleted={() => router.back()} />
-      </DialogContent>
-    </Dialog>
+    <Theme accentColor="amber">
+      <Dialog.Root open onOpenChange={() => router.back()}>
+        <Dialog.Content className="sm:max-w-[425px]">
+          <Dialog.Title>Yeni Pano Girdisi</Dialog.Title>
+          <Dialog.Description size="2" mb="4">
+            pano&apos;yu zenginleştir :)
+          </Dialog.Description>
+          <CreatePanoPostForm connectionID={searchParams.conn} onCompleted={() => router.back()} />
+        </Dialog.Content>
+      </Dialog.Root>
+    </Theme>
   );
 }