1  "use client";
 2  
 3  import ProviderResults from "@/app/components/provider-results";
 4  import RoutingInput from "@/app/components/routing-input";
 5  import { useRouter, useSearchParams } from "next/navigation";
 6  import { useImmer } from "use-immer";
 7  import { useEffect, useState } from "react";
 8  
 9  export default function Home() {
10    const router = useRouter();
11    const params = useSearchParams();
12    const [currentUrl, setCurrenUrl] = useState(false);
13  
14    const [tripInformation, setTripInformation] = useImmer({
15      distance_kilometer: params.get("distance_kilometer") ?? 100,
16      time_minutes: params.get("time_minutes") ?? 60,
17      roundtrip: params.get("roundtrip") === "true" ?? false,
18      free_parking: params.get("free_parking") === "true" ?? false,
19    });
20  
21    useEffect(() => {
22      updateNavigationParams(tripInformation);
23    }, [tripInformation]);
24  
25    const updateNavigationParams = (tripInfo) => {
26      let newUrl =
27        "/?" +
28        Object.keys(tripInfo)
29          .map(
30            (key) =>
31              `${encodeURIComponent(key)}=${encodeURIComponent(tripInfo[key])}`
32          )
33          .join("&");
34      router.replace(newUrl, { scroll: false, shallow: true });
35      setCurrenUrl("https://welkedeelauto.nl" + newUrl);
36    };
37  
38    return (
39      <main>
40        <RoutingInput
41          tripInformation={tripInformation}
42          setTripInformation={setTripInformation}
43          currentUrl={currentUrl}
44        />
45        <ProviderResults tripInformation={tripInformation} />
46      </main>
47    );
48  }