Finished implemented API

.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.

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'
 })

src/pages/create-trip/index.tsx

@@ -51,6 +51,7 @@ export function CreateTripPage() {
 
     async function createTrip(event: FormEvent<HTMLFormElement>){
       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
 

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(
-        <div className="space-y-8">
-            <div className="space-y-2.5">
-                <div className="flex gap-2 items-baseline">
-                    <span className="text-xl text-zinc-300 font-semibold">Dia 17</span>
-                    <span className="text-xs text-zinc-500">Sabádo</span>
-                </div>
-                <p className="text-sm text-zinc-500">Nenhuma atividade cadastrada nessa data.</p>
-            </div>
+    const { tripId } = useParams()
+    const [activities, setActivities] = useState<Activity[]>([])
 
-            <div className="space-y-2.5">
+    useEffect(() => {
+        api.get(`/trips/${tripId}/activities`).then(response => setActivities(response.data.activities))
+    }, [tripId])
+
+
+    return (
+        <div className="space-y-8">
+          {activities.map(category => {
+            return (
+              <div key={category.date} className="space-y-2.5">
                 <div className="flex gap-2 items-baseline">
-                    <span className="text-xl text-zinc-300 font-semibold">Dia 18</span>
-                    <span className="text-xs text-zinc-500">Domingo</span>
-                </div>
-                <div className="space=y=2.5">
-                    <div className="px-4 py-2.5 bg-zinc-900 rounded-xl shadow-shape flex items-center gap-3">
-                        <CircleCheck className="size-5 text-lime-300"/>
-                        <span className="text-zinc-100">Academia em Grupo</span>
-                        <span className="text-zinc-400 text-sm ml-auto">08:00h</span>
-                    </div>
-                </div>
-                <div className="space=y=2.5">
-                    <div className="px-4 py-2.5 bg-zinc-900 rounded-xl shadow-shape flex items-center gap-3">
-                        <CircleCheck className="size-5 text-lime-300"/>
-                        <span className="text-zinc-100">Estudar</span>
-                        <span className="text-zinc-400 text-sm ml-auto">10:00h</span>
-                    </div>
+                  <span className="text-xl text-zinc-300 font-semibold">Dia {format(category.date, 'd')}</span>
+                  <span className="text-xs text-zinc-500">{format(category.date, 'EEEE', { locale: ptBR })}</span>
                 </div>
-            </div>
+                {category.activities.length > 0 ? (
+                  <div className="space-y-2.5">
+                    {category.activities.map(activity => {
+                      return (
+                        <div key={activity.id} className="space-y-2.5">
+                          <div className="px-4 py-2.5 bg-zinc-900 rounded-xl shadow-shape flex items-center gap-3">
+                            <CircleCheck className="size-5 text-lime-300" />
+                            <span className="text-zinc-100">{activity.title}</span>
+                            <span className="text-zinc-400 text-sm ml-auto">
+                              {format(activity.occurs_at, "HH:mm'h'")}
+                            </span>
+                          </div>
+                        </div>
+                      )
+                    })}
+                  </div>
+                ) : (
+                  <p className="text-zinc-500 text-sm">Nenhuma atividade cadastrada nessa data.</p>
+                )}
+              </div>
+            )
+          })}
         </div>
-    )
+      )
 }

src/pages/trip-details/create-activity-details.tsx → src/pages/trip-details/create-activity-modal.tsx

@@ -1,26 +1,52 @@
 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<HTMLFormElement>) {
+    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(
         <div className="fixed inset-0 bg-black/60 flex items-center justify-center">
           <div className="bg-zinc-900 w-[640px] rounded-xl py-5 px-6 shadow-shape space-y-5">
             <div className="space-y-2">
               <div className="flex items-center justify-between">
                 <h2 className="text-lg font-semibold">Cadastrar atividade</h2>
-                <button type="button" onClick={props.closeCreateActivityModal}>
+                <button type="button" onClick={closeCreateActivityModal}>
                   <X className="size-5 text-zinc-400"/>
                 </button>
                 </div>
                 <p className="text-sm text-zinc-400">
                   Todos convidados podem visualizar as atividades.
                 </p>
             </div>
-            <form className="space-y-3" >
+            <form onSubmit={createActivity} className="space-y-3" >
               <div className="h-14 px-4 py-8 bg-zinc-950 border border-zinc-800 rounded-lg flex items-center gap-2">
                       <Tag className="size-5 text-zinc-400"/>
                       <input 
@@ -34,7 +60,7 @@ export function CreateActivityModal(props: CreateActivityModalProps){
                             <Calendar className="size-5 text-zinc-400"/>
                             <input 
                             type="datetime-local"
-                            name="occours_at"
+                            name="occurs_at"
                             placeholder="Data e horário da atividade"
                             className="bg-transparent text-lg placeholder-zinc-400 outline-none flex-1"
                             />

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<Trip | undefined>()
+
+    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(
         <div className="px-4 h-16 rounded-xl bg-zinc-900 shadow-shape flex items-center justify-between">
             <div className="flex items-center gap-2">
                 <MapPin className="size-y text-zinc-400"/>
-                <span className="text-lg text-zinc-100">Florianópolis, Brasil</span>
+                <span className="text-lg text-zinc-100">{trip?.destination}</span>
             </div>
 
             <div className="flex items-center gap-5">
                 <div className="flex items-center gap-2">
                     <Calendar className="size-y text-zinc-400"/>
-                    <span className="text-zinc-100">17 a 23 de Agosto</span>
+                    <span className="text-zinc-100">{displayedDate}</span>
                 </div>
 
                 <div className="w-px h-6 bg-zinc-800" />

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<Participants[]>([])
+
+    useEffect(() => {
+        api.get(`/trips/${tripId}/participants`).then(response => setParticipants(response.data.participants))
+    }, [tripId])
+
     return(
         <div className="space-y-6">
             <h2 className="font-semibold text-xl">Convidados</h2>
             <div className="space-y-5">
-                <div className="flex items-center justify-between gap-4">
-                    <div className="space-y-1.5">
-                        <span className="block font-medium text-zinc-100">
-                            Rodrigo Faro
-                        </span>
-                        <span className="block text-sm text-zinc-400 truncate">
-                            rodrigofaro@gmail.com
-                        </span>
-                    </div>
-                    <CircleDashed className="text-zinc-400 size-5 shrink-0"/>
-                </div>
-                <div className="flex items-center justify-between gap-4">
-                    <div className="space-y-1.5">
-                        <span className="block font-medium text-zinc-100">
-                            Ana Maria Braga
-                        </span>
-                        <span className="block text-sm text-zinc-400 truncate">
-                            anambraga@outlook.com
-                        </span>
-                    </div>
-                    <CircleDashed className="text-zinc-400 size-5 shrink-0"/>
-                </div>
+                {participants.map((participant, index) => {
+                    return(
+                        <div key={participant.id} className="flex items-center justify-between gap-4">
+                            <div className="space-y-1.5">
+                                <span className="block font-medium text-zinc-100">
+                                    {participant.name ?? `Convidado ${index}`}
+                                </span>
+                                <span className="block text-sm text-zinc-400 truncate">
+                                    {participant.email}
+                                </span>
+                            </div>
+                            {participant.is_confirmed ? (
+                                <CheckCircle2 className="text-green-400 size-5 shrink-0" />
+                            ) : (
+                                <CircleDashed className="text-zinc-400 size-5 shrink-0"/>
+                            )}
+                        </div>
+                    )
+                })}
             </div>
             <Button variant="grayButton" size="full">
                 <UserCog className="size-5"/>

src/pages/trip-details/index.tsx

@@ -1,6 +1,6 @@
 import { Plus, Calendar, MapPin, Settings2, CircleCheck, Link2, UserCog, CircleDashed, X, Tag } from "lucide-react";
 import { useState } from "react";
-import { CreateActivityModal } from "./create-activity-details";
+import { CreateActivityModal } from "./create-activity-modal";
 import { ImportantLinks } from "./important-links";
 import { Guests } from "./guests";
 import { Activities } from "./activities";