From b8d1f62de8b7e438b762630151b8785b5219bd3b Mon Sep 17 00:00:00 2001 From: Ashley Zhu Date: Sun, 25 Jul 2021 00:00:02 -0700 Subject: [PATCH 1/5] Created the foundation for setting multiple overrides at one time --- .../SetAvailabilityOverridesCard.tsx | 559 ++++++++---------- src/components/Calendar/icons.tsx | 2 +- src/components/Calendar/index.tsx | 79 ++- 3 files changed, 302 insertions(+), 338 deletions(-) diff --git a/src/components/Availabilities/SetAvailabilityOverridesCard.tsx b/src/components/Availabilities/SetAvailabilityOverridesCard.tsx index 55e927a0..a6fdc236 100644 --- a/src/components/Availabilities/SetAvailabilityOverridesCard.tsx +++ b/src/components/Availabilities/SetAvailabilityOverridesCard.tsx @@ -25,83 +25,36 @@ import Calendar from "../Calendar"; import { DeleteIcon } from "../FormSchemaEditor/icons"; import { SetDateInterval } from "./SetDateInterval"; +const DEFAULT_AVAIL_ID = "__I_AM_A_NEW_OVERRIDE_DATE__"; + +type Timeslots = { + startTime: Date; + endTime: Date; +}[]; + type AvailOverrideDate = { profileId: string; startTime: Date; endTime: Date; availOverrideDateId: string; - availOverrideTimeslots: { - startTime: Date; - endTime: Date; - }[]; + availOverrideTimeslots: Timeslots; }; type EditAvailOverrideDayModalContentsProps = { - initOverrideDate?: any | null; - profileId: string; - availWeeklys: DateInterval[]; - onClose: () => void; + overrideDate: AvailOverrideDate; + onUpdateTimeslots: (newAvailOverrideDate: NewAvailOverrideDate) => void; }; + const EditAvailOverrideDayModalContents = ({ - initOverrideDate = null, - profileId, - availWeeklys, - onClose = () => {}, + overrideDate, + onUpdateTimeslots, }: EditAvailOverrideDayModalContentsProps) => { const { toUTC } = useTimezoneConverters(); - const [overrideDate, setOverrideDay] = useState( - initOverrideDate - ); + const [timeslots, setTimeslots] = useState( overrideDate?.availOverrideTimeslots || [] ); - const [updateAvailOverrideDateMutation] = useUpdateAvailOverrideDateMutation({ - refetchQueries: [refetchGetAvailOverrideDatesQuery({ profileId })], - }); - const [createAvailOverrideDateMutation] = useCreateAvailOverrideDateMutation({ - refetchQueries: [refetchGetAvailOverrideDatesQuery({ profileId })], - }); - - const createOrUpdateOverrideDay = async () => { - if (!overrideDate) { - throw new Error("Error: overrideDate is null."); - } - if (!toUTC) { - throw new Error("Error: toUTC is undefined."); - } - - const newTimeslots = timeslots.map((timeslot) => ({ - startTime: toUTC(timeslot.startTime), - endTime: toUTC(timeslot.endTime), - })); - if (overrideDate.availOverrideDateId === "__I_AM_A_NEW_OVERRIDE_DATE__") { - // Create - return createAvailOverrideDateMutation({ - variables: { - data: { - startTime: toUTC(overrideDate.startTime).getTime(), - endTime: toUTC(overrideDate.endTime).getTime(), - availOverrideTimeslots: newTimeslots, - profileId: profileId, - }, - }, - }); - } else { - // Update - return updateAvailOverrideDateMutation({ - variables: { - availOverrideDateId: overrideDate.availOverrideDateId, - data: { - startTime: toUTC(overrideDate.startTime).getTime(), - endTime: toUTC(overrideDate.endTime).getTime(), - availOverrideTimeslots: newTimeslots, - }, - }, - }); - } - }; - const addTimeslot = () => { if (!overrideDate) { console.error("Must select timeslot first"); @@ -159,11 +112,16 @@ const EditAvailOverrideDayModalContents = ({ }) .sort((a, b) => a.startTime.getTime() - b.startTime.getTime()); setTimeslots(newTimeslots); + onUpdateTimeslots({ + ...overrideDate, + edited: true, + availOverrideTimeslots: newTimeslots, + }); }; const editTimeslot = (timeslotIndex: number, newTimeslot: DateInterval) => { setTimeslots((prev) => { - return [ + const newTimeslots = [ ...prev.slice(0, timeslotIndex), ...prev.slice(timeslotIndex + 1), { @@ -171,177 +129,94 @@ const EditAvailOverrideDayModalContents = ({ endTime: toUTC!(newTimeslot.endTime), }, ].sort((a, b) => a.startTime.getTime() - b.startTime.getTime()); + onUpdateTimeslots({ + ...overrideDate, + edited: true, + availOverrideTimeslots: newTimeslots, + }); + return newTimeslots; }); }; const deleteTimeslot = (timeslotIndex: number) => { setTimeslots((prev) => { - return [ + const newTimeslots = [ ...prev.slice(0, timeslotIndex), ...prev.slice(timeslotIndex + 1), ]; + onUpdateTimeslots({ + ...overrideDate, + edited: true, + availOverrideTimeslots: newTimeslots, + }); + return newTimeslots; }); }; return (
- - Set the date to override - -
-
- { - if (newSelectedDate) { - const weekday = newSelectedDate.getDay(); - - setOverrideDay((prev) => { - const newDay = { - startTime: newSelectedDate, - endTime: addDays(newSelectedDate, 1), - }; - if (prev) { - prev = { ...prev, ...newDay }; - } else { - // Create new date - prev = { - availOverrideDateId: "__I_AM_A_NEW_OVERRIDE_DATE__", // TemporaryID, will be overwritten by backend - ...newDay, - profileId: profileId, - availOverrideTimeslots: [], - }; - } - return prev; - }); - - setTimeslots( - availWeeklys - .filter((avail) => avail.startTime.getDay() === weekday) - .map((slot) => { - const year = newSelectedDate.getFullYear(); - const month = newSelectedDate.getMonth(); - const date = newSelectedDate.getDate(); - return { - startTime: setDate( - setMonth(setYear(slot.startTime, year), month), - date - ), - endTime: setDate( - setMonth(setYear(slot.endTime, year), month), - date - ), - }; - }) - ); - } - }} - selectedDate={overrideDate ? new Date(overrideDate.startTime) : null} - /> -
- {overrideDate ? (
-
- - Selected date:{" "} - - {format(overrideDate.startTime, "EEEE, MMMM d, yyyy")} - -
-
- - What times are you free on this day? - + + Selected date:{" "} + + {format(overrideDate?.startTime, "EEEE, MMMM d, yyyy")}
+
+ + What times are you free on this day? + + +
-
- {timeslots.map((timeslot, timeslotIndex) => { - const date = startOfDay(overrideDate?.startTime); - if (getDay(timeslot.startTime) !== getDay(date)) { - return ; - } - return ( -
- { - editTimeslot(timeslotIndex, newInterval); - }} - onDeleteInterval={() => { - deleteTimeslot(timeslotIndex); - }} - /> -
- ); - })} +
+ {timeslots.map((timeslot, timeslotIndex) => { + const date = startOfDay(overrideDate.startTime); + if (getDay(timeslot.startTime) !== getDay(date)) { + return ; + } + return ( +
+ { + editTimeslot(timeslotIndex, newInterval); + }} + onDeleteInterval={() => { + deleteTimeslot(timeslotIndex); + }} + /> +
+ ); + })} - {timeslots.length === 0 && ( - -
- - Leave empty to mark yourself unavailable. - -
+ {timeslots.length === 0 && ( + +
+ + Leave empty to mark yourself unavailable. + +
-
- - )} +
+ + )} -
-
- -
-
-
- ) : ( -
- - Select a date to override.
- Weekly availabilities on that day will be overridden. - +
+
- )} -
- -
- -
-
); @@ -349,13 +224,13 @@ const EditAvailOverrideDayModalContents = ({ type AvailOverrideDateSectionProps = { overrideDate: AvailOverrideDate; - availWeeklys: DateInterval[]; }; const AvailOverrideDateSection = ({ overrideDate, - availWeeklys, -}: AvailOverrideDateSectionProps) => { - const [modalOpen, setModalOpen] = useState(false); +}: // availWeeklys, +AvailOverrideDateSectionProps) => { + // const [modalOpen, setModalOpen] = useState(false); + const [deleteAvailOverrideDateMutation] = useDeleteAvailOverrideDateMutation({ refetchQueries: [ refetchGetAvailOverrideDatesQuery({ profileId: overrideDate.profileId }), @@ -372,7 +247,7 @@ const AvailOverrideDateSection = ({
)} - {overrideDate.availOverrideTimeslots.map((timeslot) => { + {overrideDate.availOverrideTimeslots.map((timeslot, idx) => { return ( -
+
{format(new Date(timeslot.startTime), "h:mm aaa")} -{" "} {format(new Date(timeslot.endTime), "h:mm aaa")}
); })} - { setModalOpen(false); @@ -414,12 +289,11 @@ const AvailOverrideDateSection = ({ { setModalOpen(false); }} /> - + */}
); @@ -428,6 +302,11 @@ const AvailOverrideDateSection = ({ type SetAvailabilityOverridesCardProps = { profileId: string; }; + +type NewAvailOverrideDate = AvailOverrideDate & { + edited: boolean; +}; + export const SetAvailabilityOverridesCard = ({ profileId, }: SetAvailabilityOverridesCardProps) => { @@ -439,57 +318,112 @@ export const SetAvailabilityOverridesCard = ({ variables: { profileId }, }); - const { - data: availWeeklysData, - loading: availWeeklysLoading, - error: availWeeklysError, - } = useGetAvailWeeklysQuery({ - variables: { - profileId, - }, - }); + // const { + // data: availWeeklysData, + // loading: availWeeklysLoading, + // error: availWeeklysError, + // } = useGetAvailWeeklysQuery({ + // variables: { + // profileId, + // }, + // }); + + const [currentDate, setCurrentDate] = useState(null); + const [currentTimeslots, setCurrentTimeslots] = useState([]); + const [dayToTimeslots, setDayToTimeSlots] = useState<{ + [key: string]: NewAvailOverrideDate; + }>({}); - const [editAvailOverrideDayModalOpen, setEditAvailOverrideDayModalOpen] = - useState(false); const { fromUTC } = useTimezoneConverters(); - if (!fromUTC) return ; + const { toUTC } = useTimezoneConverters(); - let availOverrideDates: AvailOverrideDate[] = []; - let availWeeklys: DateInterval[] = []; + if (!fromUTC || !toUTC) return ; + const [updateAvailOverrideDateMutation] = useUpdateAvailOverrideDateMutation({ + refetchQueries: [refetchGetAvailOverrideDatesQuery({ profileId })], + }); + const [createAvailOverrideDateMutation] = useCreateAvailOverrideDateMutation({ + refetchQueries: [refetchGetAvailOverrideDatesQuery({ profileId })], + }); + + const saveNewOverrides = async () => { + //Save the override if it's new or needs to be updated + for (const availOverrideDate of Object.values(dayToTimeslots)) { + if (availOverrideDate.availOverrideDateId === DEFAULT_AVAIL_ID) { + await createAvailOverrideDateMutation({ + variables: { + data: { + startTime: toUTC(availOverrideDate.startTime).getTime(), + endTime: toUTC(availOverrideDate.endTime).getTime(), + availOverrideTimeslots: availOverrideDate.availOverrideTimeslots, + profileId: profileId, + }, + }, + }); + } else if (availOverrideDate.edited) { + await updateAvailOverrideDateMutation({ + variables: { + availOverrideDateId: availOverrideDate.availOverrideDateId, + data: { + startTime: toUTC(availOverrideDate.startTime).getTime(), + endTime: toUTC(availOverrideDate.endTime).getTime(), + availOverrideTimeslots: availOverrideDate.availOverrideTimeslots, + }, + }, + }); + } + } + }; + + let availOverrideDates: { [key: string]: NewAvailOverrideDate } = {}; if ( !availOverrideDatesLoading && !availOverrideDatesError && availOverrideDatesData ) { - availOverrideDates = availOverrideDatesData.getAvailOverrideDates.map( - (date) => { - return { - ...date, - startTime: fromUTC(new Date(date.startTime)), - endTime: fromUTC(new Date(date.endTime)), - availOverrideTimeslots: date.availOverrideTimeslots.map( - (timeslot) => ({ - startTime: fromUTC(new Date(timeslot.startTime)), - endTime: fromUTC(new Date(timeslot.endTime)), - }) - ), - }; - } - ); - } + // availOverrideDates = availOverrideDatesData.getAvailOverrideDates.map( + // (date) => { + // return { + // ...date, + // startTime: fromUTC(new Date(date.startTime)), + // endTime: fromUTC(new Date(date.endTime)), + // availOverrideTimeslots: date.availOverrideTimeslots.map( + // (timeslot) => ({ + // startTime: fromUTC(new Date(timeslot.startTime)), + // endTime: fromUTC(new Date(timeslot.endTime)), + // }) + // ), + // }; + // } + // ); - if (!availWeeklysLoading && !availWeeklysError && availWeeklysData) { - availWeeklys = availWeeklysData.getAvailWeeklys.map((avail) => { - return { - startTime: fromUTC(new Date(avail.startTime)), - endTime: fromUTC(new Date(avail.endTime)), + for (const overrideDate of availOverrideDatesData.getAvailOverrideDates) { + availOverrideDates[overrideDate.startTime.toLocaleString()] = { + ...overrideDate, + startTime: fromUTC(new Date(overrideDate.startTime)), + endTime: fromUTC(new Date(overrideDate.endTime)), + availOverrideTimeslots: overrideDate.availOverrideTimeslots.map( + (timeslot) => ({ + startTime: fromUTC(new Date(timeslot.startTime)), + endTime: fromUTC(new Date(timeslot.endTime)), + }) + ), + edited: false, }; - }); + } } - console.log( - Intl.DateTimeFormat.supportedLocalesOf(["ban", "id-u-co-pinyin", "de-ID"]) - ); + // if (!availWeeklysLoading && !availWeeklysError && availWeeklysData) { + // availWeeklys = availWeeklysData.getAvailWeeklys.map((avail) => { + // return { + // startTime: fromUTC(new Date(avail.startTime)), + // endTime: fromUTC(new Date(avail.endTime)), + // }; + // }); + // } + + // console.log( + // Intl.DateTimeFormat.supportedLocalesOf(["ban", "id-u-co-pinyin", "de-ID"]) + // ); return (
@@ -497,54 +431,87 @@ export const SetAvailabilityOverridesCard = ({ Add date overrides -
-
-
+
Add dates when your availability changes from your weekly hours.
+
+
+
+ { + if (newSelectedDate) { + let newOverrides = dayToTimeslots; + const existingOverride = + dayToTimeslots[newSelectedDate.toLocaleString()]; + if (existingOverride) { + newOverrides[newSelectedDate.toLocaleString()] = { + ...existingOverride, + availOverrideTimeslots: currentTimeslots, + }; + } else { + const newDay = { + startTime: newSelectedDate, + endTime: addDays(newSelectedDate, 1), + }; + newOverrides[newSelectedDate.toLocaleString()] = { + availOverrideDateId: DEFAULT_AVAIL_ID, + ...newDay, + profileId, + availOverrideTimeslots: currentTimeslots, + edited: false, + }; + } + setDayToTimeSlots(newOverrides); + setCurrentDate(newSelectedDate); + } + }} + selectedDate={currentDate || null} + /> +
+ {currentDate && dayToTimeslots[currentDate.toLocaleString()] && ( + { + setCurrentTimeslots(newAvailOverrideDate.availOverrideTimeslots); + let newDayToTimeslots = dayToTimeslots; + newDayToTimeslots[ + newAvailOverrideDate.startTime.toLocaleString() + ] = newAvailOverrideDate; + }} + /> + )} +
+
+ +
+ +
+
+
+
- {availOverrideDates.map((overrideDate, idx) => { + {Object.values(availOverrideDates).map((overrideDate, idx) => { + console.log(overrideDate); return ( +
- ); - })} -
-
-
-
- + }) || ( + + No overrides added. Select a date to get started. + + )}
- { - setEditAvailOverrideDayModalOpen(false); - }} - > - { - setEditAvailOverrideDayModalOpen(false); - }} - /> -
); }; diff --git a/src/components/Calendar/icons.tsx b/src/components/Calendar/icons.tsx index 8c602902..0e75fffb 100644 --- a/src/components/Calendar/icons.tsx +++ b/src/components/Calendar/icons.tsx @@ -16,7 +16,7 @@ export const Arrow = ({ }: ArrowProps) => { const [hovered, setHovered] = useState(false); const styles = classNames({ - "hover:bg-tertiary rounded": true, + [`hover:bg-tertiary rounded`]: true, "transform rotate-180": direction === "left", [`${className}`]: true, }); diff --git a/src/components/Calendar/index.tsx b/src/components/Calendar/index.tsx index ced13b60..d8640ee7 100644 --- a/src/components/Calendar/index.tsx +++ b/src/components/Calendar/index.tsx @@ -43,50 +43,47 @@ const Calendar = ({ }, [monthyear, getSelectableDates]); return ( -
-
- +
+
+ { + setMonthyear(([prevMonth, prevYear]) => { + let newMonthYear: [number, number]; + if (prevMonth === 0) { + newMonthYear = [11, prevYear - 1]; + } else { + newMonthYear = [prevMonth - 1, prevYear]; + } + setDays(padDatesInMonth(getDatesInThisMonth(...newMonthYear))); + return newMonthYear; + }); + }} + /> + {monthNames[monthyear[0]]} {monthyear[1]} -
- { - setMonthyear(([prevMonth, prevYear]) => { - let newMonthYear: [number, number]; - if (prevMonth === 0) { - newMonthYear = [11, prevYear - 1]; - } else { - newMonthYear = [prevMonth - 1, prevYear]; - } - setDays(padDatesInMonth(getDatesInThisMonth(...newMonthYear))); - return newMonthYear; - }); - }} - /> -
- { - setMonthyear(([prevMonth, prevYear]) => { - let newMonthYear: [number, number]; - if (prevMonth === 11) { - newMonthYear = [0, prevYear + 1]; - } else { - newMonthYear = [prevMonth + 1, prevYear]; - } - setDays(padDatesInMonth(getDatesInThisMonth(...newMonthYear))); - return newMonthYear; - }); - }} - /> -
-
+ { + setMonthyear(([prevMonth, prevYear]) => { + let newMonthYear: [number, number]; + if (prevMonth === 11) { + newMonthYear = [0, prevYear + 1]; + } else { + newMonthYear = [prevMonth + 1, prevYear]; + } + setDays(padDatesInMonth(getDatesInThisMonth(...newMonthYear))); + return newMonthYear; + }); + }} + />
-
-
+
{weekdayNamesAbbreviated.map((dayOfWeek, i) => (
From 70b93d2645082033383bb7d274e5f60c1d5f3da8 Mon Sep 17 00:00:00 2001 From: Ashley Zhu Date: Sat, 31 Jul 2021 15:05:05 -0700 Subject: [PATCH 2/5] Allow for user to switch between different dates for setting availabilities --- .../SetAvailabilityOverridesCard.tsx | 208 ++++++++++-------- .../Availabilities/SetDateInterval.tsx | 9 +- src/components/Calendar/index.tsx | 10 +- 3 files changed, 124 insertions(+), 103 deletions(-) diff --git a/src/components/Availabilities/SetAvailabilityOverridesCard.tsx b/src/components/Availabilities/SetAvailabilityOverridesCard.tsx index a6fdc236..94c6673e 100644 --- a/src/components/Availabilities/SetAvailabilityOverridesCard.tsx +++ b/src/components/Availabilities/SetAvailabilityOverridesCard.tsx @@ -9,7 +9,7 @@ import { setYear, startOfDay, } from "date-fns"; -import React, { Fragment, useState } from "react"; +import React, { Fragment, useEffect, useState } from "react"; import { DateInterval, refetchGetAvailOverrideDatesQuery, @@ -41,19 +41,16 @@ type AvailOverrideDate = { }; type EditAvailOverrideDayModalContentsProps = { - overrideDate: AvailOverrideDate; + overrideDate: NewAvailOverrideDate; onUpdateTimeslots: (newAvailOverrideDate: NewAvailOverrideDate) => void; }; - const EditAvailOverrideDayModalContents = ({ overrideDate, onUpdateTimeslots, }: EditAvailOverrideDayModalContentsProps) => { const { toUTC } = useTimezoneConverters(); - const [timeslots, setTimeslots] = useState( - overrideDate?.availOverrideTimeslots || [] - ); + const timeslots = overrideDate.availOverrideTimeslots || []; const addTimeslot = () => { if (!overrideDate) { @@ -111,7 +108,7 @@ const EditAvailOverrideDayModalContents = ({ endTime: toUTC(newAvailability.endTime), }) .sort((a, b) => a.startTime.getTime() - b.startTime.getTime()); - setTimeslots(newTimeslots); + onUpdateTimeslots({ ...overrideDate, edited: true, @@ -120,41 +117,35 @@ const EditAvailOverrideDayModalContents = ({ }; const editTimeslot = (timeslotIndex: number, newTimeslot: DateInterval) => { - setTimeslots((prev) => { - const newTimeslots = [ - ...prev.slice(0, timeslotIndex), - ...prev.slice(timeslotIndex + 1), - { - startTime: toUTC!(newTimeslot.startTime), - endTime: toUTC!(newTimeslot.endTime), - }, - ].sort((a, b) => a.startTime.getTime() - b.startTime.getTime()); - onUpdateTimeslots({ - ...overrideDate, - edited: true, - availOverrideTimeslots: newTimeslots, - }); - return newTimeslots; + const newTimeslots = [ + ...timeslots.slice(0, timeslotIndex), + ...timeslots.slice(timeslotIndex + 1), + { + startTime: toUTC!(newTimeslot.startTime), + endTime: toUTC!(newTimeslot.endTime), + }, + ].sort((a, b) => a.startTime.getTime() - b.startTime.getTime()); + onUpdateTimeslots({ + ...overrideDate, + edited: true, + availOverrideTimeslots: newTimeslots, }); }; const deleteTimeslot = (timeslotIndex: number) => { - setTimeslots((prev) => { - const newTimeslots = [ - ...prev.slice(0, timeslotIndex), - ...prev.slice(timeslotIndex + 1), - ]; - onUpdateTimeslots({ - ...overrideDate, - edited: true, - availOverrideTimeslots: newTimeslots, - }); - return newTimeslots; + const newTimeslots = [ + ...timeslots.slice(0, timeslotIndex), + ...timeslots.slice(timeslotIndex + 1), + ]; + onUpdateTimeslots({ + ...overrideDate, + edited: true, + availOverrideTimeslots: newTimeslots, }); }; return ( -
+
@@ -198,7 +189,9 @@ const EditAvailOverrideDayModalContents = ({
- Leave empty to mark yourself unavailable. + {overrideDate.edited + ? "You have set today as unavailable." + : "Your availabilities will be the same as weekly availabilities."}
@@ -207,15 +200,40 @@ const EditAvailOverrideDayModalContents = ({ )}
- +
+ + +
@@ -318,21 +336,21 @@ export const SetAvailabilityOverridesCard = ({ variables: { profileId }, }); - // const { - // data: availWeeklysData, - // loading: availWeeklysLoading, - // error: availWeeklysError, - // } = useGetAvailWeeklysQuery({ - // variables: { - // profileId, - // }, - // }); - + const { + data: availWeeklysData, + loading: availWeeklysLoading, + error: availWeeklysError, + } = useGetAvailWeeklysQuery({ + variables: { + profileId, + }, + }); const [currentDate, setCurrentDate] = useState(null); const [currentTimeslots, setCurrentTimeslots] = useState([]); const [dayToTimeslots, setDayToTimeSlots] = useState<{ [key: string]: NewAvailOverrideDate; }>({}); + const [modified, setModified] = useState(false); const { fromUTC } = useTimezoneConverters(); const { toUTC } = useTimezoneConverters(); @@ -375,31 +393,18 @@ export const SetAvailabilityOverridesCard = ({ }; let availOverrideDates: { [key: string]: NewAvailOverrideDate } = {}; + let availWeeklys: DateInterval[] = []; + if ( !availOverrideDatesLoading && !availOverrideDatesError && availOverrideDatesData ) { - // availOverrideDates = availOverrideDatesData.getAvailOverrideDates.map( - // (date) => { - // return { - // ...date, - // startTime: fromUTC(new Date(date.startTime)), - // endTime: fromUTC(new Date(date.endTime)), - // availOverrideTimeslots: date.availOverrideTimeslots.map( - // (timeslot) => ({ - // startTime: fromUTC(new Date(timeslot.startTime)), - // endTime: fromUTC(new Date(timeslot.endTime)), - // }) - // ), - // }; - // } - // ); - for (const overrideDate of availOverrideDatesData.getAvailOverrideDates) { - availOverrideDates[overrideDate.startTime.toLocaleString()] = { + const startTime = fromUTC(new Date(overrideDate.startTime)); + let temp = { ...overrideDate, - startTime: fromUTC(new Date(overrideDate.startTime)), + startTime: startTime, endTime: fromUTC(new Date(overrideDate.endTime)), availOverrideTimeslots: overrideDate.availOverrideTimeslots.map( (timeslot) => ({ @@ -409,22 +414,20 @@ export const SetAvailabilityOverridesCard = ({ ), edited: false, }; + availOverrideDates[startTime.toLocaleString()] = temp; } } - // if (!availWeeklysLoading && !availWeeklysError && availWeeklysData) { - // availWeeklys = availWeeklysData.getAvailWeeklys.map((avail) => { - // return { - // startTime: fromUTC(new Date(avail.startTime)), - // endTime: fromUTC(new Date(avail.endTime)), - // }; - // }); - // } - - // console.log( - // Intl.DateTimeFormat.supportedLocalesOf(["ban", "id-u-co-pinyin", "de-ID"]) - // ); + if (!availWeeklysLoading && !availWeeklysError && availWeeklysData) { + availWeeklys = availWeeklysData.getAvailWeeklys.map((avail) => { + return { + startTime: fromUTC(new Date(avail.startTime)), + endTime: fromUTC(new Date(avail.endTime)), + }; + }); + } + console.log(dayToTimeslots); return (
@@ -446,12 +449,12 @@ export const SetAvailabilityOverridesCard = ({ if (newSelectedDate) { let newOverrides = dayToTimeslots; const existingOverride = - dayToTimeslots[newSelectedDate.toLocaleString()]; + dayToTimeslots[newSelectedDate.toLocaleString()] || + availOverrideDates[newSelectedDate.toLocaleString()]; if (existingOverride) { - newOverrides[newSelectedDate.toLocaleString()] = { - ...existingOverride, - availOverrideTimeslots: currentTimeslots, - }; + setCurrentTimeslots(existingOverride.availOverrideTimeslots); + dayToTimeslots[newSelectedDate.toLocaleString()] = + existingOverride; } else { const newDay = { startTime: newSelectedDate, @@ -464,6 +467,7 @@ export const SetAvailabilityOverridesCard = ({ availOverrideTimeslots: currentTimeslots, edited: false, }; + setCurrentTimeslots([]); } setDayToTimeSlots(newOverrides); setCurrentDate(newSelectedDate); @@ -476,11 +480,17 @@ export const SetAvailabilityOverridesCard = ({ { - setCurrentTimeslots(newAvailOverrideDate.availOverrideTimeslots); - let newDayToTimeslots = dayToTimeslots; - newDayToTimeslots[ - newAvailOverrideDate.startTime.toLocaleString() - ] = newAvailOverrideDate; + if (newAvailOverrideDate) { + setModified(true); + setCurrentTimeslots( + newAvailOverrideDate.availOverrideTimeslots + ); + let newDayToTimeslots = dayToTimeslots; + newDayToTimeslots[ + newAvailOverrideDate.startTime.toLocaleString() + ] = newAvailOverrideDate; + setDayToTimeSlots(newDayToTimeslots); + } }} /> )} @@ -490,7 +500,14 @@ export const SetAvailabilityOverridesCard = ({ Cancel
-
@@ -499,7 +516,6 @@ export const SetAvailabilityOverridesCard = ({
{Object.values(availOverrideDates).map((overrideDate, idx) => { - console.log(overrideDate); return ( diff --git a/src/components/Availabilities/SetDateInterval.tsx b/src/components/Availabilities/SetDateInterval.tsx index 6ba86045..dff50804 100644 --- a/src/components/Availabilities/SetDateInterval.tsx +++ b/src/components/Availabilities/SetDateInterval.tsx @@ -13,6 +13,7 @@ import React from "react"; import { DateInterval } from "../../generated/graphql"; import { Text } from "../atomic"; import Select from "../atomic/Select"; +import { DeleteIcon } from "../FormSchemaEditor/icons"; type SetDateIntervalProps = { date: Date; @@ -89,9 +90,9 @@ export const SetDateInterval = ({ }; return ( -
+
From -
+
([]); + const [modified, setModified] = useState(false); + const [setWeeklyAvailabilitiesMutation] = useSetAvailWeeklysMutation({ refetchQueries: [refetchGetAvailWeeklysQuery({ profileId })], }); const [allDayAvailableError, setAllDayAvailableError] = useState(-1); // Index of error - let weeklyAvailabilities: DateInterval[] = []; - - if (!loading && !error && data && fromUTC) { - weeklyAvailabilities = data.getAvailWeeklys.map((x) => ({ - startTime: fromUTC(new Date(x.startTime)), - endTime: fromUTC(new Date(x.endTime)), - })); - } + useEffect(() => { + if (!loading && !error && data && fromUTC) { + setWeeklyAvailabilities( + data.getAvailWeeklys.map((x) => ({ + startTime: fromUTC(new Date(x.startTime)), + endTime: fromUTC(new Date(x.endTime)), + })) + ); + } + }, [loading]); const addWeeklyAvailability = (date: Date) => { const availabilitiesForDate = weeklyAvailabilities.filter((interval) => @@ -108,12 +115,8 @@ export const SetWeeklyAvailabilitiesCard = ({ endTime: toUTC(newAvailability.endTime), }) .sort((a, b) => a.startTime.getTime() - b.startTime.getTime()); - setWeeklyAvailabilitiesMutation({ - variables: { - profileId: profileId, - availabilities: newWeeklyAvailabilities, - }, - }); + setWeeklyAvailabilities(newWeeklyAvailabilities); + setModified(true); }; const editWeeklyAvailability = @@ -130,12 +133,8 @@ export const SetWeeklyAvailabilitiesCard = ({ endTime: toUTC(newDateInterval.endTime), }, ].sort((a, b) => a.startTime.getTime() - b.startTime.getTime()); - setWeeklyAvailabilitiesMutation({ - variables: { - profileId: profileId, - availabilities: newWeeklyAvailabilities, - }, - }); + setWeeklyAvailabilities(newWeeklyAvailabilities); + setModified(true); setAllDayAvailableError(-1); }; @@ -144,21 +143,33 @@ export const SetWeeklyAvailabilitiesCard = ({ ...weeklyAvailabilities.slice(0, dateIntervalIndex), ...weeklyAvailabilities.slice(dateIntervalIndex + 1), ]; + setWeeklyAvailabilities(newWeeklyAvailabilities); + setModified(true); + setAllDayAvailableError(-1); + }; + + const saveWeeklyAvailabilities = () => { setWeeklyAvailabilitiesMutation({ variables: { profileId: profileId, - availabilities: newWeeklyAvailabilities, + availabilities: weeklyAvailabilities, }, }); - setAllDayAvailableError(-1); }; return (
-
+
Set Weekly Availabilities +
@@ -177,9 +188,7 @@ export const SetWeeklyAvailabilitiesCard = ({ {weekdayNames[getDay(date)].toUpperCase() + "S"} {weeklyAvailabilities.map((interval, intervalIndex) => { if (getDay(interval.startTime) !== getDay(date)) { - return ( - - ); + return ; } return ( { const [hovered, setHovered] = useState(false); const styles = classNames({ - [`hover:bg-tertiary rounded`]: true, + "hover:bg-tertiary rounded": true, "transform rotate-180": direction === "left", [`${className}`]: true, }); diff --git a/src/components/Calendar/index.tsx b/src/components/Calendar/index.tsx index 480ca5b0..efb79924 100644 --- a/src/components/Calendar/index.tsx +++ b/src/components/Calendar/index.tsx @@ -11,7 +11,6 @@ tomorrow.setDate(today.getDate() + 1); const initMonth = tomorrow.getMonth(); const initYear = tomorrow.getFullYear(); -console.log(tomorrow); interface CalendarProps { onSelect: (date: Date | null) => void; selectedDate: Date | null; @@ -120,10 +119,7 @@ const Calendar = ({ disabled={!selectable} key={i} className={backgroundStyles} - onClick={() => { - console.log(day); - onSelect(day); - }} + onClick={() => onSelect(day)} > {day.getDate()} diff --git a/src/components/FormSchemaEditor/icons.tsx b/src/components/FormSchemaEditor/icons.tsx index 58abae7b..49440d94 100644 --- a/src/components/FormSchemaEditor/icons.tsx +++ b/src/components/FormSchemaEditor/icons.tsx @@ -12,9 +12,9 @@ export const EditIcon = (props: HTMLAttributes) => {
@@ -33,30 +33,30 @@ export const DeleteIcon = (props: HTMLAttributes) => {
diff --git a/src/pages/program/[slug]/[profileRoute]/mentees/index.tsx b/src/pages/program/[slug]/[profileRoute]/mentees/index.tsx index 1aaf38d0..e13afee6 100644 --- a/src/pages/program/[slug]/[profileRoute]/mentees/index.tsx +++ b/src/pages/program/[slug]/[profileRoute]/mentees/index.tsx @@ -56,7 +56,6 @@ const ViewMenteesPage: Page = () => {
{mentees?.map((mentee, index: number) => { - console.log(mentee); return ; })}
diff --git a/src/pages/program/[slug]/[profileRoute]/mentors/index.tsx b/src/pages/program/[slug]/[profileRoute]/mentors/index.tsx index 15a62903..c1edee7f 100644 --- a/src/pages/program/[slug]/[profileRoute]/mentors/index.tsx +++ b/src/pages/program/[slug]/[profileRoute]/mentors/index.tsx @@ -40,7 +40,6 @@ const ViewMentorsPage: Page = () => { let newMentors = searchText ? fuse.search(searchText).map((x) => x.item) : unfilteredProfiles; - console.log(searchText, newMentors); if (!filteredTags.length) { return newMentors; } diff --git a/src/pages/program/[slug]/apply.tsx b/src/pages/program/[slug]/apply.tsx index c6c5ac99..69ef8529 100644 --- a/src/pages/program/[slug]/apply.tsx +++ b/src/pages/program/[slug]/apply.tsx @@ -89,29 +89,12 @@ const ProgramApplyPage: Page = (_) => { } return ( - <> - {/* For Testing */} - {/* */} -
- {/* Nav bar goes here */} -
- -
+
+ {/* Nav bar goes here */} +
+ + {!formSubmitted ? ( +
{currentProgram?.name} @@ -161,12 +144,11 @@ const ProgramApplyPage: Page = (_) => {
-
-
- - Thank You - -
+ ) : ( +
+ + Thank You +
@@ -196,16 +178,18 @@ const ProgramApplyPage: Page = (_) => {
-
+ )}
{}} + onClose={() => { + setFormSubmitted(false); + }} programName={currentProgram.name} /> - +
); }; From a167c8ff02f9279c68bed0f589e7b04ac64f881f Mon Sep 17 00:00:00 2001 From: Ashley Zhu Date: Mon, 2 Aug 2021 15:12:00 -0700 Subject: [PATCH 4/5] Take care of the case where new availabilities are checked for unavailability --- .../SetAvailabilityOverridesCard.tsx | 29 +++++++++++-------- .../SetWeeklyAvailabilitiesCard.tsx | 5 +++- 2 files changed, 21 insertions(+), 13 deletions(-) diff --git a/src/components/Availabilities/SetAvailabilityOverridesCard.tsx b/src/components/Availabilities/SetAvailabilityOverridesCard.tsx index 8be5e539..f28eb242 100644 --- a/src/components/Availabilities/SetAvailabilityOverridesCard.tsx +++ b/src/components/Availabilities/SetAvailabilityOverridesCard.tsx @@ -365,20 +365,25 @@ export const SetAvailabilityOverridesCard = ({ //Save the override if it's new or needs to be updated for (const availOverrideDate of Object.values(dayToTimeslots)) { if (availOverrideDate.availOverrideDateId === DEFAULT_AVAIL_ID) { - await createAvailOverrideDateMutation({ - variables: { - data: { - startTime: toUTC(availOverrideDate.startTime).getTime(), - endTime: toUTC(availOverrideDate.endTime).getTime(), - availOverrideTimeslots: availOverrideDate.availOverrideTimeslots, - profileId: profileId, + if ( + availOverrideDate.availOverrideTimeslots.length || + availOverrideDate.unavailable + ) + await createAvailOverrideDateMutation({ + variables: { + data: { + startTime: toUTC(availOverrideDate.startTime).getTime(), + endTime: toUTC(availOverrideDate.endTime).getTime(), + availOverrideTimeslots: + availOverrideDate.availOverrideTimeslots, + profileId: profileId, + }, }, - }, - }); + }); } else if (availOverrideDate.edited) { if ( - availOverrideDate.unavailable || - availOverrideDate.availOverrideTimeslots.length !== 0 + availOverrideDate.availOverrideTimeslots.length || + availOverrideDate.unavailable ) { await updateAvailOverrideDateMutation({ variables: { @@ -498,7 +503,7 @@ export const SetAvailabilityOverridesCard = ({ setModified(true); const newDayToTimeslots = { ...dayToTimeslots, - [`${newAvailOverrideDate.startTime.toLocaleString()}`]: + [newAvailOverrideDate.startTime.toLocaleString()]: newAvailOverrideDate, }; setDayToTimeSlots(newDayToTimeslots); diff --git a/src/components/Availabilities/SetWeeklyAvailabilitiesCard.tsx b/src/components/Availabilities/SetWeeklyAvailabilitiesCard.tsx index be1a6663..83640d12 100644 --- a/src/components/Availabilities/SetWeeklyAvailabilitiesCard.tsx +++ b/src/components/Availabilities/SetWeeklyAvailabilitiesCard.tsx @@ -166,7 +166,10 @@ export const SetWeeklyAvailabilitiesCard = ({ From d68c2c33ce4c4410e9cb51a54c18b96276b57d4e Mon Sep 17 00:00:00 2001 From: Ashley Zhu Date: Tue, 3 Aug 2021 01:41:47 -0700 Subject: [PATCH 5/5] Update refetch to only occur after a bulk save --- .../SetAvailabilityOverridesCard.tsx | 605 ++++++++++-------- src/pages/_app.tsx | 12 +- 2 files changed, 346 insertions(+), 271 deletions(-) diff --git a/src/components/Availabilities/SetAvailabilityOverridesCard.tsx b/src/components/Availabilities/SetAvailabilityOverridesCard.tsx index f28eb242..2887181f 100644 --- a/src/components/Availabilities/SetAvailabilityOverridesCard.tsx +++ b/src/components/Availabilities/SetAvailabilityOverridesCard.tsx @@ -9,7 +9,6 @@ import { import React, { Fragment, useState } from "react"; import { DateInterval, - refetchGetAvailOverrideDatesQuery, useCreateAvailOverrideDateMutation, useDeleteAvailOverrideDateMutation, useGetAvailOverrideDatesQuery, @@ -36,25 +35,129 @@ type AvailOverrideDate = { availOverrideTimeslots: Timeslots; }; -type EditAvailOverrideDayModalContentsProps = { - overrideDate: NewAvailOverrideDate; - onUpdateTimeslots: (newAvailOverrideDate: NewAvailOverrideDate) => void; -}; -const EditAvailOverrideDayModalContents = ({ - overrideDate, - onUpdateTimeslots, -}: EditAvailOverrideDayModalContentsProps) => { +const EditAvailabilityOverridesModal = ({ + profileId, + initOverrideDate = null, + availOverrideDates, + isOpen = false, + onClose, +}: { + profileId: string; + initOverrideDate?: NewAvailOverrideDate | null; + availOverrideDates: { [key: string]: NewAvailOverrideDate }; + isOpen: boolean; + onClose: () => void; +}) => { const { toUTC } = useTimezoneConverters(); - const timeslots = overrideDate.availOverrideTimeslots || []; + const [currentDate, setCurrentDate] = useState( + initOverrideDate || null + ); + const [modified, setModified] = useState(false); + const [dayToTimeslots, setDayToTimeSlots] = useState<{ + [key: string]: NewAvailOverrideDate; + }>({}); + + const [updateAvailOverrideDateMutation] = + useUpdateAvailOverrideDateMutation(); + const [createAvailOverrideDateMutation] = + useCreateAvailOverrideDateMutation(); + const [deleteAvailOverrideDateMutation] = + useDeleteAvailOverrideDateMutation(); + + const updateCurrentDay = ({ + edited = true, + unavailable = false, + newTimeslots = [], + }: { + edited?: boolean; + unavailable?: boolean; + newTimeslots?: Timeslots; + }) => { + if (!currentDate) { + console.error("Must select timeslot first"); + return; + } + const newOverride = { + ...currentDate, + edited, + unavailable, + availOverrideTimeslots: newTimeslots, + }; + setModified(true); + setCurrentDate(newOverride); + setDayToTimeSlots({ + ...dayToTimeslots, + [currentDate.startTime.toLocaleString()]: newOverride, + }); + }; + + const saveNewOverrides = async () => { + if (!toUTC) { + throw new Error("Error: toUTC is undefined."); + } + let allEdits: Promise[] = []; + //Save the override if it's new or needs to be updated + for (const availOverrideDate of Object.values(dayToTimeslots)) { + if (availOverrideDate.availOverrideDateId === DEFAULT_AVAIL_ID) { + if ( + availOverrideDate.availOverrideTimeslots.length || + availOverrideDate.unavailable + ) { + allEdits.push( + createAvailOverrideDateMutation({ + variables: { + data: { + startTime: toUTC(availOverrideDate.startTime).getTime(), + endTime: toUTC(availOverrideDate.endTime).getTime(), + availOverrideTimeslots: + availOverrideDate.availOverrideTimeslots, + profileId: profileId, + }, + }, + }) + ); + } + } else if (availOverrideDate.edited) { + if ( + availOverrideDate.availOverrideTimeslots.length || + availOverrideDate.unavailable + ) { + allEdits.push( + updateAvailOverrideDateMutation({ + variables: { + availOverrideDateId: availOverrideDate.availOverrideDateId, + data: { + startTime: toUTC(availOverrideDate.startTime).getTime(), + endTime: toUTC(availOverrideDate.endTime).getTime(), + availOverrideTimeslots: + availOverrideDate.availOverrideTimeslots, + }, + }, + }) + ); + } else if (!availOverrideDate.unavailable) { + allEdits.push( + deleteAvailOverrideDateMutation({ + variables: { + availOverrideDateId: availOverrideDate.availOverrideDateId, + }, + }).catch((err) => console.log(err.message)) + ); + } + } + Promise.all(allEdits).then(onClose); + } + }; const addTimeslot = () => { - if (!overrideDate) { + if (!currentDate) { console.error("Must select timeslot first"); return; } + const timeslots = currentDate.availOverrideTimeslots; // If there are no availabilities for the day, add one starting at 12:00 AM - const dateStart = startOfDay(new Date(overrideDate.startTime)); + const dateStart = startOfDay(new Date(currentDate.startTime)); let newAvailability: DateInterval | null = { startTime: addMinutes(dateStart, 8 * 60), endTime: addMinutes(dateStart, 8 * 60 + 30), @@ -105,15 +208,17 @@ const EditAvailOverrideDayModalContents = ({ }) .sort((a, b) => a.startTime.getTime() - b.startTime.getTime()); - onUpdateTimeslots({ - ...overrideDate, - edited: true, - unavailable: false, - availOverrideTimeslots: newTimeslots, + updateCurrentDay({ + newTimeslots, }); }; const editTimeslot = (timeslotIndex: number, newTimeslot: DateInterval) => { + if (!currentDate) { + console.error("Must select timeslot first"); + return; + } + const timeslots = currentDate.availOverrideTimeslots; const newTimeslots = [ ...timeslots.slice(0, timeslotIndex), ...timeslots.slice(timeslotIndex + 1), @@ -122,144 +227,212 @@ const EditAvailOverrideDayModalContents = ({ endTime: toUTC!(newTimeslot.endTime), }, ].sort((a, b) => a.startTime.getTime() - b.startTime.getTime()); - onUpdateTimeslots({ - ...overrideDate, - edited: true, - availOverrideTimeslots: newTimeslots, - }); + + updateCurrentDay({ newTimeslots }); }; const deleteTimeslot = (timeslotIndex: number) => { + if (!currentDate) { + console.error("Must select timeslot first"); + return; + } + const timeslots = currentDate.availOverrideTimeslots; const newTimeslots = [ ...timeslots.slice(0, timeslotIndex), ...timeslots.slice(timeslotIndex + 1), ]; - onUpdateTimeslots({ - ...overrideDate, - edited: true, - unavailable: newTimeslots.length === 0, - availOverrideTimeslots: newTimeslots, + + updateCurrentDay({ + newTimeslots, }); }; return ( -
-
-
- - Selected date:{" "} - - {format(overrideDate?.startTime, "EEEE, MMMM d, yyyy")} - -
-
- - What times are you free on this day? - - -
+ +
+ + Edit Overrides + + { + if (newSelectedDate) { + let newAvailOverrideDate: NewAvailOverrideDate; + + //If there are already timeslots on this day set those as current timeslots + const existingOverride = + dayToTimeslots[newSelectedDate.toLocaleString()] || + availOverrideDates[newSelectedDate.toLocaleString()]; + if (existingOverride) { + newAvailOverrideDate = existingOverride; -
- {timeslots.map((timeslot, timeslotIndex) => { - const date = startOfDay(overrideDate.startTime); - if (getDay(timeslot.startTime) !== getDay(date)) { - return ; + //otherwise create new availOverrideDate object + } else { + const newDay = { + startTime: newSelectedDate, + endTime: addDays(newSelectedDate, 1), + }; + newAvailOverrideDate = { + availOverrideDateId: DEFAULT_AVAIL_ID, + ...newDay, + profileId, + availOverrideTimeslots: [], + edited: false, + unavailable: false, + }; + } + setDayToTimeSlots({ + ...dayToTimeslots, + [newSelectedDate.toLocaleString()]: newAvailOverrideDate, + }); + setCurrentDate(newAvailOverrideDate); } - return ( -
- { - editTimeslot(timeslotIndex, newInterval); - }} - onDeleteInterval={() => { - deleteTimeslot(timeslotIndex); - }} - /> -
- ); - })} - - {timeslots.length === 0 && - (overrideDate.unavailable ? ( - -
- - You have set today as unavailable. + }} + selectedDate={currentDate?.startTime || null} + /> + {currentDate && ( +
+
+
+ + Selected date:{" "} + + {format(currentDate.startTime, "EEEE, MMMM d, yyyy")} -
- -
- - ) : ( - -
- - Your availabilities will be the same as weekly availability - today. +
+
+ + What times are you free on this day? -
+ +
+ +
+ {currentDate && + currentDate.availOverrideTimeslots.map( + (timeslot, timeslotIndex) => { + const date = startOfDay(currentDate.startTime); + if (getDay(timeslot.startTime) !== getDay(date)) { + return ( + + ); + } + return ( +
+ { + editTimeslot(timeslotIndex, newInterval); + }} + onDeleteInterval={() => { + deleteTimeslot(timeslotIndex); + }} + /> +
+ ); + } + )} + + {currentDate && + currentDate.availOverrideTimeslots.length === 0 && + (currentDate.unavailable ? ( + +
+ + You have set today as unavailable. + +
+ +
+ + ) : ( + +
+ + Your availabilities will be the same as weekly + availability today. + +
-
- - ))} - -
-
- - +
+ + ))} + +
+
+ + +
+
+
+ )} +
+ +
+
-
+ ); }; type AvailOverrideDateSectionProps = { overrideDate: AvailOverrideDate; + availOverrideDates: { [key: string]: NewAvailOverrideDate }; + onSuccessfulDelete: () => void; }; const AvailOverrideDateSection = ({ overrideDate, + availOverrideDates, + onSuccessfulDelete, }: // availWeeklys, AvailOverrideDateSectionProps) => { - // const [modalOpen, setModalOpen] = useState(false); - - const [deleteAvailOverrideDateMutation] = useDeleteAvailOverrideDateMutation({ - refetchQueries: [ - refetchGetAvailOverrideDatesQuery({ profileId: overrideDate.profileId }), - ], - }); + const [modalOpen, setModalOpen] = useState(false); + const [deleteAvailOverrideDateMutation] = + useDeleteAvailOverrideDateMutation(); return ( @@ -271,7 +444,7 @@ AvailOverrideDateSectionProps) => {
); })} - {/* { + onClose={async () => { + await onSuccessfulDelete(); setModalOpen(false); }} - > - { - setModalOpen(false); - }} - /> - */} + />
); @@ -339,67 +513,15 @@ export const SetAvailabilityOverridesCard = ({ data: availOverrideDatesData, loading: availOverrideDatesLoading, error: availOverrideDatesError, + refetch: refetchAvailOverrideDates, } = useGetAvailOverrideDatesQuery({ variables: { profileId }, }); - - const [currentDate, setCurrentDate] = useState(null); - const [dayToTimeslots, setDayToTimeSlots] = useState<{ - [key: string]: NewAvailOverrideDate; - }>({}); - const [modified, setModified] = useState(false); const [modalOpen, setModalOpen] = useState(false); const { fromUTC } = useTimezoneConverters(); - const { toUTC } = useTimezoneConverters(); - - if (!fromUTC || !toUTC) return ; - const [updateAvailOverrideDateMutation] = useUpdateAvailOverrideDateMutation({ - refetchQueries: [refetchGetAvailOverrideDatesQuery({ profileId })], - }); - const [createAvailOverrideDateMutation] = useCreateAvailOverrideDateMutation({ - refetchQueries: [refetchGetAvailOverrideDatesQuery({ profileId })], - }); - const saveNewOverrides = async () => { - //Save the override if it's new or needs to be updated - for (const availOverrideDate of Object.values(dayToTimeslots)) { - if (availOverrideDate.availOverrideDateId === DEFAULT_AVAIL_ID) { - if ( - availOverrideDate.availOverrideTimeslots.length || - availOverrideDate.unavailable - ) - await createAvailOverrideDateMutation({ - variables: { - data: { - startTime: toUTC(availOverrideDate.startTime).getTime(), - endTime: toUTC(availOverrideDate.endTime).getTime(), - availOverrideTimeslots: - availOverrideDate.availOverrideTimeslots, - profileId: profileId, - }, - }, - }); - } else if (availOverrideDate.edited) { - if ( - availOverrideDate.availOverrideTimeslots.length || - availOverrideDate.unavailable - ) { - await updateAvailOverrideDateMutation({ - variables: { - availOverrideDateId: availOverrideDate.availOverrideDateId, - data: { - startTime: toUTC(availOverrideDate.startTime).getTime(), - endTime: toUTC(availOverrideDate.endTime).getTime(), - availOverrideTimeslots: - availOverrideDate.availOverrideTimeslots, - }, - }, - }); - } - } - } - }; + if (!fromUTC) return ; let availOverrideDates: { [key: string]: NewAvailOverrideDate } = {}; @@ -408,7 +530,10 @@ export const SetAvailabilityOverridesCard = ({ !availOverrideDatesError && availOverrideDatesData ) { - for (const overrideDate of availOverrideDatesData.getAvailOverrideDates) { + const sorted = [...availOverrideDatesData.getAvailOverrideDates].sort( + (a, b) => a.startTime - b.startTime + ); + for (const overrideDate of sorted) { const startTime = fromUTC(new Date(overrideDate.startTime)); let temp = { ...overrideDate, @@ -445,7 +570,13 @@ export const SetAvailabilityOverridesCard = ({ {Object.values(availOverrideDates).map((overrideDate, idx) => { return ( - + { + refetchAvailOverrideDates(); + }} + />
); @@ -459,81 +590,15 @@ export const SetAvailabilityOverridesCard = ({ - setModalOpen(false)}> -
- - Edit Overrides - - { - if (newSelectedDate) { - let newOverrides = dayToTimeslots; - const existingOverride = - dayToTimeslots[newSelectedDate.toLocaleString()] || - availOverrideDates[newSelectedDate.toLocaleString()]; - if (existingOverride) { - dayToTimeslots[newSelectedDate.toLocaleString()] = - existingOverride; - } else { - const newDay = { - startTime: newSelectedDate, - endTime: addDays(newSelectedDate, 1), - }; - newOverrides[newSelectedDate.toLocaleString()] = { - availOverrideDateId: DEFAULT_AVAIL_ID, - ...newDay, - profileId, - availOverrideTimeslots: [], - edited: false, - unavailable: false, - }; - } - setDayToTimeSlots(newOverrides); - setCurrentDate(newSelectedDate); - } - }} - selectedDate={currentDate || null} - /> - {currentDate && dayToTimeslots[currentDate.toLocaleString()] && ( - { - if (newAvailOverrideDate) { - setModified(true); - const newDayToTimeslots = { - ...dayToTimeslots, - [newAvailOverrideDate.startTime.toLocaleString()]: - newAvailOverrideDate, - }; - setDayToTimeSlots(newDayToTimeslots); - } - }} - /> - )} -
- -
- -
-
- + { + await refetchAvailOverrideDates(); + setModalOpen(false); + }} + />
); }; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 49f15e39..4970de75 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -47,7 +47,17 @@ export const getApolloClient = ( ) => { // TODO: Do we need to initialize a new ApolloClient? // Or can we just use [client] as defined above? - const cache = new InMemoryCache().restore(initialState || {}); + const cache = new InMemoryCache({ + typePolicies: { + Query: { + fields: { + getAvailOverrideDates: { + merge: true, + }, + }, + }, + }, + }).restore(initialState || {}); return new ApolloClient({ link: from([authLink, uploadLink]), cache,