Files
bodyshop/client/src/components/schedule-calendar/schedule-calendar.container.jsx
Patrick Fic ad0347e25b UI Updates.
2021-04-01 09:44:29 -07:00

61 lines
2.1 KiB
JavaScript

import { useQuery } from "@apollo/client";
import queryString from "query-string";
import React, { useMemo, useEffect } from "react";
import { useLocation } from "react-router-dom";
import { QUERY_ALL_ACTIVE_APPOINTMENTS } from "../../graphql/appointments.queries";
import AlertComponent from "../alert/alert.component";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
import { getRange } from "../schedule-calendar-wrapper/schedule-calendar-util";
import ScheduleCalendarComponent from "./schedule-calendar.component";
import { calculateScheduleLoad } from "../../redux/application/application.actions";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
const mapStateToProps = createStructuredSelector({
//currentUser: selectCurrentUser
});
const mapDispatchToProps = (dispatch) => ({
calculateScheduleLoad: (endDate) => dispatch(calculateScheduleLoad(endDate)),
});
export function ScheduleCalendarContainer({ calculateScheduleLoad }) {
const search = queryString.parse(useLocation().search);
const { date, view } = search;
const range = useMemo(() => getRange(date, view), [date, view]);
const { loading, error, data, refetch } = useQuery(
QUERY_ALL_ACTIVE_APPOINTMENTS,
{
variables: { start: range.start.toDate(), end: range.end.toDate() },
skip: !!!range.start || !!!range.end,
}
);
useEffect(() => {
if (data && range.end) calculateScheduleLoad(range.end);
}, [data, range, calculateScheduleLoad]);
if (loading) return <LoadingSpinner />;
if (error) return <AlertComponent message={error.message} type="error" />;
let normalizedData = data.appointments.map((e) => {
//Required becuase Hasura returns a string instead of a date object.
return Object.assign(
{},
e,
{ start: new Date(e.start) },
{ end: new Date(e.end) }
);
});
return (
<ScheduleCalendarComponent
refetch={refetch}
data={data ? normalizedData : []}
/>
);
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(ScheduleCalendarContainer);