Adicionando request para listagem de médicos na agenda

paths.json

@@ -2,7 +2,6 @@
   "compilerOptions": {
     "baseUrl": "src",
     "paths": {
-      "@/*": ["*"],
       "@shared/*": ["shared/*"],
       "@doctor/*": ["modules/doctor/*"],
       "@manager/*": ["modules/manager/*"],

src/modules/doctor/components/Home/Calendar/index.tsx

@@ -1,7 +1,8 @@
-import { IAppointments } from '@/modules/doctor/pages/Dashboard/interfaces';
 import React from 'react';
 import { FiChevronLeft, FiChevronRight } from 'react-icons/fi';
 
+import { IAppointments } from '@doctor/pages/Dashboard/interfaces';
+
 import {
   Container,
   DayNumber,

src/modules/doctor/components/Patients/PatientItem/index.tsx

@@ -1,4 +1,4 @@
-import { IPatient } from '@/modules/doctor/pages/Patients/interfaces';
+import { IPatient } from '@doctor/pages/Patients/interfaces';
 import React from 'react';
 import { FiMoreVertical, FiTrash, FiPenTool } from 'react-icons/fi';
 

src/modules/secretary/components/Schedule/CreateAppointmentModal/index.tsx

@@ -1,41 +1,151 @@
-import React, { useState } from 'react';
-
-import { Container, NameTextField } from './styles';
-
-const CreateAppointmentModal: React.FC = () => {
-  const mockVal = (str: string, repeat: number = 1) => {
-    return {
-      value: str.repeat(repeat),
-    };
-  };
-
-  const [value, setValue] = useState('');
-  const [options, setOptions] = useState<{ value: string }[]>([]);
-  const onSearch = (searchText: string) => {
-    setOptions(
-      !searchText
-        ? []
-        : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)],
-    );
-  };
-  const onSelect = (data: string) => {
-    console.log('onSelect', data);
-  };
-  const onChange = (data: string) => {
-    setValue(data);
-  };
+import React, { useCallback, useState } from 'react';
+import { message } from 'antd';
+import { format } from 'date-fns';
+
+import TextField from '@shared/components/TextField';
+import Button from '@shared/components/Button';
+
+import { ButtonWrapper, Container, TextFieldWrapper } from './styles';
+import api from '@shared/services/api';
+import { ICreateAppointmentModal, IPatientData } from './interfaces';
+
+const CreateAppointmentModal: React.FC<ICreateAppointmentModal> = ({
+  doctorId,
+  doctorName,
+}) => {
+  const [hasError, setHasError] = useState(false);
+  const [patientDocument, setPatientDocument] = useState('');
+  const [appointmentDate, setAppointmentDate] = useState('');
+  const [appointmentHour, setAppointmentHour] = useState('');
+  const [appointmentType, setAppointmentType] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = useCallback(
+    async e => {
+      e.preventDefault();
+
+      if (
+        patientDocument &&
+        appointmentDate &&
+        appointmentHour &&
+        appointmentType
+      ) {
+        try {
+          const patientResponse = await api.get(
+            `patients/document/${patientDocument}`,
+          );
+
+          const patientData: IPatientData = patientResponse.data;
+
+          if (patientData.id) {
+            const data = {
+              date: format(new Date(appointmentDate), 'yyyy-mm-dd'),
+              start_time: appointmentHour,
+              status: 1,
+              type: appointmentType,
+              doctor_id: doctorId,
+              patient_id: patientData.id,
+              clinic_id: patientData.clinic_id,
+            };
+
+            const response = await api.post('appointments', data);
+
+            console.log(response);
+          } else {
+            setHasError(true);
+            setLoading(false);
+            return message.error(
+              'Não foi possível encontrar esse paciente. Tente novamente!',
+            );
+          }
+        } catch (err) {
+          setHasError(true);
+          setLoading(false);
+          if (err.response) {
+            return message.error(err.response.data.message);
+          }
+          return message.error(
+            'Ocorreu um erro interno na aplicação. Tente novamente mais tarde!',
+          );
+        }
+      } else {
+        setHasError(true);
+        setLoading(false);
+        return message.error('Preencha todos os campos para prosseguir!');
+      }
+    },
+    [patientDocument, appointmentDate, appointmentHour, appointmentType],
+  );
 
   return (
     <Container>
-      <NameTextField
-        value={value}
-        options={options}
-        style={{ width: 200 }}
-        onSelect={onSelect}
-        onSearch={onSearch}
-        onChange={onChange}
-        placeholder="control mode"
-      />
+      <form onSubmit={handleSubmit}>
+        <TextFieldWrapper>
+          <TextField
+            label="Documento do paciente"
+            required={true}
+            placeholder="Documento do paciente"
+            name="patientDocument"
+            id="patientDocument"
+            hasError={hasError}
+            onChange={e => {
+              setPatientDocument(e.target.value);
+              setHasError(false);
+            }}
+          />
+        </TextFieldWrapper>
+        <TextFieldWrapper row={true}>
+          <TextField
+            label="Data da consulta"
+            required={true}
+            placeholder="Data da consulta"
+            name="appointmentDate"
+            id="appointmentDate"
+            hasError={hasError}
+            onChange={e => {
+              setAppointmentDate(e.target.value);
+              setHasError(false);
+            }}
+          />
+          <TextField
+            label="Hora da consulta"
+            required={true}
+            placeholder="Hora da consulta"
+            name="appointmentHour"
+            id="appointmentHour"
+            hasError={hasError}
+            onChange={e => {
+              setAppointmentHour(e.target.value);
+              setHasError(false);
+            }}
+          />
+        </TextFieldWrapper>
+        <TextFieldWrapper row={true}>
+          <TextField
+            label="Tipo da consulta"
+            required={true}
+            placeholder="Tipo da consulta"
+            name="appointmentType"
+            id="appointmentType"
+            hasError={hasError}
+            onChange={e => {
+              setAppointmentType(e.target.value);
+              setHasError(false);
+            }}
+          />
+          <TextField
+            label="Médico"
+            required={true}
+            placeholder="Médico"
+            disabled
+            value={doctorName}
+            hasError={hasError}
+          />
+        </TextFieldWrapper>
+        <ButtonWrapper>
+          <Button>Salvar</Button>
+        </ButtonWrapper>
+      </form>
     </Container>
   );
 };

src/modules/secretary/components/Schedule/CreateAppointmentModal/interfaces.ts

@@ -0,0 +1,31 @@
+export interface IPatientData {
+  id: string;
+  name: string;
+  email: string;
+  phone: string;
+  date_of_birth: string;
+  gender: string;
+  skin_color: string;
+  naturalness: string;
+  marital_status: string;
+  ssn: string;
+  degree_of_instuction: string;
+  profession: string;
+  health_insurance: string;
+  zip_code: string;
+  address: string;
+  complement: string;
+  address_number: number;
+  neighborhood: string;
+  city: string;
+  fu: string;
+  avatar: null;
+  clinic_id: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface ICreateAppointmentModal {
+  doctorId: string;
+  doctorName: string;
+}

src/modules/secretary/components/Schedule/CreateAppointmentModal/styles.ts

@@ -1,13 +1,89 @@
-import { AutoComplete } from 'antd';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
+
+interface ITextFieldWrapperProps {
+  row?: boolean;
+}
+
+interface ITextFieldProps {
+  hasError: boolean;
+  label: string;
+}
+
+export const TextFieldWrapper = styled.div<ITextFieldWrapperProps>`
+  width: 100%;
+
+  ${props =>
+    props.row &&
+    css`
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      div {
+        width: 47.5%;
+      }
+    `}
+`;
 
 export const Container = styled.div`
   width: 100%;
-  padding: 40px;
+  padding: 40px 80px;
 
   > .ant-select {
     width: 100% !important;
   }
+
+  ${TextFieldWrapper + TextFieldWrapper} {
+    margin-top: 30px;
+  }
+`;
+
+export const ButtonWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  margin-top: 50px;
 `;
 
-export const NameTextField = styled(AutoComplete)``;
+export const TextField = styled.input<ITextFieldProps>`
+  width: 600px;
+  height: 60px;
+
+  box-shadow: 0px 0px 20px #eceff929;
+  border: 1px solid #b5bcc7;
+  border-radius: 10px;
+  background: #f4f5fa;
+
+  padding: 0 20px;
+  font-size: 18px;
+  font-weight: 600;
+
+  transition: border-color 0.2s;
+
+  ${props =>
+    props.hasError &&
+    css`
+      border: 1px solid #fa7070;
+    `}
+
+  &::placeholder {
+    color: #b5bcc7;
+    font-weight: 400;
+  }
+
+  &:hover {
+    border-color: #7081fa;
+  }
+
+  @media (max-width: 640px) {
+    width: 100%;
+  }
+
+  @media (max-width: 520px) {
+    height: 55px;
+    font-size: 16px;
+    padding: 0 16px;
+  }
+`;