ask question + Webhooks

Author: UnderprotectionDev

app/(root)/(home)/page.tsx

@@ -1,59 +1,60 @@
-"use client";
-
 import QuestionCard from "@/components/cards/QuestionCard";
 import HomeFilters from "@/components/home/HomeFilters";
 import { Filter } from "@/components/shared/Filter";
 import NoResult from "@/components/shared/NoResult";
 import { LocalSearchbar } from "@/components/shared/search/LocalSearchbar";
 import { Button } from "@/components/ui/button";
 import { HomePageFilters } from "@/constants/filters";
+import { getQuestions } from "@/lib/actions/question.action";
 import Link from "next/link";
 
-const questions = [
-  {
-    _id: "1",
-    title: "Cascading Deletes in SQLAlchemy?",
-    tags: [
-      { _id: "1", name: "python" },
-      { _id: "2", name: "sql" },
-    ],
-    author: {
-      _id: "1",
-      name: "John Doe",
-      picture: "https://example.com/johndoe.jpg",
-    },
-    upvotes: 12311213421,
-    views: 500552,
-    answers: [{}],
-    createdAt: new Date("2024-09-01T12:00:00.000Z"),
-  },
-  {
-    _id: "2",
-    title: "How to center a div?",
-    tags: [
-      { _id: "1", name: "css" },
-      { _id: "2", name: "html" },
-    ],
-    author: {
-      _id: "2",
-      name: "Jane Doe",
-      picture: "https://example.com/janedoe.jpg",
-    },
-    upvotes: 20,
-    views: 200,
-    answers: [{}],
-    createdAt: new Date("2021-09-01T12:00:00.000Z"),
-  },
-];
+// const questions = [
+//   {
+//     _id: "1",
+//     title: "Cascading Deletes in SQLAlchemy?",
+//     tags: [
+//       { _id: "1", name: "python" },
+//       { _id: "2", name: "sql" },
+//     ],
+//     author: {
+//       _id: "1",
+//       name: "John Doe",
+//       picture: "https://example.com/johndoe.jpg",
+//     },
+//     upvotes: 12311213421,
+//     views: 500552,
+//     answers: [{}],
+//     createdAt: new Date("2024-09-01T12:00:00.000Z"),
+//   },
+//   {
+//     _id: "2",
+//     title: "How to center a div?",
+//     tags: [
+//       { _id: "1", name: "css" },
+//       { _id: "2", name: "html" },
+//     ],
+//     author: {
+//       _id: "2",
+//       name: "Jane Doe",
+//       picture: "https://example.com/janedoe.jpg",
+//     },
+//     upvotes: 20,
+//     views: 200,
+//     answers: [{}],
+//     createdAt: new Date("2021-09-01T12:00:00.000Z"),
+//   },
+// ];
+
+export default async function Home() {
+  const result = await getQuestions({});
 
-export default function Home() {
   return (
     <>
       <div className="flex w-full flex-col-reverse justify-between gap-4 sm:flex-row sm:items-center">
         <h1 className="h1-bold text-dark100_light900">All Questions</h1>
         <Link href={`/ask-question`} className="flex justify-end max-sm:w-full">
           <Button className="primary-gradient min-h-[46px] px-4 py-3 !text-light-900">
-            Ask a Questions
+            Ask a Question
           </Button>
         </Link>
       </div>
@@ -75,8 +76,8 @@ export default function Home() {
       <HomeFilters />
 
       <div className="mt-10 flex w-full flex-col gap-6">
-        {questions.length > 0 ? (
-          questions.map((question) => (
+        {result.questions.length > 0 ? (
+          result.questions.map((question) => (
             <QuestionCard
               key={question._id}
               _id={question._id}

app/(root)/ask-question/page.tsx

@@ -1,7 +1,23 @@
+import Question from "@/components/forms/Question";
+import { getUserById } from "@/lib/actions/user.action";
+import { auth } from "@clerk/nextjs/server";
+import { redirect } from "next/navigation";
 import React from "react";
 
-const page = () => {
-  return <div>Ask Question</div>;
+const Page = async () => {
+  //const { userId } = auth();
+  const userId = "clerk_12345";
+  if (!userId) redirect("/sign-in");
+  const mongoUser = await getUserById({ userId });
+  console.log("MONGOUSER", mongoUser);
+  return (
+    <div>
+      <h1 className="h1-bold text-dark100_light900">Ask a question</h1>
+      <div className="mt-9">
+        <Question mongoUserId={JSON.stringify(mongoUser._id)} />
+      </div>
+    </div>
+  );
 };
 
-export default page;
+export default Page;

app/api/webhook/route.ts

@@ -0,0 +1,101 @@
+import { Webhook } from "svix";
+import { headers } from "next/headers";
+import { WebhookEvent } from "@clerk/nextjs/server";
+import { createUser, deleteUser, updateUser } from "@/lib/actions/user.action";
+import { json } from "stream/consumers";
+import { NextResponse } from "next/server";
+
+export async function POST(req: Request) {
+  // You can find this in the Clerk Dashboard -> Webhooks -> choose the endpoint
+  const WEBHOOK_SECRET = process.env.WEBHOOK_SECRET;
+
+  if (!WEBHOOK_SECRET) {
+    throw new Error(
+      "Please add WEBHOOK_SECRET from Clerk Dashboard to .env or .env.local"
+    );
+  }
+
+  // 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
+  const payload = await req.json();
+  const body = JSON.stringify(payload);
+
+  // Create a new Svix instance with your secret.
+  const wh = new Webhook(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,
+    });
+  }
+
+  // Do something with the payload
+  // For this guide, you simply log the payload to the console
+  const { id } = evt.data;
+  const eventType = evt.type;
+
+  if (eventType === "user.created") {
+    const { id, email_addresses, image_url, username, first_name, last_name } =
+      evt.data;
+
+    const mongoUser = await createUser({
+      clerkId: id,
+      name: `${first_name}${last_name ? ` ${last_name}` : ""}`,
+      username: username!,
+      email: email_addresses[0].email_address,
+      picture: image_url,
+    });
+
+    return NextResponse.json({ message: "Ok", user: mongoUser });
+  }
+  if (eventType === "user.updated") {
+    const { id, email_addresses, image_url, username, first_name, last_name } =
+      evt.data;
+
+    const mongoUser = await updateUser({
+      clerkId: id,
+      updateData: {
+        name: `${first_name}${last_name ? ` ${last_name}` : ""}`,
+        username: username!,
+        email: email_addresses[0].email_address,
+        picture: image_url,
+      },
+      path: `/profile/${id}`,
+    });
+
+    return NextResponse.json({ message: "Ok", user: mongoUser });
+  }
+
+  if (eventType === "user.deleted") {
+    const { id } = evt.data;
+
+    const deletedUser = await deleteUser({
+      clerkId: id!,
+    });
+    return NextResponse.json({ message: "Ok", user: deletedUser });
+  }
+
+  return new Response("", { status: 200 });
+}