Heavily simplified the startTime and endTime display by removing dayjs from SetTimesModal
This commit is contained in:
parent
575747bcd3
commit
5d30586a24
3 changed files with 28 additions and 43 deletions
|
@ -50,13 +50,16 @@ export const Scheduler = ({
|
|||
const addNewSchedule = () => setEditSchedule(openingHours.length);
|
||||
|
||||
const applyEditSchedule = (changed) => {
|
||||
// new entry
|
||||
if (!changed.days) {
|
||||
changed.days = [1, 2, 3, 4, 5]; // Mon - Fri
|
||||
setOpeningHours(openingHours.concat(changed));
|
||||
} else {
|
||||
// update
|
||||
const replaceWith = { ...openingHours[editSchedule], ...changed };
|
||||
openingHours.splice(editSchedule, 1, replaceWith);
|
||||
setOpeningHours([].concat(openingHours));
|
||||
}
|
||||
|
||||
const replaceWith = { ...openingHours[editSchedule], ...changed };
|
||||
openingHours.splice(editSchedule, 1, replaceWith);
|
||||
setOpeningHours([].concat(openingHours));
|
||||
};
|
||||
|
||||
const removeScheduleAt = (toRemove: number) => {
|
||||
|
@ -69,9 +72,15 @@ export const Scheduler = ({
|
|||
<div className="inline-flex ml-2">
|
||||
<WeekdaySelect defaultValue={item.days} onSelect={(selected: number[]) => (item.days = selected)} />
|
||||
<button className="ml-2 text-sm px-2" type="button" onClick={() => setEditSchedule(idx)}>
|
||||
{dayjs(item.startDate).format(item.startDate.minute() === 0 ? "ha" : "h:mma")}
|
||||
{dayjs()
|
||||
.startOf("day")
|
||||
.add(item.startTime, "minutes")
|
||||
.format(item.startTime % 60 === 0 ? "ha" : "h:mma")}
|
||||
until
|
||||
{dayjs(item.endDate).format(item.endDate.minute() === 0 ? "ha" : "h:mma")}
|
||||
{dayjs()
|
||||
.startOf("day")
|
||||
.add(item.endTime, "minutes")
|
||||
.format(item.endTime % 60 === 0 ? "ha" : "h:mma")}
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
|
@ -122,8 +131,9 @@ export const Scheduler = ({
|
|||
</div>
|
||||
{editSchedule >= 0 && (
|
||||
<SetTimesModal
|
||||
schedule={{ ...openingHours[editSchedule], timeZone: selectedTimeZone }}
|
||||
onChange={applyEditSchedule}
|
||||
startTime={openingHours[editSchedule] ? openingHours[editSchedule].startTime : 540}
|
||||
endTime={openingHours[editSchedule] ? openingHours[editSchedule].endTime : 1020}
|
||||
onChange={(times) => applyEditSchedule({ ...(openingHours[editSchedule] || {}), ...times })}
|
||||
onExit={() => setEditSchedule(-1)}
|
||||
/>
|
||||
)}
|
||||
|
|
|
@ -1,25 +1,9 @@
|
|||
import { ClockIcon } from "@heroicons/react/outline";
|
||||
import { useRef } from "react";
|
||||
import dayjs from "dayjs";
|
||||
import utc from "dayjs/plugin/utc";
|
||||
import timezone from "dayjs/plugin/utc";
|
||||
dayjs.extend(utc);
|
||||
dayjs.extend(timezone);
|
||||
|
||||
export default function SetTimesModal(props) {
|
||||
const { startDate, endDate } = {
|
||||
startDate: dayjs
|
||||
.utc()
|
||||
.startOf("day")
|
||||
.add(props.schedule.startTime || 540, "minutes"),
|
||||
endDate: dayjs
|
||||
.utc()
|
||||
.startOf("day")
|
||||
.add(props.schedule.endTime || 1020, "minutes"),
|
||||
};
|
||||
|
||||
startDate.tz(props.timeZone);
|
||||
endDate.tz(props.timeZone);
|
||||
const [startHours, startMinutes] = [Math.floor(props.startTime / 60), props.startTime % 60];
|
||||
const [endHours, endMinutes] = [Math.floor(props.endTime / 60), props.endTime % 60];
|
||||
|
||||
const startHoursRef = useRef<HTMLInputElement>();
|
||||
const startMinsRef = useRef<HTMLInputElement>();
|
||||
|
@ -35,8 +19,8 @@ export default function SetTimesModal(props) {
|
|||
const enteredEndMins = parseInt(endMinsRef.current.value);
|
||||
|
||||
props.onChange({
|
||||
startDate: startDate.minute(enteredStartMins).hour(enteredStartHours),
|
||||
endDate: endDate.minute(enteredEndMins).hour(enteredEndHours),
|
||||
startTime: enteredStartHours * 60 + enteredStartMins,
|
||||
endTime: enteredEndHours * 60 + enteredEndMins,
|
||||
});
|
||||
|
||||
props.onExit(0);
|
||||
|
@ -85,7 +69,7 @@ export default function SetTimesModal(props) {
|
|||
id="startHours"
|
||||
className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
|
||||
placeholder="9"
|
||||
defaultValue={startDate.format("H")}
|
||||
defaultValue={startHours}
|
||||
/>
|
||||
</div>
|
||||
<span className="mx-2 pt-1">:</span>
|
||||
|
@ -104,7 +88,7 @@ export default function SetTimesModal(props) {
|
|||
id="startMinutes"
|
||||
className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
|
||||
placeholder="30"
|
||||
defaultValue={startDate.format("m")}
|
||||
defaultValue={startMinutes}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -124,7 +108,7 @@ export default function SetTimesModal(props) {
|
|||
id="endHours"
|
||||
className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
|
||||
placeholder="17"
|
||||
defaultValue={endDate.format("H")}
|
||||
defaultValue={endHours}
|
||||
/>
|
||||
</div>
|
||||
<span className="mx-2 pt-1">:</span>
|
||||
|
@ -143,7 +127,7 @@ export default function SetTimesModal(props) {
|
|||
id="endMinutes"
|
||||
className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
|
||||
placeholder="30"
|
||||
defaultValue={endDate.format("m")}
|
||||
defaultValue={endMinutes}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -118,16 +118,7 @@ export default function EventTypePage({
|
|||
};
|
||||
|
||||
if (enteredAvailability) {
|
||||
payload.availability = {
|
||||
dateOverrides: [],
|
||||
openingHours: enteredAvailability.openingHours.map((item): OpeningHours => {
|
||||
item.startTime = item.startDate.hour() * 60 + item.startDate.minute();
|
||||
delete item.startDate;
|
||||
item.endTime = item.endDate.hour() * 60 + item.endDate.minute();
|
||||
delete item.endDate;
|
||||
return item;
|
||||
}),
|
||||
};
|
||||
payload.availability = enteredAvailability;
|
||||
}
|
||||
|
||||
await fetch("/api/availability/eventtype", {
|
||||
|
@ -855,7 +846,7 @@ export const getServerSideProps: GetServerSideProps<Props> = async ({ req, query
|
|||
{
|
||||
days: [0, 1, 2, 3, 4, 5, 6],
|
||||
startTime: user.startTime,
|
||||
length: user.endTime >= 1440 ? 1439 : user.endTime,
|
||||
endTime: user.endTime,
|
||||
},
|
||||
];
|
||||
|
||||
|
|
Loading…
Reference in a new issue