49 lines
1.5 KiB
JavaScript
49 lines
1.5 KiB
JavaScript
import React from "react";
|
|
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
|
|
import AlertComponent from "../alert/alert.component";
|
|
import { Timeline } from "antd";
|
|
import { useTranslation } from "react-i18next";
|
|
import { DateTimeFormatter } from "../../utils/DateFormatter";
|
|
|
|
export default function ScheduleExistingAppointmentsList({
|
|
existingAppointments,
|
|
}) {
|
|
const { t } = useTranslation();
|
|
if (existingAppointments.loading) return <LoadingSpinner />;
|
|
if (existingAppointments.error)
|
|
return (
|
|
<AlertComponent
|
|
message={existingAppointments.error.message}
|
|
type="error"
|
|
/>
|
|
);
|
|
|
|
return (
|
|
<div>
|
|
{t("appointments.labels.priorappointments")}
|
|
<Timeline>
|
|
{existingAppointments.data
|
|
? existingAppointments.data.appointments.map((item) => {
|
|
return (
|
|
<Timeline.Item
|
|
key={item.id}
|
|
color={
|
|
item.canceled ? "red" : item.arrived ? "green" : "blue"
|
|
}
|
|
>
|
|
{item.canceled
|
|
? t("appointments.labels.cancelledappointment")
|
|
: item.arrived
|
|
? t("appointments.labels.arrivedon")
|
|
: t("appointments.labels.scheduledfor")}
|
|
|
|
<DateTimeFormatter>{item.start}</DateTimeFormatter>
|
|
</Timeline.Item>
|
|
);
|
|
})
|
|
: null}
|
|
</Timeline>
|
|
</div>
|
|
);
|
|
}
|