From 0b7947a29a37a5003663ba4ca8180ceacc7d55d2 Mon Sep 17 00:00:00 2001 From: Gabriele Granello Date: Fri, 13 Dec 2024 09:25:29 +0100 Subject: [PATCH 1/5] nuqs installation --- package-lock.json | 33 +++++++++++++++++++++++++++++++++ package.json | 3 ++- 2 files changed, 35 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index 5024ef05..77008636 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ "lucide-react": "^0.460.0", "mathjs": "^13.1.1", "next": "^14.2.15", + "nuqs": "^2.2.3", "postcode": "^5.1.0", "react": "^18", "react-dom": "^18", @@ -8104,6 +8105,12 @@ "node": ">=16 || 14 >=14.17" } }, + "node_modules/mitt": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz", + "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==", + "license": "MIT" + }, "node_modules/mkdirp": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-3.0.1.tgz", @@ -8288,6 +8295,32 @@ "node": ">=8" } }, + "node_modules/nuqs": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/nuqs/-/nuqs-2.2.3.tgz", + "integrity": "sha512-nMCcUW06KSqEXA0xp+LiRqDpIE59BVYbjZLe0HUisJAlswfihHYSsAjYTzV0lcE1thfh8uh+LqUHGdQ8qq8rfA==", + "license": "MIT", + "dependencies": { + "mitt": "^3.0.1" + }, + "peerDependencies": { + "@remix-run/react": ">=2", + "next": ">=14.2.0", + "react": ">=18.2.0 || ^19.0.0-0", + "react-router-dom": ">=6" + }, + "peerDependenciesMeta": { + "@remix-run/react": { + "optional": true + }, + "next": { + "optional": true + }, + "react-router-dom": { + "optional": true + } + } + }, "node_modules/nwsapi": { "version": "2.2.10", "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.10.tgz", diff --git a/package.json b/package.json index 7dec9d76..241055bb 100644 --- a/package.json +++ b/package.json @@ -41,11 +41,12 @@ "lucide-react": "^0.460.0", "mathjs": "^13.1.1", "next": "^14.2.15", + "nuqs": "^2.2.3", "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", From e596bac1050d3fe7d7ca2b7cfaf3a6b22eca8b8c Mon Sep 17 00:00:00 2001 From: Gabriele Granello Date: Fri, 13 Dec 2024 09:42:02 +0100 Subject: [PATCH 2/5] add url postcode --- app/components/ui/CalculatorInput.tsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/app/components/ui/CalculatorInput.tsx b/app/components/ui/CalculatorInput.tsx index fcc55dd8..e7fa0e8a 100644 --- a/app/components/ui/CalculatorInput.tsx +++ b/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(null); + + const searchParams = useSearchParams(); + const urlPostcode = searchParams.get("postcode"); + const methods = useForm({ 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(null); - const onSubmit = async (data: formType) => { setView("loading"); const response = await fetch("/api", { @@ -188,7 +193,8 @@ const CalculatorInput = () => { - Select a level for maintenance spend, as a percentage of house cost. + Select a level for maintenance spend, as a percentage of + house cost. From f20ed6028efc6219721d3c82adc432ef1efa4d97 Mon Sep 17 00:00:00 2001 From: Gabriele Granello Date: Fri, 13 Dec 2024 09:43:58 +0100 Subject: [PATCH 3/5] unistall nuqs --- package-lock.json | 33 --------------------------------- package.json | 1 - 2 files changed, 34 deletions(-) diff --git a/package-lock.json b/package-lock.json index 77008636..5024ef05 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,7 +22,6 @@ "lucide-react": "^0.460.0", "mathjs": "^13.1.1", "next": "^14.2.15", - "nuqs": "^2.2.3", "postcode": "^5.1.0", "react": "^18", "react-dom": "^18", @@ -8105,12 +8104,6 @@ "node": ">=16 || 14 >=14.17" } }, - "node_modules/mitt": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz", - "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==", - "license": "MIT" - }, "node_modules/mkdirp": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-3.0.1.tgz", @@ -8295,32 +8288,6 @@ "node": ">=8" } }, - "node_modules/nuqs": { - "version": "2.2.3", - "resolved": "https://registry.npmjs.org/nuqs/-/nuqs-2.2.3.tgz", - "integrity": "sha512-nMCcUW06KSqEXA0xp+LiRqDpIE59BVYbjZLe0HUisJAlswfihHYSsAjYTzV0lcE1thfh8uh+LqUHGdQ8qq8rfA==", - "license": "MIT", - "dependencies": { - "mitt": "^3.0.1" - }, - "peerDependencies": { - "@remix-run/react": ">=2", - "next": ">=14.2.0", - "react": ">=18.2.0 || ^19.0.0-0", - "react-router-dom": ">=6" - }, - "peerDependenciesMeta": { - "@remix-run/react": { - "optional": true - }, - "next": { - "optional": true - }, - "react-router-dom": { - "optional": true - } - } - }, "node_modules/nwsapi": { "version": "2.2.10", "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.10.tgz", diff --git a/package.json b/package.json index 241055bb..8d970663 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,6 @@ "lucide-react": "^0.460.0", "mathjs": "^13.1.1", "next": "^14.2.15", - "nuqs": "^2.2.3", "postcode": "^5.1.0", "react": "^18", "react-dom": "^18", From 2258e54648581aaa818924da35488d2fcd6178ad Mon Sep 17 00:00:00 2001 From: Gabriele Granello Date: Fri, 13 Dec 2024 10:26:14 +0100 Subject: [PATCH 4/5] add suspense block --- app/page.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/app/page.tsx b/app/page.tsx index b1765f30..51df322e 100644 --- a/app/page.tsx +++ b/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 (
- + }> + +
); } From 4aabf7633ee188a96dfa7d125c98887beb1e6506 Mon Sep 17 00:00:00 2001 From: Gabriele Granello Date: Fri, 13 Dec 2024 16:03:25 +0100 Subject: [PATCH 5/5] add all the other components --- app/components/ui/CalculatorInput.tsx | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/app/components/ui/CalculatorInput.tsx b/app/components/ui/CalculatorInput.tsx index e7fa0e8a..c12848ff 100644 --- a/app/components/ui/CalculatorInput.tsx +++ b/app/components/ui/CalculatorInput.tsx @@ -28,13 +28,31 @@ const CalculatorInput = () => { const searchParams = useSearchParams(); const urlPostcode = searchParams.get("postcode"); + const urlHouseSize = searchParams.get("houseSize"); + const urlHouseAge = searchParams.get("houseAge"); + const urlHouseBedrooms = searchParams.get("houseBedrooms"); + const urlHouseType = searchParams.get("houseType"); + const urlMaintenancePercentage = searchParams.get("maintenancePercentage"); const methods = useForm({ resolver: zodResolver(formSchema), defaultValues: { - houseType: "D", // Default value for house type - maintenancePercentage: 0.015, + houseType: + urlHouseType === "D" || + urlHouseType === "F" || + urlHouseType === "T" || + urlHouseType === "S" + ? urlHouseType + : "D", // Default value for house type + maintenancePercentage: [0.015, 0.02, 0.0375].includes( + Number(urlMaintenancePercentage) + ) + ? (Number(urlMaintenancePercentage) as 0.015 | 0.02 | 0.0375) // Type assertion + : 0.015, housePostcode: urlPostcode || "", + houseSize: Number(urlHouseSize) || undefined, + houseAge: Number(urlHouseAge) || undefined, + houseBedrooms: Number(urlHouseBedrooms) || undefined, }, });