From 6b239dc9fbe9710509bd52bda4164dfeed8d8c48 Mon Sep 17 00:00:00 2001 From: 9Brunodox Date: Wed, 7 Aug 2024 02:45:19 -0300 Subject: [PATCH] Finished implemented API --- .vscode/extensions.json | 1 + src/lib/axios.ts | 4 +- src/pages/create-trip/index.tsx | 6 +- src/pages/trip-details/activities.tsx | 79 ++++++++++++------- ...-details.tsx => create-activity-modal.tsx} | 38 +++++++-- src/pages/trip-details/destination-header.tsx | 28 ++++++- src/pages/trip-details/guests.tsx | 60 ++++++++------ src/pages/trip-details/index.tsx | 2 +- 8 files changed, 154 insertions(+), 64 deletions(-) rename src/pages/trip-details/{create-activity-details.tsx => create-activity-modal.tsx} (68%) diff --git a/.vscode/extensions.json b/.vscode/extensions.json index d1987c7..fc0ad68 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -4,6 +4,7 @@ // List of extensions which should be recommended for users of this workspace. "recommendations": [ + "wallabyjs.console-ninja" ], // List of extensions recommended by VS Code that should not be recommended for users of this workspace. diff --git a/src/lib/axios.ts b/src/lib/axios.ts index c93893d..699c00a 100644 --- a/src/lib/axios.ts +++ b/src/lib/axios.ts @@ -1,5 +1,5 @@ -import axios from 'axios'; +import axios from 'axios' export const api = axios.create({ - baseURL: 'https//:localhost:3333' + baseURL: 'http://localhost:3333' }) \ No newline at end of file diff --git a/src/pages/create-trip/index.tsx b/src/pages/create-trip/index.tsx index 1663f00..70a0834 100644 --- a/src/pages/create-trip/index.tsx +++ b/src/pages/create-trip/index.tsx @@ -51,6 +51,7 @@ export function CreateTripPage() { async function createTrip(event: FormEvent){ event.preventDefault() + console.log(destination) console.log(eventStartAndEndDates) @@ -59,11 +60,12 @@ export function CreateTripPage() { console.log(ownerEmail) + if (!destination){ return } - if (!eventStartAndEndDates?.from || eventStartAndEndDates?.to){ + if (!eventStartAndEndDates?.from || !eventStartAndEndDates?.to){ return } @@ -82,7 +84,7 @@ export function CreateTripPage() { emails_to_invite: emailsToInvite, owner_name: ownerName, owner_email: ownerEmail - } ) + }) const { tripId } = response.data diff --git a/src/pages/trip-details/activities.tsx b/src/pages/trip-details/activities.tsx index 2405fcd..cc47030 100644 --- a/src/pages/trip-details/activities.tsx +++ b/src/pages/trip-details/activities.tsx @@ -1,36 +1,59 @@ import { CircleCheck } from "lucide-react"; +import { useEffect, useState } from "react"; +import { useParams } from "react-router-dom"; +import { api } from "../../lib/axios"; +import { format } from "date-fns"; +import { ptBR } from "date-fns/locale"; + +interface Activity{ + date: string + activities: { + id: string + title: string + occurs_at: string + }[] +} export function Activities(){ - return( -
-
-
- Dia 17 - Sabádo -
-

Nenhuma atividade cadastrada nessa data.

-
+ const { tripId } = useParams() + const [activities, setActivities] = useState([]) -
+ useEffect(() => { + api.get(`/trips/${tripId}/activities`).then(response => setActivities(response.data.activities)) + }, [tripId]) + + + return ( +
+ {activities.map(category => { + return ( +
- Dia 18 - Domingo -
-
-
- - Academia em Grupo - 08:00h -
-
-
-
- - Estudar - 10:00h -
+ Dia {format(category.date, 'd')} + {format(category.date, 'EEEE', { locale: ptBR })}
-
+ {category.activities.length > 0 ? ( +
+ {category.activities.map(activity => { + return ( +
+
+ + {activity.title} + + {format(activity.occurs_at, "HH:mm'h'")} + +
+
+ ) + })} +
+ ) : ( +

Nenhuma atividade cadastrada nessa data.

+ )} +
+ ) + })}
- ) + ) } \ No newline at end of file diff --git a/src/pages/trip-details/create-activity-details.tsx b/src/pages/trip-details/create-activity-modal.tsx similarity index 68% rename from src/pages/trip-details/create-activity-details.tsx rename to src/pages/trip-details/create-activity-modal.tsx index c780d75..2493f53 100644 --- a/src/pages/trip-details/create-activity-details.tsx +++ b/src/pages/trip-details/create-activity-modal.tsx @@ -1,18 +1,44 @@ import { Calendar, Tag, X } from "lucide-react"; import { Button } from "../../components/button"; +import { FormEvent } from "react"; +import { api } from "../../lib/axios"; +import { useParams } from "react-router-dom"; -interface CreateActivityModalProps{ - closeCreateActivityModal: () => void +interface CreateActivityModalProps { + closeCreateActivityModal: () => void } -export function CreateActivityModal(props: CreateActivityModalProps){ +export function CreateActivityModal({ + closeCreateActivityModal +}: CreateActivityModalProps) { + const { tripId } = useParams() + + + async function createActivity(event: FormEvent) { + event.preventDefault() + + const data = new FormData(event.currentTarget) + + const title = data.get('title')?.toString() + const occurs_at = data.get('occurs_at')?.toString() + + await api.post(`/trips/${tripId}/activities`, { + title, + occurs_at + }) + + window.document.location.reload() + } + + + return(

Cadastrar atividade

-
@@ -20,7 +46,7 @@ export function CreateActivityModal(props: CreateActivityModalProps){ Todos convidados podem visualizar as atividades.

-
+
diff --git a/src/pages/trip-details/destination-header.tsx b/src/pages/trip-details/destination-header.tsx index 5865ce9..8bd0426 100644 --- a/src/pages/trip-details/destination-header.tsx +++ b/src/pages/trip-details/destination-header.tsx @@ -1,18 +1,42 @@ import { MapPin, Calendar, Settings2 } from "lucide-react"; import { Button } from "../../components/button"; +import { useParams } from 'react-router-dom'; +import { useEffect, useState } from "react"; +import { api } from "../../lib/axios"; +import { format } from "date-fns"; +import { ptBR } from "date-fns/locale"; + +interface Trip{ + id: string, + destination: string, + starts_at: string, + ends_at: string, + is_confirmed: boolean +} export function DestinationHeader(){ + const { tripId } = useParams() + const [trip, setTrip] = useState() + + useEffect(() => { + api.get(`/trips/${tripId}`).then(response => setTrip(response.data.trip)) + }, [tripId]) + + const displayedDate = trip + ? format(trip.starts_at, "d 'de' LLL", {locale: ptBR}).concat(' até ').concat(format(trip.ends_at, "d 'de' LLL", {locale: ptBR})) + : null; + return(
- Florianópolis, Brasil + {trip?.destination}
- 17 a 23 de Agosto + {displayedDate}
diff --git a/src/pages/trip-details/guests.tsx b/src/pages/trip-details/guests.tsx index ecc5ffb..757337b 100644 --- a/src/pages/trip-details/guests.tsx +++ b/src/pages/trip-details/guests.tsx @@ -1,33 +1,47 @@ -import { CircleDashed, UserCog } from "lucide-react"; +import { CheckCircle2, CircleDashed, UserCog } from "lucide-react"; import { Button } from "../../components/button"; +import { useParams } from "react-router-dom"; +import { useEffect, useState } from "react"; +import { api } from "../../lib/axios"; + +interface Participants{ + id: string + name: string | null + email: string + is_confirmed: boolean +} export function Guests(){ + const { tripId } = useParams() + const [participants, setParticipants] = useState([]) + + useEffect(() => { + api.get(`/trips/${tripId}/participants`).then(response => setParticipants(response.data.participants)) + }, [tripId]) + return(

Convidados

-
-
- - Rodrigo Faro - - - rodrigofaro@gmail.com - -
- -
-
-
- - Ana Maria Braga - - - anambraga@outlook.com - -
- -
+ {participants.map((participant, index) => { + return( +
+
+ + {participant.name ?? `Convidado ${index}`} + + + {participant.email} + +
+ {participant.is_confirmed ? ( + + ) : ( + + )} +
+ ) + })}