fix: prevent Timetabl from displaying 'Invalid Duration'

Author: debater-coder

package.json

@@ -1,6 +1,6 @@
 {
   "name": "timetabl-app",
-  "version": "1.0.10-beta",
+  "version": "1.0.11-beta",
   "description": "",
   "main": "index.js",
   "scripts": {

src/components/DTTPeriod/DTTPeriod.tsx

@@ -40,14 +40,14 @@ export const DTTPeriod = ({
       leftContent={period.name}
       leftContentSize={"xs"}
       transition={
-        period?.name == "Transition" ||
-        DateTime.fromISO("15:15") <= DateTime.fromISO(period.time) ||
-        DateTime.fromISO(period.time) <= DateTime.fromISO("09:00")
+        period?.name === "Transition" ||
+        DateTime.fromISO(`${period?.date}T15:15`) <= period.time ||
+        period.time <= DateTime.fromISO(`${period?.date}T09:00`)
       }
       isLoaded={isLoaded}
       rightContent={
         showTimesInsteadOfRooms === "true" ? (
-          period.time
+          period?.time?.toLocaleString(DateTime.TIME_SIMPLE)
         ) : period.room ? (
           <chakra.span
             bg={period.roomTo && "primary.100"}
@@ -58,12 +58,15 @@ export const DTTPeriod = ({
             {period.roomTo ?? period.room}
           </chakra.span>
         ) : (
-          period.time
+          period?.time?.toLocaleString(DateTime.TIME_SIMPLE)
         )
       }
       expandedContent={
         <>
-          at {showTimesInsteadOfRooms !== "true" ? period.time : period.room}{" "}
+          at{" "}
+          {showTimesInsteadOfRooms !== "true"
+            ? period?.time?.toLocaleString(DateTime.TIME_SIMPLE)
+            : period.room}{" "}
           with{" "}
           <chakra.span
             bg={period.casual && "primary.100"}

src/hooks/sbhsQuery/use/useDTT.ts

@@ -1,18 +1,19 @@
 import { DateTime } from "luxon";
 import { fetchDayTimetable } from "../fetch";
-import { APIPeriod } from "../fetch/fetchDayTimetable";
+import { APIDTT, APIPeriod } from "../fetch/fetchDayTimetable";
 import { useSBHSQuery } from "./useSBHSQuery";
 
 export type TimetablPeriod = {
   name?: string;
   room?: string;
   teacher?: string;
-  time?: string;
-  endTime?: string;
+  time?: DateTime;
+  endTime?: DateTime;
   colour?: string;
   key?: string;
   casual?: string;
   roomTo?: string;
+  date?: string;
 };
 
 export type TimetablDTT = {
@@ -39,7 +40,7 @@ const formatCasual = (casual?: string) => {
  * @returns Query result for daily timetable.
  */
 export const useDTT = (enabled?: boolean, date?: string) =>
-  useSBHSQuery(
+  useSBHSQuery<{ date: string }, APIDTT, TimetablDTT>(
     "timetable/daytimetable.json",
     fetchDayTimetable,
     { date },
@@ -49,7 +50,7 @@ export const useDTT = (enabled?: boolean, date?: string) =>
 
       const result = {
         periods: (data?.bells ?? [])
-          .map((bell, index, bells) => {
+          .flatMap((bell, index, bells) => {
             const timetable = data?.timetable;
             const subjects = timetable?.subjects;
             const period: APIPeriod =
@@ -86,34 +87,27 @@ export const useDTT = (enabled?: boolean, date?: string) =>
             return [
               {
                 name: "Transition",
-                endTime: DateTime.fromISO(bell?.startTime).toLocaleString(
-                  DateTime.TIME_SIMPLE
-                ),
-                time: DateTime.fromISO(
-                  bells?.[index - 1]?.endTime ?? "00:00"
-                ).toLocaleString(DateTime.TIME_SIMPLE),
+                endTime: DateTime.fromISO(`${data?.date}T${bell?.startTime}`),
+                time: DateTime.fromISO(bells?.[index - 1]?.endTime ?? "00:00"),
+                date: data?.date,
               },
               {
                 name,
                 room: period?.room,
                 teacher,
-                time: DateTime.fromISO(bell?.startTime).toLocaleString(
-                  DateTime.TIME_SIMPLE
-                ),
-                endTime: DateTime.fromISO(bell?.endTime).toLocaleString(
-                  DateTime.TIME_SIMPLE
-                ),
+                time: DateTime.fromISO(`${data?.date}T${bell?.startTime}`),
+                endTime: DateTime.fromISO(`${data?.date}T${bell?.endTime}`),
                 colour:
                   subject?.colour && period?.room
                     ? `#${subject?.colour}`
                     : "transparent",
                 key: bell?.bell,
                 casual,
                 roomTo,
+                date: data?.date,
               },
             ];
           })
-          .flat()
           .filter((period) => period?.time !== period?.endTime),
         date: data?.date,
       };

src/routes/Main/Home/Home.tsx

@@ -10,7 +10,7 @@ import {
 import "@fontsource/poppins";
 import { motion, LayoutGroup, AnimatePresence } from "framer-motion";
 import QueriesHandler from "../../../components/QueriesHandler";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { ArrowLeft, ArrowRight } from "phosphor-react";
 import { DateTime } from "luxon";
 import Empty from "./../../../components/Empty";
@@ -54,19 +54,16 @@ const HomeView = ({
       room: 605,
     });
 
-  useEffect(() => {
-    if (initialDate === date) {
-      onDateChange();
-    }
-  }, [initialDate, date, onDateChange]);
+  // useEffect(() => {
+  //   if (initialDate === date) {
+  //     onDateChange();
+  //   }
+  // }, [initialDate, date, onDateChange]);
 
   const [countdown, setCountdown] = useState("");
 
   const activeIndex = periods.findIndex(
-    ({ time, endTime }: { time: string; endTime: string }) =>
-      (DateTime.fromISO(`${date}T${time}`) < DateTime.now() &&
-        DateTime.now() < DateTime.fromISO(`${date}T${endTime}`)) ??
-      false
+    ({ time, endTime }) => (time < DateTime.now() && endTime) ?? false
   );
 
   return (
@@ -125,9 +122,10 @@ const HomeView = ({
         </Flex>
         <Flex
           direction={"column"}
-          bg={
-            useToken("colors", useColorModeValue("gray.300", "gray.500")) + "33"
-          }
+          bg={`${useToken(
+            "colors",
+            useColorModeValue("gray.300", "gray.500")
+          )}33`}
           minW={"50vw"}
           rounded={10}
           as={motion.div}
@@ -160,6 +158,8 @@ const HomeView = ({
 export default function Home() {
   const [date, setDate] = useState<string | undefined>();
 
+  console.log(date);
+
   return (
     <QueriesHandler queries={{ dtt: useDTT(true, date), initialDtt: useDTT() }}>
       {(

src/routes/Main/Home/NextPeriod.tsx

@@ -15,27 +15,20 @@ type NextPeriodProps = {
 
 export default ({
   periods,
-  date,
   countdown,
   setCountdown,
   isLoaded,
 }: NextPeriodProps) => {
   const activePeriod = periods.findIndex(
-    ({ time, endTime }: { time: string; endTime: string }) =>
-      (DateTime.fromISO(`${date}T${time}`) < DateTime.now() &&
-        DateTime.now() < DateTime.fromISO(`${date}T${endTime}`)) ??
-      false
+    ({ time, endTime }) =>
+      (time < DateTime.now() && DateTime.now() < endTime) ?? false
   );
 
   const nextPeriod = periods[activePeriod + 1];
 
   useEffect(() => {
     const timer = setInterval(() => {
-      setCountdown(
-        DateTime.fromISO(`${date}T${nextPeriod.time}`)
-          .diffNow()
-          .toFormat("hh:mm:ss")
-      );
+      setCountdown(nextPeriod.time.diffNow().toFormat("hh:mm:ss"));
     }, 500);
 
     return () => clearInterval(timer);
@@ -58,8 +51,9 @@ export default ({
       leftContentSize={"lg"}
       rightContent={
         showTimesInsteadOfRooms === "true"
-          ? nextPeriod.time
-          : nextPeriod.room ?? nextPeriod.time
+          ? nextPeriod?.time?.toLocaleString(DateTime.TIME_SIMPLE)
+          : nextPeriod.room ??
+            nextPeriod?.time?.toLocaleString(DateTime.TIME_SIMPLE)
       }
       expandedContent={<>IN {countdown}</>}
       expandedSize={"xl"}