<commit_before>import { Button, Spinner, Toast } from '@hospitalrun/components'
import addMinutes from 'date-fns/addMinutes'
import roundToNearestMinutes from 'date-fns/roundToNearestMinutes'
import _ from 'lodash'
import React, { useEffect, useState } from 'react'
import { useHistory } from 'react-router-dom'

import useAddBreadcrumbs from '../../../page-header/breadcrumbs/useAddBreadcrumbs'
import { useUpdateTitle } from '../../../page-header/title/TitleContext'
import useTranslator from '../../../shared/hooks/useTranslator'
import Appointment from '../../../shared/model/Appointment'
import useScheduleAppointment from '../../hooks/useScheduleAppointment'
import AppointmentDetailForm from '../AppointmentDetailForm'
import { AppointmentError } from '../util/validate-appointment'

const breadcrumbs = [
  { i18nKey: 'scheduling.appointments.label', location: '/appointments' },
  { i18nKey: 'scheduling.appointments.new', location: '/appointments/new' },
]

const NewAppointment = () => {
  const { t } = useTranslator()
  const history = useHistory()
  const updateTitle = useUpdateTitle()
  useEffect(() => {
    updateTitle(t('scheduling.appointments.new'))
  })
  useAddBreadcrumbs(breadcrumbs, true)

  const startDateTime = roundToNearestMinutes(new Date(), { nearestTo: 15 })
  const endDateTime = addMinutes(startDateTime, 60)
  const [saved, setSaved] = useState(false)
  const [newAppointmentMutateError, setError] = useState<AppointmentError>({} as AppointmentError)
  const [newAppointment, setAppointment] = useState({
    patient: '',
    startDateTime: startDateTime.toISOString(),
    endDateTime: endDateTime.toISOString(),
    location: '',
    reason: '',
    type: '',
  } as Appointment)

  const {
    mutate: newAppointmentMutate,
    isLoading: isLoadingNewAppointment,
    isError: isErrorNewAppointment,
    validator: validateNewAppointment,
  } = useScheduleAppointment()

  const onCancelClick = () => {
    history.push('/appointments')
  }

  const onSave = () => {
    setSaved(true)
    setError(validateNewAppointment(newAppointment))
  }

  useEffect(() => {
    // if save click and no error proceed, else give error message.
    if (saved) {
      if (_.isEmpty(newAppointmentMutateError) && !isErrorNewAppointment) {
        newAppointmentMutate(newAppointment).then((result) => {
          Toast('success', t('states.success'), t('scheduling.appointment.successfullyCreated'))
          history.push(`/appointments/${result?.id}`)
        })
      } else if (!_.isEmpty(newAppointmentMutateError)) {
        newAppointmentMutateError.message = 'scheduling.appointment.errors.createAppointmentError'
      }
    }
    setSaved(false)
  }, [saved, newAppointmentMutateError])

  if (isLoadingNewAppointment) {
    return <Spinner color="blue" loading size={[10, 25]} type="ScaleLoader" />
  }

  const onFieldChange = (key: string, value: string | boolean) => {
    setAppointment({
      ...newAppointment,
      [key]: value,
    })
  }

  return (
    <div>
      <form>
        <AppointmentDetailForm
          appointment={newAppointment as Appointment}
          error={newAppointmentMutateError}
          onFieldChange={onFieldChange}
        /><commit_msg>refactor(scheduling): fix NewAppointments causing build failure<commit_after>import { Button, Spinner, Toast } from '@hospitalrun/components'
import addMinutes from 'date-fns/addMinutes'
import roundToNearestMinutes from 'date-fns/roundToNearestMinutes'
import _ from 'lodash'
import React, { useEffect, useState } from 'react'
import { useHistory } from 'react-router-dom'

import useAddBreadcrumbs from '../../../page-header/breadcrumbs/useAddBreadcrumbs'
import { useUpdateTitle } from '../../../page-header/title/TitleContext'
import useTranslator from '../../../shared/hooks/useTranslator'
import Appointment from '../../../shared/model/Appointment'
import useScheduleAppointment from '../../hooks/useScheduleAppointment'
import AppointmentDetailForm from '../AppointmentDetailForm'
import { AppointmentError } from '../util/validate-appointment'

const breadcrumbs = [
  { i18nKey: 'scheduling.appointments.label', location: '/appointments' },
  { i18nKey: 'scheduling.appointments.new', location: '/appointments/new' },
]

const NewAppointment = () => {
  const { t } = useTranslator()
  const history = useHistory()
  const updateTitle = useUpdateTitle()
  useEffect(() => {
    updateTitle(t('scheduling.appointments.new'))
  })
  useAddBreadcrumbs(breadcrumbs, true)

  const startDateTime = roundToNearestMinutes(new Date(), { nearestTo: 15 })
  const endDateTime = addMinutes(startDateTime, 60)
  const [saved, setSaved] = useState(false)
  const [newAppointmentMutateError, setError] = useState<AppointmentError>({} as AppointmentError)
  const [newAppointment, setAppointment] = useState({
    patient: '',
    startDateTime: startDateTime.toISOString(),
    endDateTime: endDateTime.toISOString(),
    location: '',
    reason: '',
    type: '',
  } as Appointment)

  const {
    mutate: newAppointmentMutate,
    isLoading: isLoadingNewAppointment,
    isError: isErrorNewAppointment,
    validator: validateNewAppointment,
  } = useScheduleAppointment()

  const onCancelClick = () => {
    history.push('/appointments')
  }

  const onSave = () => {
    setSaved(true)
    setError(validateNewAppointment(newAppointment))
  }

  useEffect(() => {
    // if save click and no error proceed, else give error message.
    if (saved) {
      if (_.isEmpty(newAppointmentMutateError) && !isErrorNewAppointment) {
        newAppointmentMutate(newAppointment).then((result) => {
          Toast('success', t('states.success'), t('scheduling.appointment.successfullyCreated'))
          history.push(`/appointments/${result?.id}`)
        })
      } else if (!_.isEmpty(newAppointmentMutateError)) {
        newAppointmentMutateError.message = 'scheduling.appointment.errors.createAppointmentError'
      }
    }
    setSaved(false)
  }, [
    saved,
    newAppointmentMutateError,
    isErrorNewAppointment,
    newAppointmentMutate,
    newAppointment,
    t,
    history,
  ])

  if (isLoadingNewAppointment) {
    return <Spinner color="blue" loading size={[10, 25]} type="ScaleLoader" />
  }

  const onFieldChange = (key: string, value: string | boolean) => {
    setAppointment({
      ...newAppointment,
      [key]: value,
    })
  }

  return (
    <div>
      <form>
        <AppointmentDetailForm
          appointment={newAppointment as Appointment}
          error={newAppointmentMutateError}
          onFieldChange={onFieldChange}
        />
{'fraction_non_alphanumeric': 0.13085106382978723, 'fraction_numerical': 0.00364741641337386, 'mean_word_length': 3.8856718634001486, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 27, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2645859', 'n_tokens_mistral': 2059, 'n_tokens_neox': 2045, 'n_words': 390}