Thiết kế website giá rẻ

Question

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;

Thiết kế website giá rẻ

Danh mục

Why I can’t navigate to the ” event details ” page Using “router.push” of next.js?