From b3397d764941183f8130f90f283b19ef18faa281 Mon Sep 17 00:00:00 2001
From: Juthatip McDevitt <jtp@mcdevitt.tech>
Date: Sun, 31 Mar 2024 14:11:31 -0500
Subject: [PATCH] finished user comment functionality

---
 .../src/app/api/users/route.ts                | 21 ++++++++++++++-----
 task_management_app/src/app/globals.css       |  2 +-
 .../src/app/liveblocks.config.ts              | 18 +++++++++-------
 task_management_app/src/components/Card.tsx   |  2 +-
 task_management_app/src/components/Column.tsx |  2 +-
 .../src/components/Columns.tsx                |  2 +-
 task_management_app/src/components/Header.tsx | 10 +++++----
 .../src/components/forms/NewCardForm.tsx      |  2 +-
 .../src/components/views/CardModal.tsx        |  3 +--
 task_management_app/src/lib/authOptions.ts    | 15 ++++++-------
 10 files changed, 47 insertions(+), 30 deletions(-)

diff --git a/task_management_app/src/app/api/users/route.ts b/task_management_app/src/app/api/users/route.ts
index de74f50..2cae26a 100644
--- a/task_management_app/src/app/api/users/route.ts
+++ b/task_management_app/src/app/api/users/route.ts
@@ -8,14 +8,25 @@ export async function GET(req: NextRequest){
     if(!connectionString){
         return new Response('No db connection string', {status:500});
     }
-    if(!url.searchParams.has('ids')){
-        return Response.json([])
 
-    }
-    const emails = url.searchParams.getAll('ids');
     await mongoose.connect(connectionString)
-    const users = await User.find({email: emails});
 
+    let users = [];
+
+    if(url.searchParams.get('ids')){
+        const emails = url.searchParams.get('ids')?.split(',');
+        users = await User.find({email:{$in:emails}});
+    }
+    if(url.toString().includes('?search=')){
+        const searchPhrase = url.searchParams.get('search');
+        const searchRegex = `.*${searchPhrase}.*`;
+        users = await User.find({
+            $or: [
+                {name: {$regex: searchRegex}},
+                {email: {$regex: searchRegex}},
+            ],
+        })
+    }
     return Response.json(users.map((u:UserType) => ({
         id:u.email, 
         name:u.name,
diff --git a/task_management_app/src/app/globals.css b/task_management_app/src/app/globals.css
index f61d858..849a8e3 100644
--- a/task_management_app/src/app/globals.css
+++ b/task_management_app/src/app/globals.css
@@ -4,7 +4,7 @@
 
 
 button[type="button"], button[type="submit"], button.primary{
-    @apply bg-[#164863] text-white p-2 text-sm font-semibold rounded-md flex
+    @apply bg-[#164863] text-white p-2 text-sm font-semibold rounded-md flex w-full justify-center items-center text-center
 }
 button[type="submit"], button.primary{
     @apply bg-[#427D9D] rounded-md
diff --git a/task_management_app/src/app/liveblocks.config.ts b/task_management_app/src/app/liveblocks.config.ts
index 9eaa446..7280970 100644
--- a/task_management_app/src/app/liveblocks.config.ts
+++ b/task_management_app/src/app/liveblocks.config.ts
@@ -2,13 +2,17 @@ import { LiveList, LiveObject, ThreadData, createClient } from "@liveblocks/clie
 import { createRoomContext } from "@liveblocks/react";
 
 const client = createClient({
-    authEndpoint: "/api/liveblocks-auth",
-    throttle: 100,
-    resolveUsers: async ({userIds}) => {
-      const params = new URLSearchParams(userIds.map(id => ['ids', id]));
-      const response = await fetch(`/api/users?` + params.toString());
-      return await response.json();
-    },
+  authEndpoint: "/api/liveblocks-auth",
+  throttle: 100,
+  resolveUsers: async ({userIds}) => {
+    const response = await fetch(`/api/users?ids=` + userIds.join(','));
+    return await response.json();
+  },
+  resolveMentionSuggestions: async ({text}) => {
+    const response = await fetch(`/api/users?search=` + text);
+    const users = await response.json();
+    return users.map((user:UserMeta) => user.id);
+  }
 
 });
 
diff --git a/task_management_app/src/components/Card.tsx b/task_management_app/src/components/Card.tsx
index 6c13744..1529820 100644
--- a/task_management_app/src/components/Card.tsx
+++ b/task_management_app/src/components/Card.tsx
@@ -25,7 +25,7 @@ const Card = ({id, name}: {id:string, name:string}) => {
 
 
   return (
-    <Link href={`/boards/${params.boardId}/cards/${id}`} className='border block my-2 p-2 rounded-sm bg-white'>
+    <Link href={`/boards/${params.boardId}/cards/${id}`} className='border block my-2 p-2 rounded-sm bg-white '>
         <span>{name}</span>
     </Link>
   )
diff --git a/task_management_app/src/components/Column.tsx b/task_management_app/src/components/Column.tsx
index 941133a..1ebaed2 100644
--- a/task_management_app/src/components/Column.tsx
+++ b/task_management_app/src/components/Column.tsx
@@ -65,7 +65,7 @@ const Column = ({id, name}: ColumnProps) => {
 
 
   return (
-    <div className='w-50 shadow-md rounded-md p-2 bg-gray-100'>
+    <div className=' w-50 shadow-md rounded-md p-2 bg-gray-100'>
         {!renameColumn && (
             <div className='flex justify-between'>
                 <h3>{name}</h3>
diff --git a/task_management_app/src/components/Columns.tsx b/task_management_app/src/components/Columns.tsx
index c77a633..f645f3d 100644
--- a/task_management_app/src/components/Columns.tsx
+++ b/task_management_app/src/components/Columns.tsx
@@ -27,7 +27,7 @@ const Columns = () => {
   }
 
   return (
-    <div className='flex gap-4'>
+    <div className='block lg:flex gap-4'>
       <ReactSortable group={'board-column'} list={columns} setList={setColumnsOrder} className="flex gap-4" ghostClass="opacity-40">
         {columns?.length >0 && columns.map(column => (
             <BoardColumn key={column.id} {...column} />
diff --git a/task_management_app/src/components/Header.tsx b/task_management_app/src/components/Header.tsx
index c38a077..48880d4 100644
--- a/task_management_app/src/components/Header.tsx
+++ b/task_management_app/src/components/Header.tsx
@@ -9,13 +9,15 @@ const Header = async () => {
   return (
     <header className="p-4 border border-b-[#9BBEC8] px-10">
         <div className='flex justify-between items-center'>
-            <Link href="/" className="logo">Task Management</Link>
+            <Link href="/" className="logo text-[#427D9D] font-semibold">Task Management</Link>
             <div>
                 {session && (
-                    <>
-                        Hello, {session?.user?.name}
+                    <div className='flex justify-center items-center'>
+                        <div className='hidden gap-1 md:flex'>
+                            <p className='font-bold'>Hello, </p> {session?.user?.name}
+                        </div>
                         <LogoutButton/>
-                    </>
+                    </div>
                 )}
                 {!session && (
                     <>
diff --git a/task_management_app/src/components/forms/NewCardForm.tsx b/task_management_app/src/components/forms/NewCardForm.tsx
index f3d35bb..21ab0e9 100644
--- a/task_management_app/src/components/forms/NewCardForm.tsx
+++ b/task_management_app/src/components/forms/NewCardForm.tsx
@@ -28,7 +28,7 @@ const NewCardForm = ({columnId}: {columnId: string}) => {
 
   return (
     <form onSubmit={handleNewCardFormSubmit}>
-        <input type="text" placeholder="card name" className='border my-2 p-2 rounded-sm bg-white'/>
+        <input type="text" placeholder="card name" className='border my-2 p-1 rounded-sm bg-white w-48'/>
     </form>
   )
 }
diff --git a/task_management_app/src/components/views/CardModal.tsx b/task_management_app/src/components/views/CardModal.tsx
index d1c20d4..a9ce590 100644
--- a/task_management_app/src/components/views/CardModal.tsx
+++ b/task_management_app/src/components/views/CardModal.tsx
@@ -77,10 +77,9 @@ const CardModal = () => {
     }
 
 
-
   return (
     <div onClick={handleBackdrop} className='fixed inset-0 bg-black/80'>
-        <div onClick={ev => ev.stopPropagation()} className='bg-white p-4 mt-8 max-w-sm mx-auto'>
+        <div onClick={ev => ev.stopPropagation()} className='bg-white p-4 mt-8 max-w-sm mx-auto overflow-scroll' style={{maxHeight:"calc(100vh - 2rem)"}}>
             {!editCard && (
                 <div className="flex justify-between">
                     <p className="mb-6 uppercase text-sm font-semibold">{card?.name}</p>
diff --git a/task_management_app/src/lib/authOptions.ts b/task_management_app/src/lib/authOptions.ts
index aa12abc..1f49087 100644
--- a/task_management_app/src/lib/authOptions.ts
+++ b/task_management_app/src/lib/authOptions.ts
@@ -4,11 +4,12 @@ import GoogleProvider from "next-auth/providers/google";
 import { AuthOptions } from "next-auth";
 
 export const authOptions: AuthOptions = {
-    providers: [
-      GoogleProvider({
-          clientId: process.env.GOOGLE_CLIENT_ID as string,
-          clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
-        })
-    ],
-    adapter: MongoDBAdapter(clientPromise),
+  secret: process.env.AUTH_SECRET,
+  providers: [
+    GoogleProvider({
+      clientId: process.env.GOOGLE_CLIENT_ID as string,
+      clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
+    })
+  ],
+  adapter: MongoDBAdapter(clientPromise),
   }
\ No newline at end of file