Url Search Parameters

app/components/ui/CalculatorInput.tsx

@@ -5,6 +5,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { Household } from "@/app/models/Household";
 import Dashboard from "./Dashboard";
 import { formSchema, formType } from "@/app/schemas/formSchema";
+import { useSearchParams } from "next/navigation";
 
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { ClipLoader } from "react-spinners";
@@ -22,17 +23,21 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 
 const CalculatorInput = () => {
+  const [view, setView] = useState("form");
+  const [data, setData] = useState<Household | null>(null);
+
+  const searchParams = useSearchParams();
+  const urlPostcode = searchParams.get("postcode");
+
   const methods = useForm<formType>({
     resolver: zodResolver(formSchema),
     defaultValues: {
       houseType: "D", // Default value for house type
       maintenancePercentage: 0.015,
+      housePostcode: urlPostcode || "",
     },
   });
 
-  const [view, setView] = useState("form");
-  const [data, setData] = useState<Household | null>(null);
-
   const onSubmit = async (data: formType) => {
     setView("loading");
     const response = await fetch("/api", {
@@ -188,7 +193,8 @@ const CalculatorInput = () => {
                     </RadioGroup>
                   </FormControl>
                   <FormDescription>
-                    Select a level for maintenance spend, as a percentage of house cost. 
+                    Select a level for maintenance spend, as a percentage of
+                    house cost.
                   </FormDescription>
                   <FormMessage />
                 </FormItem>

app/page.tsx

@@ -1,8 +1,12 @@
 import CalculatorInput from "./components/ui/CalculatorInput";
+import { ClipLoader } from "react-spinners";
+import { Suspense } from "react";
 export default function Home() {
   return (
     <main>
-      <CalculatorInput />
+      <Suspense fallback={<ClipLoader />}>
+        <CalculatorInput />
+      </Suspense>
     </main>
   );
 }

package.json

@@ -42,10 +42,10 @@
     "mathjs": "^13.1.1",
     "next": "^14.2.15",
     "postcode": "^5.1.0",
+    "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.53.1",
     "react-spinners": "^0.14.1",
-    "react": "^18",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
     "ts-node": "^10.9.2",