feat: attempt to fix the crud with auth

app/api/protected/customer-form/route.ts

@@ -0,0 +1,53 @@
+import { getSession, withApiAuthRequired } from '@auth0/nextjs-auth0';
+import prisma from '@prisma/prisma';
+import { randomUUID } from 'crypto';
+import { NextResponse } from 'next/server';
+
+export const GET = withApiAuthRequired(async () => {
+  const session = await getSession();
+
+  console.log('GET', session?.user);
+
+  // const userModules = await prisma.user.findUniqueOrThrow({
+  //   where: {
+  //     email: session?.user.email
+  //   },
+  //   include: {
+  //     CustomerForm: true
+  //   }
+  // });
+
+  // const customerForms: CustomerForm[] = userModules.CustomerForm;
+
+  return NextResponse.json([]);
+});
+
+export const POST = withApiAuthRequired(async request => {
+  try {
+    const session = await getSession();
+
+    const body = await request.json();
+
+    console.log('POST', session?.user);
+
+    const newCustomerForm = await prisma.customerForm.create({
+      data: {
+        type: body.type,
+        text: body.text,
+        createdBy: {
+          connect: {
+            id: randomUUID(),
+            email: session?.user.email
+          }
+        }
+      }
+    });
+
+    return NextResponse.json({ success: true, data: newCustomerForm });
+  } catch (error) {
+    return NextResponse.json(
+      { success: false, message: 'Something went wrong.' },
+      { status: 500 }
+    );
+  }
+});

app/api/protected/module/route.ts

@@ -1,9 +0,0 @@
-import { NextRequest, NextResponse } from 'next/server';
-
-export async function GET(request: NextRequest, response: NextResponse) {
-  return NextResponse.json('GET request');
-}
-
-export async function POST(request: NextRequest, response: NextResponse) {
-  return NextResponse.json('POST request');
-}

app/costumer-form/[id]/page.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+export default function SingleCustomerForm({
+  params
+}: {
+  params: { id: string };
+}) {
+  return <div>Module {params.id}</div>;
+}

app/costumer-form/page.tsx

@@ -0,0 +1,106 @@
+'use client';
+
+import { Button } from '@components/Button';
+import { FormControl } from '@components/FormControl';
+import { FormMessage } from '@components/FormMessage';
+import { Input } from '@components/Input';
+import { FormField } from '@contexts/FormField/FormFieldProvider';
+import { FormItem } from '@contexts/FormItem/FormItemProvider';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { CustomerFormType } from '@prisma/client';
+import {
+  CustomerForm,
+  CustomerFormListSchema,
+  CustomerFormSchema
+} from '@utils/types';
+import axios from 'axios';
+import { useEffect, useState } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+
+export default function Modules() {
+  const [modules, setModules] = useState<CustomerForm[]>([]);
+
+  const form = useForm<CustomerForm>({
+    resolver: zodResolver(CustomerFormSchema),
+    defaultValues: {
+      type: CustomerFormType.TYPE1,
+      text: ''
+    }
+  });
+
+  useEffect(() => {
+    (async () => {
+      const response = await axios.get('/api/protected/customer-form');
+
+      const validatedResponse = CustomerFormListSchema.safeParse(response.data);
+
+      if (!validatedResponse.success) {
+        console.error(validatedResponse.error);
+        return;
+      }
+
+      setModules(validatedResponse.data);
+    })();
+  }, []);
+
+  async function handleSubmit(values: CustomerForm) {
+    console.log('values', values);
+
+    try {
+      const response = await axios.post(
+        '/api/protected/customer-form',
+        {
+          type: CustomerFormType.TYPE1,
+          text: values.text
+        },
+        {
+          headers: {
+            'Content-Type': 'application/json'
+          }
+        }
+      );
+
+      const validatedResponse = CustomerFormSchema.safeParse(response.data);
+
+      if (!validatedResponse.success) {
+        console.error(validatedResponse.error);
+        return;
+      }
+
+      setModules([...modules, validatedResponse.data]);
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  return (
+    <>
+      <h1>Modules</h1>
+      {modules &&
+        modules.map(module => (
+          <div key={module.id}>
+            <h2>{module.type}</h2>
+            <p>{module.text}</p>
+          </div>
+        ))}
+      <h1>Create Module</h1>
+      <FormProvider {...form}>
+        <form onSubmit={form.handleSubmit(handleSubmit)}>
+          <FormField
+            control={form.control}
+            name='text'
+            render={({ field }) => (
+              <FormItem>
+                <FormMessage />
+                <FormControl>
+                  <Input placeholder='name' {...field} />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+          <Button type='submit'>Submit</Button>
+        </form>
+      </FormProvider>
+    </>
+  );
+}

app/module/[id]/page.tsx

@@ -1,3 +0,0 @@
-export default function SpecificModule({ params }: { params: { id: string } }) {
-  return <div>Module {params.id}</div>;
-}

app/module/page.tsx

@@ -1,3 +0,0 @@
-export default function Module() {
-  return <div>Modules home</div>;
-}

app/profile/page.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { withPageAuthRequired } from '@auth0/nextjs-auth0/client';
+import axios from 'axios';
 import { useEffect, useState } from 'react';
 
 export default withPageAuthRequired(function Profile() {
@@ -8,18 +9,16 @@ export default withPageAuthRequired(function Profile() {
 
   useEffect(() => {
     (async () => {
-      const res = await fetch(
-        `${window.location.origin}/api/protected/profile`
-      );
-      setUser(await res.json());
+      const response = await axios.get('/api/protected/profile');
+
+      setUser(response.data);
     })();
   }, []);
 
   return (
-    <main>
+    <>
       <h1>Profile (fetched from API)</h1>
-      <h3>User</h3>
-      <pre data-testid='module'>{JSON.stringify(user, null, 2)}</pre>
-    </main>
+      {JSON.stringify(user, null, 2)}
+    </>
   );
 });