From f1507237fee93a7c9e55b3809c28ff2ebedfcf05 Mon Sep 17 00:00:00 2001 From: llloxim Date: Tue, 14 Nov 2023 19:33:22 -0800 Subject: [PATCH 1/2] bandaid fix to api call --- ocfstatic | 1 + src/pages/staff-hours.tsx | 142 ++++++++++++++++++++++++++++++++++---- src/utils/api.ts | 2 +- 3 files changed, 130 insertions(+), 15 deletions(-) create mode 160000 ocfstatic diff --git a/ocfstatic b/ocfstatic new file mode 160000 index 0000000..8b851f5 --- /dev/null +++ b/ocfstatic @@ -0,0 +1 @@ +Subproject commit 8b851f51b2614c669ffdc42df99ef0bfe48a5064 diff --git a/src/pages/staff-hours.tsx b/src/pages/staff-hours.tsx index d229449..bd0b8ab 100644 --- a/src/pages/staff-hours.tsx +++ b/src/pages/staff-hours.tsx @@ -71,16 +71,122 @@ function parseTime(time: string) { return [sHour, sMin, eHour, eMin] } -const holidays = [ - { - title: "Holiday", - allDay: false, - start: new Date(2023, 9, 12, 0, 0, 0, 0), - end: new Date(2023, 9, 12, 23, 0, 0, 0), - }, -] - const StaffHoursPage = () => { + function ocfHours(i: number, data: typeof hours) { + const day = moment().startOf("isoWeek").add(i, "days") + if (data?.open != undefined && data?.close != undefined) { + return { + title: "OCF Open", + allDay: false, + start: new Date( + day.year(), + day.month(), + day.date(), + parseInt(data.open.split(":")[0]), + parseInt(data.open.split(":")[1]), + 0, + 0, + ), + end: new Date( + day.year(), + day.month(), + day.date(), + parseInt(data.close.split(":")[0]), + parseInt(data.close.split(":")[1]), + 0, + 0, + ), + } + } else { + return { + title: "OCF Closed All Day", + allDay: false, + start: new Date(day.year(), day.month(), day.date(), 0, 0, 0, 0), + end: new Date(day.year(), day.month(), day.date(), 23, 59, 0, 0), + } + } + } + const weeks_Data = [] + const isoDate = moment() + .startOf("isoWeek") + .add(0, "days") + .format("YYYY-MM-DD") + const { data: hours } = useApiRoute("/lab/hours/{date}", { + path: { date: isoDate.toString() }, + }) + weeks_Data.push(ocfHours(0, hours)) + const isoDate1 = moment() + .startOf("isoWeek") + .add(1, "days") + .format("YYYY-MM-DD") + const { data: hours1 } = useApiRoute("/lab/hours/{date}", { + path: { date: isoDate1.toString() }, + }) + weeks_Data.push(ocfHours(1, hours1)) + const isoDate2 = moment() + .startOf("isoWeek") + .add(2, "days") + .format("YYYY-MM-DD") + const { data: hours2 } = useApiRoute("/lab/hours/{date}", { + path: { date: isoDate2.toString() }, + }) + weeks_Data.push(ocfHours(2, hours2)) + const isoDate3 = moment() + .startOf("isoWeek") + .add(3, "days") + .format("YYYY-MM-DD") + const { data: hours3 } = useApiRoute("/lab/hours/{date}", { + path: { date: isoDate3.toString() }, + }) + weeks_Data.push(ocfHours(3, hours3)) + const isoDate4 = moment() + .startOf("isoWeek") + .add(4, "days") + .format("YYYY-MM-DD") + const { data: hours4 } = useApiRoute("/lab/hours/{date}", { + path: { date: isoDate4.toString() }, + }) + weeks_Data.push(ocfHours(4, hours4)) + const isoDate5 = moment() + .startOf("isoWeek") + .add(5, "days") + .format("YYYY-MM-DD") + const { data: hours5 } = useApiRoute("/lab/hours/{date}", { + path: { date: isoDate5.toString() }, + }) + weeks_Data.push(ocfHours(5, hours5)) + const isoDate6 = moment() + .startOf("isoWeek") + .add(6, "days") + .format("YYYY-MM-DD") + const { data: hours6 } = useApiRoute("/lab/hours/{date}", { + path: { date: isoDate6.toString() }, + }) + weeks_Data.push(ocfHours(6, hours6)) + const isoDate7 = moment() + .startOf("isoWeek") + .add(7, "days") + .format("YYYY-MM-DD") + const { data: hours7 } = useApiRoute("/lab/hours/{date}", { + path: { date: isoDate7.toString() }, + }) + weeks_Data.push(ocfHours(7, hours7)) + /* let isoDate8 = moment().startOf("isoWeek").add(8, "days").format("YYYY-MM-DD") + const { data: hours8 } = useApiRoute("/lab/hours/{date}", {path : {date : isoDate8.toString()}}); + weeks_Data.push(hours8) + let isoDate9 = moment().startOf("isoWeek").add(9, "days").format("YYYY-MM-DD") + const { data: hours9 } = useApiRoute("/lab/hours/{date}", {path : {date : isoDate9.toString()}}); + weeks_Data.push(hours9) + let isoDate10 = moment().startOf("isoWeek").add(10, "days").format("YYYY-MM-DD") + const { data: hours10 } = useApiRoute("/lab/hours/{date}", {path : {date : isoDate10.toString()}}); + weeks_Data.push(hours10) + let isoDate11 = moment().startOf("isoWeek").add(11, "days").format("YYYY-MM-DD") + const { data: hours11 } = useApiRoute("/lab/hours/{date}", {path : {date : isoDate11.toString()}}); + weeks_Data.push(hours11) + let isoDate12 = moment().startOf("isoWeek").add(12, "days").format("YYYY-MM-DD") + const { data: hours12 } = useApiRoute("/lab/hours/{date}", {path : {date : isoDate12.toString()}}); + weeks_Data.push(hours12) */ + const { data: staff } = useApiRoute("/staff_hours") const staffHours = staff && @@ -96,7 +202,7 @@ const StaffHoursPage = () => { newDay.month(), newDay.date(), times[0], - parseInt(staff.time.split(":")[1]), + times[1], 0, 0, ), @@ -105,7 +211,7 @@ const StaffHoursPage = () => { newDay.month(), newDay.date(), times[2], - 0, + times[3], 0, 0, ), @@ -119,7 +225,7 @@ const StaffHoursPage = () => { newDay.month(), newDay.date(), times[0], - parseInt(staff.time.split(":")[1]), + times[1], 0, 0, ), @@ -128,7 +234,7 @@ const StaffHoursPage = () => { newDay.month(), newDay.date(), times[2], - 0, + times[3], 0, 0, ), @@ -142,6 +248,11 @@ const StaffHoursPage = () => { backgroundColor: "#000", }, }), + ...(event.title?.toString().includes("OCF Closed") && { + style: { + backgroundColor: "#000", + }, + }), }), [], ) @@ -153,6 +264,7 @@ const StaffHoursPage = () => { }), [], ) + const heroRef = useRef(null) return ( @@ -173,12 +285,14 @@ const StaffHoursPage = () => { borderRadius={4} > Date: Fri, 17 Nov 2023 11:30:46 -0800 Subject: [PATCH 2/2] API calls need to be constant --- src/pages/staff-hours.tsx | 66 ++++++++++++++++++++++++++++++--------- 1 file changed, 51 insertions(+), 15 deletions(-) diff --git a/src/pages/staff-hours.tsx b/src/pages/staff-hours.tsx index bd0b8ab..3a2380e 100644 --- a/src/pages/staff-hours.tsx +++ b/src/pages/staff-hours.tsx @@ -171,22 +171,58 @@ const StaffHoursPage = () => { path: { date: isoDate7.toString() }, }) weeks_Data.push(ocfHours(7, hours7)) - /* let isoDate8 = moment().startOf("isoWeek").add(8, "days").format("YYYY-MM-DD") - const { data: hours8 } = useApiRoute("/lab/hours/{date}", {path : {date : isoDate8.toString()}}); - weeks_Data.push(hours8) - let isoDate9 = moment().startOf("isoWeek").add(9, "days").format("YYYY-MM-DD") - const { data: hours9 } = useApiRoute("/lab/hours/{date}", {path : {date : isoDate9.toString()}}); - weeks_Data.push(hours9) - let isoDate10 = moment().startOf("isoWeek").add(10, "days").format("YYYY-MM-DD") - const { data: hours10 } = useApiRoute("/lab/hours/{date}", {path : {date : isoDate10.toString()}}); - weeks_Data.push(hours10) - let isoDate11 = moment().startOf("isoWeek").add(11, "days").format("YYYY-MM-DD") - const { data: hours11 } = useApiRoute("/lab/hours/{date}", {path : {date : isoDate11.toString()}}); - weeks_Data.push(hours11) - let isoDate12 = moment().startOf("isoWeek").add(12, "days").format("YYYY-MM-DD") - const { data: hours12 } = useApiRoute("/lab/hours/{date}", {path : {date : isoDate12.toString()}}); - weeks_Data.push(hours12) */ + const isoDate8 = moment() + .startOf("isoWeek") + .add(8, "days") + .format("YYYY-MM-DD") + const { data: hours8 } = useApiRoute("/lab/hours/{date}", { + path: { date: isoDate8.toString() }, + }) + weeks_Data.push(ocfHours(8, hours8)) + const isoDate9 = moment() + .startOf("isoWeek") + .add(9, "days") + .format("YYYY-MM-DD") + const { data: hours9 } = useApiRoute("/lab/hours/{date}", { + path: { date: isoDate9.toString() }, + }) + weeks_Data.push(ocfHours(10, hours9)) + const isoDate10 = moment() + .startOf("isoWeek") + .add(10, "days") + .format("YYYY-MM-DD") + const { data: hours10 } = useApiRoute("/lab/hours/{date}", { + path: { date: isoDate10.toString() }, + }) + weeks_Data.push(ocfHours(10, hours10)) + const isoDate11 = moment() + .startOf("isoWeek") + .add(11, "days") + .format("YYYY-MM-DD") + const { data: hours11 } = useApiRoute("/lab/hours/{date}", { + path: { date: isoDate11.toString() }, + }) + weeks_Data.push(ocfHours(11, hours11)) + const isoDate12 = moment() + .startOf("isoWeek") + .add(12, "days") + .format("YYYY-MM-DD") + const { data: hours12 } = useApiRoute("/lab/hours/{date}", { + path: { date: isoDate12.toString() }, + }) + weeks_Data.push(ocfHours(12, hours12)) + /* let OCF_hours = [] // React Hook "useApiRoute" may be executed more than once. Possibly because it is called in a loop. React Hooks must be called in the exact same order in every component render + for (let i = 0; i < 21; i++) { + const isoDate12 = moment() + .startOf("isoWeek") + .add(i, "days") + .format("YYYY-MM-DD") + const { data: hours12 } = useApiRoute("/lab/hours/{date}", { + path: { date: isoDate12.toString() }, + }) + OCF_hours.push(ocfHours(i, hours12)) + } */ const { data: staff } = useApiRoute("/staff_hours") const staffHours = staff &&