Merge branch 'main' into sidebar

Author: debater-coder

.all-contributorsrc

@@ -0,0 +1,43 @@
+{
+  "files": [
+    "README.md"
+  ],
+  "imageSize": 100,
+  "commit": false,
+  "commitConvention": "angular",
+  "contributors": [
+    {
+      "login": "wensenfriendandextra",
+      "name": "Wansen Dong",
+      "avatar_url": "https://avatars.githubusercontent.com/u/23128324?v=4",
+      "profile": "https://github.com/wensenfriendandextra",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "debater-coder",
+      "name": "debater-coder",
+      "avatar_url": "https://avatars.githubusercontent.com/u/52619668?v=4",
+      "profile": "https://github.com/debater-coder",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "ZZZooHaq",
+      "name": "ZZZooHaq",
+      "avatar_url": "https://avatars.githubusercontent.com/u/88522048?v=4",
+      "profile": "https://github.com/ZZZooHaq",
+      "contributions": [
+        "ideas"
+      ]
+    }
+  ],
+  "contributorsPerLine": 7,
+  "skipCi": true,
+  "repoType": "github",
+  "repoHost": "https://github.com",
+  "projectName": "timetabl-app",
+  "projectOwner": "debater-coder"
+}

README.md

@@ -1,4 +1,7 @@
 # [Timetabl](https://www.timetabl.app)
+<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+[![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors-)
+<!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fdebater-coder%2Ftimetabl-app&env=VITE_CLIENT_ID&envDescription=The%20client%20id%20you%20entered%20in%20the%20student%20portal.)
 
@@ -20,6 +23,33 @@ Timetabl is built on three principles:
 
 3. **Be secure**
    Unlike other bell time apps, Timetabl stores your tokens in HTTPS-only cookies instead of `localStorage`, so that even in the event of an XSS attack, the tokens are secure.
+   
+## Contributors
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<table>
+  <tbody>
+    <tr>
+      <td align="center"><a href="https://github.com/wensenfriendandextra"><img src="https://avatars.githubusercontent.com/u/23128324?v=4?s=100" width="100px;" alt="Wansen Dong"/><br /><sub><b>Wansen Dong</b></sub></a><br /><a href="https://github.com/debater-coder/timetabl-app/commits?author=wensenfriendandextra" title="Code">💻</a></td>
+      <td align="center"><a href="https://github.com/debater-coder"><img src="https://avatars.githubusercontent.com/u/52619668?v=4?s=100" width="100px;" alt="debater-coder"/><br /><sub><b>debater-coder</b></sub></a><br /><a href="https://github.com/debater-coder/timetabl-app/commits?author=debater-coder" title="Code">💻</a></td>
+      <td align="center"><a href="https://github.com/ZZZooHaq"><img src="https://avatars.githubusercontent.com/u/88522048?v=4?s=100" width="100px;" alt="ZZZooHaq"/><br /><sub><b>ZZZooHaq</b></sub></a><br /><a href="#ideas-ZZZooHaq" title="Ideas, Planning, & Feedback">🤔</a></td>
+    </tr>
+  </tbody>
+</table>
+
+<!-- markdownlint-restore -->
+<!-- prettier-ignore-end -->
+
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+
+<!-- markdownlint-restore -->
+<!-- prettier-ignore-end -->
+
+<!-- ALL-CONTRIBUTORS-LIST:END -->
 
 ## For Contributors
 

src/components/DTTPeriod/DTTPeriod.tsx

@@ -8,11 +8,11 @@ import { Period } from "../Period";
 export const DTTPeriod = ({
   period,
   isLoaded,
-  date,
+  active,
 }: {
   period: TimetablPeriod;
   isLoaded: boolean;
-  date?: string;
+  active: boolean;
 }) => {
   const {
     showTimesInsteadOfRooms,
@@ -28,11 +28,7 @@ export const DTTPeriod = ({
 
   return (
     <Period
-      active={
-        (DateTime.fromISO(`${date}T${period.time}`) < DateTime.now() &&
-          DateTime.now() < DateTime.fromISO(`${date}T${period.endTime}`)) ??
-        false
-      }
+      active={active}
       colour={
         period.room &&
         {
@@ -44,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"}
@@ -62,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,17 +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 = {
@@ -38,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 },
@@ -48,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 =
@@ -85,26 +87,27 @@ export const useDTT = (enabled?: boolean, date?: string) =>
             return [
               {
                 name: "Transition",
-                endTime: bell?.startTime,
-                time: bells?.[index - 1]?.endTime ?? "00:00",
+                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: bell?.startTime,
-                endTime: bell?.endTime,
+                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/Landing/Footer.tsx

@@ -5,6 +5,7 @@ import {
   ButtonGroup,
   IconButton,
   Link,
+  Box,
 } from "@chakra-ui/react";
 import { TimetablLogo } from "../../components/Nav/Nav";
 import { FaGithub } from "react-icons/fa";
@@ -34,7 +35,8 @@ export const Footer = () => {
         </ButtonGroup>
       </Stack>
       <Text fontSize="sm" color="subtle">
-        &copy; {new Date().getFullYear()}, Hamzah Ahmed under{" "}
+        &copy; {new Date().getFullYear()}, Hamzah Ahmed and Timetabl
+        Contributors under{" "}
         <Link
           href="https://github.com/debater-coder/timetabl-app/blob/main/LICENSE"
           color={"primary.500"}
@@ -43,6 +45,27 @@ export const Footer = () => {
           MIT License.
         </Link>
       </Text>
+      <Box
+        mt="6"
+        fontSize="sm"
+        fontWeight="semibold"
+        display="inline-block"
+        bg="black"
+        color="white"
+        px="4"
+        py="2"
+        rounded="lg"
+        alignSelf={"center"}
+        as="a"
+        target="_blank"
+        href="https://vercel.com"
+      >
+        Deployed by{" "}
+        <span role="img" aria-label="Vercel logo">
+          ▲
+        </span>{" "}
+        Vercel
+      </Box>
     </Stack>
   );
 };

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,14 +54,22 @@ 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 =
+    date === initialDate
+      ? periods.findIndex(
+          ({ time, endTime }) =>
+            time < DateTime.now() && DateTime.now() < endTime
+        )
+      : -1;
+
   return (
     <LayoutGroup>
       <Flex direction={"column"} align="center" gap={1.5}>
@@ -118,9 +126,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}
@@ -129,6 +138,7 @@ const HomeView = ({
           {periods.length ? (
             periods.map((period, index) => (
               <DTTPeriod
+                active={activeIndex === index}
                 period={period}
                 key={period.key ?? index + 100}
                 isLoaded={isLoaded}

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"}