From 9eb462998d173b6c6e66aaf2c4940fd9047588f3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Szab=C3=B3=20Benedek?= Date: Fri, 23 Aug 2024 10:44:59 +0200 Subject: [PATCH 1/5] Event CRUD hooks; eventEditPage pt1 --- apps/frontend/package.json | 1 + .../src/api/hooks/eventMutationHooks.ts | 14 +++++++ .../frontend/src/api/hooks/eventQueryHooks.ts | 8 ++++ apps/frontend/src/app/events/new/page.tsx | 37 +++++++++++++------ 4 files changed, 49 insertions(+), 11 deletions(-) diff --git a/apps/frontend/package.json b/apps/frontend/package.json index 4984bd2..785fd27 100644 --- a/apps/frontend/package.json +++ b/apps/frontend/package.json @@ -12,6 +12,7 @@ "lint": "next lint" }, "dependencies": { + "@chakra-ui/react": "^2.8.2", "@tanstack/react-query": "^5.51.15", "@tanstack/react-query-devtools": "^5.51.23", "axios": "^1.7.2", diff --git a/apps/frontend/src/api/hooks/eventMutationHooks.ts b/apps/frontend/src/api/hooks/eventMutationHooks.ts index ddc62a9..75b2d61 100644 --- a/apps/frontend/src/api/hooks/eventMutationHooks.ts +++ b/apps/frontend/src/api/hooks/eventMutationHooks.ts @@ -10,3 +10,17 @@ export const useCreateEventMutation = () => { mutationFn: async (event: CreateEvent) => (await axios.post(`${API_HOST}/events`, event)).data, }); }; + +export const useUpdateEventMutation = (eventId: string) => { + return useMutation({ + mutationFn: async (event: CreateEvent) => (await axios.patch(`${API_HOST}/events/${eventId}`, event)).data, + }); +}; + +export const useDeleteEventMutation = (onSuccess: () => void, onError: (e: Error) => void) => { + return useMutation({ + mutationFn: async (eventId: string) => (await axios.delete(`${API_HOST}/events/${eventId}`)).data, + onSuccess, + onError, + }); +}; diff --git a/apps/frontend/src/api/hooks/eventQueryHooks.ts b/apps/frontend/src/api/hooks/eventQueryHooks.ts index d134e45..f7a0178 100644 --- a/apps/frontend/src/api/hooks/eventQueryHooks.ts +++ b/apps/frontend/src/api/hooks/eventQueryHooks.ts @@ -4,6 +4,7 @@ import axios from 'axios'; import { EventDetails } from '@/app/events/types/eventDetails'; import { API_HOST } from '@/util/environment'; +import { EventModel } from '@/api/model/event.model'; export const useFetchEventDetailsQuery = (eventId: string) => { return useQuery({ @@ -11,3 +12,10 @@ export const useFetchEventDetailsQuery = (eventId: string) => { queryFn: async () => (await axios.get(`${API_HOST}/events/${eventId}`)).data, }); }; + +export const useFetchEventListQuery = () => { + return useQuery({ + queryKey: ['fetchEventList'], + queryFn: async () => (await axios.get(`${API_HOST}/events`)).data, + }); +}; diff --git a/apps/frontend/src/app/events/new/page.tsx b/apps/frontend/src/app/events/new/page.tsx index fafa7d5..09a58a0 100644 --- a/apps/frontend/src/app/events/new/page.tsx +++ b/apps/frontend/src/app/events/new/page.tsx @@ -4,16 +4,29 @@ import { useForm } from 'react-hook-form'; import { useCreateEventMutation } from '@/api/hooks/eventMutationHooks'; import { Color, EventModel, Status } from '@/api/model/event.model'; import { CreateEvent, CreateEventForm } from '@/app/events/types/createEvent'; -import Button from '@/components/button'; -import Input from '@/components/input'; import { styles } from '@/components/newEventStyles'; +import { FRONTEND_HOST } from '@/util/environment'; + +import { + Button, + Checkbox, + Flex, + FormControl, + FormLabel, + Input, + Select, + Text, + useToast, + VStack, + Stack, +} from '@chakra-ui/react'; export default function newEvent() { - /*const { mutate: createEvent } = useCreateEventMutation(); + const { mutate: createEvent } = useCreateEventMutation(); const publishEvent = (formData: CreateEvent) => { createEvent(formData, { onSuccess: (event: EventModel) => { - redirect(`http://localhost:3000/events/${event.id}`); + redirect(`${FRONTEND_HOST}/events/${event.id}`); }, }); }; @@ -49,7 +62,7 @@ export default function newEvent() { status: Status.SUBMITTED, }; publishEvent(formData); - });*/ + }); return (
@@ -58,10 +71,12 @@ export default function newEvent() { Event létrehozása
-
- Név: - -
+ +
+ Név: + +
+
Szín:
@@ -93,8 +108,8 @@ export default function newEvent() {
- +
From e650ec260f0ca9cdb635e9a837a0320e6e257d01 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Szab=C3=B3=20Benedek?= Date: Sat, 24 Aug 2024 10:23:16 +0200 Subject: [PATCH 2/5] EventEditPage form pt1 - not working! --- apps/frontend/package.json | 2 ++ apps/frontend/src/app/events/new/page.tsx | 30 ++++++++++++++--------- 2 files changed, 21 insertions(+), 11 deletions(-) diff --git a/apps/frontend/package.json b/apps/frontend/package.json index 785fd27..2061843 100644 --- a/apps/frontend/package.json +++ b/apps/frontend/package.json @@ -13,9 +13,11 @@ }, "dependencies": { "@chakra-ui/react": "^2.8.2", + "@chakra-ui/system": "^2.6.2", "@tanstack/react-query": "^5.51.15", "@tanstack/react-query-devtools": "^5.51.23", "axios": "^1.7.2", + "chakra-ui": "^0.3.9", "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", "lucide-react": "^0.372.0", diff --git a/apps/frontend/src/app/events/new/page.tsx b/apps/frontend/src/app/events/new/page.tsx index 09a58a0..96029af 100644 --- a/apps/frontend/src/app/events/new/page.tsx +++ b/apps/frontend/src/app/events/new/page.tsx @@ -1,25 +1,25 @@ -import { redirect } from 'next/navigation'; -import { useForm } from 'react-hook-form'; - -import { useCreateEventMutation } from '@/api/hooks/eventMutationHooks'; -import { Color, EventModel, Status } from '@/api/model/event.model'; -import { CreateEvent, CreateEventForm } from '@/app/events/types/createEvent'; -import { styles } from '@/components/newEventStyles'; -import { FRONTEND_HOST } from '@/util/environment'; - import { Button, Checkbox, Flex, FormControl, + FormErrorMessage, FormLabel, Input, Select, + Stack, Text, useToast, VStack, - Stack, } from '@chakra-ui/react'; +import { redirect } from 'next/navigation'; +import { useForm } from 'react-hook-form'; + +import { useCreateEventMutation } from '@/api/hooks/eventMutationHooks'; +import { Color, EventModel, Status } from '@/api/model/event.model'; +import { CreateEvent, CreateEventForm } from '@/app/events/types/createEvent'; +import { styles } from '@/components/newEventStyles'; +import { FRONTEND_HOST } from '@/util/environment'; export default function newEvent() { const { mutate: createEvent } = useCreateEventMutation(); @@ -74,7 +74,15 @@ export default function newEvent() {
Név: - + + {errors.name && {errors.name.message}}
From 8d988bd882a0e6f74f4e5f4ea130a8ac83402951 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Szab=C3=B3=20Benedek?= Date: Tue, 27 Aug 2024 13:52:38 +0200 Subject: [PATCH 3/5] EventEditPage form pt2 - not working! --- apps/frontend/package.json | 4 +++ apps/frontend/src/app/events/new/page.tsx | 39 ++++++++++++++++++----- 2 files changed, 35 insertions(+), 8 deletions(-) diff --git a/apps/frontend/package.json b/apps/frontend/package.json index 2061843..37522b5 100644 --- a/apps/frontend/package.json +++ b/apps/frontend/package.json @@ -12,14 +12,18 @@ "lint": "next lint" }, "dependencies": { + "@chakra-ui/next-js": "^2.2.0", "@chakra-ui/react": "^2.8.2", "@chakra-ui/system": "^2.6.2", + "@emotion/react": "^11.13.3", + "@emotion/styled": "^11.13.0", "@tanstack/react-query": "^5.51.15", "@tanstack/react-query-devtools": "^5.51.23", "axios": "^1.7.2", "chakra-ui": "^0.3.9", "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", + "framer-motion": "^11.3.30", "lucide-react": "^0.372.0", "next": "14.2.2", "react": "^18.2.0", diff --git a/apps/frontend/src/app/events/new/page.tsx b/apps/frontend/src/app/events/new/page.tsx index 96029af..6c06736 100644 --- a/apps/frontend/src/app/events/new/page.tsx +++ b/apps/frontend/src/app/events/new/page.tsx @@ -1,3 +1,4 @@ +'use client'; import { Button, Checkbox, @@ -13,13 +14,13 @@ import { VStack, } from '@chakra-ui/react'; import { redirect } from 'next/navigation'; -import { useForm } from 'react-hook-form'; import { useCreateEventMutation } from '@/api/hooks/eventMutationHooks'; import { Color, EventModel, Status } from '@/api/model/event.model'; import { CreateEvent, CreateEventForm } from '@/app/events/types/createEvent'; import { styles } from '@/components/newEventStyles'; import { FRONTEND_HOST } from '@/util/environment'; +import { useForm } from 'react-hook-form'; export default function newEvent() { const { mutate: createEvent } = useCreateEventMutation(); @@ -71,11 +72,12 @@ export default function newEvent() { Event létrehozása
- -
- Név: +
+ Név: + {errors.name && {errors.name.message}} -
- + +
+
Szín:
@@ -92,7 +95,18 @@ export default function newEvent() {
Helyszín: - + + + {errors.location && {errors.location.message}} +
Tagek: @@ -102,7 +116,16 @@ export default function newEvent() {
Időpont: - + + + {errors.date && {errors.date.message}} +
Szervezők: From 9db2f492411b3e5af6840a41853a357ae6c260ff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Szab=C3=B3=20Benedek?= Date: Sat, 31 Aug 2024 13:33:50 +0200 Subject: [PATCH 4/5] EventEditPage form pt3 - partially working form --- apps/backend/src/event/entity/event.entity.ts | 4 +- apps/frontend/package.json | 2 + apps/frontend/src/api/model/event.model.ts | 6 +- apps/frontend/src/app/events/new/page.tsx | 76 ++++++++++++++++--- .../src/app/events/types/createEvent.ts | 5 +- 5 files changed, 75 insertions(+), 18 deletions(-) diff --git a/apps/backend/src/event/entity/event.entity.ts b/apps/backend/src/event/entity/event.entity.ts index b35a5ea..eb413f3 100644 --- a/apps/backend/src/event/entity/event.entity.ts +++ b/apps/backend/src/event/entity/event.entity.ts @@ -1,5 +1,5 @@ import { Color, Priority, Status } from '@prisma/client'; -import { IsDate, IsEnum, IsNotEmpty, IsString, IsUUID } from 'class-validator'; +import { IsDate, IsDateString, IsEnum, IsNotEmpty, IsString, IsUUID } from 'class-validator'; export class Event { @IsString() @@ -14,7 +14,7 @@ export class Event { @IsString() description: string; - @IsDate() + @IsDateString() date: Date; @IsString() diff --git a/apps/frontend/package.json b/apps/frontend/package.json index 37522b5..7be2dcd 100644 --- a/apps/frontend/package.json +++ b/apps/frontend/package.json @@ -31,6 +31,8 @@ "react-hook-form": "^7.52.2", "react-icons": "^5.2.1", "react-router-dom": "^6.25.1", + "react-tag-input": "^6.10.3", + "react-tag-input-component": "^2.0.2", "tailwind-merge": "^2.3.0", "tailwindcss-animate": "^1.0.7" }, diff --git a/apps/frontend/src/api/model/event.model.ts b/apps/frontend/src/api/model/event.model.ts index 9f15af7..a936b73 100644 --- a/apps/frontend/src/api/model/event.model.ts +++ b/apps/frontend/src/api/model/event.model.ts @@ -8,9 +8,9 @@ export enum Priority { } export enum Status { - CREATED, - SUBMITTED, - APPROVED, + CREATED = 'CREATTED', + SUBMITTED = 'SUBMITTED', + APPROVED = 'APPROVED', } export enum Color { diff --git a/apps/frontend/src/app/events/new/page.tsx b/apps/frontend/src/app/events/new/page.tsx index 6c06736..8b96365 100644 --- a/apps/frontend/src/app/events/new/page.tsx +++ b/apps/frontend/src/app/events/new/page.tsx @@ -10,17 +10,21 @@ import { Select, Stack, Text, + Textarea, useToast, VStack, } from '@chakra-ui/react'; import { redirect } from 'next/navigation'; +import { useState } from 'react'; +import { useForm } from 'react-hook-form'; +import ReactTags from 'react-tag-input/types/components/ReactTags'; +import { TagsInput } from 'react-tag-input-component'; import { useCreateEventMutation } from '@/api/hooks/eventMutationHooks'; import { Color, EventModel, Status } from '@/api/model/event.model'; import { CreateEvent, CreateEventForm } from '@/app/events/types/createEvent'; import { styles } from '@/components/newEventStyles'; import { FRONTEND_HOST } from '@/util/environment'; -import { useForm } from 'react-hook-form'; export default function newEvent() { const { mutate: createEvent } = useCreateEventMutation(); @@ -29,14 +33,19 @@ export default function newEvent() { onSuccess: (event: EventModel) => { redirect(`${FRONTEND_HOST}/events/${event.id}`); }, + onError: (e: Error) => { + throw e; + }, }); }; const form = useForm({ defaultValues: { tags: [], + organizerIds: [], date: new Date(), color: Color.RED, + link: '', }, mode: 'all', }); @@ -50,21 +59,42 @@ export default function newEvent() { formState: { errors, isValid, isSubmitted }, } = form; - const onSubmit = handleSubmit((data: CreateEventForm) => { + const onPublish = handleSubmit((data: CreateEventForm) => { const formData: CreateEvent = { name: data.name, description: data.description, date: data.date, location: data.location, - tags: data.tags, + tags: tags, color: data.color, link: data.link, ownerId: 'bearni03', + organizerIds: data.organizerIds, status: Status.SUBMITTED, }; + console.log(formData); publishEvent(formData); }); + const onSaveDraft = handleSubmit((data: CreateEventForm) => { + const formData: CreateEvent = { + name: data.name, + description: data.description, + date: new Date(data.date), + location: data.location, + tags: tags, + color: data.color, + link: data.link, + ownerId: 'bearni03', + organizerIds: organizerIds, + status: Status.CREATED, + }; + publishEvent(formData); + }); + + const [tags, setTags] = useState([]); + const [organizerIds, setOrganizerIds] = useState([]); + return (
@@ -74,7 +104,7 @@ export default function newEvent() {
Név: - + Szín: + + + {errors.color && {errors.color.message}} +
@@ -110,7 +144,7 @@ export default function newEvent() {
Tagek: - +
@@ -121,7 +155,7 @@ export default function newEvent() { type='datetime-local' style={styles.InputStyle} {...register('date', { - required: { value: true, message: 'Időpont megadása kötelező!' }, + //required: { value: true, message: 'Időpont megadása kötelező!' }, })} /> {errors.date && {errors.date.message}} @@ -129,18 +163,40 @@ export default function newEvent() {
Szervezők: - +
Leírás:
- + + +
- - + +
diff --git a/apps/frontend/src/app/events/types/createEvent.ts b/apps/frontend/src/app/events/types/createEvent.ts index 42b4cf7..7e2018f 100644 --- a/apps/frontend/src/app/events/types/createEvent.ts +++ b/apps/frontend/src/app/events/types/createEvent.ts @@ -1,5 +1,4 @@ import { Color, Status } from '@/api/model/event.model'; -import { PublicUser } from '@/app/users/types/PublicUser'; export interface CreateEvent { name: string; @@ -7,7 +6,7 @@ export interface CreateEvent { date: Date; location: string; tags: string[]; - //organizerIds: string[]; + organizerIds: string[]; color: Color; status: Status; ownerId: string; @@ -20,7 +19,7 @@ export type CreateEventForm = { date: Date; location: string; tags: string[]; - //organizers: PublicUser[]; + organizerIds: string[]; color: Color; //status: Status; link?: string; From 83857c8386f0a06c68e3a0a2043d96c2f8f2771c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Szab=C3=B3=20Benedek?= Date: Sun, 1 Sep 2024 00:00:19 +0200 Subject: [PATCH 5/5] Fixed date input --- apps/frontend/src/app/events/new/page.tsx | 4 ++-- apps/frontend/src/app/events/types/createEvent.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/frontend/src/app/events/new/page.tsx b/apps/frontend/src/app/events/new/page.tsx index 8b96365..f8cae29 100644 --- a/apps/frontend/src/app/events/new/page.tsx +++ b/apps/frontend/src/app/events/new/page.tsx @@ -63,7 +63,7 @@ export default function newEvent() { const formData: CreateEvent = { name: data.name, description: data.description, - date: data.date, + date: new Date(data.date).toISOString(), location: data.location, tags: tags, color: data.color, @@ -80,7 +80,7 @@ export default function newEvent() { const formData: CreateEvent = { name: data.name, description: data.description, - date: new Date(data.date), + date: new Date(data.date).toISOString(), location: data.location, tags: tags, color: data.color, diff --git a/apps/frontend/src/app/events/types/createEvent.ts b/apps/frontend/src/app/events/types/createEvent.ts index 7e2018f..b023f46 100644 --- a/apps/frontend/src/app/events/types/createEvent.ts +++ b/apps/frontend/src/app/events/types/createEvent.ts @@ -3,7 +3,7 @@ import { Color, Status } from '@/api/model/event.model'; export interface CreateEvent { name: string; description: string; - date: Date; + date: string; location: string; tags: string[]; organizerIds: string[];