added option to customize year

src/CalendarApi.tsx

@@ -2,20 +2,22 @@ import { useEffect, useState } from "react";
 
 type Holiday = { "date": string, "localName": string, "countryCode": string, "fixed": string, "global": string, "types": string[] }
 
-async function getText(): Promise<Holiday[]> {
+async function getText(satYear: string): Promise<Holiday[]> {
-    const resp = await fetch("https://date.nager.at/api/v3/publicholidays/2024/DE")
+    return JSON.parse(await (await fetch("https://date.nager.at/api/v3/publicholidays/" + satYear + "/DE")).text());
-    const text_resp = await resp.text();
-    return JSON.parse(text_resp);
 }
 
 function ListHolidays() {
     const [keys, setKeys] = useState<Holiday[]>([]);
+    const [year, setYear] = useState<string>("2024");
+    const [satYear, setSatYear] = useState<string>("2024");
+
     useEffect(() => {
-        getText().then((value) => {
+        getText(satYear).then((value) => {
             setKeys(value);
         });
-    }, [])
+    }, [satYear])
-    return <table>
+    return <>
+        <table>
             <thead>
                 <tr>
                     <th>Date</th>
@@ -23,7 +25,7 @@ function ListHolidays() {
                 </tr>
             </thead>
             <tbody>
-            { keys.map((holiday) => 
+                {keys.map((holiday) =>
                     <tr key={holiday.date + "-" + holiday.localName}>
                         <td>
                             {holiday.date}
@@ -35,6 +37,9 @@ function ListHolidays() {
                 )}
             </tbody>
         </table>
+        <input type="text" value={year} onChange={(e) => { setYear(e.target.value) }} />
+        <input type="submit" onClick={() => { setSatYear(year) }} />
+    </>
 }
 
 export default ListHolidays;