In this lesson, you'll create a table to display the events that the user has registered for. You'll also create a new form to allow the user to make new events.

Users will be able to define the event properties using the form:

 field requires a special treatment. You'll need to allow the user to upload an image and preview it before submitting the form.
The 

Only logged-in users can create new events, so you'll need to add a check for that as well.

 route that receives event details and creates them in the database.

The My Events table will show events the user is hosting. Users will be able to create this event through a form.

"use client"

import useSWR from "swr"

import { Event } from "@/types/event"
import { fetcher } from "@/lib/fetcher"
import { useUser } from "@/hooks/UserContext"
import { EventsTable } from "@/components/events-table"

export const MyEvents = () => {
  const { token, user } = useUser()
  const { data } = useSWR<{ events: Array<Event> }>(
    [`/api/event?userId=${user?.id}`, token],
    ([url, token]) => fetcher(url, token as string),
    {
      refreshInterval: 1000,
    }
  )

  return <EventsTable events={data?.events || []} />
}

"use client"

import { ChangeEvent, useState } from "react"
import Image from "next/image"
import { zodResolver } from "@hookform/resolvers/zod"
import { CalendarIcon, MapPinIcon, UploadIcon } from "lucide-react"
import { useForm } from "react-hook-form"
import { z } from "zod"

import { useUser } from "@/hooks/UserContext"
import { AspectRatio } from "@/components/ui/aspect-ratio"
import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog"
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { DatePicker } from "@/components/date-picker"
import { LoginButton } from "@/components/login-button"
import { Muted } from "@/components/typography"

const formSchema = z.object({
  title: z.string().min(1, "Title is required"),
  description: z.string(),
  location: z.string().min(1, "Location is required"),
  image: z.string(),
  date: z.string().min(1, "Date is required"),
})

export function CreateEvent() {
  const { user } = useUser()
  const [isOpen, setIsOpen] = useState(false)

  return !user ? (
    <LoginButton label="Login to Create Event" />
  ) : (
    <Dialog open={isOpen} onOpenChange={(o) => setIsOpen(o)}>
      <DialogTrigger>
        <Button>Create Event</Button>
      </DialogTrigger>
      <DialogContent className="max-w-3xl p-0">
        <CreateDialog onComplete={() => setIsOpen(false)} />
      </DialogContent>
    </Dialog>
  )
}

export const CreateDialog = ({ onComplete }: { onComplete: () => void }) => {
  const { token } = useUser()
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      title: "",
      location: "",
      description: "",
      image: "",
      date: new Date().toISOString(),
    },
  })

  const onSubmit = async (values: z.infer<typeof formSchema>) => {
    const request = await fetch(`/api/event`, {
      method: "POST",
      body: JSON.stringify(values),
      headers: {
        Authorization: `Bearer ${token}`,
      },
    })
    const response = await request.json()

    if (!response.event && response.message) {
      form.setError("root", {
        message: response.message,
      })
    }

    onComplete()
  }

  const onImageUpload = (event: ChangeEvent<HTMLInputElement>) => {
    const file = event?.target?.files?.[0]

    if (file) {
      const reader = new FileReader()
      reader.onloadend = () => {
        form.setValue("image", reader.result as string)
      }
      reader.readAsDataURL(file)
    }
  }

  return (
    <Card className="w-full border-none">
      <CardHeader>
        <CardTitle>Create Event</CardTitle>
        <CardDescription>
          Anyone will be able to join your event.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <Form {...form}>
          <form
            onSubmit={form.handleSubmit(onSubmit)}
            className="flex flex-col-reverse items-start gap-8 md:grid md:grid-cols-2"
          >
            <div className="w-full grid flex-1 gap-6">
              <FormField
                control={form.control}
                name="title"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Title</FormLabel>
                    <FormControl>
                      <Input placeholder="Event Title" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="date"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel className="flex items-center gap-2">
                      <CalendarIcon className="h-4 w-4 text-muted-foreground" />
                      Date
                    </FormLabel>
                    <FormControl>
                      <DatePicker
                        date={new Date(field.value)}
                        onChange={(date) =>
                          form.setValue("date", date?.toISOString() || "")
                        }
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="location"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel className="flex items-center gap-2">
                      <MapPinIcon className="size-4 text-muted-foreground" />
                      Location
                    </FormLabel>
                    <FormControl>
                      <Input
                        className="w-full justify-start text-left font-normal"
                        placeholder="Event Location"
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="description"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Description</FormLabel>
                    <FormControl>
                      <Textarea {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <Button
                className="w-full"
                type="submit"
                disabled={form.formState.isSubmitting}
              >
                Submit
              </Button>
            </div>
            <FormField
              control={form.control}
              name="image"
              render={() => (
                <FormItem className="mt-6 flex w-full items-center gap-4 space-y-0">
                  <div className="w-full bg-background">
                    <FormControl>
                      <div className="w-64">
                        <AspectRatio ratio={16 / 9}>
                          {form.getValues().image ? (
                            <Image
                              fill
                              className="object-cover md:rounded"
                              src={form.getValues().image}
                              alt={form.getValues().title}
                            />
                          ) : (
                            <label htmlFor="image" className="cursor-pointer">
                              <div className="flex size-full flex-col items-center justify-center gap-2 rounded-md border border-dashed bg-background">
                                <UploadIcon className="size-6 text-muted-foreground" />
                                <Muted>Upload Image</Muted>
                                <Input
                                  id="image"
                                  type="file"
                                  className="hidden"
                                  onChange={onImageUpload}
                                  accept="image/*"
                                />
                              </div>
                            </label>
                          )}
                        </AspectRatio>
                      </div>
                    </FormControl>
                    <FormMessage />
                  </div>
                </FormItem>
              )}
            />
          </form>
          <p className="mt-2 h-4 font-bold text-red-500">
            {form?.formState?.errors?.root?.message || ""}
          </p>
        </Form>
      </CardContent>
    </Card>
  )
}

This file is larger than you might be used to, but this is fine. You should now already be familiar with every piece composing this file.

const formSchema = z.object({
  title: z.string().min(1, "Title is required"),
  description: z.string(),
  location: z.string().min(1, "Location is required"),
  image: z.string(),
  date: z.string().min(1, "Date is required"),
})

You started by creating the form schema using Zod, the same as in the authentication flow. This will help validate the form inputs and make the form typesafe:

export function CreateEvent() {
  const { user } = useUser()
  const [isOpen, setIsOpen] = useState(false)

  return !user ? (
    <LoginButton label="Login to Create Event" />
  ) : (
    <Dialog open={isOpen} onOpenChange={(o) => setIsOpen(o)}>
      <DialogTrigger>
        <Button>Create Event</Button>
      </DialogTrigger>
      <DialogContent className="max-w-3xl p-0">
        <CreateDialog onComplete={() => setIsOpen(false)} />
      </DialogContent>
    </Dialog>
  )
}

 component is responsible for checking if the user is logged in and rendering a 

---
title: New Events Form
description: Create a form to allow users to create new events and display them in a table.
code: https://gitlab.com/fullstackio/books/newline-course-apps/building-sleek-web-applications-with-shadcn-ui-app/-/tree/main/new-events/07.04-my-events-table?ref_type=heads
privateVideoUrl: https://stream.mux.com/x5Er96600tMm4GvW8FCJOC8GWIdKE7kixyYN5jCP5eMg.m3u8
---

In this lesson, you'll create a table to display the events that the user has registered for. You'll also create a new form to allow the user to make new events.

The form looks like this:

![Create Event Form](https://d2uusema5elisf.cloudfront.net/courses/building-sleek-web-applications-with-shadcn-ui/module_07/lesson_07.04/public/assets/create-event.png)

Users will be able to define the event properties using the form:

-   **Title**
-   **Description**
-   **Image**
-   **Date**
-   **Location**

The `image` field requires a special treatment. You'll need to allow the user to upload an image and preview it before submitting the form.
The `date` field will be a date picker, the `description` will be a text area, and the `location` and `title` will be a simple text input.

Only logged-in users can create new events, so you'll need to add a check for that as well.

The API offers a `POST` `/event` route that receives event details and creates them in the database.

## Create the My Events Table

The My Events table will show events the user is hosting. Users will be able to create this event through a form.

Create a new file at `app/events/my-events.tsx` and add the following code:

```javascript { actualFilename=../../code/new-events/07.04-my-events-table/app/events/my-events.tsx endChar=542 endLine=22 startChar=0 startLine=1 statedFilename=app/events/my-events.tsx url=https&#x3A;//gitlab.com/fullstackio/books/building-sleek-web-applications-with-shadcn-ui/module_07/lesson_07.04/.../code/new-events/07.04-my-events-table/app/events/my-events.tsx }
"use client"

import useSWR from "swr"

import { Event } from "@/types/event"
import { fetcher } from "@/lib/fetcher"
import { useUser } from "@/hooks/UserContext"
import { EventsTable } from "@/components/events-table"

export const MyEvents = () => {
  const { token, user } = useUser()
  const { data } = useSWR<{ events: Array<Event> }>(
    [`/api/event?userId=${user?.id}`, token],
    ([url, token]) => fetcher(url, token as string),
    {
      refreshInterval: 1000,
    }
  )

  return <EventsTable events={data?.events || []} />
}
```

The component is pretty similar to the `registered-table` file.

You fetch the API's data and use the `EventsTable` to render the events.

There are two differences:

-   The API route is `/event?userId=${userId}`, which returns a list of events the user has created.
-   The prefetch interval is set to 1000, so the table will refresh every 1 second after the user has created an event.

## Building the Create New Event Form

Create a new file at `app/events/create-event.tsx` and add the following code:

```javascript { actualFilename=../../code/new-events/07.04-my-events-table/app/events/create-event.tsx endChar=7994 endLine=243 startChar=0 startLine=1 statedFilename=app/events/create-event.tsx url=https&#x3A;//gitlab.com/fullstackio/books/building-sleek-web-applications-with-shadcn-ui/module_07/lesson_07.04/.../code/new-events/07.04-my-events-table/app/events/create-event.tsx }
"use client"

import { ChangeEvent, useState } from "react"
import Image from "next/image"
import { zodResolver } from "@hookform/resolvers/zod"
import { CalendarIcon, MapPinIcon, UploadIcon } from "lucide-react"
import { useForm } from "react-hook-form"
import { z } from "zod"

import { useUser } from "@/hooks/UserContext"
import { AspectRatio } from "@/components/ui/aspect-ratio"
import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog"
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { DatePicker } from "@/components/date-picker"
import { LoginButton } from "@/components/login-button"
import { Muted } from "@/components/typography"

const formSchema = z.object({
  title: z.string().min(1, "Title is required"),
  description: z.string(),
  location: z.string().min(1, "Location is required"),
  image: z.string(),
  date: z.string().min(1, "Date is required"),
})

export function CreateEvent() {
  const { user } = useUser()
  const [isOpen, setIsOpen] = useState(false)

  return !user ? (
    <LoginButton label="Login to Create Event" />
  ) : (
    <Dialog open={isOpen} onOpenChange={(o) => setIsOpen(o)}>
      <DialogTrigger>
        <Button>Create Event</Button>
      </DialogTrigger>
      <DialogContent className="max-w-3xl p-0">
        <CreateDialog onComplete={() => setIsOpen(false)} />
      </DialogContent>
    </Dialog>
  )
}

export const CreateDialog = ({ onComplete }: { onComplete: () => void }) => {
  const { token } = useUser()
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      title: "",
      location: "",
      description: "",
      image: "",
      date: new Date().toISOString(),
    },
  })

  const onSubmit = async (values: z.infer<typeof formSchema>) => {
    const request = await fetch(`/api/event`, {
      method: "POST",
      body: JSON.stringify(values),
      headers: {
        Authorization: `Bearer ${token}`,
      },
    })
    const response = await request.json()

    if (!response.event && response.message) {
      form.setError("root", {
        message: response.message,
      })
    }

    onComplete()
  }

  const onImageUpload = (event: ChangeEvent<HTMLInputElement>) => {
    const file = event?.target?.files?.[0]

    if (file) {
      const reader = new FileReader()
      reader.onloadend = () => {
        form.setValue("image", reader.result as string)
      }
      reader.readAsDataURL(file)
    }
  }

  return (
    <Card className="w-full border-none">
      <CardHeader>
        <CardTitle>Create Event</CardTitle>
        <CardDescription>
          Anyone will be able to join your event.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <Form {...form}>
          <form
            onSubmit={form.handleSubmit(onSubmit)}
            className="flex flex-col-reverse items-start gap-8 md:grid md:grid-cols-2"
          >
            <div className="w-full grid flex-1 gap-6">
              <FormField
                control={form.control}
                name="title"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Title</FormLabel>
                    <FormControl>
                      <Input placeholder="Event Title" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="date"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel className="flex items-center gap-2">
                      <CalendarIcon className="h-4 w-4 text-muted-foreground" />
                      Date
                    </FormLabel>
                    <FormControl>
                      <DatePicker
                        date={new Date(field.value)}
                        onChange={(date) =>
                          form.setValue("date", date?.toISOString() || "")
                        }
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="location"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel className="flex items-center gap-2">
                      <MapPinIcon className="size-4 text-muted-foreground" />
                      Location
                    </FormLabel>
                    <FormControl>
                      <Input
                        className="w-full justify-start text-left font-normal"
                        placeholder="Event Location"
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="description"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Description</FormLabel>
                    <FormControl>
                      <Textarea {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <Button
                className="w-full"
                type="submit"
                disabled={form.formState.isSubmitting}
              >
                Submit
              </Button>
            </div>
            <FormField
              control={form.control}
              name="image"
              render={() => (
                <FormItem className="mt-6 flex w-full items-center gap-4 space-y-0">
                  <div className="w-full bg-background">
                    <FormControl>
                      <div className="w-64">
                        <AspectRatio ratio={16 / 9}>
                          {form.getValues().image ? (
                            <Image
                              fill
                              className="object-cover md:rounded"
                              src={form.getValues().image}
                              alt={form.getValues().title}
                            />
                          ) : (
                            <label htmlFor="image" className="cursor-pointer">
                              <div className="flex size-full flex-col items-center justify-center gap-2 rounded-md border border-dashed bg-background">
                                <UploadIcon className="size-6 text-muted-foreground" />
                                <Muted>Upload Image</Muted>
                                <Input
                                  id="image"
                                  type="file"
                                  className="hidden"
                                  onChange={onImageUpload}
                                  accept="image/*"
                                />
                              </div>
                            </label>
                          )}
                        </AspectRatio>
                      </div>
                    </FormControl>
                    <FormMessage />
                  </div>
                </FormItem>
              )}
            />
          </form>
          <p className="mt-2 h-4 font-bold text-red-500">
            {form?.formState?.errors?.root?.message || ""}
          </p>
        </Form>
      </CardContent>
    </Card>
  )
}
```

Eyal Cohen

Create a form to allow users to create new events and display them in a table.

New Events Form

In the previous lesson, you have designed the table cells and others and made

In this lesson, you will create a new table to display the events that the

You will also integrate your learnings from the previous lesson to create a new

form that allows users to create new events.

Users will be able to define the event properties using the form "detitled

The image field requires a spatial treatment.

You will need to allow the user to upload an image and preview it before

The date field will be a date picker from Shatsy and UI, and the description

The location and title will be a simple text input.

Only logged in users can create new events, so you will need to add a check for

The API offers a post, a route for an event that receives the event details and

The "My events" table will show events the user is hosting, and users will be

able to create this event through the form.

It "up/events" will be collocated with the registered events on the page.

And start by adding a use client directive on top.

Then import the "uses w" route, import the event type from "type/events",

the "fetch your function", the "events" table, and the "use user hook".

Now create the "My events" component, "export const my events" function,

get the token and the user from the "use user hook".

And make a "network request" using the "uses w" route, the same way you did for

Now the "data" object returned from the server will look like this,

an object with "events" property inside, which is an array from the event type.

the "event" route, and we want to pass the user ID.

For the second argument, destructure the URL in the token and call the "fetch

Now we also want to pass the "refresh interval" to the "uses w" route "hook".

So it will remake the request every second.

And now we can simply return the "events" table that we already built,

and pass the "events" return from the server into it.

If there are no events, we can pass an empty array.

Now go back to the "events" page, import the "myevents" component.

We want to wrap the current component, the registered events section,

with a new deal, add a class name to it with "grid",

"gop16", and then add another div, similar to the registered event one.

But instead of simply rendering the header, we need the either to include two

And render the "create event" component, which we will create in a second,

and beneath render the "myevents" component that we've just created.

Now import "create event" from .slash "create event" and create it.

Let's start by creating the "form schema" with "zod".

And the object receives the title, which is a string with a minimum length,

so we'll make it required with a spatial error.

Then we need the "description" property, which is optional.

The "image" property, which isn't required as well,

and the "date" property, which is required.

Ask for the "user object" from the "hook", the "structure" response.

And now we want to condition the render in case there is a user logged in.

We want to render the "create event" button and dialog.

And if not, we want to render the "login" button.

We can pass a label to keep the user experience the same.

And if there is a user, we want to render a dialog,

so import the "dial component" from "shadcny".

And on "open change", we want to change the "isopen" property.

And we need to add the "state" to our component.

This is what the user will see initially.

Don't forget to import the "button" as well.

And then render a "dialogue content" which will be shown to the user if the

And render the "create dialog" component which we are going to create in a

Uncomplete when the user is completed to create an event, we want to close the

Don't forget to import the "dialogue content".

Great! Now it's time to create the "create dialog" component.

And the first step would be to initiate the "for".

Call the "use form hook" from React hook context.

It's a function that receives nothing and return void.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Masterclasses

Tutorials

Fullstack React with TypeScript