From 3f517220bd9ae87e00d20946ab11f2cee45882c0 Mon Sep 17 00:00:00 2001
From: Juthatip McDevitt <jtp@mcdevitt.tech>
Date: Sun, 28 Apr 2024 18:36:32 -0500
Subject: [PATCH] created meeting/event list

---
 .../create_meeting/_components/meetingForm.js | 10 ++--
 .../dashboard/_components/dashboardHeader.js  |  4 +-
 .../meeting/_components/MeetingEventList.js   | 55 +++++++++++++++++++
 .../app/(routes)/dashboard/meeting/page.js    | 13 ++++-
 scheduler_app/next.config.mjs                 |  1 +
 5 files changed, 75 insertions(+), 8 deletions(-)
 create mode 100644 scheduler_app/app/(routes)/dashboard/meeting/_components/MeetingEventList.js

diff --git a/scheduler_app/app/(routes)/create_meeting/_components/meetingForm.js b/scheduler_app/app/(routes)/create_meeting/_components/meetingForm.js
index c469d3a..adb29b5 100644
--- a/scheduler_app/app/(routes)/create_meeting/_components/meetingForm.js
+++ b/scheduler_app/app/(routes)/create_meeting/_components/meetingForm.js
@@ -2,7 +2,7 @@
 import { Input } from '@/components/ui/input'
 import { ChevronLeft } from 'lucide-react'
 import React, { useEffect, useState } from 'react'
-import {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger,} from "@/components/ui/dropdown-menu"
+import {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger,} from "@/components/ui/dropdown-menu"
 import LocationOption from '@/app/_utils/LocationOption'
 import Image from 'next/image'
 import { Button } from '@/components/ui/button'
@@ -38,11 +38,11 @@ const MeetingForm = ({setFormEvent}) => {
             locationMeeting: locationMeeting,
             urlMeeting: urlMeeting,
             themeColor: themeColor,
-            businessId: doc(db, 'Business', user?.email)
-        }).then(res => {
-            toast('New event/meeting is created')
-            router.replace('/dashboard/meeting')
+            businessId: doc(db, 'Business', user?.email),
+            createdBy: user?.email
         })
+        toast('New event/meeting is created');
+        router.replace('/dashboard/meeting');
     }
 
     useEffect(() => {
diff --git a/scheduler_app/app/(routes)/dashboard/_components/dashboardHeader.js b/scheduler_app/app/(routes)/dashboard/_components/dashboardHeader.js
index 6e153f9..3c850d6 100644
--- a/scheduler_app/app/(routes)/dashboard/_components/dashboardHeader.js
+++ b/scheduler_app/app/(routes)/dashboard/_components/dashboardHeader.js
@@ -3,7 +3,7 @@ import { LogoutLink, useKindeBrowserClient } from '@kinde-oss/kinde-auth-nextjs'
 import { BsThreeDotsVertical } from "react-icons/bs";
 import Image from 'next/image';
 import React from 'react'
-import {DropdownMenu, ropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger,} from "@/components/ui/dropdown-menu"
+import {DropdownMenu, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger,} from "@/components/ui/dropdown-menu"
 import { DropdownMenuContent } from '@radix-ui/react-dropdown-menu';
 
 
@@ -18,7 +18,7 @@ const DashboardHeader = () => {
               <Image src={user?.picture} alt='user-img' width={30} height={30} className='rounded-full'/>
               <BsThreeDotsVertical/>
           </DropdownMenuTrigger>
-          <DropdownMenuContent className='border border-gray-200 mt-1'>
+          <DropdownMenuContent className='border border-gray-200 mt-1 bg-white'>
             <DropdownMenuLabel>{user.given_name}</DropdownMenuLabel>
             <DropdownMenuSeparator />
             <DropdownMenuItem>Profile</DropdownMenuItem>
diff --git a/scheduler_app/app/(routes)/dashboard/meeting/_components/MeetingEventList.js b/scheduler_app/app/(routes)/dashboard/meeting/_components/MeetingEventList.js
new file mode 100644
index 0000000..5192d95
--- /dev/null
+++ b/scheduler_app/app/(routes)/dashboard/meeting/_components/MeetingEventList.js
@@ -0,0 +1,55 @@
+"use client"
+import React, { useEffect, useState } from 'react'
+import { app } from '@/config/FirebaseConfig'
+import { useKindeBrowserClient } from '@kinde-oss/kinde-auth-nextjs'
+import { collection, getDocs, getFirestore, orderBy, query, where } from 'firebase/firestore'
+import { GoClock } from "react-icons/go";
+import { PiMapPinLight, PiCopyLight, PiShareFatLight } from 'react-icons/pi'
+import { IoSettingsOutline } from "react-icons/io5";
+import { toast } from 'sonner'
+
+const MeetingEventList = () => {
+    const [eventList, setEventList] = useState([]);
+    const db = getFirestore(app);
+    const {user} = useKindeBrowserClient();
+
+    const getEventList = async () => {
+        setEventList([]);
+        const q = query(collection(db, "MeetingEvent"), where("createdBy", "==", user?.email), orderBy('id', 'desc'));
+        const querySnapshot = await getDocs(q);
+        querySnapshot.forEach((doc) => {
+            console.log(doc.id, " => ", doc.data());
+            setEventList(prevEvent => [...prevEvent, doc.data()])
+        });
+    }
+    
+    useEffect(() => {
+        user && getEventList()
+    }, [user])
+
+
+  return (
+    <div className='mt-5 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5'>
+        {eventList.length > 0 ? eventList?.map((event, index) => (
+            <div className='border shadow-md border-t-8 rounded-md p-5 flex flex-col gap-5' style={{borderTopColor:event?.themeColor}}>
+                <p className='text-lg'>{event?.eventName}</p>
+                <div className='flex justify-between'>
+                    <p className='flex gap-1 items-center'><GoClock/>{event.timeDuration} minutes</p>
+                    <p className='flex gap-1 items-center'><PiMapPinLight/>{event.locationMeeting}</p>
+                </div>
+                <hr/>
+                <div className='flex justify-between'>
+                    <div className='flex gap-2'>
+                        <button onClick={() => {navigator.clipboard.writeText(event.urlMeeting), toast('Copied')}} className='text-lg'><PiCopyLight/></button>
+                        <button className="text-lg"><PiShareFatLight/></button>
+                    </div>
+                    <IoSettingsOutline className='cursor-pointer'/>
+                </div>
+            </div>
+        )): <p className='font-semibold text-green-800'>Loading...</p>
+        }
+    </div>
+  )
+}
+
+export default MeetingEventList
\ No newline at end of file
diff --git a/scheduler_app/app/(routes)/dashboard/meeting/page.js b/scheduler_app/app/(routes)/dashboard/meeting/page.js
index 1185b0f..52dab47 100644
--- a/scheduler_app/app/(routes)/dashboard/meeting/page.js
+++ b/scheduler_app/app/(routes)/dashboard/meeting/page.js
@@ -1,8 +1,19 @@
+"use client"
+import { Input } from '@/components/ui/input'
 import React from 'react'
+import MeetingEventList from './_components/MeetingEventList'
+
 
 const Meeting = () => {
+  
   return (
-    <div>This is a meeting page</div>
+    <div className='px-5'>
+      <div className='flex flex-col gap-5'>
+        <p className='font-semibold text-xl'>Event/Meeting </p>
+        <Input placeholder='Search...' className='max-w-xs'/><hr/>
+      </div>
+      <MeetingEventList/>
+    </div>
   )
 }
 
diff --git a/scheduler_app/next.config.mjs b/scheduler_app/next.config.mjs
index 9127ee7..31de1f9 100644
--- a/scheduler_app/next.config.mjs
+++ b/scheduler_app/next.config.mjs
@@ -1,5 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+    reactStrictMode: false,
     images:{
         domains:['lh3.googleusercontent.com']
     }