added option to customize year

src/CalendarApi.tsx

@@ -2,39 +2,44 @@ 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 <>
-        <thead>
+        <table>
-            <tr>
+            <thead>
-                <th>Date</th>
+                <tr>
-                <th>Name</th>
+                    <th>Date</th>
-            </tr>
+                    <th>Name</th>
-        </thead>
-        <tbody>
-            { keys.map((holiday) => 
-                <tr key={holiday.date + "-" + holiday.localName}>
-                    <td>
-                        {holiday.date}
-                    </td>
-                    <td>
-                        {holiday.localName}
-                    </td>
                 </tr>
-            )}
+            </thead>
-        </tbody>
+            <tbody>
-    </table> 
+                {keys.map((holiday) =>
+                    <tr key={holiday.date + "-" + holiday.localName}>
+                        <td>
+                            {holiday.date}
+                        </td>
+                        <td>
+                            {holiday.localName}
+                        </td>
+                    </tr>
+                )}
+            </tbody>
+        </table>
+        <input type="text" value={year} onChange={(e) => { setYear(e.target.value) }} />
+        <input type="submit" onClick={() => { setSatYear(year) }} />
+    </>
 }
 
 export default ListHolidays;