I am working with next.js 14, and after I did the submission of the event form, I haven’t gotten to the event details page, it seems like the router.push
doesn’t work and I stay on the same page, but when I access the URL directly and manually from the browser I got redirected to the event details page.
I did some debugging to check if the Id is valid, but all seem to be fine, and this is what I got in the console:
” New event ID: 66a2e1bb05e5bab81b8baaff
Event created successfully: {title: ‘next applications’, description: ‘sagqhvtu6’, location: ‘tokyo’, imageUrl: ‘https://utfs.io/f/646109ab-022c-46ad-bca4-f8a31c8826cd-ibclxh.jfif’, startDateTime: ‘2024-07-26T23:36:40.000Z’, …}
New event ID: 66a2e1bb05e5bab81b8baaff
Navigating to the event details page. so please tell me where is the problem here?
here is the code:
'use client'
import * as z from 'zod'
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { Button } from "@/components/ui/button"
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { eventFormSchema } from "@/lib/validator"
import { eventDefaultValues } from "@/constants"
import Dropdown from "./dropdown"
import {FileUploader} from './FileUploader'
import { useState } from 'react'
import Image from 'next/image'
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { Checkbox } from '../ui/checkbox'
import { useUploadThing } from '@/lib/uploadthing'
import { useRouter } from 'next/navigation';
import { createEvent } from '@/lib/actions/event.actions'
type EventFormProps = {
userId: string,
type: 'Create' | 'Update'
}
const EventForm = ({ userId, type }: EventFormProps ) => {
const [files, setFiles] = useState<File[]>([]);
const initialValues = eventDefaultValues;
const router = useRouter();
const {startUpload} = useUploadThing('imageUploader');
const form = useForm<z.infer<typeof eventFormSchema>>({
resolver: zodResolver(eventFormSchema),
defaultValues: initialValues
})
async function onSubmit(values: z.infer<typeof eventFormSchema>) {
let uploadedImageUrl = values.imageUrl;
if (files.length > 0 ) {
const uploadedImages = await startUpload(files)
if (!uploadedImages) {
return
}
uploadedImageUrl = uploadedImages[0].url
}
if (type === 'Create') {
try {
const newEvent = await createEvent({
event: { ...values, imageUrl: uploadedImageUrl },
userId,
path: '/profile'
})
if (newEvent) {
console.log("New event ID:", newEvent?._id);
console.log("Event created successfully:", newEvent);
form.reset();
router.push(`/events/${newEvent?._id}`);
console.log("New event ID:", newEvent?._id);
console.log("Navigating to the event details page");
}
} catch (error) {
console.log(error);
}
}
}
return (
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-5">
<div className="flex flex-col gap-5 md:flex-row">
<FormField
control={form.control}
name="title"
render={({ field }) => (
<FormItem className="w-full">
<FormControl>
<Input placeholder="Event title" {...field} className="input-field" />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="categoryId"
render={({ field }) => (
<FormItem className="w-full">
<FormControl>
<Dropdown onChangeHandler={field.onChange} value={field.value} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<div className="flex flex-col gap-5 md:flex-row">
<FormField
control={form.control}
name="description"
render={({ field }) => (
<FormItem className="w-full">
<FormControl className='h-72'>
<Textarea placeholder="Description" {...field} className="textarea rounded-2xl " />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="imageUrl"
render={({ field }) => (
<FormItem className="w-full">
<FormControl className='h-72'>
<FileUploader onFieldChange = {field.onChange} imageUrl = {field.value} setFiles = {setFiles} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<div className='flex flex-col gap-5 md:flex-row'>
<FormField
control={form.control}
name="location"
render={({ field }) => (
<FormItem className="w-full">
<FormControl>
<div className='flex-center h-[54px] w-full overflow-hidden rounded-full bg-gray-50 px-4 py-2'>
<Image src= "/assets/icons/location-grey.svg"
alt='location'
width={24}
height={24}
/>
<Input placeholder='Event location or online' {...field} className='input-field' />
</div>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<div className='flex flex-col gap-5 md:flex-row'>
<FormField
control={form.control}
name="startDateTime"
render={({ field }) => (
<FormItem className="w-full">
<FormControl>
<div className='flex-center h-[54px] w-full overflow-hidden rounded-full bg-gray-50 px-4 py-2'>
<Image src= "/assets/icons/calendar.svg"
alt='calendar'
width={24}
height={24}
className='filter-grey'
/>
<p className='ml-3 whitespace-nowrap text-grey-600'>Start Date:</p>
<DatePicker selected={field.value}
onChange={(date : Date) => field.onChange(date)}
showTimeSelect
timeInputLabel='Time:'
dateFormat="MM/dd/yyyy h:mm aa"
wrapperClassName='datePicker'
/>
</div>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="endDateTime"
render={({ field }) => (
<FormItem className="w-full">
<FormControl>
<div className='flex-center h-[54px] w-full overflow-hidden rounded-full bg-gray-50 px-4 py-2'>
<Image src= "/assets/icons/calendar.svg"
alt='calendar'
width={24}
height={24}
className='filter-grey'
/>
<p className='ml-3 whitespace-nowrap text-grey-600'>End Date:</p>
<DatePicker selected={field.value}
onChange={(date : Date) => field.onChange(date)}
showTimeSelect
timeInputLabel='Time:'
dateFormat="MM/dd/yyyy h:mm aa"
wrapperClassName='datePicker'
/>
</div>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<div className='flex flex-col gap-5 md:flex-row'>
<FormField
control={form.control}
name="price"
render={({ field }) => (
<FormItem className="w-full">
<FormControl>
<div className='flex-center h-[54px] w-full overflow-hidden rounded-full bg-gray-50 px-4 py-2'>
<Image src= "/assets/icons/dollar.svg"
alt='price'
width={24}
height={24}
className='filter-grey'
/>
<Input type='number' placeholder='Price' {...field}
className='p-regular-16 border-0 bg-grey-50 outline-offset-0 focus:border-0
focus-visible:ring-0 focus-visible:ring-offset-0'
/>
<FormField
control={form.control}
name="isFree"
render={({ field }) => (
<FormItem>
<FormControl>
<div className='flex items-center'>
<label htmlFor='isFree' className='whitespace-nowrap pr-3 leading-none
peer-disabled:cursor-not-allowed peer-disabled:opacity-70'> Free Ticket</label>
<Checkbox id='isFree' onCheckedChange= {field.onChange} checked= {field.value}
className='mr-2 h-5 w-5 border-2 border-primary-500'/>
</div>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="url"
render={({ field }) => (
<FormItem className="w-full">
<FormControl>
<div className='flex-center h-[54px] w-full overflow-hidden rounded-full bg-gray-50 px-4 py-2'>
<Image src= "/assets/icons/link.svg"
alt='link'
width={24}
height={24}
/>
<Input placeholder='URL' {...field} className='input-field' />
</div>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<Button
type="submit"
size="lg"
disabled= {form.formState.isSubmitting}
className='button col-span-2 w-full'>
{ form?.formState?.isSubmitting? (
'Submitting' ) : `${type} Event`
}
</Button>
</form>
</Form>
)
}
export default EventForm;