mirror of
https://github.com/Hestia-Homes/assessment-model.git
synced 2026-06-30 12:55:02 +00:00
fixed params decoration
This commit is contained in:
Khalim Conn-Kowlessar
parent
cd79cbeadf
commit
3dcb0fef8d
6 changed files with 3 additions and 175 deletions
2
package-lock.json
generated
2
package-lock.json
generated
|
|
@ -47,7 +47,7 @@
|
|||
"eslint-config-next": "13.4.3",
|
||||
"framer-motion": "^12.23.24",
|
||||
"lucide-react": "^0.233.0",
|
||||
"next": "^15.4.2",
|
||||
"next": "^15.5.7",
|
||||
"next-auth": "^4.22.1",
|
||||
"next-axiom": "^1.9.2",
|
||||
"next-themes": "^0.3.0",
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@
|
|||
"eslint-config-next": "13.4.3",
|
||||
"framer-motion": "^12.23.24",
|
||||
"lucide-react": "^0.233.0",
|
||||
"next": "^15.4.2",
|
||||
"next": "^15.5.7",
|
||||
"next-auth": "^4.22.1",
|
||||
"next-axiom": "^1.9.2",
|
||||
"next-themes": "^0.3.0",
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import * as React from "react";
|
|||
|
||||
export default async function PortfolioLayout(props: {
|
||||
children: React.ReactNode;
|
||||
params: Promise<{ slug: string; propertyId: string }>;
|
||||
params: Promise<{ slug: string }>;
|
||||
}) {
|
||||
const params = await props.params;
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ import BackToPortfolioButton from "@/app/components/building-passport/BackToPort
|
|||
import { ExclamationCircleIcon } from "@heroicons/react/24/outline";
|
||||
// import "@tremor/react/dist/esm/tremor.css";
|
||||
|
||||
|
||||
function EstimatedDataNotification() {
|
||||
return (
|
||||
<div className="flex items-center text-brandmidblue mt-4">
|
||||
|
|
@ -27,7 +26,6 @@ export default async function DashboardLayout(props: {
|
|||
|
||||
const propertyId = params.propertyId ?? "";
|
||||
const portfolioId = params.slug ?? "";
|
||||
|
||||
|
||||
// The layout is a server component by default so we can fetch meta data here
|
||||
const propertyMeta = await getPropertyMeta(params.propertyId);
|
||||
|
|
|
|||
|
|
@ -1,25 +0,0 @@
|
|||
import BackToPortfolio from "@/app/components/portfolio/BackToPortfolio";
|
||||
|
||||
export default async function Layout(
|
||||
props: {
|
||||
children: React.ReactNode;
|
||||
params: Promise<{ slug: string; lmkKey: string }>;
|
||||
}
|
||||
) {
|
||||
const params = await props.params;
|
||||
|
||||
const {
|
||||
children
|
||||
} = props;
|
||||
|
||||
const portfolioId = params.slug;
|
||||
|
||||
return (
|
||||
<section>
|
||||
<div className="mt-2">
|
||||
<BackToPortfolio portfolioId={portfolioId} />
|
||||
</div>
|
||||
{children}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,145 +0,0 @@
|
|||
"use client";
|
||||
|
||||
import { useState, use } from "react";
|
||||
import SearchPostcodeButton from "../../../components/search/SearchPostcodeButton";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { SearchData, SearchResult } from "@/types/epc";
|
||||
import SelectAddressButton from "../../../components/search/SelectAddressButton";
|
||||
import ToggleAddressButton from "../../../components/search/ToggleAddressButton";
|
||||
|
||||
const defaultToggleClass =
|
||||
"mb-1 block max-w-sm rounded-lg border border-gray-200 bg-white p-6 shadow hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700";
|
||||
|
||||
const toggledButtonClass =
|
||||
"text-white mb-1 block max-w-sm rounded-lg border border-gray-200 bg-brandblue p-6 shadow hover:bg-hoverblue dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700";
|
||||
|
||||
export default function Search(props: { params: Promise<{ slug: string }> }) {
|
||||
const params = use(props.params);
|
||||
const [postcode, setPostcode] = useState("");
|
||||
const [buttonDisabled, setButtonDisabled] = useState(true);
|
||||
const [data, setData] = useState<null | SearchData>(null);
|
||||
const [address, setAddress] = useState("");
|
||||
const [addressButtonDisabled, setAddressButtonDisabled] = useState(true);
|
||||
// Keep track of which lmk-key is currently toggled. Initially, none
|
||||
// are toggled
|
||||
const [currentlyToggled, setCurrentlyToggled] = useState("");
|
||||
const router = useRouter();
|
||||
|
||||
const handleSubmit = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
fetchData().catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handlePostcodeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
// If the text is empty, disable the button, otherwise enable it
|
||||
setPostcode(e.target.value);
|
||||
if (e.target.value) {
|
||||
setButtonDisabled(false);
|
||||
return;
|
||||
}
|
||||
setButtonDisabled(true);
|
||||
return;
|
||||
};
|
||||
|
||||
// TODO: This might take a moment to fetch data, add a loading state?
|
||||
async function fetchData() {
|
||||
// TODO - add strict typing to the api response
|
||||
setCurrentlyToggled("");
|
||||
setAddressButtonDisabled(true);
|
||||
try {
|
||||
const response = await fetch(`/api/search?postcode=${postcode}`);
|
||||
const data = (await response.json()) as SearchData;
|
||||
|
||||
setData(data);
|
||||
} catch (error) {
|
||||
console.error("Error fetching data:", error);
|
||||
}
|
||||
}
|
||||
|
||||
const redirectToProperty = () => {
|
||||
if (data === null) return;
|
||||
|
||||
const res = data.rows.find(
|
||||
(row: SearchResult) => row["lmk-key"] === currentlyToggled
|
||||
) as SearchResult;
|
||||
|
||||
const portfolioId = params.slug;
|
||||
const lmkKey = res["lmk-key"];
|
||||
|
||||
router.push(
|
||||
`/portfolio/${portfolioId}/property/${lmkKey}?postcode=${postcode}`
|
||||
);
|
||||
};
|
||||
|
||||
const submitProps = {
|
||||
buttonDisabled: buttonDisabled,
|
||||
onClickFunc: fetchData,
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col items-center pt-8">
|
||||
<div className="w-1/2 flex flex-col justify-center bg-gray-100 rounded p-4 shadow-md">
|
||||
<div className="w-full flex justify-center text-center mb-7 text-gray-700">
|
||||
We will search for the most recent data about your property, so we can
|
||||
begin to build a profile of the works that can be done and the impact
|
||||
that will have
|
||||
</div>
|
||||
<form className="w-full flex flex-col items-center">
|
||||
<label
|
||||
className="mb-2 block text-sm font-bold text-gray-700 text-center"
|
||||
htmlFor="search"
|
||||
>
|
||||
Enter your postcode to get started
|
||||
</label>
|
||||
<div className="flex justify-center">
|
||||
<input
|
||||
id="search"
|
||||
className="w-full appearance-none rounded border-2 border-gray-200 bg-gray-200 px-8 py-2 leading-tight text-gray-700 focus:border-brandmidblue focus:bg-white focus:outline-none"
|
||||
type="text"
|
||||
placeholder="Enter your postcode"
|
||||
onChange={handlePostcodeChange}
|
||||
onKeyDown={handleSubmit}
|
||||
/>
|
||||
</div>
|
||||
<SearchPostcodeButton {...submitProps} />
|
||||
</form>
|
||||
{data && (
|
||||
<div>
|
||||
<div className="flex justify-center mt-7">
|
||||
Scroll to find your address from the list
|
||||
</div>
|
||||
<ul className="mt-3 overflow-y-auto flex flex-col items-center max-h-60">
|
||||
{data.rows.map((row: SearchResult) => {
|
||||
return (
|
||||
<ToggleAddressButton
|
||||
key={row["lmk-key"]}
|
||||
rowKey={row["lmk-key"]}
|
||||
setButtonDisabled={setAddressButtonDisabled}
|
||||
setAddress={setAddress}
|
||||
setCurrentlyToggled={setCurrentlyToggled}
|
||||
address={row.address}
|
||||
toggleClassName={
|
||||
currentlyToggled === row["lmk-key"]
|
||||
? toggledButtonClass
|
||||
: defaultToggleClass
|
||||
}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
<div className="flex justify-end">
|
||||
<SelectAddressButton
|
||||
buttonDisabled={addressButtonDisabled}
|
||||
redirectFunc={redirectToProperty}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue