Foi desenvolvido o carregamento da disponibilidade de um dia, sempre …

…que o usuario selecionar uma nova data, foi usado o useEffect para trazer os dados da api e utilizado o setAvailability para salvar essas informações.

src/pages/CreateAppointment/index.tsx

@@ -33,6 +33,11 @@ export interface Provider {
   avatar_url: string;
 }
 
+interface AvailabilityItem {
+  hour: number;
+  available: boolean;
+}
+
 const CreateAppointment: React.FC = () => {
   const route = useRoute();
   const routeParams = route.params as RouteParams;
@@ -45,6 +50,7 @@ const CreateAppointment: React.FC = () => {
   );
   const [showDatePicker, setShowDatePicker] = useState(false);
   const [selectedDate, setSelectedDate] = useState(new Date());
+  const [availability, setAvailability] = useState<AvailabilityItem[]>([]);
 
   useEffect(() => {
     api.get('providers').then(response => {
@@ -74,6 +80,20 @@ const CreateAppointment: React.FC = () => {
     }
   }, []);
 
+  useEffect(() => {
+    api
+      .get(`/providers/${selectedProvider}/day-availability`, {
+        params: {
+          day: selectedDate.getDate(),
+          month: selectedDate.getMonth() + 1,
+          year: selectedDate.getFullYear(),
+        },
+      })
+      .then(response => {
+        setAvailability(response.data);
+      });
+  }, [selectedDate, selectedProvider]);
+
   return (
     <Container>
       <Header>