Appointment listing ok

gobarber/gobarber-backend/src/shared/infra/http/server.ts

@@ -16,12 +16,12 @@ const app = express()
 app.use(express.json())
 app.use(cors())
 
-// rate limite
-app.use(rateLimiter)
-
 // static files
 app.use('/files', express.static(uploadConfig.uploadFolder))
 
+// rate limite
+app.use(rateLimiter)
+
 app.use(routes)
 
 // Celebrate erros:

gobarber/gobarber-web/.eslintrc.json

@@ -40,6 +40,8 @@
     "react/prop-types": "off",
     "react/jsx-one-expression-per-line": "off",
     "react/jsx-props-no-spreading": "off",
+    "import/no-duplicates": "off",
+    "no-duplicate-imports": "off",
     "react/jsx-filename-extension": [
       1,
       {

gobarber/gobarber-web/package.json

@@ -13,8 +13,10 @@
     "@unform/core": "^2.1.3",
     "@unform/web": "^2.1.3",
     "axios": "^0.21.0",
+    "date-fns": "^2.16.1",
     "polished": "^4.0.3",
     "react": "^17.0.1",
+    "react-day-picker": "^7.4.8",
     "react-dom": "^17.0.1",
     "react-icons": "^3.11.0",
     "react-router-dom": "^5.2.0",

gobarber/gobarber-web/src/context_hooks/AuthContext.tsx

@@ -33,6 +33,7 @@ export const AuthProvider: React.FC = ({ children }) => {
     const user = localStorage.getItem('@GoBarber:user')
 
     if (token && user) {
+      api.defaults.headers.authorization = `Bearer ${token}`
       return { token, user: JSON.parse(user) }
     }
 
@@ -46,6 +47,9 @@ export const AuthProvider: React.FC = ({ children }) => {
 
     localStorage.setItem('@GoBarber:token', token)
     localStorage.setItem('@GoBarber:user', JSON.stringify(user))
+
+    api.defaults.headers.authorization = `Bearer ${token}`
+
     setData({ token, user })
   }, [])
 

gobarber/gobarber-web/src/pages/Dashboard/index.tsx

@@ -1,7 +1,13 @@
-import React from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import DayPicker, { DayModifiers } from 'react-day-picker'
+import 'react-day-picker/lib/style.css'
+import { isToday, format, isAfter } from 'date-fns'
+import ptBR from 'date-fns/locale/pt-BR'
 import { FiClock, FiPower } from 'react-icons/fi'
+import { parseISO } from 'date-fns/esm'
 import logoImg from '../../assets/logo.svg'
 import { useAuth } from '../../context_hooks/AuthContext'
+import api from '../../services/api'
 import {
   Container,
   Header,
@@ -10,12 +16,118 @@ import {
   Content,
   Schedule,
   NextAppointment,
+  Section,
+  Appointment,
   Calendar
 } from './styles'
 
+interface MonthAvailabilityItem {
+  day: number
+  available: boolean
+}
+
+interface AppointmentData {
+  id: string
+  date: string
+  hourFormatted: string
+  user: {
+    name: string
+    avatar_url: string
+  }
+}
+
 const Dashboard: React.FC = () => {
+  const [selectedDate, setSelectedDate] = useState(new Date())
+  const [currentMonth, setCurrentMonth] = useState(new Date())
+  const [appointments, setAppointments] = useState<AppointmentData[]>([])
+  const [monthAvailability, setMonthAvailabiliry] = useState<
+    MonthAvailabilityItem[]
+  >([])
+
   const { signOut, user } = useAuth()
 
+  const handleDayChange = useCallback((day: Date, modifiers: DayModifiers) => {
+    if (modifiers.available && !modifiers.disabled) {
+      setSelectedDate(day)
+    }
+  }, [])
+
+  const handleMonthChange = useCallback((month: Date) => {
+    setCurrentMonth(month)
+  }, [])
+
+  useEffect(() => {
+    api
+      .get(`/providers/${user.id}/month-availability`, {
+        params: {
+          year: currentMonth.getFullYear(),
+          month: currentMonth.getMonth() + 1
+        }
+      })
+      .then(response => {
+        setMonthAvailabiliry(response.data)
+      })
+  }, [currentMonth, user.id])
+
+  useEffect(() => {
+    api
+      .get<AppointmentData[]>('/appointments/me', {
+        params: {
+          year: selectedDate.getFullYear(),
+          month: selectedDate.getMonth() + 1,
+          day: selectedDate.getDate()
+        }
+      })
+      .then(response => {
+        const appointmentsFormatted = response.data.map(appointment => {
+          return {
+            ...appointment,
+            hourFormatted: format(parseISO(appointment.date), 'HH:mm')
+          }
+        })
+        setAppointments(appointmentsFormatted)
+      })
+  }, [selectedDate])
+
+  const morningAppointments = useMemo(() => {
+    return appointments.filter(appointment => {
+      return parseISO(appointment.date).getHours() < 12
+    })
+  }, [appointments])
+
+  const afternoonAppointments = useMemo(() => {
+    return appointments.filter(appointment => {
+      return parseISO(appointment.date).getHours() >= 12
+    })
+  }, [appointments])
+
+  const nextAppointment = useMemo(() => {
+    return appointments.find(appointment =>
+      isAfter(parseISO(appointment.date), new Date())
+    )
+  }, [appointments])
+
+  // UseMeno -- (memória) To avoid recomputing data on each reload/rerender processs
+  const disabledDays = useMemo(() => {
+    const dates = monthAvailability
+      .filter(monthDay => monthDay.available === false)
+      .map(monthDay => {
+        const year = currentMonth.getFullYear()
+        const month = currentMonth.getMonth()
+        return new Date(year, month, monthDay.day)
+      })
+
+    return dates
+  }, [currentMonth, monthAvailability])
+
+  const selectedDayAsText = useMemo(() => {
+    return format(selectedDate, "'Dia' dd 'de' MMMM", { locale: ptBR })
+  }, [selectedDate])
+
+  const selectedWeekDay = useMemo(() => {
+    return format(selectedDate, 'cccc', { locale: ptBR })
+  }, [selectedDate])
+
   return (
     <Container>
       <Header>
@@ -38,25 +150,103 @@ const Dashboard: React.FC = () => {
         <Schedule>
           <h1>Horários Agendados</h1>
           <p>
-            <span>Hoje</span>
-            <span>Dia 06</span>
-            <span>Segunda-feira</span>
+            {isToday(selectedDate) && <span>Hoje</span>}
+            <span>{selectedDayAsText}</span>
+            <span>{selectedWeekDay}</span>
           </p>
 
-          <NextAppointment>
-            <strong>Atentimento a seguir</strong>
-            <div>
-              <img src={user.avatar_url} alt={user.name} />
-              <strong>{user.name}</strong>
+          {isToday(selectedDate) && nextAppointment && (
+            <NextAppointment>
+              <strong>Agendamento a seguir</strong>
+              <div>
+                <img
+                  src={nextAppointment.user.avatar_url}
+                  alt={nextAppointment.user.name}
+                />
+                <strong>{nextAppointment.user.name}</strong>
 
-              <span>
-                <FiClock />
-                08:00
-              </span>
-            </div>
-          </NextAppointment>
+                <span>
+                  <FiClock />
+                  nextAppointment.formattedHour()
+                </span>
+              </div>
+            </NextAppointment>
+          )}
+
+          <Section>
+            <strong>Manhã</strong>
+
+            {morningAppointments.length === 0 && (
+              <p>Nenhum agendamento neste período</p>
+            )}
+
+            {morningAppointments.map(appointment => (
+              <Appointment key={appointment.id}>
+                <span>
+                  <FiClock />
+                  {appointment.hourFormatted}
+                </span>
+                <div>
+                  <img
+                    src={appointment.user.avatar_url}
+                    alt={appointment.user.name}
+                  />
+                  <strong>{appointment.user.name}</strong>
+                </div>
+              </Appointment>
+            ))}
+          </Section>
+
+          <Section>
+            <strong>Tarde</strong>
+            {afternoonAppointments.length === 0 && (
+              <p>Nenhum agendamento neste período</p>
+            )}
+
+            {afternoonAppointments.map(appointment => (
+              <Appointment key={appointment.id}>
+                <span>
+                  <FiClock />
+                  {appointment.hourFormatted}
+                </span>
+                <div>
+                  <img
+                    src={appointment.user.avatar_url}
+                    alt={appointment.user.name}
+                  />
+                  <strong>{appointment.user.name}</strong>
+                </div>
+              </Appointment>
+            ))}
+          </Section>
         </Schedule>
-        <Calendar />
+        <Calendar>
+          <DayPicker
+            weekdaysShort={['D', 'S', 'T', 'Q', 'Q', 'S', 'S']}
+            fromMonth={new Date()}
+            disabledDays={[{ daysOfWeek: [0, 6] }, ...disabledDays]}
+            modifiers={{
+              available: { daysOfWeek: [1, 2, 3, 4, 5] }
+            }}
+            months={[
+              'Janeiro',
+              'Fevereiro',
+              'Março',
+              'Abril',
+              'Maio',
+              'Junho',
+              'Julho',
+              'Agosto',
+              'Setembro',
+              'Outubro',
+              'Novembro',
+              'Dezembro'
+            ]}
+            onDayClick={handleDayChange}
+            selectedDays={selectedDate}
+            onMonthChange={handleMonthChange}
+          />
+        </Calendar>
       </Content>
     </Container>
   )