From af34d4c750cfebcda1c1a420866f514584b4ee05 Mon Sep 17 00:00:00 2001 From: majusss Date: Fri, 29 Dec 2023 23:08:19 +0100 Subject: [PATCH] types(need more work): add props type in components --- src/components/Layout.tsx | 5 +++- src/components/Substitutions.tsx | 14 +++++----- src/components/Substitutions/Content.tsx | 10 ++++++- .../Substitutions/DropdownBranch.tsx | 10 +++++-- .../Substitutions/DropdownTeachers.tsx | 14 +++++++--- src/components/Substitutions/Jumbotron.tsx | 6 +++-- src/components/TimetableLarge.tsx | 2 +- src/pages/[...all].tsx | 27 +++++++++---------- src/types/props.ts | 7 ++--- src/types/substitutions.ts | 1 + src/utils/getter.ts | 2 ++ 11 files changed, 63 insertions(+), 35 deletions(-) diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx index 8fbb4ba..fc0ecbc 100644 --- a/src/components/Layout.tsx +++ b/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); diff --git a/src/components/Substitutions.tsx b/src/components/Substitutions.tsx index 2d069de..a42cf64 100644 --- a/src/components/Substitutions.tsx +++ b/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([]); const [checkedBranches, setCheckedBranches] = useState([]); - 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) { - {props.error == true ? ( + {props.substitutions.status == false ? (

Przepraszamy za utrudnienia

); -} \ No newline at end of file +} diff --git a/src/components/Substitutions/Content.tsx b/src/components/Substitutions/Content.tsx index 567833a..fbd6c3f 100644 --- a/src/components/Substitutions/Content.tsx +++ b/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, filtersBranches: Array; diff --git a/src/components/Substitutions/DropdownBranch.tsx b/src/components/Substitutions/DropdownBranch.tsx index 9f358b1..617aff4 100644 --- a/src/components/Substitutions/DropdownBranch.tsx +++ b/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({}); const router = useRouter(); const handleSearch = (event: React.ChangeEvent) => { diff --git a/src/components/Substitutions/DropdownTeachers.tsx b/src/components/Substitutions/DropdownTeachers.tsx index 5745de0..ec3296d 100644 --- a/src/components/Substitutions/DropdownTeachers.tsx +++ b/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({}); const router = useRouter(); const handleSearch = (event: React.ChangeEvent) => { @@ -22,8 +28,8 @@ function DropdownTeachers({ props, onCheckboxChange }) { }; useEffect(() => { - onCheckboxChange(checkedItems); - }, [checkedItems, onCheckboxChange]); + onCheckboxChangeTeacher(checkedItems); + }, [checkedItems, onCheckboxChangeTeacher]); return (
); -function Jumbotron({ props }) { +function Jumbotron({ props }: { props: props }) { return (
@@ -68,7 +68,9 @@ function Jumbotron({ props }) {

- {props?.message ? props?.message : props?.substitutions?.timeRange} + {props?.substitutions?.status + ? props?.substitutions?.timeRange + : "Wystąpił błąd podczas pobierania danych"}

{props?.substitutions?.tables?.length > 0 && ( <> diff --git a/src/components/TimetableLarge.tsx b/src/components/TimetableLarge.tsx index 5f6e506..1f2476d 100644 --- a/src/components/TimetableLarge.tsx +++ b/src/components/TimetableLarge.tsx @@ -37,7 +37,7 @@ function TimetableLarge({ isShortHours, setIsShortHours, ...props }) { >
- {!status ? ( + {!status && !(typeof hours == "object") ? (

Nie znaleziono pasującego planu lekcji

diff --git a/src/pages/[...all].tsx b/src/pages/[...all].tsx index 9e7a92b..031a4a1 100644 --- a/src/pages/[...all].tsx +++ b/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 }) => { const router = useRouter(); if (router.query.all.toString() === "zastepstwa") { @@ -56,7 +56,6 @@ const MainRoute = ({ ...props }) => { window.removeEventListener("keydown", handleKeyDown); }; }, [handleKey]); - return ; } }; @@ -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, }; }; diff --git a/src/types/props.ts b/src/types/props.ts index 9493668..3c2b4c9 100644 --- a/src/types/props.ts +++ b/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 = { diff --git a/src/types/substitutions.ts b/src/types/substitutions.ts index f5df595..03622d1 100644 --- a/src/types/substitutions.ts +++ b/src/types/substitutions.ts @@ -15,6 +15,7 @@ type substitutionTableType = { }; type substitutions = { + status: boolean; timeRange: string; tables: substitutionTableType[]; }; diff --git a/src/utils/getter.ts b/src/utils/getter.ts index 9e5779a..2d5fc0d 100644 --- a/src/utils/getter.ts +++ b/src/utils/getter.ts @@ -70,12 +70,14 @@ export async function getSubstitutionsObject(): Promise { }); return { + status: true, timeRange, tables, }; } catch (error) { console.error(error); return { + status: false, timeRange: "", tables: [], };