4 | {children}
5 |
6 | )
7 | }
8 |
9 | export default Layout
--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 | images: {
4 | domains: ['utfs.io'],
5 | remotePatterns: [
6 | {
7 | protocol: 'https',
8 | hostname: 'utfs.io',
9 | port: ''
10 | }
11 | ]
12 | }
13 | }
14 |
15 | module.exports = nextConfig
16 |
--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema.json",
3 | "style": "default",
4 | "rsc": true,
5 | "tsx": true,
6 | "tailwind": {
7 | "config": "tailwind.config.ts",
8 | "css": "app/globals.css",
9 | "baseColor": "slate",
10 | "cssVariables": true
11 | },
12 | "aliases": {
13 | "components": "@/components",
14 | "utils": "@/lib/utils"
15 | }
16 | }
--------------------------------------------------------------------------------
/lib/database/models/category.model.ts:
--------------------------------------------------------------------------------
1 | import { Document, Schema, model, models } from "mongoose";
2 |
3 | export interface ICategory extends Document {
4 | _id: string;
5 | name: string;
6 | }
7 |
8 | const CategorySchema = new Schema({
9 | name: { type: String, required: true, unique: true },
10 | })
11 |
12 | const Category = models.Category || model('Category', CategorySchema);
13 |
14 | export default Category;
--------------------------------------------------------------------------------
/app/(root)/layout.tsx:
--------------------------------------------------------------------------------
1 | import Footer from "@/components/shared/Footer"
2 | import Header from "@/components/shared/Header"
3 |
4 | export default function RootLayout({
5 | children,
6 | }: {
7 | children: React.ReactNode
8 | }) {
9 | return (
10 |
11 | {children}
13 |
14 |
15 | )
16 | }
17 |
--------------------------------------------------------------------------------
/middleware.ts:
--------------------------------------------------------------------------------
1 | import { authMiddleware } from "@clerk/nextjs";
2 |
3 | export default authMiddleware({
4 | publicRoutes: [
5 | '/',
6 | '/events/:id',
7 | '/api/webhook/clerk',
8 | '/api/webhook/stripe',
9 | '/api/uploadthing'
10 | ],
11 | ignoredRoutes: [
12 | '/api/webhook/clerk',
13 | '/api/webhook/stripe',
14 | '/api/uploadthing'
15 | ]
16 | });
17 |
18 | export const config = {
19 | matcher: ['/((?!.+\\.[\\w]+$|_next).*)', '/', '/(api|trpc)(.*)'],
20 | };
21 |
--------------------------------------------------------------------------------
/constants/index.ts:
--------------------------------------------------------------------------------
1 | export const headerLinks = [
2 | {
3 | label: 'Home',
4 | route: '/',
5 | },
6 | {
7 | label: 'Create Event',
8 | route: '/events/create',
9 | },
10 | {
11 | label: 'My Profile',
12 | route: '/profile',
13 | },
14 | ]
15 |
16 | export const eventDefaultValues = {
17 | title: '',
18 | description: '',
19 | location: '',
20 | imageUrl: '',
21 | startDateTime: new Date(),
22 | endDateTime: new Date(),
23 | categoryId: '',
24 | price: '',
25 | isFree: false,
26 | url: '',
27 | }
28 |
--------------------------------------------------------------------------------
/lib/database/models/user.model.ts:
--------------------------------------------------------------------------------
1 | import { Schema, model, models } from "mongoose";
2 |
3 | const UserSchema = new Schema({
4 | clerkId: { type: String, required: true, unique: true },
5 | email: { type: String, required: true, unique: true },
6 | username: { type: String, required: true, unique: true },
7 | firstName: { type: String, required: true },
8 | lastName: {type: String, required: true },
9 | photo: { type: String, required: true },
10 | })
11 |
12 | const User = models.User || model('User', UserSchema);
13 |
14 | export default User;
--------------------------------------------------------------------------------
/public/assets/icons/loader.svg:
--------------------------------------------------------------------------------
1 |
12 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 | .yarn/install-state.gz
8 |
9 | # testing
10 | /coverage
11 |
12 | # next.js
13 | /.next/
14 | /out/
15 |
16 | # production
17 | /build
18 |
19 | # misc
20 | .DS_Store
21 | *.pem
22 |
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 |
28 | # local env files
29 | .env*.local
30 |
31 | # vercel
32 | .vercel
33 |
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 |
--------------------------------------------------------------------------------
/lib/database/index.ts:
--------------------------------------------------------------------------------
1 | import mongoose from 'mongoose';
2 |
3 | const MONGODB_URI = process.env.MONGODB_URI;
4 |
5 | let cached = (global as any).mongoose || { conn: null, promise: null };
6 |
7 | export const connectToDatabase = async () => {
8 | if (cached.conn) return cached.conn;
9 |
10 | if(!MONGODB_URI) throw new Error('MONGODB_URI is missing');
11 |
12 | cached.promise = cached.promise || mongoose.connect(MONGODB_URI, {
13 | dbName: 'evently',
14 | bufferCommands: false,
15 | })
16 |
17 | cached.conn = await cached.promise;
18 |
19 | return cached.conn;
20 | }
--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/lib/validator.ts:
--------------------------------------------------------------------------------
1 | import * as z from "zod"
2 |
3 | export const eventFormSchema = z.object({
4 | title: z.string().min(3, 'Title must be at least 3 characters'),
5 | description: z.string().min(3, 'Description must be at least 3 characters').max(400, 'Description must be less than 400 characters'),
6 | location: z.string().min(3, 'Location must be at least 3 characters').max(400, 'Location must be less than 400 characters'),
7 | imageUrl: z.string(),
8 | startDateTime: z.date(),
9 | endDateTime: z.date(),
10 | categoryId: z.string(),
11 | price: z.string(),
12 | isFree: z.boolean(),
13 | url: z.string().url()
14 | })
--------------------------------------------------------------------------------
/components/shared/Footer.tsx:
--------------------------------------------------------------------------------
1 | import Image from "next/image"
2 | import Link from "next/link"
3 |
4 | const Footer = () => {
5 | return (
6 |
20 | )
21 | }
22 |
23 | export default Footer
--------------------------------------------------------------------------------
/app/(root)/events/create/page.tsx:
--------------------------------------------------------------------------------
1 | import EventForm from "@/components/shared/EventForm"
2 | import { auth } from "@clerk/nextjs";
3 |
4 | const CreateEvent = () => {
5 | const { sessionClaims } = auth();
6 |
7 | const userId = sessionClaims?.userId as string;
8 |
9 | return (
10 | <>
11 | Create Event
13 |
16 |
18 |
19 | )
20 | }
21 |
22 | export default CreateEvent
--------------------------------------------------------------------------------
/public/assets/icons/arrow.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/public/assets/icons/spinner.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": true,
8 | "noEmit": true,
9 | "esModuleInterop": true,
10 | "module": "esnext",
11 | "moduleResolution": "bundler",
12 | "resolveJsonModule": true,
13 | "isolatedModules": true,
14 | "jsx": "preserve",
15 | "incremental": true,
16 | "plugins": [
17 | {
18 | "name": "next"
19 | }
20 | ],
21 | "paths": {
22 | "@/*": ["./*"]
23 | }
24 | },
25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 | "exclude": ["node_modules"]
27 | }
28 |
--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import type { Metadata } from 'next'
2 | import { Poppins } from 'next/font/google'
3 | import { ClerkProvider } from '@clerk/nextjs'
4 |
5 | import './globals.css'
6 |
7 | const poppins = Poppins({
8 | subsets: ['latin'],
9 | weight: ['400', '500', '600', '700'],
10 | variable: '--font-poppins',
11 | })
12 |
13 | export const metadata: Metadata = {
14 | title: 'Evently',
15 | description: 'Evently is a platform for event management.',
16 | icons: {
17 | icon: '/assets/images/logo.svg'
18 | }
19 | }
20 |
21 | export default function RootLayout({
22 | children,
23 | }: {
24 | children: React.ReactNode
25 | }) {
26 | return (
27 | -
13 | {headerLinks.map((link) => {
14 | const isActive = pathname === link.route;
15 |
16 | return (
17 |
- 23 | {link.label} 24 | 25 | ) 26 | })} 27 |
Update Event
21 |
24 |
31 |
32 | )
33 | }
34 |
35 | export default UpdateEvent
--------------------------------------------------------------------------------
/public/assets/icons/logo-grey.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/public/assets/icons/clock.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/lib/database/models/order.model.ts:
--------------------------------------------------------------------------------
1 | import { Schema, model, models, Document } from 'mongoose'
2 |
3 | export interface IOrder extends Document {
4 | createdAt: Date
5 | stripeId: string
6 | totalAmount: string
7 | event: {
8 | _id: string
9 | title: string
10 | }
11 | buyer: {
12 | _id: string
13 | firstName: string
14 | lastName: string
15 | }
16 | }
17 |
18 | export type IOrderItem = {
19 | _id: string
20 | totalAmount: string
21 | createdAt: Date
22 | eventTitle: string
23 | eventId: string
24 | buyer: string
25 | }
26 |
27 | const OrderSchema = new Schema({
28 | createdAt: {
29 | type: Date,
30 | default: Date.now,
31 | },
32 | stripeId: {
33 | type: String,
34 | required: true,
35 | unique: true,
36 | },
37 | totalAmount: {
38 | type: String,
39 | },
40 | event: {
41 | type: Schema.Types.ObjectId,
42 | ref: 'Event',
43 | },
44 | buyer: {
45 | type: Schema.Types.ObjectId,
46 | ref: 'User',
47 | },
48 | })
49 |
50 | const Order = models.Order || model('Order', OrderSchema)
51 |
52 | export default Order
53 |
--------------------------------------------------------------------------------
/public/assets/icons/menu.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/components/shared/MobileNav.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Sheet,
3 | SheetContent,
4 | SheetDescription,
5 | SheetHeader,
6 | SheetTitle,
7 | SheetTrigger,
8 | } from "@/components/ui/sheet"
9 | import Image from "next/image"
10 | import { Separator } from "../ui/separator"
11 | import NavItems from "./NavItems"
12 |
13 |
14 | const MobileNav = () => {
15 | return (
16 |
39 | )
40 | }
41 |
42 | export default MobileNav
--------------------------------------------------------------------------------
/components/ui/checkbox.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
5 | import { Check } from "lucide-react"
6 |
7 | import { cn } from "@/lib/utils"
8 |
9 | const Checkbox = React.forwardRef<
10 | React.ElementRef
17 | {hasEventFinished ? (
18 |
22 |
27 |
28 |
29 |
30 |
32 |
33 | )}
34 |
35 | )
36 | }
37 |
38 | export default CheckoutButton
--------------------------------------------------------------------------------
/app/api/webhook/stripe/route.ts:
--------------------------------------------------------------------------------
1 | import stripe from 'stripe'
2 | import { NextResponse } from 'next/server'
3 | import { createOrder } from '@/lib/actions/order.actions'
4 |
5 | export async function POST(request: Request) {
6 | const body = await request.text()
7 |
8 | const sig = request.headers.get('stripe-signature') as string
9 | const endpointSecret = process.env.STRIPE_WEBHOOK_SECRET!
10 |
11 | let event
12 |
13 | try {
14 | event = stripe.webhooks.constructEvent(body, sig, endpointSecret)
15 | } catch (err) {
16 | return NextResponse.json({ message: 'Webhook error', error: err })
17 | }
18 |
19 | // Get the ID and type
20 | const eventType = event.type
21 |
22 | // CREATE
23 | if (eventType === 'checkout.session.completed') {
24 | const { id, amount_total, metadata } = event.data.object
25 |
26 | const order = {
27 | stripeId: id,
28 | eventId: metadata?.eventId || '',
29 | buyerId: metadata?.buyerId || '',
30 | totalAmount: amount_total ? (amount_total / 100).toString() : '0',
31 | createdAt: new Date(),
32 | }
33 |
34 | const newOrder = await createOrder(order)
35 | return NextResponse.json({ message: 'OK', order: newOrder })
36 | }
37 |
38 | return new Response('', { status: 200 })
39 | }
40 |
--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/components/shared/Header.tsx:
--------------------------------------------------------------------------------
1 | import { SignedIn, SignedOut, UserButton } from "@clerk/nextjs"
2 | import Image from "next/image"
3 | import Link from "next/link"
4 | import { Button } from "../ui/button"
5 | import NavItems from "./NavItems"
6 | import MobileNav from "./MobileNav"
7 |
8 | const Header = () => {
9 | return (
10 | Sorry, tickets are no longer available.
19 | ): ( 20 | <> 21 |
12 |
13 |
20 |
23 |
24 |
25 |
39 |
26 |
27 |
30 |
31 |
36 |
37 |
38 |
34 |
43 |
52 |
53 | )
54 | }
55 |
56 | export default Pagination
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "evently",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "start": "next start",
9 | "lint": "next lint"
10 | },
11 | "dependencies": {
12 | "@clerk/nextjs": "^4.27.5",
13 | "@hookform/resolvers": "^3.3.2",
14 | "@radix-ui/react-alert-dialog": "^1.0.5",
15 | "@radix-ui/react-checkbox": "^1.0.4",
16 | "@radix-ui/react-dialog": "^1.0.5",
17 | "@radix-ui/react-dropdown-menu": "^2.0.6",
18 | "@radix-ui/react-label": "^2.0.2",
19 | "@radix-ui/react-select": "^2.0.0",
20 | "@radix-ui/react-separator": "^1.0.3",
21 | "@radix-ui/react-slot": "^1.0.2",
22 | "@stripe/stripe-js": "^2.2.1",
23 | "@uploadthing/react": "^6.0.2",
24 | "class-variance-authority": "^0.7.0",
25 | "clsx": "^2.0.0",
26 | "lucide-react": "^0.294.0",
27 | "mongodb": "^6.3.0",
28 | "mongoose": "^8.0.3",
29 | "next": "14.0.4",
30 | "query-string": "^8.1.0",
31 | "react": "^18",
32 | "react-datepicker": "^4.24.0",
33 | "react-dom": "^18",
34 | "react-hook-form": "^7.49.0",
35 | "stripe": "^14.8.0",
36 | "svix": "^1.15.0",
37 | "tailwind-merge": "^2.1.0",
38 | "tailwindcss-animate": "^1.0.7",
39 | "uploadthing": "^6.0.4",
40 | "zod": "^3.22.4"
41 | },
42 | "devDependencies": {
43 | "@types/node": "^20",
44 | "@types/react": "^18",
45 | "@types/react-datepicker": "^4.19.3",
46 | "@types/react-dom": "^18",
47 | "autoprefixer": "^10.0.1",
48 | "postcss": "^8",
49 | "tailwindcss": "^3.3.0",
50 | "typescript": "^5"
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/components/shared/Search.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import Image from 'next/image';
4 | import { useEffect, useState } from 'react'
5 | import { Input } from '../ui/input';
6 | import { formUrlQuery, removeKeysFromQuery } from '@/lib/utils';
7 | import { useRouter, useSearchParams } from 'next/navigation';
8 |
9 | const Search = ({ placeholder = 'Search title...' }: { placeholder?: string }) => {
10 | const [query, setQuery] = useState('');
11 | const router = useRouter();
12 | const searchParams = useSearchParams();
13 |
14 | useEffect(() => {
15 | const delayDebounceFn = setTimeout(() => {
16 | let newUrl = '';
17 |
18 | if(query) {
19 | newUrl = formUrlQuery({
20 | params: searchParams.toString(),
21 | key: 'query',
22 | value: query
23 | })
24 | } else {
25 | newUrl = removeKeysFromQuery({
26 | params: searchParams.toString(),
27 | keysToRemove: ['query']
28 | })
29 | }
30 |
31 | router.push(newUrl, { scroll: false });
32 | }, 300)
33 |
34 | return () => clearTimeout(delayDebounceFn);
35 | }, [query, searchParams, router])
36 |
37 | return (
38 |
39 |
47 | )
48 | }
49 |
50 | export default Search
--------------------------------------------------------------------------------
/components/shared/DeleteConfirmation.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { useTransition } from 'react'
4 | import { usePathname } from 'next/navigation'
5 | import Image from 'next/image'
6 |
7 | import {
8 | AlertDialog,
9 | AlertDialogAction,
10 | AlertDialogCancel,
11 | AlertDialogContent,
12 | AlertDialogDescription,
13 | AlertDialogFooter,
14 | AlertDialogHeader,
15 | AlertDialogTitle,
16 | AlertDialogTrigger,
17 | } from '@/components/ui/alert-dialog'
18 |
19 | import { deleteEvent } from '@/lib/actions/event.actions'
20 |
21 | export const DeleteConfirmation = ({ eventId }: { eventId: string }) => {
22 | const pathname = usePathname()
23 | let [isPending, startTransition] = useTransition()
24 |
25 | return (
26 |
30 |
47 | ): (
48 | -
31 | {data.map((event) => {
32 | const hasOrderLink = collectionType === 'Events_Organized';
33 | const hidePrice = collectionType === 'My_Tickets';
34 |
35 | return (
36 |
-
37 |
38 |
39 | )
40 | })}
41 |
49 |
52 | )}
53 |
54 | )
55 | }
56 |
57 | export default Collection
--------------------------------------------------------------------------------
/components/ui/button.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import { Slot } from "@radix-ui/react-slot"
3 | import { cva, type VariantProps } from "class-variance-authority"
4 |
5 | import { cn } from "@/lib/utils"
6 |
7 | const buttonVariants = cva(
8 | "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
9 | {
10 | variants: {
11 | variant: {
12 | default: "bg-primary text-primary-foreground hover:bg-primary/90",
13 | destructive:
14 | "bg-destructive text-destructive-foreground hover:bg-destructive/90",
15 | outline:
16 | "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
17 | secondary:
18 | "bg-secondary text-secondary-foreground hover:bg-secondary/80",
19 | ghost: "hover:bg-accent hover:text-accent-foreground",
20 | link: "text-primary underline-offset-4 hover:underline",
21 | },
22 | size: {
23 | default: "h-10 px-4 py-2",
24 | sm: "h-9 rounded-md px-3",
25 | lg: "h-11 rounded-md px-8",
26 | icon: "h-10 w-10",
27 | },
28 | },
29 | defaultVariants: {
30 | variant: "default",
31 | size: "default",
32 | },
33 | }
34 | )
35 |
36 | export interface ButtonProps
37 | extends React.ButtonHTMLAttributes{emptyTitle}
50 |{emptyStateSubtext}
51 |
32 |
33 |
34 | {imageUrl ? (
35 |
55 | )
56 | }
57 |
--------------------------------------------------------------------------------
/components/shared/CategoryFilter.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import {
4 | Select,
5 | SelectContent,
6 | SelectItem,
7 | SelectTrigger,
8 | SelectValue,
9 | } from "@/components/ui/select"
10 | import { getAllCategories } from "@/lib/actions/category.actions";
11 | import { ICategory } from "@/lib/database/models/category.model";
12 | import { formUrlQuery, removeKeysFromQuery } from "@/lib/utils";
13 | import { useRouter, useSearchParams } from "next/navigation";
14 | import { useEffect, useState } from "react";
15 |
16 | const CategoryFilter = () => {
17 | const [categories, setCategories] = useState
36 | 
43 |
44 | ) : (
45 |
46 | 
47 |
53 | )}
54 |
47 | Drag photo here
48 |SVG, PNG, JPG
49 | 52 |
26 |
44 |
27 |
35 |
36 | Host, Connect, Celebrate: Your Events, Our Platform!
28 |Book and learn helpful tips from 3,168+ mentors in world-class companies with our global community.
29 | 34 |Trust by
Thousands of Events
48 |
49 |
50 |
53 |
54 | Orders
17 || Order ID | 28 |Event Title | 29 |Buyer | 30 |Created | 31 |Amount | 32 |
|---|---|---|---|---|
| 38 | No orders found. 39 | | 40 |||||
| {row._id} | 50 |{row.eventTitle} | 51 |{row.buyer} | 52 |53 | {formatDateTime(row.createdAt).dateTime} 54 | | 55 |56 | {formatPrice(row.totalAmount)} 57 | | 58 |
23 |
28 | {/* IS EVENT CREATOR ... */}
29 |
30 | {isEventCreator && !hidePrice && (
31 |
74 | )
75 | }
76 |
77 | export default Card
--------------------------------------------------------------------------------
/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from 'clsx'
2 |
3 | import { twMerge } from 'tailwind-merge'
4 | import qs from 'query-string'
5 |
6 | import { UrlQueryParams, RemoveUrlQueryParams } from '@/types'
7 |
8 | export function cn(...inputs: ClassValue[]) {
9 | return twMerge(clsx(inputs))
10 | }
11 |
12 | export const formatDateTime = (dateString: Date) => {
13 | const dateTimeOptions: Intl.DateTimeFormatOptions = {
14 | weekday: 'short', // abbreviated weekday name (e.g., 'Mon')
15 | month: 'short', // abbreviated month name (e.g., 'Oct')
16 | day: 'numeric', // numeric day of the month (e.g., '25')
17 | hour: 'numeric', // numeric hour (e.g., '8')
18 | minute: 'numeric', // numeric minute (e.g., '30')
19 | hour12: true, // use 12-hour clock (true) or 24-hour clock (false)
20 | }
21 |
22 | const dateOptions: Intl.DateTimeFormatOptions = {
23 | weekday: 'short', // abbreviated weekday name (e.g., 'Mon')
24 | month: 'short', // abbreviated month name (e.g., 'Oct')
25 | year: 'numeric', // numeric year (e.g., '2023')
26 | day: 'numeric', // numeric day of the month (e.g., '25')
27 | }
28 |
29 | const timeOptions: Intl.DateTimeFormatOptions = {
30 | hour: 'numeric', // numeric hour (e.g., '8')
31 | minute: 'numeric', // numeric minute (e.g., '30')
32 | hour12: true, // use 12-hour clock (true) or 24-hour clock (false)
33 | }
34 |
35 | const formattedDateTime: string = new Date(dateString).toLocaleString('en-US', dateTimeOptions)
36 |
37 | const formattedDate: string = new Date(dateString).toLocaleString('en-US', dateOptions)
38 |
39 | const formattedTime: string = new Date(dateString).toLocaleString('en-US', timeOptions)
40 |
41 | return {
42 | dateTime: formattedDateTime,
43 | dateOnly: formattedDate,
44 | timeOnly: formattedTime,
45 | }
46 | }
47 |
48 | export const convertFileToUrl = (file: File) => URL.createObjectURL(file)
49 |
50 | export const formatPrice = (price: string) => {
51 | const amount = parseFloat(price)
52 | const formattedPrice = new Intl.NumberFormat('en-US', {
53 | style: 'currency',
54 | currency: 'USD',
55 | }).format(amount)
56 |
57 | return formattedPrice
58 | }
59 |
60 | export function formUrlQuery({ params, key, value }: UrlQueryParams) {
61 | const currentUrl = qs.parse(params)
62 |
63 | currentUrl[key] = value
64 |
65 | return qs.stringifyUrl(
66 | {
67 | url: window.location.pathname,
68 | query: currentUrl,
69 | },
70 | { skipNull: true }
71 | )
72 | }
73 |
74 | export function removeKeysFromQuery({ params, keysToRemove }: RemoveUrlQueryParams) {
75 | const currentUrl = qs.parse(params)
76 |
77 | keysToRemove.forEach(key => {
78 | delete currentUrl[key]
79 | })
80 |
81 | return qs.stringifyUrl(
82 | {
83 | url: window.location.pathname,
84 | query: currentUrl,
85 | },
86 | { skipNull: true }
87 | )
88 | }
89 |
90 | export const handleError = (error: unknown) => {
91 | console.error(error)
92 | throw new Error(typeof error === 'string' ? error : JSON.stringify(error))
93 | }
94 |
--------------------------------------------------------------------------------
/app/(root)/profile/page.tsx:
--------------------------------------------------------------------------------
1 | import Collection from '@/components/shared/Collection'
2 | import { Button } from '@/components/ui/button'
3 | import { getEventsByUser } from '@/lib/actions/event.actions'
4 | import { getOrdersByUser } from '@/lib/actions/order.actions'
5 | import { IOrder } from '@/lib/database/models/order.model'
6 | import { SearchParamProps } from '@/types'
7 | import { auth } from '@clerk/nextjs'
8 | import Link from 'next/link'
9 | import React from 'react'
10 |
11 | const ProfilePage = async ({ searchParams }: SearchParamProps) => {
12 | const { sessionClaims } = auth();
13 | const userId = sessionClaims?.userId as string;
14 |
15 | const ordersPage = Number(searchParams?.ordersPage) || 1;
16 | const eventsPage = Number(searchParams?.eventsPage) || 1;
17 |
18 | const orders = await getOrdersByUser({ userId, page: ordersPage})
19 |
20 | const orderedEvents = orders?.data.map((order: IOrder) => order.event) || [];
21 | const organizedEvents = await getEventsByUser({ userId, page: eventsPage })
22 |
23 | return (
24 | <>
25 | {/* My Tickets */}
26 |
32 |
33 |
38 | )}
39 |
40 |
43 | {!hidePrice &&
73 |
44 |
45 | {event.isFree ? 'FREE' : `$${event.price}`}
46 |
47 |
}
51 |
52 | 48 | {event.category.name} 49 |
50 |53 | {formatDateTime(event.startDateTime).dateTime} 54 |
55 | 56 | 57 |{event.title}
58 | 59 | 60 |
61 |
72 | 62 | {event.organizer.firstName} {event.organizer.lastName} 63 |
64 | 65 | {hasOrderLink && ( 66 | 67 |Order Details
68 |
28 |
35 | My Tickets
29 | 34 |
53 |
60 | Events Organized
54 | 59 |
21 |
80 |
30 |
79 |
31 |
49 |
50 | {event.title}
32 | 33 |
34 |
48 |
35 |
42 |
43 | 36 | {event.isFree ? 'FREE' : `$${event.price}`} 37 |
38 |39 | {event.category.name} 40 |
41 |44 | by{' '} 45 | {event.organizer.firstName} {event.organizer.lastName} 46 |
47 |
53 |
72 |
73 |
54 |
66 |
67 |
56 |
65 | 57 | {formatDateTime(event.startDateTime).dateOnly} - {' '} 58 | {formatDateTime(event.startDateTime).timeOnly} 59 |
60 |61 | {formatDateTime(event.endDateTime).dateOnly} - {' '} 62 | {formatDateTime(event.endDateTime).timeOnly} 63 |
64 |
68 |
71 | {event.location}
70 |
74 |
78 | What You'll Learn:
75 |{event.description}
76 |{event.url}
77 |Related Events
85 | 86 |161 | {body} 162 |
163 | ) 164 | }) 165 | FormMessage.displayName = "FormMessage" 166 | 167 | export { 168 | useFormField, 169 | Form, 170 | FormItem, 171 | FormLabel, 172 | FormControl, 173 | FormDescription, 174 | FormMessage, 175 | FormField, 176 | } 177 | -------------------------------------------------------------------------------- /components/ui/sheet.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as SheetPrimitive from "@radix-ui/react-dialog" 5 | import { cva, type VariantProps } from "class-variance-authority" 6 | import { X } from "lucide-react" 7 | 8 | import { cn } from "@/lib/utils" 9 | 10 | const Sheet = SheetPrimitive.Root 11 | 12 | const SheetTrigger = SheetPrimitive.Trigger 13 | 14 | const SheetClose = SheetPrimitive.Close 15 | 16 | const SheetPortal = SheetPrimitive.Portal 17 | 18 | const SheetOverlay = React.forwardRef< 19 | React.ElementRef
2 |
3 | 4 |
5 |
6 |
7 | 8 |
20 |
21 | ## 📋 Table of Contents
22 |
23 | 1. 🤖 [Introduction](#introduction)
24 | 2. ⚙️ [Tech Stack](#tech-stack)
25 | 3. 🔋 [Features](#features)
26 | 4. 🤸 [Quick Start](#quick-start)
27 | 5. 🕸️ [Snippets](#snippets)
28 | 6. 🔗 [Links](#links)
29 | 7. 🚀 [More](#more)
30 |
31 | ## 🚨 Tutorial
32 |
33 | This repository contains the code corresponding to an in-depth tutorial available on our YouTube channel, JavaScript Mastery.
34 |
35 | If you prefer visual learning, this is the perfect resource for you. Follow our tutorial to learn how to build projects like these step-by-step in a beginner-friendly manner!
36 |
37 | 3 | 4 |
7 | 8 |
9 | 
10 | 
11 | 
12 |
13 |
14 |
10 |
11 |
12 | A Full Stack Next 14 Events App
15 | 16 |
17 | Build this project step by step with our detailed tutorial on JavaScript Mastery YouTube. Join the JSM family!
18 |
19 |
156 |
157 |
158 | ```css
159 | @tailwind base;
160 | @tailwind components;
161 | @tailwind utilities;
162 |
163 | @layer base {
164 | :root {
165 | --background: 0 0% 100%;
166 | --foreground: 222.2 84% 4.9%;
167 |
168 | --card: 0 0% 100%;
169 | --card-foreground: 222.2 84% 4.9%;
170 |
171 | --popover: 0 0% 100%;
172 | --popover-foreground: 222.2 84% 4.9%;
173 |
174 | --primary: 222.2 47.4% 11.2%;
175 | --primary-foreground: 210 40% 98%;
176 |
177 | --secondary: 210 40% 96.1%;
178 | --secondary-foreground: 222.2 47.4% 11.2%;
179 |
180 | --muted: 210 40% 96.1%;
181 | --muted-foreground: 215.4 16.3% 46.9%;
182 |
183 | --accent: 210 40% 96.1%;
184 | --accent-foreground: 222.2 47.4% 11.2%;
185 |
186 | --destructive: 0 84.2% 60.2%;
187 | --destructive-foreground: 210 40% 98%;
188 |
189 | --border: 214.3 31.8% 91.4%;
190 | --input: 214.3 31.8% 91.4%;
191 | --ring: 222.2 84% 4.9%;
192 |
193 | --radius: 0.5rem;
194 | }
195 |
196 | .dark {
197 | --background: 222.2 84% 4.9%;
198 | --foreground: 210 40% 98%;
199 |
200 | --card: 222.2 84% 4.9%;
201 | --card-foreground: 210 40% 98%;
202 |
203 | --popover: 222.2 84% 4.9%;
204 | --popover-foreground: 210 40% 98%;
205 |
206 | --primary: 210 40% 98%;
207 | --primary-foreground: 222.2 47.4% 11.2%;
208 |
209 | --secondary: 217.2 32.6% 17.5%;
210 | --secondary-foreground: 210 40% 98%;
211 |
212 | --muted: 217.2 32.6% 17.5%;
213 | --muted-foreground: 215 20.2% 65.1%;
214 |
215 | --accent: 217.2 32.6% 17.5%;
216 | --accent-foreground: 210 40% 98%;
217 |
218 | --destructive: 0 62.8% 30.6%;
219 | --destructive-foreground: 210 40% 98%;
220 |
221 | --border: 217.2 32.6% 17.5%;
222 | --input: 217.2 32.6% 17.5%;
223 | --ring: 212.7 26.8% 83.9%;
224 | }
225 | }
226 |
227 | * {
228 | list-style: none;
229 | padding: 0;
230 | margin: 0;
231 | scroll-behavior: smooth;
232 | }
233 |
234 | body {
235 | font-family: var(--font-poppins)
236 | }
237 |
238 | .filter-grey {
239 | filter: brightness(0) saturate(100%) invert(47%) sepia(0%) saturate(217%)
240 | hue-rotate(32deg) brightness(98%) contrast(92%);
241 | }
242 |
243 | /* ========================================== TAILWIND STYLES */
244 | @layer utilities {
245 | .wrapper {
246 | @apply max-w-7xl lg:mx-auto p-5 md:px-10 xl:px-0 w-full;
247 | }
248 |
249 | .flex-center {
250 | @apply flex justify-center items-center;
251 | }
252 |
253 | .flex-between {
254 | @apply flex justify-between items-center;
255 | }
256 |
257 | /* TYPOGRAPHY */
258 | /* 64 */
259 | .h1-bold {
260 | @apply font-bold text-[40px] leading-[48px] lg:text-[48px] lg:leading-[60px] xl:text-[58px] xl:leading-[74px];
261 | }
262 |
263 | /* 40 */
264 | .h2-bold {
265 | @apply font-bold text-[32px] leading-[40px] lg:text-[36px] lg:leading-[44px] xl:text-[40px] xl:leading-[48px];
266 | }
267 |
268 | .h2-medium {
269 | @apply font-medium text-[32px] leading-[40px] lg:text-[36px] lg:leading-[44px] xl:text-[40px] xl:leading-[48px];
270 | }
271 |
272 | /* 36 */
273 | .h3-bold {
274 | @apply font-bold text-[28px] leading-[36px] md:text-[36px] md:leading-[44px];
275 | }
276 |
277 | .h3-medium {
278 | @apply font-medium text-[28px] leading-[36px] md:text-[36px] md:leading-[44px];
279 | }
280 |
281 | /* 32 */
282 | .h4-medium {
283 | @apply font-medium text-[32px] leading-[40px];
284 | }
285 |
286 | /* 28 */
287 | .h5-bold {
288 | @apply font-bold text-[28px] leading-[36px];
289 | }
290 |
291 | /* 24 */
292 | .p-bold-24 {
293 | @apply font-bold text-[24px] leading-[36px];
294 | }
295 |
296 | .p-medium-24 {
297 | @apply font-medium text-[24px] leading-[36px];
298 | }
299 |
300 | .p-regular-24 {
301 | @apply font-normal text-[24px] leading-[36px];
302 | }
303 |
304 | /* 20 */
305 | .p-bold-20 {
306 | @apply font-bold text-[20px] leading-[30px] tracking-[2%];
307 | }
308 |
309 | .p-semibold-20 {
310 | @apply text-[20px] font-semibold leading-[30px] tracking-[2%];
311 | }
312 |
313 | .p-medium-20 {
314 | @apply text-[20px] font-medium leading-[30px];
315 | }
316 |
317 | .p-regular-20 {
318 | @apply text-[20px] font-normal leading-[30px] tracking-[2%];
319 | }
320 |
321 | /* 18 */
322 | .p-semibold-18 {
323 | @apply text-[18px] font-semibold leading-[28px] tracking-[2%];
324 | }
325 |
326 | .p-medium-18 {
327 | @apply text-[18px] font-medium leading-[28px];
328 | }
329 |
330 | .p-regular-18 {
331 | @apply text-[18px] font-normal leading-[28px] tracking-[2%];
332 | }
333 |
334 | /* 16 */
335 | .p-bold-16 {
336 | @apply text-[16px] font-bold leading-[24px];
337 | }
338 |
339 | .p-medium-16 {
340 | @apply text-[16px] font-medium leading-[24px];
341 | }
342 |
343 | .p-regular-16 {
344 | @apply text-[16px] font-normal leading-[24px];
345 | }
346 |
347 | /* 14 */
348 | .p-semibold-14 {
349 | @apply text-[14px] font-semibold leading-[20px];
350 | }
351 |
352 | .p-medium-14 {
353 | @apply text-[14px] font-medium leading-[20px];
354 | }
355 |
356 | .p-regular-14 {
357 | @apply text-[14px] font-normal leading-[20px];
358 | }
359 |
360 | /* 12 */
361 | .p-medium-12 {
362 | @apply text-[12px] font-medium leading-[20px];
363 | }
364 |
365 | /* SHADCN OVERRIDES */
366 | .select-field {
367 | @apply w-full bg-grey-50 h-[54px] placeholder:text-grey-500 rounded-full p-regular-16 px-5 py-3 border-none focus-visible:ring-transparent focus:ring-transparent !important;
368 | }
369 |
370 | .input-field {
371 | @apply bg-grey-50 h-[54px] focus-visible:ring-offset-0 placeholder:text-grey-500 rounded-full p-regular-16 px-4 py-3 border-none focus-visible:ring-transparent !important;
372 | }
373 |
374 | .textarea {
375 | @apply bg-grey-50 flex flex-1 placeholder:text-grey-500 p-regular-16 px-5 py-3 border-none focus-visible:ring-transparent !important;
376 | }
377 |
378 | .button {
379 | @apply rounded-full h-[54px] p-regular-16;
380 | }
381 |
382 | .select-item {
383 | @apply py-3 cursor-pointer focus:bg-primary-50;
384 | }
385 |
386 | .toggle-switch {
387 | @apply bg-gray-300 !important;
388 | }
389 | }
390 |
391 | /* ========================================== CLERK STYLES */
392 | .cl-logoImage {
393 | height: 38px;
394 | }
395 |
396 | .cl-userButtonBox {
397 | flex-direction: row-reverse;
398 | }
399 |
400 | .cl-userButtonOuterIdentifier {
401 | font-size: 16px;
402 | }
403 |
404 | .cl-userButtonPopoverCard {
405 | right: 4px !important;
406 | }
407 |
408 | .cl-formButtonPrimary:hover,
409 | .cl-formButtonPrimary:focus,
410 | .cl-formButtonPrimary:active {
411 | background-color: #705CF7
412 | }
413 |
414 | /* ========================================== REACT-DATEPICKER STYLES */
415 | .datePicker {
416 | width: 100%;
417 | }
418 |
419 | .react-datepicker__input-container input {
420 | background-color: transparent;
421 | width: 100%;
422 | outline: none;
423 | margin-left: 16px;
424 | }
425 |
426 | .react-datepicker__day--selected {
427 | background-color: #624cf5 !important;
428 | color: #ffffff !important;
429 | border-radius: 4px;
430 | }
431 |
432 | .react-datepicker__time-list-item--selected {
433 | background-color: #624cf5 !important;
434 | }
435 | ```
436 |
437 |
438 | globals.css
157 |
158 | ```css
159 | @tailwind base;
160 | @tailwind components;
161 | @tailwind utilities;
162 |
163 | @layer base {
164 | :root {
165 | --background: 0 0% 100%;
166 | --foreground: 222.2 84% 4.9%;
167 |
168 | --card: 0 0% 100%;
169 | --card-foreground: 222.2 84% 4.9%;
170 |
171 | --popover: 0 0% 100%;
172 | --popover-foreground: 222.2 84% 4.9%;
173 |
174 | --primary: 222.2 47.4% 11.2%;
175 | --primary-foreground: 210 40% 98%;
176 |
177 | --secondary: 210 40% 96.1%;
178 | --secondary-foreground: 222.2 47.4% 11.2%;
179 |
180 | --muted: 210 40% 96.1%;
181 | --muted-foreground: 215.4 16.3% 46.9%;
182 |
183 | --accent: 210 40% 96.1%;
184 | --accent-foreground: 222.2 47.4% 11.2%;
185 |
186 | --destructive: 0 84.2% 60.2%;
187 | --destructive-foreground: 210 40% 98%;
188 |
189 | --border: 214.3 31.8% 91.4%;
190 | --input: 214.3 31.8% 91.4%;
191 | --ring: 222.2 84% 4.9%;
192 |
193 | --radius: 0.5rem;
194 | }
195 |
196 | .dark {
197 | --background: 222.2 84% 4.9%;
198 | --foreground: 210 40% 98%;
199 |
200 | --card: 222.2 84% 4.9%;
201 | --card-foreground: 210 40% 98%;
202 |
203 | --popover: 222.2 84% 4.9%;
204 | --popover-foreground: 210 40% 98%;
205 |
206 | --primary: 210 40% 98%;
207 | --primary-foreground: 222.2 47.4% 11.2%;
208 |
209 | --secondary: 217.2 32.6% 17.5%;
210 | --secondary-foreground: 210 40% 98%;
211 |
212 | --muted: 217.2 32.6% 17.5%;
213 | --muted-foreground: 215 20.2% 65.1%;
214 |
215 | --accent: 217.2 32.6% 17.5%;
216 | --accent-foreground: 210 40% 98%;
217 |
218 | --destructive: 0 62.8% 30.6%;
219 | --destructive-foreground: 210 40% 98%;
220 |
221 | --border: 217.2 32.6% 17.5%;
222 | --input: 217.2 32.6% 17.5%;
223 | --ring: 212.7 26.8% 83.9%;
224 | }
225 | }
226 |
227 | * {
228 | list-style: none;
229 | padding: 0;
230 | margin: 0;
231 | scroll-behavior: smooth;
232 | }
233 |
234 | body {
235 | font-family: var(--font-poppins)
236 | }
237 |
238 | .filter-grey {
239 | filter: brightness(0) saturate(100%) invert(47%) sepia(0%) saturate(217%)
240 | hue-rotate(32deg) brightness(98%) contrast(92%);
241 | }
242 |
243 | /* ========================================== TAILWIND STYLES */
244 | @layer utilities {
245 | .wrapper {
246 | @apply max-w-7xl lg:mx-auto p-5 md:px-10 xl:px-0 w-full;
247 | }
248 |
249 | .flex-center {
250 | @apply flex justify-center items-center;
251 | }
252 |
253 | .flex-between {
254 | @apply flex justify-between items-center;
255 | }
256 |
257 | /* TYPOGRAPHY */
258 | /* 64 */
259 | .h1-bold {
260 | @apply font-bold text-[40px] leading-[48px] lg:text-[48px] lg:leading-[60px] xl:text-[58px] xl:leading-[74px];
261 | }
262 |
263 | /* 40 */
264 | .h2-bold {
265 | @apply font-bold text-[32px] leading-[40px] lg:text-[36px] lg:leading-[44px] xl:text-[40px] xl:leading-[48px];
266 | }
267 |
268 | .h2-medium {
269 | @apply font-medium text-[32px] leading-[40px] lg:text-[36px] lg:leading-[44px] xl:text-[40px] xl:leading-[48px];
270 | }
271 |
272 | /* 36 */
273 | .h3-bold {
274 | @apply font-bold text-[28px] leading-[36px] md:text-[36px] md:leading-[44px];
275 | }
276 |
277 | .h3-medium {
278 | @apply font-medium text-[28px] leading-[36px] md:text-[36px] md:leading-[44px];
279 | }
280 |
281 | /* 32 */
282 | .h4-medium {
283 | @apply font-medium text-[32px] leading-[40px];
284 | }
285 |
286 | /* 28 */
287 | .h5-bold {
288 | @apply font-bold text-[28px] leading-[36px];
289 | }
290 |
291 | /* 24 */
292 | .p-bold-24 {
293 | @apply font-bold text-[24px] leading-[36px];
294 | }
295 |
296 | .p-medium-24 {
297 | @apply font-medium text-[24px] leading-[36px];
298 | }
299 |
300 | .p-regular-24 {
301 | @apply font-normal text-[24px] leading-[36px];
302 | }
303 |
304 | /* 20 */
305 | .p-bold-20 {
306 | @apply font-bold text-[20px] leading-[30px] tracking-[2%];
307 | }
308 |
309 | .p-semibold-20 {
310 | @apply text-[20px] font-semibold leading-[30px] tracking-[2%];
311 | }
312 |
313 | .p-medium-20 {
314 | @apply text-[20px] font-medium leading-[30px];
315 | }
316 |
317 | .p-regular-20 {
318 | @apply text-[20px] font-normal leading-[30px] tracking-[2%];
319 | }
320 |
321 | /* 18 */
322 | .p-semibold-18 {
323 | @apply text-[18px] font-semibold leading-[28px] tracking-[2%];
324 | }
325 |
326 | .p-medium-18 {
327 | @apply text-[18px] font-medium leading-[28px];
328 | }
329 |
330 | .p-regular-18 {
331 | @apply text-[18px] font-normal leading-[28px] tracking-[2%];
332 | }
333 |
334 | /* 16 */
335 | .p-bold-16 {
336 | @apply text-[16px] font-bold leading-[24px];
337 | }
338 |
339 | .p-medium-16 {
340 | @apply text-[16px] font-medium leading-[24px];
341 | }
342 |
343 | .p-regular-16 {
344 | @apply text-[16px] font-normal leading-[24px];
345 | }
346 |
347 | /* 14 */
348 | .p-semibold-14 {
349 | @apply text-[14px] font-semibold leading-[20px];
350 | }
351 |
352 | .p-medium-14 {
353 | @apply text-[14px] font-medium leading-[20px];
354 | }
355 |
356 | .p-regular-14 {
357 | @apply text-[14px] font-normal leading-[20px];
358 | }
359 |
360 | /* 12 */
361 | .p-medium-12 {
362 | @apply text-[12px] font-medium leading-[20px];
363 | }
364 |
365 | /* SHADCN OVERRIDES */
366 | .select-field {
367 | @apply w-full bg-grey-50 h-[54px] placeholder:text-grey-500 rounded-full p-regular-16 px-5 py-3 border-none focus-visible:ring-transparent focus:ring-transparent !important;
368 | }
369 |
370 | .input-field {
371 | @apply bg-grey-50 h-[54px] focus-visible:ring-offset-0 placeholder:text-grey-500 rounded-full p-regular-16 px-4 py-3 border-none focus-visible:ring-transparent !important;
372 | }
373 |
374 | .textarea {
375 | @apply bg-grey-50 flex flex-1 placeholder:text-grey-500 p-regular-16 px-5 py-3 border-none focus-visible:ring-transparent !important;
376 | }
377 |
378 | .button {
379 | @apply rounded-full h-[54px] p-regular-16;
380 | }
381 |
382 | .select-item {
383 | @apply py-3 cursor-pointer focus:bg-primary-50;
384 | }
385 |
386 | .toggle-switch {
387 | @apply bg-gray-300 !important;
388 | }
389 | }
390 |
391 | /* ========================================== CLERK STYLES */
392 | .cl-logoImage {
393 | height: 38px;
394 | }
395 |
396 | .cl-userButtonBox {
397 | flex-direction: row-reverse;
398 | }
399 |
400 | .cl-userButtonOuterIdentifier {
401 | font-size: 16px;
402 | }
403 |
404 | .cl-userButtonPopoverCard {
405 | right: 4px !important;
406 | }
407 |
408 | .cl-formButtonPrimary:hover,
409 | .cl-formButtonPrimary:focus,
410 | .cl-formButtonPrimary:active {
411 | background-color: #705CF7
412 | }
413 |
414 | /* ========================================== REACT-DATEPICKER STYLES */
415 | .datePicker {
416 | width: 100%;
417 | }
418 |
419 | .react-datepicker__input-container input {
420 | background-color: transparent;
421 | width: 100%;
422 | outline: none;
423 | margin-left: 16px;
424 | }
425 |
426 | .react-datepicker__day--selected {
427 | background-color: #624cf5 !important;
428 | color: #ffffff !important;
429 | border-radius: 4px;
430 | }
431 |
432 | .react-datepicker__time-list-item--selected {
433 | background-color: #624cf5 !important;
434 | }
435 | ```
436 |
439 |
440 |
441 | ```typescript
442 | /** @type {import('tailwindcss').Config} */
443 | import { withUt } from 'uploadthing/tw';
444 |
445 | module.exports = withUt({
446 | darkMode: ['class'],
447 | content: [
448 | './pages/**/*.{ts,tsx}',
449 | './components/**/*.{ts,tsx}',
450 | './app/**/*.{ts,tsx}',
451 | './src/**/*.{ts,tsx}',
452 | ],
453 | theme: {
454 | container: {
455 | center: true,
456 | padding: '2rem',
457 | screens: {
458 | '2xl': '1400px',
459 | },
460 | },
461 | extend: {
462 | colors: {
463 | primary: {
464 | 500: '#624CF5',
465 | 50: ' #F6F8FD',
466 | DEFAULT: '#624CF5',
467 | foreground: 'hsl(var(--primary-foreground))',
468 | },
469 | coral: {
470 | 500: '#15BF59',
471 | },
472 |
473 | grey: {
474 | 600: '#545454', // Subdued - color name in figma
475 | 500: '#757575',
476 | 400: '#AFAFAF', // Disabled - color name in figma
477 | 50: '#F6F6F6', // White Grey - color name in figma
478 | },
479 | black: '#000000',
480 | white: '#FFFFFF',
481 | border: 'hsl(var(--border))',
482 | input: 'hsl(var(--input))',
483 | ring: 'hsl(var(--ring))',
484 | foreground: 'hsl(var(--foreground))',
485 | secondary: {
486 | DEFAULT: 'hsl(var(--secondary))',
487 | foreground: 'hsl(var(--secondary-foreground))',
488 | },
489 | destructive: {
490 | DEFAULT: 'hsl(var(--destructive))',
491 | foreground: 'hsl(var(--destructive-foreground))',
492 | },
493 | muted: {
494 | DEFAULT: 'hsl(var(--muted))',
495 | foreground: 'hsl(var(--muted-foreground))',
496 | },
497 | accent: {
498 | DEFAULT: 'hsl(var(--accent))',
499 | foreground: 'hsl(var(--accent-foreground))',
500 | },
501 | popover: {
502 | DEFAULT: 'hsl(var(--popover))',
503 | foreground: 'hsl(var(--popover-foreground))',
504 | },
505 | card: {
506 | DEFAULT: 'hsl(var(--card))',
507 | foreground: 'hsl(var(--card-foreground))',
508 | },
509 | },
510 | fontFamily: {
511 | poppins: ['var(--font-poppins)'],
512 | },
513 | backgroundImage: {
514 | 'dotted-pattern': "url('/assets/images/dotted-pattern.png')",
515 | 'hero-img': "url('/assets/images/hero.png')",
516 | },
517 | borderRadius: {
518 | lg: 'var(--radius)',
519 | md: 'calc(var(--radius) - 2px)',
520 | sm: 'calc(var(--radius) - 4px)',
521 | },
522 | keyframes: {
523 | 'accordion-down': {
524 | from: { height: '0' },
525 | to: { height: 'var(--radix-accordion-content-height)' },
526 | },
527 | 'accordion-up': {
528 | from: { height: 'var(--radix-accordion-content-height)' },
529 | to: { height: '0' },
530 | },
531 | },
532 | animation: {
533 | 'accordion-down': 'accordion-down 0.2s ease-out',
534 | 'accordion-up': 'accordion-up 0.2s ease-out',
535 | },
536 | },
537 | },
538 | plugins: [require('tailwindcss-animate')],
539 | });
540 | ```
541 |
542 |
543 |
544 | tailwind.config.ts
440 |
441 | ```typescript
442 | /** @type {import('tailwindcss').Config} */
443 | import { withUt } from 'uploadthing/tw';
444 |
445 | module.exports = withUt({
446 | darkMode: ['class'],
447 | content: [
448 | './pages/**/*.{ts,tsx}',
449 | './components/**/*.{ts,tsx}',
450 | './app/**/*.{ts,tsx}',
451 | './src/**/*.{ts,tsx}',
452 | ],
453 | theme: {
454 | container: {
455 | center: true,
456 | padding: '2rem',
457 | screens: {
458 | '2xl': '1400px',
459 | },
460 | },
461 | extend: {
462 | colors: {
463 | primary: {
464 | 500: '#624CF5',
465 | 50: ' #F6F8FD',
466 | DEFAULT: '#624CF5',
467 | foreground: 'hsl(var(--primary-foreground))',
468 | },
469 | coral: {
470 | 500: '#15BF59',
471 | },
472 |
473 | grey: {
474 | 600: '#545454', // Subdued - color name in figma
475 | 500: '#757575',
476 | 400: '#AFAFAF', // Disabled - color name in figma
477 | 50: '#F6F6F6', // White Grey - color name in figma
478 | },
479 | black: '#000000',
480 | white: '#FFFFFF',
481 | border: 'hsl(var(--border))',
482 | input: 'hsl(var(--input))',
483 | ring: 'hsl(var(--ring))',
484 | foreground: 'hsl(var(--foreground))',
485 | secondary: {
486 | DEFAULT: 'hsl(var(--secondary))',
487 | foreground: 'hsl(var(--secondary-foreground))',
488 | },
489 | destructive: {
490 | DEFAULT: 'hsl(var(--destructive))',
491 | foreground: 'hsl(var(--destructive-foreground))',
492 | },
493 | muted: {
494 | DEFAULT: 'hsl(var(--muted))',
495 | foreground: 'hsl(var(--muted-foreground))',
496 | },
497 | accent: {
498 | DEFAULT: 'hsl(var(--accent))',
499 | foreground: 'hsl(var(--accent-foreground))',
500 | },
501 | popover: {
502 | DEFAULT: 'hsl(var(--popover))',
503 | foreground: 'hsl(var(--popover-foreground))',
504 | },
505 | card: {
506 | DEFAULT: 'hsl(var(--card))',
507 | foreground: 'hsl(var(--card-foreground))',
508 | },
509 | },
510 | fontFamily: {
511 | poppins: ['var(--font-poppins)'],
512 | },
513 | backgroundImage: {
514 | 'dotted-pattern': "url('/assets/images/dotted-pattern.png')",
515 | 'hero-img': "url('/assets/images/hero.png')",
516 | },
517 | borderRadius: {
518 | lg: 'var(--radius)',
519 | md: 'calc(var(--radius) - 2px)',
520 | sm: 'calc(var(--radius) - 4px)',
521 | },
522 | keyframes: {
523 | 'accordion-down': {
524 | from: { height: '0' },
525 | to: { height: 'var(--radix-accordion-content-height)' },
526 | },
527 | 'accordion-up': {
528 | from: { height: 'var(--radix-accordion-content-height)' },
529 | to: { height: '0' },
530 | },
531 | },
532 | animation: {
533 | 'accordion-down': 'accordion-down 0.2s ease-out',
534 | 'accordion-up': 'accordion-up 0.2s ease-out',
535 | },
536 | },
537 | },
538 | plugins: [require('tailwindcss-animate')],
539 | });
540 | ```
541 |
542 |
545 |
546 |
547 | ```typescript
548 | import { Webhook } from 'svix'
549 | import { headers } from 'next/headers'
550 | import { WebhookEvent } from '@clerk/nextjs/server'
551 | import { createUser, deleteUser, updateUser } from '@/lib/actions/user.actions'
552 | import { clerkClient } from '@clerk/nextjs'
553 | import { NextResponse } from 'next/server'
554 |
555 | export async function POST(req: Request) {
556 |
557 | // You can find this in the Clerk Dashboard -> Webhooks -> choose the webhook
558 | const WEBHOOK_SECRET = process.env.WEBHOOK_SECRET
559 |
560 | if (!WEBHOOK_SECRET) {
561 | throw new Error('Please add WEBHOOK_SECRET from Clerk Dashboard to .env or .env.local')
562 | }
563 |
564 | // Get the headers
565 | const headerPayload = headers();
566 | const svix_id = headerPayload.get("svix-id");
567 | const svix_timestamp = headerPayload.get("svix-timestamp");
568 | const svix_signature = headerPayload.get("svix-signature");
569 |
570 | // If there are no headers, error out
571 | if (!svix_id || !svix_timestamp || !svix_signature) {
572 | return new Response('Error occured -- no svix headers', {
573 | status: 400
574 | })
575 | }
576 |
577 | // Get the body
578 | const payload = await req.json()
579 | const body = JSON.stringify(payload);
580 |
581 | // Create a new Svix instance with your secret.
582 | const wh = new Webhook(WEBHOOK_SECRET);
583 |
584 | let evt: WebhookEvent
585 |
586 | // Verify the payload with the headers
587 | try {
588 | evt = wh.verify(body, {
589 | "svix-id": svix_id,
590 | "svix-timestamp": svix_timestamp,
591 | "svix-signature": svix_signature,
592 | }) as WebhookEvent
593 | } catch (err) {
594 | console.error('Error verifying webhook:', err);
595 | return new Response('Error occured', {
596 | status: 400
597 | })
598 | }
599 |
600 | // Get the ID and type
601 | const { id } = evt.data;
602 | const eventType = evt.type;
603 |
604 | if(eventType === 'user.created') {
605 | const { id, email_addresses, image_url, first_name, last_name, username } = evt.data;
606 |
607 | const user = {
608 | clerkId: id,
609 | email: email_addresses[0].email_address,
610 | username: username!,
611 | firstName: first_name,
612 | lastName: last_name,
613 | photo: image_url,
614 | }
615 |
616 | const newUser = await createUser(user);
617 |
618 | if(newUser) {
619 | await clerkClient.users.updateUserMetadata(id, {
620 | publicMetadata: {
621 | userId: newUser._id
622 | }
623 | })
624 | }
625 |
626 | return NextResponse.json({ message: 'OK', user: newUser })
627 | }
628 |
629 | if (eventType === 'user.updated') {
630 | const {id, image_url, first_name, last_name, username } = evt.data
631 |
632 | const user = {
633 | firstName: first_name,
634 | lastName: last_name,
635 | username: username!,
636 | photo: image_url,
637 | }
638 |
639 | const updatedUser = await updateUser(id, user)
640 |
641 | return NextResponse.json({ message: 'OK', user: updatedUser })
642 | }
643 |
644 | if (eventType === 'user.deleted') {
645 | const { id } = evt.data
646 |
647 | const deletedUser = await deleteUser(id!)
648 |
649 | return NextResponse.json({ message: 'OK', user: deletedUser })
650 | }
651 |
652 | return new Response('', { status: 200 })
653 | }
654 | ```
655 |
656 |
657 | Clerk webhook
546 |
547 | ```typescript
548 | import { Webhook } from 'svix'
549 | import { headers } from 'next/headers'
550 | import { WebhookEvent } from '@clerk/nextjs/server'
551 | import { createUser, deleteUser, updateUser } from '@/lib/actions/user.actions'
552 | import { clerkClient } from '@clerk/nextjs'
553 | import { NextResponse } from 'next/server'
554 |
555 | export async function POST(req: Request) {
556 |
557 | // You can find this in the Clerk Dashboard -> Webhooks -> choose the webhook
558 | const WEBHOOK_SECRET = process.env.WEBHOOK_SECRET
559 |
560 | if (!WEBHOOK_SECRET) {
561 | throw new Error('Please add WEBHOOK_SECRET from Clerk Dashboard to .env or .env.local')
562 | }
563 |
564 | // Get the headers
565 | const headerPayload = headers();
566 | const svix_id = headerPayload.get("svix-id");
567 | const svix_timestamp = headerPayload.get("svix-timestamp");
568 | const svix_signature = headerPayload.get("svix-signature");
569 |
570 | // If there are no headers, error out
571 | if (!svix_id || !svix_timestamp || !svix_signature) {
572 | return new Response('Error occured -- no svix headers', {
573 | status: 400
574 | })
575 | }
576 |
577 | // Get the body
578 | const payload = await req.json()
579 | const body = JSON.stringify(payload);
580 |
581 | // Create a new Svix instance with your secret.
582 | const wh = new Webhook(WEBHOOK_SECRET);
583 |
584 | let evt: WebhookEvent
585 |
586 | // Verify the payload with the headers
587 | try {
588 | evt = wh.verify(body, {
589 | "svix-id": svix_id,
590 | "svix-timestamp": svix_timestamp,
591 | "svix-signature": svix_signature,
592 | }) as WebhookEvent
593 | } catch (err) {
594 | console.error('Error verifying webhook:', err);
595 | return new Response('Error occured', {
596 | status: 400
597 | })
598 | }
599 |
600 | // Get the ID and type
601 | const { id } = evt.data;
602 | const eventType = evt.type;
603 |
604 | if(eventType === 'user.created') {
605 | const { id, email_addresses, image_url, first_name, last_name, username } = evt.data;
606 |
607 | const user = {
608 | clerkId: id,
609 | email: email_addresses[0].email_address,
610 | username: username!,
611 | firstName: first_name,
612 | lastName: last_name,
613 | photo: image_url,
614 | }
615 |
616 | const newUser = await createUser(user);
617 |
618 | if(newUser) {
619 | await clerkClient.users.updateUserMetadata(id, {
620 | publicMetadata: {
621 | userId: newUser._id
622 | }
623 | })
624 | }
625 |
626 | return NextResponse.json({ message: 'OK', user: newUser })
627 | }
628 |
629 | if (eventType === 'user.updated') {
630 | const {id, image_url, first_name, last_name, username } = evt.data
631 |
632 | const user = {
633 | firstName: first_name,
634 | lastName: last_name,
635 | username: username!,
636 | photo: image_url,
637 | }
638 |
639 | const updatedUser = await updateUser(id, user)
640 |
641 | return NextResponse.json({ message: 'OK', user: updatedUser })
642 | }
643 |
644 | if (eventType === 'user.deleted') {
645 | const { id } = evt.data
646 |
647 | const deletedUser = await deleteUser(id!)
648 |
649 | return NextResponse.json({ message: 'OK', user: deletedUser })
650 | }
651 |
652 | return new Response('', { status: 200 })
653 | }
654 | ```
655 |
658 |
659 |
660 | ```typescript
661 | 'use server'
662 |
663 | import { revalidatePath } from 'next/cache'
664 |
665 | import { connectToDatabase } from '@/lib/database'
666 | import User from '@/lib/database/models/user.model'
667 | import Order from '@/lib/database/models/order.model'
668 | import Event from '@/lib/database/models/event.model'
669 | import { handleError } from '@/lib/utils'
670 |
671 | import { CreateUserParams, UpdateUserParams } from '@/types'
672 |
673 | export async function createUser(user: CreateUserParams) {
674 | try {
675 | await connectToDatabase()
676 |
677 | const newUser = await User.create(user)
678 | return JSON.parse(JSON.stringify(newUser))
679 | } catch (error) {
680 | handleError(error)
681 | }
682 | }
683 |
684 | export async function getUserById(userId: string) {
685 | try {
686 | await connectToDatabase()
687 |
688 | const user = await User.findById(userId)
689 |
690 | if (!user) throw new Error('User not found')
691 | return JSON.parse(JSON.stringify(user))
692 | } catch (error) {
693 | handleError(error)
694 | }
695 | }
696 |
697 | export async function updateUser(clerkId: string, user: UpdateUserParams) {
698 | try {
699 | await connectToDatabase()
700 |
701 | const updatedUser = await User.findOneAndUpdate({ clerkId }, user, { new: true })
702 |
703 | if (!updatedUser) throw new Error('User update failed')
704 | return JSON.parse(JSON.stringify(updatedUser))
705 | } catch (error) {
706 | handleError(error)
707 | }
708 | }
709 |
710 | export async function deleteUser(clerkId: string) {
711 | try {
712 | await connectToDatabase()
713 |
714 | // Find user to delete
715 | const userToDelete = await User.findOne({ clerkId })
716 |
717 | if (!userToDelete) {
718 | throw new Error('User not found')
719 | }
720 |
721 | // Unlink relationships
722 | await Promise.all([
723 | // Update the 'events' collection to remove references to the user
724 | Event.updateMany(
725 | { _id: { $in: userToDelete.events } },
726 | { $pull: { organizer: userToDelete._id } }
727 | ),
728 |
729 | // Update the 'orders' collection to remove references to the user
730 | Order.updateMany({ _id: { $in: userToDelete.orders } }, { $unset: { buyer: 1 } }),
731 | ])
732 |
733 | // Delete user
734 | const deletedUser = await User.findByIdAndDelete(userToDelete._id)
735 | revalidatePath('/')
736 |
737 | return deletedUser ? JSON.parse(JSON.stringify(deletedUser)) : null
738 | } catch (error) {
739 | handleError(error)
740 | }
741 | }
742 | ```
743 |
744 |
745 | user.actions.ts
659 |
660 | ```typescript
661 | 'use server'
662 |
663 | import { revalidatePath } from 'next/cache'
664 |
665 | import { connectToDatabase } from '@/lib/database'
666 | import User from '@/lib/database/models/user.model'
667 | import Order from '@/lib/database/models/order.model'
668 | import Event from '@/lib/database/models/event.model'
669 | import { handleError } from '@/lib/utils'
670 |
671 | import { CreateUserParams, UpdateUserParams } from '@/types'
672 |
673 | export async function createUser(user: CreateUserParams) {
674 | try {
675 | await connectToDatabase()
676 |
677 | const newUser = await User.create(user)
678 | return JSON.parse(JSON.stringify(newUser))
679 | } catch (error) {
680 | handleError(error)
681 | }
682 | }
683 |
684 | export async function getUserById(userId: string) {
685 | try {
686 | await connectToDatabase()
687 |
688 | const user = await User.findById(userId)
689 |
690 | if (!user) throw new Error('User not found')
691 | return JSON.parse(JSON.stringify(user))
692 | } catch (error) {
693 | handleError(error)
694 | }
695 | }
696 |
697 | export async function updateUser(clerkId: string, user: UpdateUserParams) {
698 | try {
699 | await connectToDatabase()
700 |
701 | const updatedUser = await User.findOneAndUpdate({ clerkId }, user, { new: true })
702 |
703 | if (!updatedUser) throw new Error('User update failed')
704 | return JSON.parse(JSON.stringify(updatedUser))
705 | } catch (error) {
706 | handleError(error)
707 | }
708 | }
709 |
710 | export async function deleteUser(clerkId: string) {
711 | try {
712 | await connectToDatabase()
713 |
714 | // Find user to delete
715 | const userToDelete = await User.findOne({ clerkId })
716 |
717 | if (!userToDelete) {
718 | throw new Error('User not found')
719 | }
720 |
721 | // Unlink relationships
722 | await Promise.all([
723 | // Update the 'events' collection to remove references to the user
724 | Event.updateMany(
725 | { _id: { $in: userToDelete.events } },
726 | { $pull: { organizer: userToDelete._id } }
727 | ),
728 |
729 | // Update the 'orders' collection to remove references to the user
730 | Order.updateMany({ _id: { $in: userToDelete.orders } }, { $unset: { buyer: 1 } }),
731 | ])
732 |
733 | // Delete user
734 | const deletedUser = await User.findByIdAndDelete(userToDelete._id)
735 | revalidatePath('/')
736 |
737 | return deletedUser ? JSON.parse(JSON.stringify(deletedUser)) : null
738 | } catch (error) {
739 | handleError(error)
740 | }
741 | }
742 | ```
743 |
746 |
747 |
748 | ```typescript
749 | import { Schema, model, models, Document } from 'mongoose'
750 |
751 | export interface IOrder extends Document {
752 | createdAt: Date
753 | stripeId: string
754 | totalAmount: string
755 | event: {
756 | _id: string
757 | title: string
758 | }
759 | buyer: {
760 | _id: string
761 | firstName: string
762 | lastName: string
763 | }
764 | }
765 |
766 | export type IOrderItem = {
767 | _id: string
768 | totalAmount: string
769 | createdAt: Date
770 | eventTitle: string
771 | eventId: string
772 | buyer: string
773 | }
774 |
775 | const OrderSchema = new Schema({
776 | createdAt: {
777 | type: Date,
778 | default: Date.now,
779 | },
780 | stripeId: {
781 | type: String,
782 | required: true,
783 | unique: true,
784 | },
785 | totalAmount: {
786 | type: String,
787 | },
788 | event: {
789 | type: Schema.Types.ObjectId,
790 | ref: 'Event',
791 | },
792 | buyer: {
793 | type: Schema.Types.ObjectId,
794 | ref: 'User',
795 | },
796 | })
797 |
798 | const Order = models.Order || model('Order', OrderSchema)
799 |
800 | export default Order
801 | ```
802 |
803 |
804 |
805 | order.model.ts
747 |
748 | ```typescript
749 | import { Schema, model, models, Document } from 'mongoose'
750 |
751 | export interface IOrder extends Document {
752 | createdAt: Date
753 | stripeId: string
754 | totalAmount: string
755 | event: {
756 | _id: string
757 | title: string
758 | }
759 | buyer: {
760 | _id: string
761 | firstName: string
762 | lastName: string
763 | }
764 | }
765 |
766 | export type IOrderItem = {
767 | _id: string
768 | totalAmount: string
769 | createdAt: Date
770 | eventTitle: string
771 | eventId: string
772 | buyer: string
773 | }
774 |
775 | const OrderSchema = new Schema({
776 | createdAt: {
777 | type: Date,
778 | default: Date.now,
779 | },
780 | stripeId: {
781 | type: String,
782 | required: true,
783 | unique: true,
784 | },
785 | totalAmount: {
786 | type: String,
787 | },
788 | event: {
789 | type: Schema.Types.ObjectId,
790 | ref: 'Event',
791 | },
792 | buyer: {
793 | type: Schema.Types.ObjectId,
794 | ref: 'User',
795 | },
796 | })
797 |
798 | const Order = models.Order || model('Order', OrderSchema)
799 |
800 | export default Order
801 | ```
802 |
803 |
806 |
807 |
808 | ```typescript
809 | 'use client'
810 |
811 | import { useCallback, Dispatch, SetStateAction } from 'react'
812 | import type { FileWithPath } from '@uploadthing/react'
813 | import { useDropzone } from '@uploadthing/react/hooks'
814 | import { generateClientDropzoneAccept } from 'uploadthing/client'
815 |
816 | import { Button } from '@/components/ui/button'
817 | import { convertFileToUrl } from '@/lib/utils'
818 |
819 | type FileUploaderProps = {
820 | onFieldChange: (url: string) => void
821 | imageUrl: string
822 | setFiles: Dispatch>
823 | }
824 |
825 | export function FileUploader({ imageUrl, onFieldChange, setFiles }: FileUploaderProps) {
826 | const onDrop = useCallback((acceptedFiles: FileWithPath[]) => {
827 | setFiles(acceptedFiles)
828 | onFieldChange(convertFileToUrl(acceptedFiles[0]))
829 | }, [])
830 |
831 | const { getRootProps, getInputProps } = useDropzone({
832 | onDrop,
833 | accept: 'image/*' ? generateClientDropzoneAccept(['image/*']) : undefined,
834 | })
835 |
836 | return (
837 |
868 |
869 | FileUploader.tsx
807 |
808 | ```typescript
809 | 'use client'
810 |
811 | import { useCallback, Dispatch, SetStateAction } from 'react'
812 | import type { FileWithPath } from '@uploadthing/react'
813 | import { useDropzone } from '@uploadthing/react/hooks'
814 | import { generateClientDropzoneAccept } from 'uploadthing/client'
815 |
816 | import { Button } from '@/components/ui/button'
817 | import { convertFileToUrl } from '@/lib/utils'
818 |
819 | type FileUploaderProps = {
820 | onFieldChange: (url: string) => void
821 | imageUrl: string
822 | setFiles: Dispatch
840 |
841 |
842 | {imageUrl ? (
843 |
863 | )
864 | }
865 | ```
866 |
867 |
844 |
851 |
852 | ) : (
853 |
854 |
855 |
861 | )}
862 |
855 | Drag photo here
856 |SVG, PNG, JPG
857 | 860 |
870 |
871 |
872 | ```typescript
873 | 'use client'
874 |
875 | import { useTransition } from 'react'
876 | import { usePathname } from 'next/navigation'
877 | import Image from 'next/image'
878 |
879 | import {
880 | AlertDialog,
881 | AlertDialogAction,
882 | AlertDialogCancel,
883 | AlertDialogContent,
884 | AlertDialogDescription,
885 | AlertDialogFooter,
886 | AlertDialogHeader,
887 | AlertDialogTitle,
888 | AlertDialogTrigger,
889 | } from '@/components/ui/alert-dialog'
890 |
891 | import { deleteEvent } from '@/lib/actions/event.actions'
892 |
893 | export const DeleteConfirmation = ({ eventId }: { eventId: string }) => {
894 | const pathname = usePathname()
895 | let [isPending, startTransition] = useTransition()
896 |
897 | return (
898 |
899 |
900 |
902 |
903 |
904 |
905 | Are you sure you want to delete?
906 |
907 | This will permanently delete this event
908 |
909 |
910 |
911 |
912 | Cancel
913 |
914 |
916 | startTransition(async () => {
917 | await deleteEvent({ eventId, path: pathname })
918 | })
919 | }>
920 | {isPending ? 'Deleting...' : 'Delete'}
921 |
922 |
923 |
924 |
925 | )
926 | }
927 | ```
928 |
929 |
930 |
931 | DeleteConfirmation.tsx
871 |
872 | ```typescript
873 | 'use client'
874 |
875 | import { useTransition } from 'react'
876 | import { usePathname } from 'next/navigation'
877 | import Image from 'next/image'
878 |
879 | import {
880 | AlertDialog,
881 | AlertDialogAction,
882 | AlertDialogCancel,
883 | AlertDialogContent,
884 | AlertDialogDescription,
885 | AlertDialogFooter,
886 | AlertDialogHeader,
887 | AlertDialogTitle,
888 | AlertDialogTrigger,
889 | } from '@/components/ui/alert-dialog'
890 |
891 | import { deleteEvent } from '@/lib/actions/event.actions'
892 |
893 | export const DeleteConfirmation = ({ eventId }: { eventId: string }) => {
894 | const pathname = usePathname()
895 | let [isPending, startTransition] = useTransition()
896 |
897 | return (
898 |
932 |
933 |
934 | ```typescript
935 | 'use server'
936 |
937 | import { revalidatePath } from 'next/cache'
938 |
939 | import { connectToDatabase } from '@/lib/database'
940 | import Event from '@/lib/database/models/event.model'
941 | import User from '@/lib/database/models/user.model'
942 | import Category from '@/lib/database/models/category.model'
943 | import { handleError } from '@/lib/utils'
944 |
945 | import {
946 | CreateEventParams,
947 | UpdateEventParams,
948 | DeleteEventParams,
949 | GetAllEventsParams,
950 | GetEventsByUserParams,
951 | GetRelatedEventsByCategoryParams,
952 | } from '@/types'
953 |
954 | const getCategoryByName = async (name: string) => {
955 | return Category.findOne({ name: { $regex: name, $options: 'i' } })
956 | }
957 |
958 | const populateEvent = (query: any) => {
959 | return query
960 | .populate({ path: 'organizer', model: User, select: '_id firstName lastName' })
961 | .populate({ path: 'category', model: Category, select: '_id name' })
962 | }
963 |
964 | // CREATE
965 | export async function createEvent({ userId, event, path }: CreateEventParams) {
966 | try {
967 | await connectToDatabase()
968 |
969 | const organizer = await User.findById(userId)
970 | if (!organizer) throw new Error('Organizer not found')
971 |
972 | const newEvent = await Event.create({ ...event, category: event.categoryId, organizer: userId })
973 | revalidatePath(path)
974 |
975 | return JSON.parse(JSON.stringify(newEvent))
976 | } catch (error) {
977 | handleError(error)
978 | }
979 | }
980 |
981 | // GET ONE EVENT BY ID
982 | export async function getEventById(eventId: string) {
983 | try {
984 | await connectToDatabase()
985 |
986 | const event = await populateEvent(Event.findById(eventId))
987 |
988 | if (!event) throw new Error('Event not found')
989 |
990 | return JSON.parse(JSON.stringify(event))
991 | } catch (error) {
992 | handleError(error)
993 | }
994 | }
995 |
996 | // UPDATE
997 | export async function updateEvent({ userId, event, path }: UpdateEventParams) {
998 | try {
999 | await connectToDatabase()
1000 |
1001 | const eventToUpdate = await Event.findById(event._id)
1002 | if (!eventToUpdate || eventToUpdate.organizer.toHexString() !== userId) {
1003 | throw new Error('Unauthorized or event not found')
1004 | }
1005 |
1006 | const updatedEvent = await Event.findByIdAndUpdate(
1007 | event._id,
1008 | { ...event, category: event.categoryId },
1009 | { new: true }
1010 | )
1011 | revalidatePath(path)
1012 |
1013 | return JSON.parse(JSON.stringify(updatedEvent))
1014 | } catch (error) {
1015 | handleError(error)
1016 | }
1017 | }
1018 |
1019 | // DELETE
1020 | export async function deleteEvent({ eventId, path }: DeleteEventParams) {
1021 | try {
1022 | await connectToDatabase()
1023 |
1024 | const deletedEvent = await Event.findByIdAndDelete(eventId)
1025 | if (deletedEvent) revalidatePath(path)
1026 | } catch (error) {
1027 | handleError(error)
1028 | }
1029 | }
1030 |
1031 | // GET ALL EVENTS
1032 | export async function getAllEvents({ query, limit = 6, page, category }: GetAllEventsParams) {
1033 | try {
1034 | await connectToDatabase()
1035 |
1036 | const titleCondition = query ? { title: { $regex: query, $options: 'i' } } : {}
1037 | const categoryCondition = category ? await getCategoryByName(category) : null
1038 | const conditions = {
1039 | $and: [titleCondition, categoryCondition ? { category: categoryCondition._id } : {}],
1040 | }
1041 |
1042 | const skipAmount = (Number(page) - 1) * limit
1043 | const eventsQuery = Event.find(conditions)
1044 | .sort({ createdAt: 'desc' })
1045 | .skip(skipAmount)
1046 | .limit(limit)
1047 |
1048 | const events = await populateEvent(eventsQuery)
1049 | const eventsCount = await Event.countDocuments(conditions)
1050 |
1051 | return {
1052 | data: JSON.parse(JSON.stringify(events)),
1053 | totalPages: Math.ceil(eventsCount / limit),
1054 | }
1055 | } catch (error) {
1056 | handleError(error)
1057 | }
1058 | }
1059 |
1060 | // GET EVENTS BY ORGANIZER
1061 | export async function getEventsByUser({ userId, limit = 6, page }: GetEventsByUserParams) {
1062 | try {
1063 | await connectToDatabase()
1064 |
1065 | const conditions = { organizer: userId }
1066 | const skipAmount = (page - 1) * limit
1067 |
1068 | const eventsQuery = Event.find(conditions)
1069 | .sort({ createdAt: 'desc' })
1070 | .skip(skipAmount)
1071 | .limit(limit)
1072 |
1073 | const events = await populateEvent(eventsQuery)
1074 | const eventsCount = await Event.countDocuments(conditions)
1075 |
1076 | return { data: JSON.parse(JSON.stringify(events)), totalPages: Math.ceil(eventsCount / limit) }
1077 | } catch (error) {
1078 | handleError(error)
1079 | }
1080 | }
1081 |
1082 | // GET RELATED EVENTS: EVENTS WITH SAME CATEGORY
1083 | export async function getRelatedEventsByCategory({
1084 | categoryId,
1085 | eventId,
1086 | limit = 3,
1087 | page = 1,
1088 | }: GetRelatedEventsByCategoryParams) {
1089 | try {
1090 | await connectToDatabase()
1091 |
1092 | const skipAmount = (Number(page) - 1) * limit
1093 | const conditions = { $and: [{ category: categoryId }, { _id: { $ne: eventId } }] }
1094 |
1095 | const eventsQuery = Event.find(conditions)
1096 | .sort({ createdAt: 'desc' })
1097 | .skip(skipAmount)
1098 | .limit(limit)
1099 |
1100 | const events = await populateEvent(eventsQuery)
1101 | const eventsCount = await Event.countDocuments(conditions)
1102 |
1103 | return { data: JSON.parse(JSON.stringify(events)), totalPages: Math.ceil(eventsCount / limit) }
1104 | } catch (error) {
1105 | handleError(error)
1106 | }
1107 | }
1108 | ```
1109 |
1110 |
1111 |
1112 | event.action.ts
933 |
934 | ```typescript
935 | 'use server'
936 |
937 | import { revalidatePath } from 'next/cache'
938 |
939 | import { connectToDatabase } from '@/lib/database'
940 | import Event from '@/lib/database/models/event.model'
941 | import User from '@/lib/database/models/user.model'
942 | import Category from '@/lib/database/models/category.model'
943 | import { handleError } from '@/lib/utils'
944 |
945 | import {
946 | CreateEventParams,
947 | UpdateEventParams,
948 | DeleteEventParams,
949 | GetAllEventsParams,
950 | GetEventsByUserParams,
951 | GetRelatedEventsByCategoryParams,
952 | } from '@/types'
953 |
954 | const getCategoryByName = async (name: string) => {
955 | return Category.findOne({ name: { $regex: name, $options: 'i' } })
956 | }
957 |
958 | const populateEvent = (query: any) => {
959 | return query
960 | .populate({ path: 'organizer', model: User, select: '_id firstName lastName' })
961 | .populate({ path: 'category', model: Category, select: '_id name' })
962 | }
963 |
964 | // CREATE
965 | export async function createEvent({ userId, event, path }: CreateEventParams) {
966 | try {
967 | await connectToDatabase()
968 |
969 | const organizer = await User.findById(userId)
970 | if (!organizer) throw new Error('Organizer not found')
971 |
972 | const newEvent = await Event.create({ ...event, category: event.categoryId, organizer: userId })
973 | revalidatePath(path)
974 |
975 | return JSON.parse(JSON.stringify(newEvent))
976 | } catch (error) {
977 | handleError(error)
978 | }
979 | }
980 |
981 | // GET ONE EVENT BY ID
982 | export async function getEventById(eventId: string) {
983 | try {
984 | await connectToDatabase()
985 |
986 | const event = await populateEvent(Event.findById(eventId))
987 |
988 | if (!event) throw new Error('Event not found')
989 |
990 | return JSON.parse(JSON.stringify(event))
991 | } catch (error) {
992 | handleError(error)
993 | }
994 | }
995 |
996 | // UPDATE
997 | export async function updateEvent({ userId, event, path }: UpdateEventParams) {
998 | try {
999 | await connectToDatabase()
1000 |
1001 | const eventToUpdate = await Event.findById(event._id)
1002 | if (!eventToUpdate || eventToUpdate.organizer.toHexString() !== userId) {
1003 | throw new Error('Unauthorized or event not found')
1004 | }
1005 |
1006 | const updatedEvent = await Event.findByIdAndUpdate(
1007 | event._id,
1008 | { ...event, category: event.categoryId },
1009 | { new: true }
1010 | )
1011 | revalidatePath(path)
1012 |
1013 | return JSON.parse(JSON.stringify(updatedEvent))
1014 | } catch (error) {
1015 | handleError(error)
1016 | }
1017 | }
1018 |
1019 | // DELETE
1020 | export async function deleteEvent({ eventId, path }: DeleteEventParams) {
1021 | try {
1022 | await connectToDatabase()
1023 |
1024 | const deletedEvent = await Event.findByIdAndDelete(eventId)
1025 | if (deletedEvent) revalidatePath(path)
1026 | } catch (error) {
1027 | handleError(error)
1028 | }
1029 | }
1030 |
1031 | // GET ALL EVENTS
1032 | export async function getAllEvents({ query, limit = 6, page, category }: GetAllEventsParams) {
1033 | try {
1034 | await connectToDatabase()
1035 |
1036 | const titleCondition = query ? { title: { $regex: query, $options: 'i' } } : {}
1037 | const categoryCondition = category ? await getCategoryByName(category) : null
1038 | const conditions = {
1039 | $and: [titleCondition, categoryCondition ? { category: categoryCondition._id } : {}],
1040 | }
1041 |
1042 | const skipAmount = (Number(page) - 1) * limit
1043 | const eventsQuery = Event.find(conditions)
1044 | .sort({ createdAt: 'desc' })
1045 | .skip(skipAmount)
1046 | .limit(limit)
1047 |
1048 | const events = await populateEvent(eventsQuery)
1049 | const eventsCount = await Event.countDocuments(conditions)
1050 |
1051 | return {
1052 | data: JSON.parse(JSON.stringify(events)),
1053 | totalPages: Math.ceil(eventsCount / limit),
1054 | }
1055 | } catch (error) {
1056 | handleError(error)
1057 | }
1058 | }
1059 |
1060 | // GET EVENTS BY ORGANIZER
1061 | export async function getEventsByUser({ userId, limit = 6, page }: GetEventsByUserParams) {
1062 | try {
1063 | await connectToDatabase()
1064 |
1065 | const conditions = { organizer: userId }
1066 | const skipAmount = (page - 1) * limit
1067 |
1068 | const eventsQuery = Event.find(conditions)
1069 | .sort({ createdAt: 'desc' })
1070 | .skip(skipAmount)
1071 | .limit(limit)
1072 |
1073 | const events = await populateEvent(eventsQuery)
1074 | const eventsCount = await Event.countDocuments(conditions)
1075 |
1076 | return { data: JSON.parse(JSON.stringify(events)), totalPages: Math.ceil(eventsCount / limit) }
1077 | } catch (error) {
1078 | handleError(error)
1079 | }
1080 | }
1081 |
1082 | // GET RELATED EVENTS: EVENTS WITH SAME CATEGORY
1083 | export async function getRelatedEventsByCategory({
1084 | categoryId,
1085 | eventId,
1086 | limit = 3,
1087 | page = 1,
1088 | }: GetRelatedEventsByCategoryParams) {
1089 | try {
1090 | await connectToDatabase()
1091 |
1092 | const skipAmount = (Number(page) - 1) * limit
1093 | const conditions = { $and: [{ category: categoryId }, { _id: { $ne: eventId } }] }
1094 |
1095 | const eventsQuery = Event.find(conditions)
1096 | .sort({ createdAt: 'desc' })
1097 | .skip(skipAmount)
1098 | .limit(limit)
1099 |
1100 | const events = await populateEvent(eventsQuery)
1101 | const eventsCount = await Event.countDocuments(conditions)
1102 |
1103 | return { data: JSON.parse(JSON.stringify(events)), totalPages: Math.ceil(eventsCount / limit) }
1104 | } catch (error) {
1105 | handleError(error)
1106 | }
1107 | }
1108 | ```
1109 |
1110 |
1113 |
1114 |
1115 | ```typescript
1116 | "use server"
1117 |
1118 | import Stripe from 'stripe';
1119 | import { CheckoutOrderParams, CreateOrderParams, GetOrdersByEventParams, GetOrdersByUserParams } from "@/types"
1120 | import { redirect } from 'next/navigation';
1121 | import { handleError } from '../utils';
1122 | import { connectToDatabase } from '../database';
1123 | import Order from '../database/models/order.model';
1124 | import Event from '../database/models/event.model';
1125 | import {ObjectId} from 'mongodb';
1126 | import User from '../database/models/user.model';
1127 |
1128 | export const checkoutOrder = async (order: CheckoutOrderParams) => {
1129 | const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);
1130 |
1131 | const price = order.isFree ? 0 : Number(order.price) * 100;
1132 |
1133 | try {
1134 | const session = await stripe.checkout.sessions.create({
1135 | line_items: [
1136 | {
1137 | price_data: {
1138 | currency: 'usd',
1139 | unit_amount: price,
1140 | product_data: {
1141 | name: order.eventTitle
1142 | }
1143 | },
1144 | quantity: 1
1145 | },
1146 | ],
1147 | metadata: {
1148 | eventId: order.eventId,
1149 | buyerId: order.buyerId,
1150 | },
1151 | mode: 'payment',
1152 | success_url: `${process.env.NEXT_PUBLIC_SERVER_URL}/profile`,
1153 | cancel_url: `${process.env.NEXT_PUBLIC_SERVER_URL}/`,
1154 | });
1155 |
1156 | redirect(session.url!)
1157 | } catch (error) {
1158 | throw error;
1159 | }
1160 | }
1161 |
1162 | export const createOrder = async (order: CreateOrderParams) => {
1163 | try {
1164 | await connectToDatabase();
1165 |
1166 | const newOrder = await Order.create({
1167 | ...order,
1168 | event: order.eventId,
1169 | buyer: order.buyerId,
1170 | });
1171 |
1172 | return JSON.parse(JSON.stringify(newOrder));
1173 | } catch (error) {
1174 | handleError(error);
1175 | }
1176 | }
1177 |
1178 | // GET ORDERS BY EVENT
1179 | export async function getOrdersByEvent({ searchString, eventId }: GetOrdersByEventParams) {
1180 | try {
1181 | await connectToDatabase()
1182 |
1183 | if (!eventId) throw new Error('Event ID is required')
1184 | const eventObjectId = new ObjectId(eventId)
1185 |
1186 | const orders = await Order.aggregate([
1187 | {
1188 | $lookup: {
1189 | from: 'users',
1190 | localField: 'buyer',
1191 | foreignField: '_id',
1192 | as: 'buyer',
1193 | },
1194 | },
1195 | {
1196 | $unwind: '$buyer',
1197 | },
1198 | {
1199 | $lookup: {
1200 | from: 'events',
1201 | localField: 'event',
1202 | foreignField: '_id',
1203 | as: 'event',
1204 | },
1205 | },
1206 | {
1207 | $unwind: '$event',
1208 | },
1209 | {
1210 | $project: {
1211 | _id: 1,
1212 | totalAmount: 1,
1213 | createdAt: 1,
1214 | eventTitle: '$event.title',
1215 | eventId: '$event._id',
1216 | buyer: {
1217 | $concat: ['$buyer.firstName', ' ', '$buyer.lastName'],
1218 | },
1219 | },
1220 | },
1221 | {
1222 | $match: {
1223 | $and: [{ eventId: eventObjectId }, { buyer: { $regex: RegExp(searchString, 'i') } }],
1224 | },
1225 | },
1226 | ])
1227 |
1228 | return JSON.parse(JSON.stringify(orders))
1229 | } catch (error) {
1230 | handleError(error)
1231 | }
1232 | }
1233 |
1234 | // GET ORDERS BY USER
1235 | export async function getOrdersByUser({ userId, limit = 3, page }: GetOrdersByUserParams) {
1236 | try {
1237 | await connectToDatabase()
1238 |
1239 | const skipAmount = (Number(page) - 1) * limit
1240 | const conditions = { buyer: userId }
1241 |
1242 | const orders = await Order.distinct('event._id')
1243 | .find(conditions)
1244 | .sort({ createdAt: 'desc' })
1245 | .skip(skipAmount)
1246 | .limit(limit)
1247 | .populate({
1248 | path: 'event',
1249 | model: Event,
1250 | populate: {
1251 | path: 'organizer',
1252 | model: User,
1253 | select: '_id firstName lastName',
1254 | },
1255 | })
1256 |
1257 | const ordersCount = await Order.distinct('event._id').countDocuments(conditions)
1258 |
1259 | return { data: JSON.parse(JSON.stringify(orders)), totalPages: Math.ceil(ordersCount / limit) }
1260 | } catch (error) {
1261 | handleError(error)
1262 | }
1263 | }
1264 | ```
1265 |
1266 |
1267 |
1268 | order.action.ts
1114 |
1115 | ```typescript
1116 | "use server"
1117 |
1118 | import Stripe from 'stripe';
1119 | import { CheckoutOrderParams, CreateOrderParams, GetOrdersByEventParams, GetOrdersByUserParams } from "@/types"
1120 | import { redirect } from 'next/navigation';
1121 | import { handleError } from '../utils';
1122 | import { connectToDatabase } from '../database';
1123 | import Order from '../database/models/order.model';
1124 | import Event from '../database/models/event.model';
1125 | import {ObjectId} from 'mongodb';
1126 | import User from '../database/models/user.model';
1127 |
1128 | export const checkoutOrder = async (order: CheckoutOrderParams) => {
1129 | const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);
1130 |
1131 | const price = order.isFree ? 0 : Number(order.price) * 100;
1132 |
1133 | try {
1134 | const session = await stripe.checkout.sessions.create({
1135 | line_items: [
1136 | {
1137 | price_data: {
1138 | currency: 'usd',
1139 | unit_amount: price,
1140 | product_data: {
1141 | name: order.eventTitle
1142 | }
1143 | },
1144 | quantity: 1
1145 | },
1146 | ],
1147 | metadata: {
1148 | eventId: order.eventId,
1149 | buyerId: order.buyerId,
1150 | },
1151 | mode: 'payment',
1152 | success_url: `${process.env.NEXT_PUBLIC_SERVER_URL}/profile`,
1153 | cancel_url: `${process.env.NEXT_PUBLIC_SERVER_URL}/`,
1154 | });
1155 |
1156 | redirect(session.url!)
1157 | } catch (error) {
1158 | throw error;
1159 | }
1160 | }
1161 |
1162 | export const createOrder = async (order: CreateOrderParams) => {
1163 | try {
1164 | await connectToDatabase();
1165 |
1166 | const newOrder = await Order.create({
1167 | ...order,
1168 | event: order.eventId,
1169 | buyer: order.buyerId,
1170 | });
1171 |
1172 | return JSON.parse(JSON.stringify(newOrder));
1173 | } catch (error) {
1174 | handleError(error);
1175 | }
1176 | }
1177 |
1178 | // GET ORDERS BY EVENT
1179 | export async function getOrdersByEvent({ searchString, eventId }: GetOrdersByEventParams) {
1180 | try {
1181 | await connectToDatabase()
1182 |
1183 | if (!eventId) throw new Error('Event ID is required')
1184 | const eventObjectId = new ObjectId(eventId)
1185 |
1186 | const orders = await Order.aggregate([
1187 | {
1188 | $lookup: {
1189 | from: 'users',
1190 | localField: 'buyer',
1191 | foreignField: '_id',
1192 | as: 'buyer',
1193 | },
1194 | },
1195 | {
1196 | $unwind: '$buyer',
1197 | },
1198 | {
1199 | $lookup: {
1200 | from: 'events',
1201 | localField: 'event',
1202 | foreignField: '_id',
1203 | as: 'event',
1204 | },
1205 | },
1206 | {
1207 | $unwind: '$event',
1208 | },
1209 | {
1210 | $project: {
1211 | _id: 1,
1212 | totalAmount: 1,
1213 | createdAt: 1,
1214 | eventTitle: '$event.title',
1215 | eventId: '$event._id',
1216 | buyer: {
1217 | $concat: ['$buyer.firstName', ' ', '$buyer.lastName'],
1218 | },
1219 | },
1220 | },
1221 | {
1222 | $match: {
1223 | $and: [{ eventId: eventObjectId }, { buyer: { $regex: RegExp(searchString, 'i') } }],
1224 | },
1225 | },
1226 | ])
1227 |
1228 | return JSON.parse(JSON.stringify(orders))
1229 | } catch (error) {
1230 | handleError(error)
1231 | }
1232 | }
1233 |
1234 | // GET ORDERS BY USER
1235 | export async function getOrdersByUser({ userId, limit = 3, page }: GetOrdersByUserParams) {
1236 | try {
1237 | await connectToDatabase()
1238 |
1239 | const skipAmount = (Number(page) - 1) * limit
1240 | const conditions = { buyer: userId }
1241 |
1242 | const orders = await Order.distinct('event._id')
1243 | .find(conditions)
1244 | .sort({ createdAt: 'desc' })
1245 | .skip(skipAmount)
1246 | .limit(limit)
1247 | .populate({
1248 | path: 'event',
1249 | model: Event,
1250 | populate: {
1251 | path: 'organizer',
1252 | model: User,
1253 | select: '_id firstName lastName',
1254 | },
1255 | })
1256 |
1257 | const ordersCount = await Order.distinct('event._id').countDocuments(conditions)
1258 |
1259 | return { data: JSON.parse(JSON.stringify(orders)), totalPages: Math.ceil(ordersCount / limit) }
1260 | } catch (error) {
1261 | handleError(error)
1262 | }
1263 | }
1264 | ```
1265 |
1266 |
1269 |
1270 |
1271 | ```typescript
1272 | import Search from '@/components/shared/Search'
1273 | import { getOrdersByEvent } from '@/lib/actions/order.actions'
1274 | import { formatDateTime, formatPrice } from '@/lib/utils'
1275 | import { SearchParamProps } from '@/types'
1276 | import { IOrderItem } from '@/lib/database/models/order.model'
1277 |
1278 | const Orders = async ({ searchParams }: SearchParamProps) => {
1279 | const eventId = (searchParams?.eventId as string) || ''
1280 | const searchText = (searchParams?.query as string) || ''
1281 |
1282 | const orders = await getOrdersByEvent({ eventId, searchString: searchText })
1283 |
1284 | return (
1285 | <>
1286 |
1287 |
1289 |
1290 |
1291 |
1293 |
1294 |
1295 |
1296 |
1297 |
1335 |
1336 |
1337 | )
1338 | }
1339 |
1340 | export default Orders
1341 | ```
1342 |
1343 |
1344 |
1345 | ## 🔗 Links
1346 |
1347 | All assets used in the project can be found [here](https://drive.google.com/file/d/1hoRwUtTFIiuOXPw-SDYj6wk4hZTMcYmL/view?usp=sharing)
1348 |
1349 | ## 🚀 More
1350 |
1351 | **Advance your skills with Next.js 14 Pro Course**
1352 |
1353 | Enjoyed creating this project? Dive deeper into our PRO courses for a richer learning adventure. They're packed with detailed explanations, cool features, and exercises to boost your skills. Give it a go!
1354 |
1355 |
1356 | orders/page.tsx
1270 |
1271 | ```typescript
1272 | import Search from '@/components/shared/Search'
1273 | import { getOrdersByEvent } from '@/lib/actions/order.actions'
1274 | import { formatDateTime, formatPrice } from '@/lib/utils'
1275 | import { SearchParamProps } from '@/types'
1276 | import { IOrderItem } from '@/lib/database/models/order.model'
1277 |
1278 | const Orders = async ({ searchParams }: SearchParamProps) => {
1279 | const eventId = (searchParams?.eventId as string) || ''
1280 | const searchText = (searchParams?.query as string) || ''
1281 |
1282 | const orders = await getOrdersByEvent({ eventId, searchString: searchText })
1283 |
1284 | return (
1285 | <>
1286 | Orders
1288 || Order ID | 1299 |Event Title | 1300 |Buyer | 1301 |Created | 1302 |Amount | 1303 |
|---|---|---|---|---|
| 1309 | No orders found. 1310 | | 1311 |||||
| {row._id} | 1321 |{row.eventTitle} | 1322 |{row.buyer} | 1323 |1324 | {formatDateTime(row.createdAt).dateTime} 1325 | | 1326 |1327 | {formatPrice(row.totalAmount)} 1328 | | 1329 |
1360 |
1361 | 1362 | **Accelerate your professional journey with Expert Training program** 1363 | 1364 | And if you're hungry for more than just a course and want to understand how we learn and tackle tech challenges, hop into our personalized masterclass. We cover best practices, different web skills, and offer mentorship to boost your confidence. Let's learn and grow together! 1365 | 1366 | 1367 |