types: more props types in components

need @rvyk review
rvyk · Dec 30, 2023 · aa92250 · aa92250
1 parent af34d4c
commit aa92250
Show file tree

Hide file tree

Showing 27 changed files with 201 additions and 51 deletions.
diff --git a/src/components/Dropdowns/ClassDropdown.tsx b/src/components/Dropdowns/ClassDropdown.tsx
@@ -4,7 +4,7 @@ import { useRouter } from "next/router";
 import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import { handleSelect } from "./functions";
 
-function DropdownClass({ classes }) {
+function DropdownClass({ classes }: { classes: nameValueType[] }) {
   const [searchClass, setSearchClass] = useState("");
   const [lastSelect, setLastSelect] = useState("");
   const router = useRouter();

diff --git a/src/components/Dropdowns/RoomDropdown.tsx b/src/components/Dropdowns/RoomDropdown.tsx
@@ -4,7 +4,7 @@ import { useRouter } from "next/router";
 import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import { handleSelect } from "./functions";
 
-function DropdownRoom({ rooms }) {
+function DropdownRoom({ rooms }: { rooms: nameValueType[] }) {
   const [searchRoom, setSearchRoom] = useState("");
   const [lastSelect, setLastSelect] = useState("");
   const router = useRouter();

diff --git a/src/components/Dropdowns/TeacherDropdown.tsx b/src/components/Dropdowns/TeacherDropdown.tsx
@@ -4,7 +4,7 @@ import { useRouter } from "next/router";
 import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import { handleSelect } from "./functions";
 
-function DropdownTeacher({ teachers }) {
+function DropdownTeacher({ teachers }: { teachers: nameValueType[] }) {
   const [searchTeacher, setSearchTeacher] = useState("");
   const [lastSelect, setLastSelect] = useState("");
   const router = useRouter();

diff --git a/src/components/JumbotronLarge.tsx b/src/components/JumbotronLarge.tsx
@@ -10,15 +10,21 @@ import Image from "next/legacy/image";
 import Loading from "./Loading";
 import Event from "./Event";
 
-function JumbotronLarge({ ...props }) {
+function JumbotronLarge({ ...props }: props | null) {
   let {
     text = "",
     status,
     classes = [],
     teachers = [],
     rooms = [],
-    timeTable = {},
-  } = props;
+    timeTable = {
+      hours: [],
+      generatedDate: "",
+      title: "",
+      validDate: "",
+      lessons: null,
+    },
+  }: props = props;
 
   return (
     <div className="py-8 relative px-4 mx-auto max-w-screen-xl text-center lg:py-16">

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -45,10 +45,14 @@ function Layout({
     rooms = [],
     teachers = [],
     classes = [],
-    text = "",
-    siteTitle = "",
-    timeTable: { title = "" } = {},
-  } = props;
+    timeTable = {
+      hours: [],
+      generatedDate: "",
+      title: "",
+      validDate: "",
+      lessons: null,
+    },
+  }: props = props;
 
   useEffect(() => {
     initFlowbite();
@@ -58,10 +62,14 @@ function Layout({
     <>
       <Head>
         <link rel="canonical" href="https://plan.zstiojar.edu.pl" />
-        <title>{`${siteTitle} ${siteTitle && "|"} ZSTiO - Plan lekcji`}</title>
+        <title>{`${timeTable.title} ${
+          timeTable.title && "|"
+        } ZSTiO - Plan lekcji`}</title>
         <meta
           property="og:title"
-          content={`${siteTitle} ${siteTitle && "|"} ZSTiO - Plan lekcji`}
+          content={`${timeTable.title} ${
+            timeTable.title && "|"
+          } ZSTiO - Plan lekcji`}
         />
       </Head>
       <div className="min-h-screen w-screen flex flex-col lg:justify-center lg:items-center lg:bg-[#F7F3F5] bg-[#fff] dark:bg-[#202020] lg:dark:bg-[#171717] transition-all">

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -13,6 +13,12 @@ function Navbar({
   isSnowing,
   setIsSnowing,
   inTimetable,
+}: {
+  searchDialog: boolean;
+  setSearchDialog: React.Dispatch<React.SetStateAction<boolean>>;
+  isSnowing: boolean;
+  setIsSnowing: React.Dispatch<React.SetStateAction<boolean>>;
+  inTimetable: boolean;
 }) {
   const { theme, setTheme, resolvedTheme, systemTheme } = useTheme();
   const [isMounted, setIsMounted] = useState(false);

diff --git a/src/components/Navbar/ChangeButton.tsx b/src/components/Navbar/ChangeButton.tsx
@@ -3,7 +3,7 @@ import { ArrowPathRoundedSquareIcon } from "@heroicons/react/24/outline";
 import { useRouter } from "next/router";
 import React from "react";
 
-function ChangeButton({ inTimetable }) {
+function ChangeButton({ inTimetable }: { inTimetable: boolean }) {
   const router = useRouter();
 
   return (

diff --git a/src/components/Navbar/SearchButton.tsx b/src/components/Navbar/SearchButton.tsx
@@ -1,7 +1,13 @@
 import { MagnifyingGlassCircleIcon } from "@heroicons/react/24/outline";
 import React from "react";
 
-function SearchButton({ searchDialog, setSearchDialog }) {
+function SearchButton({
+  searchDialog,
+  setSearchDialog,
+}: {
+  searchDialog: boolean;
+  setSearchDialog: React.Dispatch<React.SetStateAction<boolean>>;
+}) {
   return (
     <button
       onClick={() => setSearchDialog(!searchDialog)}

diff --git a/src/components/Navbar/SnowEastereggButton.tsx b/src/components/Navbar/SnowEastereggButton.tsx
@@ -1,6 +1,12 @@
 import React from "react";
 
-function SnowEastereggButton({ isSnowing, setIsSnowing }) {
+function SnowEastereggButton({
+  isSnowing,
+  setIsSnowing,
+}: {
+  isSnowing: boolean;
+  setIsSnowing: React.Dispatch<React.SetStateAction<boolean>>;
+}) {
   return (
     <div className="hidden lg:block">
       <button

diff --git a/src/components/Navbar/ThemeButton.tsx b/src/components/Navbar/ThemeButton.tsx
@@ -2,7 +2,13 @@ import React from "react";
 import { SunIcon } from "@heroicons/react/20/solid";
 import { MoonIcon } from "@heroicons/react/24/outline";
 
-function ThemeButton({ toggleTheme, resolvedTheme }) {
+function ThemeButton({
+  toggleTheme,
+  resolvedTheme,
+}: {
+  toggleTheme: () => void;
+  resolvedTheme: string;
+}) {
   return (
     <button
       type="button"

diff --git a/src/components/SearchForEmptyRoom.tsx b/src/components/SearchForEmptyRoom.tsx
@@ -8,7 +8,15 @@ import Link from "next/link";
 import { days } from "../utils/helpers";
 import axios from "axios";
 
-function SearchForEmptyRoom({ searchDialog, setSearchDialog, setSelectedDay }) {
+function SearchForEmptyRoom({
+  searchDialog,
+  setSearchDialog,
+  setSelectedDay,
+}: {
+  searchDialog: boolean;
+  setSearchDialog: React.Dispatch<React.SetStateAction<boolean>>;
+  setSelectedDay: React.Dispatch<React.SetStateAction<number>>;
+}) {
   const [selectedDayForQuery, setSelectedDayForQuery] = useState(0);
   const [lessonIndex, setLessonindex] = useState(1);
   const [loading, setLoading] = useState(false);

diff --git a/src/components/SnowEasteregg.tsx b/src/components/SnowEasteregg.tsx
@@ -9,7 +9,7 @@ const SnowSettings: SnowOption = {
   radius: [1, 5],
 };
 
-function Snow({ isSnowing }) {
+function Snow({ isSnowing }: { isSnowing: boolean }) {
   const { theme } = useTheme();
 
   if (isSnowing && new Date().getMonth() === 11) {

diff --git a/src/components/Table/CurrentLesson.tsx b/src/components/Table/CurrentLesson.tsx
@@ -1,7 +1,13 @@
 import { getCurrentLesson } from "@/utils/currentLesson";
 import React, { useEffect, useState } from "react";
 
-function CurrentLesson({ timeFrom, timeTo }) {
+function CurrentLesson({
+  timeFrom,
+  timeTo,
+}: {
+  timeFrom: string;
+  timeTo: string;
+}) {
   const [minutesRemaining, setMinutesRemaining] = useState(
     getCurrentLesson(timeFrom, timeTo).minutesRemaining
   );

diff --git a/src/components/Table/LoadingTable.tsx b/src/components/Table/LoadingTable.tsx
@@ -2,7 +2,7 @@ import { ArrowPathIcon } from "@heroicons/react/24/outline";
 import React from "react";
 import RenderTableHeader from "../Timetable/RenderTableHeader";
 
-function LoadingTable({ small }) {
+function LoadingTable({ small }: { small: boolean }) {
   if (small) {
     return (
       <div className="h-screen w-full flex justify-center items-center flex-col">

diff --git a/src/components/Table/ShortHours.tsx b/src/components/Table/ShortHours.tsx
@@ -1,6 +1,12 @@
 import React, { useEffect, useState } from "react";
 
-function ShortHours({ setIsShortHours, isShortHours }) {
+function ShortHours({
+  setIsShortHours,
+  isShortHours,
+}: {
+  setIsShortHours: React.Dispatch<React.SetStateAction<boolean>>;
+  isShortHours: boolean;
+}) {
   const [isMounted, setIsMounted] = useState(false);
 
   useEffect(() => {

diff --git a/src/components/Timetable/RenderLesson.tsx b/src/components/Timetable/RenderLesson.tsx
@@ -3,7 +3,17 @@ import { cases } from "@/utils/helpers";
 import { ExclamationCircleIcon } from "@heroicons/react/24/outline";
 import Link from "next/link";
 
-function RenderLesson({ lessonIndex, dayIndex, day, substitutions }) {
+function RenderLesson({
+  lessonIndex,
+  dayIndex,
+  day,
+  substitutions,
+}: {
+  lessonIndex: number;
+  dayIndex: number;
+  day: lessonType[][];
+  substitutions: substitutionTableType;
+}) {
   return (
     <>
       {day[lessonIndex]?.map((lesson, subIndex) => {

diff --git a/src/components/Timetable/RenderTableFooter.tsx b/src/components/Timetable/RenderTableFooter.tsx
@@ -6,6 +6,12 @@ export default function RenderTableHeader({
   generatedDate,
   status,
   timeTableID,
+}: {
+  hours: hourType[];
+  validDate: string;
+  generatedDate: string;
+  status: boolean;
+  timeTableID: string;
 }) {
   return (
     <tfoot

diff --git a/src/components/Timetable/RenderTableRow.tsx b/src/components/Timetable/RenderTableRow.tsx
@@ -7,6 +7,11 @@ export default function RenderTableRow({
   isShortHours,
   lessons,
   substitutions,
+}: {
+  hours: hourType[];
+  isShortHours: boolean;
+  lessons: lessonType[][][];
+  substitutions: substitutionTableType;
 }) {
   const maxLessons =
     typeof hours == "object" &&

diff --git a/src/components/TimetableLarge.tsx b/src/components/TimetableLarge.tsx
@@ -8,21 +8,28 @@ import ShortHours from "./Table/ShortHours";
 import { useRouter } from "next/router";
 import LoadingTable from "./Table/LoadingTable";
 
-function TimetableLarge({ isShortHours, setIsShortHours, ...props }) {
+function TimetableLarge({
+  isShortHours,
+  setIsShortHours,
+  ...props
+}: props & {
+  isShortHours: boolean;
+  setIsShortHours: React.Dispatch<React.SetStateAction<boolean>>;
+}) {
   const { isReady } = useRouter();
 
   let {
     status = false,
     text = "",
     timeTableID = "",
     timeTable: {
-      hours = {},
+      hours = [],
       generatedDate = "",
-      title = "",
       validDate = "",
-      lessons = [[], [], [], [], []],
-    } = {},
-  } = props;
+      title = "",
+      lessons = null,
+    },
+  }: props = props;
 
   if (!isReady) {
     return <LoadingTable small={false} />;

diff --git a/src/components/TimetableSmall.tsx b/src/components/TimetableSmall.tsx
@@ -17,11 +17,26 @@ function TimetableSmall({
   selectedDay,
   setSelectedDay,
   ...props
+}: props & {
+  handleKey: (key: string) => void;
+  setIsShortHours: React.Dispatch<React.SetStateAction<boolean>>;
+  isShortHours: boolean;
+  searchDialog: boolean;
+  setSearchDialog: React.Dispatch<React.SetStateAction<boolean>>;
+  selectedDay: number;
+  setSelectedDay: React.Dispatch<React.SetStateAction<number>>;
 }) {
   const { isReady } = useRouter();
 
-  let { timeTable: { hours = {}, lessons = [[], [], [], [], []] } = {} } =
-    props;
+  let {
+    timeTable: { hours = [], lessons = [[], [], [], [], []] } = {
+      hours: [],
+      generatedDate: "",
+      title: "",
+      validDate: "",
+      lessons: [[], [], [], [], []],
+    },
+  }: props = props;
 
   if (!isReady) {
     return <LoadingTable small={true} />;

diff --git a/src/components/TimetableSmall/BottomBar.tsx b/src/components/TimetableSmall/BottomBar.tsx
@@ -13,15 +13,24 @@ import { useRouter } from "next/router";
 import { lock, unlock } from "tua-body-scroll-lock";
 import MobileDetect from "mobile-detect";
 
-function BottomBar({ handleKey, ...props }) {
+function BottomBar({
+  handleKey,
+  ...props
+}: props & { handleKey: (key: string) => void }) {
   let {
+    rooms = [],
+    teachers = [],
+    classes = [],
     text = "",
     timeTableID = "",
-    classes = [],
-    teachers = [],
-    rooms = [],
-    timeTable: { generatedDate = "", title = "", validDate = "" } = {},
-  } = props;
+    timeTable = {
+      hours: [],
+      generatedDate: "",
+      title: "",
+      validDate: "",
+      lessons: null,
+    },
+  }: props = props;
 
   const [isMenuExpanded, setIsMenuExpanded] = useState(false);
   const [lastSelect, setLastSelect] = useState("");
@@ -89,7 +98,7 @@ function BottomBar({ handleKey, ...props }) {
               {text} /
             </p>
             <p className="transition-all text-xl font-bold text-gray-100 dark:text-gray-300 overflow-hidden text-ellipsis">
-              {title}
+              {timeTable.title}
             </p>
           </div>
           <div className="w-12 h-full right flex justify-center items-center text-gray-50">
@@ -193,16 +202,18 @@ function BottomBar({ handleKey, ...props }) {
               </div>
             ))}
             <div className="flex justify-center items-center w-full flex-col text-gray-50 dark:text-gray-300 text-center">
-              {generatedDate && (
+              {timeTable.generatedDate && (
                 <p>
                   Wygenerowano:{" "}
-                  <span className="font-semibold">{generatedDate}</span>
+                  <span className="font-semibold">
+                    {timeTable.generatedDate}
+                  </span>
                 </p>
               )}
-              {validDate && (
+              {timeTable.validDate && (
                 <p>
                   Obowiązuje od:{" "}
-                  <span className="font-semibold">{validDate}</span>
+                  <span className="font-semibold">{timeTable.validDate}</span>
                 </p>
               )}
               <Link