Create ask question (#10)

* Create ask-question form

* Added shadcn form and label components

* Added clerk webhook route

* Created question model

* Created user model

* Created the tag model

* Created connection to the database

* Added shared types between actions

* Added ask question form data validation

* Created the question actions

* Created the user actions

* Created the ask-question page

* Added get all questions from the db

* Added api/webhook to public routes

* Updated api/webhooks public route

* Checking webhook

* Checking event type

* Fix user update action

* Update author imgUrl src

* Configure images with hostname

* Get userId from auth

* Fix avatar rounded className

* Remove unnecessary console.log

Author: adel-gu

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

@@ -4,9 +4,7 @@ import { auth } from '@clerk/nextjs/server';
 import { redirect } from 'next/navigation';
 
 const AskQuestion = async () => {
-  // const { userId } = await auth();
-
-  const userId = 'clerk12345';
+  const { userId } = await auth();
 
   if (!userId) redirect('/sign-in');
 

components/cards/QuestionCard.tsx

@@ -46,7 +46,7 @@ const QuestionCard = ({
       </div>
       <div className="flex-between mt-6 w-full flex-wrap gap-3">
         <Metric
-          imgUrl="/assets/icons/avatar.svg"
+          imgUrl={author.picture}
           alt={author.name}
           value={author.name}
           title={` • ${getTimeStamp(createdAt)}`}

components/shared/Metric.tsx

@@ -27,7 +27,7 @@ const Metric = ({
         alt={alt}
         width={16}
         height={16}
-        className={`object-contain ${href ? 'rounded-fill' : ''}`}
+        className={`object-contain ${href ? 'rounded-full' : ''}`}
       />
       <p className={`flex items-center gap-1 ${textStyles}`}>
         <span>{value}</span>

lib/actions/user.action.ts

@@ -38,8 +38,9 @@ export async function createUser(params: CreateUserParams) {
 export async function updateUser(params: UpdateUserParams) {
   try {
     connectToDatabase();
+
     const { clerkId, updateData, path } = params;
-    await User.findByIdAndUpdate({ clerkId }, updateData, { new: true });
+    await User.findOneAndUpdate({ clerkId }, updateData, { new: true });
 
     revalidatePath(path);
   } catch (error) {

middleware.ts

@@ -1,6 +1,17 @@
 import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server';
 
-const isPublicRoute = createRouteMatcher(['/sign-in(.*)', '/sign-up(.*)', '/']);
+const isPublicRoute = createRouteMatcher([
+  '/sign-in(.*)',
+  '/sign-up(.*)',
+  '/',
+  '/api/webhooks(.*)',
+  '/api/chatgpt',
+  '/question/:id',
+  '/tags',
+  '/tags/:id',
+  '/community',
+  '/jobs',
+]);
 
 export default clerkMiddleware(async (auth, request) => {
   if (!isPublicRoute(request)) {

next.config.ts

@@ -1,7 +1,19 @@
-import type { NextConfig } from "next";
+import type { NextConfig } from 'next';
 
 const nextConfig: NextConfig = {
   /* config options here */
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: '*',
+      },
+      {
+        protocol: 'http',
+        hostname: '*',
+      },
+    ],
+  },
 };
 
 export default nextConfig;