Add completed tasks to navbar, create profile route

Author: ajdinhusetovic

next.config.js

@@ -1,10 +1,17 @@
-/**
- * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
- * for Docker builds.
- */
 await import("./src/env.js");
 
 /** @type {import("next").NextConfig} */
-const config = {};
+const config = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "cdn.discordapp.com",
+        port: "",
+        pathname: "/embed/avatars/**",
+      },
+    ],
+  },
+};
 
 export default config;

prisma/schema.prisma

@@ -54,14 +54,15 @@ model Session {
 }
 
 model User {
-    id            String    @id @default(cuid())
-    name          String?
-    email         String?   @unique
-    emailVerified DateTime?
-    image         String?
-    accounts      Account[]
-    sessions      Session[]
-    tasks         Task[]
+    id             String    @id @default(cuid())
+    name           String?
+    email          String?   @unique
+    emailVerified  DateTime?
+    image          String?
+    accounts       Account[]
+    sessions       Session[]
+    tasks          Task[]
+    completedTasks Int       @default(0)
 }
 
 model VerificationToken {

src/app/_components/navbar.tsx

@@ -29,14 +29,19 @@ const Navbar = () => {
           </div>
           <ul
             tabIndex={0}
-            className="menu menu-sm dropdown-content rounded-box z-[1] mt-3 w-52 bg-violet-50 p-2 shadow"
+            className="menu dropdown-content menu-sm z-[1] mt-3 w-52 rounded-box bg-violet-50 p-2 shadow"
           >
             <li className="text-2xl text-orange-500">
               <Link href="/">Home</Link>
             </li>
             <li className="text-orange-500">
               <Link href="/create-task">Create Task</Link>
             </li>
+            {user !== undefined && (
+              <li className="text-orange-500">
+                <Link href="/completed-tasks">Completed</Link>
+              </li>
+            )}
             {user !== undefined && (
               <li className="text-orange-500">
                 <Link href={`/profiles/${user?.id}`}>Profile</Link>
@@ -61,7 +66,12 @@ const Navbar = () => {
           </li>
           {user !== undefined && (
             <li className="rounded text-lg font-medium text-zinc-950 hover:bg-orange-200">
-              <Link href={`/profiles/${user?.id}`}>Profile</Link>
+              <Link href="/completed-tasks">Completed</Link>
+            </li>
+          )}
+          {user !== undefined && (
+            <li className="rounded text-lg font-medium text-zinc-950 hover:bg-orange-200">
+              <Link href={`/profile/${user?.id}`}>Profile</Link>
             </li>
           )}
         </ul>

src/app/profile/[id]/page.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { useSession } from "next-auth/react";
+import Image from "next/image";
+import React from "react";
+
+const Profile = () => {
+  const session = useSession();
+  const user = { ...session.data?.user };
+
+  console.log(session.data?.user.name);
+
+  return (
+    <div className="mt-16 flex flex-col items-center">
+      <Image
+        src={user.image ?? ""}
+        alt="user avatar"
+        width={200}
+        height={200}
+        className="rounded-full"
+      />
+      <div>
+        <h1 className="mt-4 text-4xl">{user.name}</h1>
+      </div>
+    </div>
+  );
+};
+
+export default Profile;