finished user comment functionality

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,

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

task_management_app/src/app/liveblocks.config.ts

@@ -5,10 +5,14 @@ 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());
+    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);
+  }
 
 });
 

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} />

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 && (
                     <>

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>
   )
 }

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>

task_management_app/src/lib/authOptions.ts

@@ -4,6 +4,7 @@ import GoogleProvider from "next-auth/providers/google";
 import { AuthOptions } from "next-auth";
 
 export const authOptions: AuthOptions = {
+  secret: process.env.AUTH_SECRET,
   providers: [
     GoogleProvider({
       clientId: process.env.GOOGLE_CLIENT_ID as string,