types(need more work): add props type in components

src/components/Layout.tsx

@@ -15,7 +15,10 @@ import Message from "./Message";
 
 const Footer = dynamic(() => import("./Footer"));
 
-function Layout({ handleKey, ...props }) {
+function Layout({
+  handleKey,
+  ...props
+}: props & { handleKey: (key: string) => void }) {
   const [isShortHours, setIsShortHours] = useState(false);
   const [isSnowing, setIsSnowing] = useState(false);
 

src/components/Substitutions.tsx

@@ -13,13 +13,13 @@ import { GetStaticProps } from "next";
 import { load } from "cheerio";
 import Message from "@/components/Message";
 
-export default function Substitutions({ ...props }: any) {
+export default function Substitutions({ ...props }: props) {
   const [checkedTeachers, setCheckedTeachers] = useState<any[]>([]);
   const [checkedBranches, setCheckedBranches] = useState<any[]>([]);
-  const handleCheckboxChange = (checkedItems: any[]) => {
+  const onCheckboxChangeTeacher = (checkedItems: any[]) => {
     setCheckedTeachers(checkedItems);
   };
-  const handleCheckboxChangeBranch = (checkedItems: any[]) => {
+  const onCheckboxChangeBranch = (checkedItems: any[]) => {
     setCheckedBranches(checkedItems);
   };
 
@@ -56,13 +56,13 @@ export default function Substitutions({ ...props }: any) {
         <Jumbotron props={props} />
         <DropdownTeachers
           props={props}
-          onCheckboxChange={handleCheckboxChange}
+          onCheckboxChangeTeacher={onCheckboxChangeTeacher}
         />
         <DropdownBranch
           props={props}
-          onCheckboxChangeBranch={handleCheckboxChangeBranch}
+          onCheckboxChangeBranch={onCheckboxChangeBranch}
         />
-        {props.error == true ? (
+        {props.substitutions.status == false ? (
           <div className="dark:text-gray-400 text-gray-500 text-center mb-10">
             <h1 className="text-xl">Przepraszamy za utrudnienia</h1>
             <a
@@ -83,4 +83,4 @@ export default function Substitutions({ ...props }: any) {
       </Layout>
     </>
   );
-}
+}

src/components/Substitutions/Content.tsx

@@ -7,7 +7,15 @@ import {
 import Link from "next/link";
 import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
-function Content({ props, checkedTeachers, checkedBranches }) {
+function Content({
+  props,
+  checkedTeachers,
+  checkedBranches,
+}: {
+  props: props;
+  checkedTeachers: any;
+  checkedBranches: any;
+}) {
   const [isCopied, setIsCopied] = useState(false);
   const router = useRouter();
   let filtersTeachers: Array<string>, filtersBranches: Array<string>;

src/components/Substitutions/DropdownBranch.tsx

@@ -4,9 +4,15 @@ import { getQueryItems } from "@/utils/getQueryItems";
 import { handleCheckboxChange } from "@/utils/handleCheckboxChange";
 import { XMarkIcon } from "@heroicons/react/24/outline";
 
-function DropdownBranch({ props, onCheckboxChangeBranch }) {
+function DropdownBranch({
+  props,
+  onCheckboxChangeBranch,
+}: {
+  props: props;
+  onCheckboxChangeBranch: (checkedItems: any[]) => void;
+}) {
   const [searchBranch, setSearchBranch] = useState("");
-  const [checkedItems, setCheckedItems] = useState({});
+  const [checkedItems, setCheckedItems] = useState<any>({});
   const router = useRouter();
 
   const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {

src/components/Substitutions/DropdownTeachers.tsx

@@ -4,9 +4,15 @@ import { getQueryItems } from "@/utils/getQueryItems";
 import { handleCheckboxChange } from "@/utils/handleCheckboxChange";
 import { XMarkIcon } from "@heroicons/react/24/outline";
 
-function DropdownTeachers({ props, onCheckboxChange }) {
+function DropdownTeachers({
+  props,
+  onCheckboxChangeTeacher,
+}: {
+  props: props;
+  onCheckboxChangeTeacher: (checkedItems: any[]) => void;
+}) {
   const [searchTeachers, setSearchTeachers] = useState("");
-  const [checkedItems, setCheckedItems] = useState({});
+  const [checkedItems, setCheckedItems] = useState<any>({});
   const router = useRouter();
 
   const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -22,8 +28,8 @@ function DropdownTeachers({ props, onCheckboxChange }) {
   };
 
   useEffect(() => {
-    onCheckboxChange(checkedItems);
-  }, [checkedItems, onCheckboxChange]);
+    onCheckboxChangeTeacher(checkedItems);
+  }, [checkedItems, onCheckboxChangeTeacher]);
 
   return (
     <div

src/components/Substitutions/Jumbotron.tsx

@@ -45,7 +45,7 @@ const ButtonComponent = ({
   </button>
 );
 
-function Jumbotron({ props }) {
+function Jumbotron({ props }: { props: props }) {
   return (
     <div className="py-8 px-4 mx-auto max-w-screen-xl text-center">
       <div className="flex justify-center items-center mb-4 md:mb-0 -ml-0 md:-ml-16">
@@ -68,7 +68,9 @@ function Jumbotron({ props }) {
         </h1>
       </div>
       <p className="md:my-4 mb-2 transition-all text-xl font-normal text-gray-500 lg:text-xl sm:px-16 lg:px-48 dark:text-gray-400">
-        {props?.message ? props?.message : props?.substitutions?.timeRange}
+        {props?.substitutions?.status
+          ? props?.substitutions?.timeRange
+          : "Wystąpił błąd podczas pobierania danych"}
       </p>
       {props?.substitutions?.tables?.length > 0 && (
         <>

src/components/TimetableLarge.tsx

@@ -37,7 +37,7 @@ function TimetableLarge({ isShortHours, setIsShortHours, ...props }) {
         >
           <table className="w-full text-sm text-left transition-all duration-200 text-gray-500 dark:text-gray-300">
             <caption className="p-5 transition-all text-lg font-semibold text-left text-gray-900 bg-white dark:text-gray-300 dark:bg-[#202020]">
-              {!status ? (
+              {!status && !(typeof hours == "object") ? (
                 <p className="transition-all text-lg font-normal text-gray-500 lg:text-xl mr-1 dark:text-gray-400">
                   Nie znaleziono pasującego planu lekcji
                 </p>

src/pages/[...all].tsx

@@ -5,13 +5,13 @@ import fetchTimetableList from "@/utils/fetchTimetableList";
 import fetchTimetable from "@/utils/fetchTimetable";
 import { convertTextDate, removeUndefined } from "@/utils/helpers";
 import { GetStaticPaths } from "next";
-import { GetStaticProps } from "next/types";
+import { GetStaticProps, NextPage } from "next/types";
 import axios from "axios";
 import { load } from "cheerio";
 import Substitutions from "@/components/Substitutions";
 import { getSubstitutionsObject } from "@/utils/getter";
 
-const MainRoute = ({ ...props }) => {
+const MainRoute: NextPage<props> = ({ ...props }) => {
   const router = useRouter();
 
   if (router.query.all.toString() === "zastepstwa") {
@@ -56,7 +56,6 @@ const MainRoute = ({ ...props }) => {
         window.removeEventListener("keydown", handleKeyDown);
       };
     }, [handleKey]);
-
     return <Layout {...props} handleKey={handleKey} />;
   }
 };
@@ -128,20 +127,20 @@ export const getStaticProps: GetStaticProps = async (context) => {
   const { data } = await fetchTimetableList();
   const { classes, teachers, rooms } = data;
 
+  const props: props = {
+    status: ok,
+    timeTableID: id,
+    timeTable,
+    classes,
+    teachers,
+    rooms,
+    siteTitle: timeTable?.title,
+    text,
+    substitutions: await getSubstitutionsObject(),
   };
 
   return {
-    props: {
-      status: ok,
-      timeTable,
-      classes,
-      teachers,
-      rooms,
-      timeTableID: id,
-      siteTitle: timeTable?.title,
-      text,
-      substitutions: await getSubstitutionsObject(),
-    },
+    props,
     revalidate: 3600,
   };
 };

src/types/props.ts

@@ -27,13 +27,14 @@ type nameValueType = {
 
 type props = {
   status: boolean;
-  text: string;
-  siteTitle: string;
   timeTableID: string;
   timeTable: timeTableType;
   classes: nameValueType[];
-  rooms: nameValueType[];
   teachers: nameValueType[];
+  rooms: nameValueType[];
+  siteTitle: string;
+  text: string;
+  substitutions: substitutions;
 };
 
 type dropdownSearchType = {

src/types/substitutions.ts

@@ -15,6 +15,7 @@ type substitutionTableType = {
 };
 
 type substitutions = {
+  status: boolean;
   timeRange: string;
   tables: substitutionTableType[];
 };

src/utils/getter.ts

@@ -70,12 +70,14 @@ export async function getSubstitutionsObject(): Promise<substitutions> {
     });
 
     return {
+      status: true,
       timeRange,
       tables,
     };
   } catch (error) {
     console.error(error);
     return {
+      status: false,
       timeRange: "",
       tables: [],
     };