react 15 refactor and use server actions

.env

@@ -1 +1 @@
-DB_HOST="http://admin-parkfuchs:8090"
+DB_HOST="http://localhost:8090"

app/error.tsx

@@ -24,7 +24,7 @@ export default function Error({
 				bereits informiert.
 			</p>
 			<button
-				className="bg-green max-md:justify-center gap-2 flex items-center text-lg rounded-lg hover:bg-darkGreen text-black w-max py-2 px-4 justify-self-start mx-auto"
+				className="bg-primaryGreen max-md:justify-center gap-2 flex items-center text-lg rounded-lg hover:bg-darkGreen text-black w-max py-2 px-4 justify-self-start mx-auto"
 				onClick={() => window.location.reload()}
 			>
 				Probier es nochmal

app/page.tsx

@@ -3,34 +3,21 @@ import Banner from "../components/Banner";
 import Home from "../components/Home";
 import { getCityCount, getEnabledInboxCities } from "../db/city";
 import { getTGHLink } from "../db/config";
+import { JSX, Suspense } from "react";
 
-export const dynamic = "auto",
-	runtime = "nodejs",
-	revalidate = 0,
-	fetchCache = "auto";
-
-async function fetchData() {
-	const [cities, thgLink] = await Promise.all([
+export default async function Index() {
+	const [cities, thgLink, cityStates] = await Promise.all([
 		getEnabledInboxCities(),
 		getTGHLink(),
+		getCityCount(),
 	]);
 
-	const cityStates = await getCityCount();
-
-	return {
-		cities,
-		cityStates,
-		thgLink,
-	};
-}
-
-export default async function Index() {
-	const { cities = [], thgLink, cityStates } = await fetchData();
-
 	return (
 		<>
-			<Home cities={cities} cityStates={cityStates} />
-			<Banner link={thgLink} />
+			<Suspense fallback={<Loading />}>
+				<Home cities={cities} cityStates={cityStates} />
+				<Banner link={thgLink} />
+			</Suspense>
 			<footer className="left-1/2 text-center text-neutral-600 opacity-90 uppercase tracking-wide font-semibold text-xs pb-5 mb-16">
 				<p className="mb-1 mt-2">
 					Alle Angaben ohne Gewähr
@@ -47,3 +34,9 @@ export default async function Index() {
 		</>
 	);
 }
+
+function Loading(): JSX.Element {
+	return (
+		<p className="text-center text-2xl my-8 p-4">Der Fuchs aufgeladen...</p>
+	);
+}

components/AppNav.tsx

@@ -9,7 +9,7 @@ export const bunqLink = "https://bunq.me/parkfuchs";
 export default function AppNav() {
 	return (
 		<nav
-			className="p-3 w-device sticky top-0 left-0 right-0 bg-green w-full z-20 max-md:py-3 max-md:px-4"
+			className="p-3 w-device sticky top-0 left-0 right-0 bg-primaryGreen w-full z-20 max-md:py-3 max-md:px-4"
 			role="banner"
 			id="top"
 		>

components/AutoCompleteInput.tsx

@@ -1,8 +1,9 @@
-import axios from "axios";
 import { JSX, useEffect, useState } from "react";
 import { useDebounce } from "../functions/debounce";
 import SearchInput from "./SearchInput";
 import { SlimCity } from "./Dialog";
+import { autocomplete } from "../db/city";
+import { ResultCity } from "../db/types";
 
 export interface Properties {
 	onSelectedCity: (city: SlimCity) => void;
@@ -13,7 +14,7 @@ export default function AutoCompleteInput({
 	onSelectedCity,
 	initQuery = "",
 }: Properties): JSX.Element {
-	const [results, setResults] = useState<Array<SlimCity>>([]);
+	const [results, setResults] = useState<ResultCity[]>([]);
 
 	const [isSearching, setIsSearching] = useState(false);
 
@@ -41,12 +42,12 @@ export default function AutoCompleteInput({
 			return;
 		}
 		setIsSearching(true);
-		const response = await axios.get(`/api/autocomplete/${searchTerm}`);
-		setResults(response.data);
+		const response = await autocomplete(searchTerm, 20);
+		setResults(response);
 		setIsSearching(false);
 	};
 
-	const debouncedAutoCompleteCities = useDebounce(autoCompleteCities, 110);
+	const debouncedAutoCompleteCities = useDebounce(autoCompleteCities, 220);
 
 	return (
 		<>

components/Banner.tsx

@@ -7,7 +7,7 @@ interface Props {
 
 export default function Banner({ link }: Props): JSX.Element {
 	return (
-		<div className="fixed left-0 right-0 bottom-0 bg-green z-10 w-full h-[4.3rem] banner-shadow md:h-[5.0rem]">
+		<div className="fixed left-0 right-0 bottom-0 bg-primaryGreen z-10 w-full h-[4.3rem] banner-shadow md:h-[5.0rem]">
 			<Link prefetch={false} href={link} target="_blank">
 				<img
 					src="https://parkfuchs.app/images/banner/banner_parkfuchs_thg.png"

components/CityList.tsx

@@ -105,20 +105,24 @@ export default function CityList({
 				</div>
 			)}
 
-			{items.map((item) => {
+			{items.map((item, index) => {
 				return (
 					<div
 						key={item.id}
-						className="accordion-item-wrapper bg-white w-full"
+						className="accordion-item-wrapper w-full"
 					>
 						<header className="accordion-header mb-0">
 							<h2
 								className={`accordion-button 
-						relative block items-center w-full py-4 px-5
-						text-base text-black text-left
-						bg-white transition focus:outline-none ${
-							isSelected(item.id) ? "accordion-button-open" : ""
-						}`}
+									relative block items-center w-full py-4 px-5
+									text-base text-black text-left
+									bg-white transition focus:outline-none ${
+										isSelected(item.id)
+											? "!bg-primaryGreen"
+											: ""
+									} ${index === 0 ? "rounded-t-md" : ""} ${
+									index === items.length ? "rounded-t-md" : ""
+								}`}
 								role="button"
 								aria-label="Ort ausklappen Button"
 								onClick={() => {
@@ -170,7 +174,7 @@ export default function CityList({
 							}`}
 							aria-labelledby={item.id}
 						>
-							<div className="accordion-body">
+							<div className="accordion-body bg-white">
 								<div
 									className="py-7 px-12 grid gap-4 max-md:px-5 max-md:py-4"
 									aria-label="Ort Information"