muayjtp/web_next
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

updated create meeting functionality and store the data in database

Browse source
This commit is contained in:
Juthatip McDevitt 2024-04-28 13:38:33 -05:00
parent a5f49f643c
commit f3dab8b288
3 changed files with 43 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
scheduler_app/app/(routes)/create_meeting/_components/meetingForm.js
View file

@ -8,6 +8,11 @@ import Image from 'next/image'
import { Button } from '@/components/ui/button'
import Link from 'next/link'
import ThemeOption from '@/app/_utils/ThemeOption'
import { doc, getFirestore, setDoc } from 'firebase/firestore'
import { app } from '@/config/FirebaseConfig'
import { useKindeBrowserClient } from '@kinde-oss/kinde-auth-nextjs'
import { toast } from 'sonner'
import { useRouter } from 'next/navigation'
const MeetingForm = ({setFormEvent}) => {
const [themeColor, setThemeColor] = useState();
@ -18,6 +23,28 @@ const MeetingForm = ({setFormEvent}) => {
const [locationMeeting, setLocationMeeting] = useState();
const [urlMeeting, setUrlMeeting] = useState();
//initialize the data
const db = getFirestore(app);
const {user} = useKindeBrowserClient();
const router = useRouter();
//create event
const onCreateEvent = async () => {
const id = Date.now().toString();
await setDoc(doc(db, 'MeetingEvent', id), {
id: id,
eventName: eventName,
timeDuration: timeDuration,
locationMeeting: locationMeeting,
urlMeeting: urlMeeting,
themeColor: themeColor,
businessId: doc(db, 'Business', user?.email)
}).then(res => {
toast('New event/meeting is created')
router.replace('/dashboard/meeting')
})
}
useEffect(() => {
setFormEvent({
eventName: eventName,
@ -26,9 +53,9 @@ const MeetingForm = ({setFormEvent}) => {
urlMeeting: urlMeeting,
themeColor: themeColor
})
}, [eventName, timeDuration, locationMeeting, urlMeeting, themeColor])
}, [eventName, timeDuration, locationMeeting, urlMeeting, themeColor]);
return (
<div className='px-5 lg:px-10 py-10'>
<Link href={'/dashboard'}><p className='flex gap-1 text-red-500 hover:text-red-600'><ChevronLeft/>Go back</p></Link>
@ -61,8 +88,8 @@ const MeetingForm = ({setFormEvent}) => {
</div>
{locationMeeting &&
<div>
<p className='font-semibold'> Add {locationMeeting} url or number <span className='text-red-500'>*</span></p>
<Input onChange={(ev) => setUrlMeeting(ev.target.value)} placeholder='Add url' className='text-sm'/>
<p className='font-semibold'> Add {locationMeeting} url or phone number<span className='text-red-500'>*</span></p>
<Input onChange={(ev) => setUrlMeeting(ev.target.value)} placeholder='Add url or phone number' className='text-sm'/>
</div>
}
<p className='font-semibold'>Select Color</p>
@ -72,7 +99,7 @@ const MeetingForm = ({setFormEvent}) => {
))}
</div>
</div>
<Button disabled={(!eventName || !timeDuration || !locationMeeting || !urlMeeting)} className='w-full mt-10'>Create Event</Button>
<Button onClick={() => onCreateEvent()} disabled={(!eventName || !timeDuration || !locationMeeting || !urlMeeting)} className='w-full mt-10'>Create Event</Button>
</div>
)
}

18
scheduler_app/app/(routes)/create_meeting/_components/previewMeeting.js
View file

@ -3,7 +3,6 @@ import { PiMapPinLight } from "react-icons/pi";
import { Calendar } from "@/components/ui/calendar"
import React, { useEffect, useState } from 'react'
import Link from "next/link";
import { Button } from '@/components/ui/button'
const PreviewMeeting = ({formEvent}) => {
const [date, setDate] = useState(new Date());
@ -28,27 +27,28 @@ const PreviewMeeting = ({formEvent}) => {
setTimeSlots(slots);
}
return (
<div className='px-5 py-10 shadow-md m-4 border-t-8'>
<div className='px-5 py-10 shadow-md m-4 border-t-8' style={{borderTopColor: formEvent?.themeColor}}>
<p className='text-xl uppercase font-semibold tracking-wide'>Schedule.Me</p>
<div className='grid grid-cols-1 md:grid-cols-3 mt-5'>
<div className='grid grid-cols-1 lg:grid-cols-3 mt-5'>
<div className='border-r'>
<p className='font-semibold'>Event Name: <span className="font-normal">{formEvent?.eventName?formEvent?.eventName:'Meeting/Event Name'}</span></p>
<p className='font-semibold'>Event Name:</p>
<p className="font-normal">{formEvent?.eventName?formEvent?.eventName:'Meeting/Event Name'}</p>
<div className='mt-5 flex flex-col gap-2'>
<p className='flex gap-1 items-center'><GoClock/>{formEvent?.timeDuration} minutes</p>
<p className='flex gap-1 items-center'><PiMapPinLight/>{formEvent?.locationMeeting}</p>
<Link href={formEvent?.urlMeeting?formEvent?.urlMeeting:''} className="text-gray-500 underline text-sm">{formEvent?.urlMeeting}</Link>
</div>
</div>
<div className='flex px-5 md:col-span-2'>
<div className='grid px-2 md:px-5 lg:col-span-2 min-[480px]:flex'>
<div className="flex flex-col">
<p className="font-semibold">Select your meeting date & time</p>
<Calendar mode="single" selected={date} onSelect={setDate} className="rounded-md border mt-5"/>
<Calendar disabled={(date) => date < new Date()} mode="single" selected={date} onSelect={setDate} className="rounded-md border mt-5"/>
</div>
<div>
<div className="w-full flex flex-col overflow-auto gap-2 p-2 md:p-5" style={{maxHeight: '350px'}}>
{timeSlots?.map((time, index) => (
<Button variant="outline">{time}</Button>
<button className='text-xs p-2 border rounded-md hover:bg-gray-100'>{time}</button>
))}
</div>
</div>

2
scheduler_app/app/(routes)/dashboard/layout.js
View file

@ -1,6 +1,7 @@
import React from 'react'
import SideNav from './_components/sideNav'
import DashboardHeader from './_components/dashboardHeader'
import { Toaster } from 'sonner'
const Layout = ({children}) => {
return (
@ -10,6 +11,7 @@ const Layout = ({children}) => {
</div>
<div className='md:ml-64'>
<DashboardHeader/>
<Toaster/>
{children}
</div>
</div>