diff --git a/src/app/portfolio/[slug]/components/RemoteAssesmentModal.tsx b/src/app/portfolio/[slug]/components/RemoteAssesmentModal.tsx index a98dd0b..818c326 100644 --- a/src/app/portfolio/[slug]/components/RemoteAssesmentModal.tsx +++ b/src/app/portfolio/[slug]/components/RemoteAssesmentModal.tsx @@ -6,6 +6,8 @@ import { Input } from "@/app/shadcn_components/ui/input"; import { Button } from "@/app/shadcn_components/ui/button"; import { Float } from "@headlessui-float/react"; import { ChevronDownIcon } from "@heroicons/react/20/solid"; +import { useMutation } from "@tanstack/react-query"; +import { useSession } from "next-auth/react"; type Option = { label: string; @@ -41,7 +43,7 @@ const selectGoalOptions = [ { label: "Reduce energy consumption", value: "Reduce energy consumption", - disabled: false, + disabled: false, // TODO: Disable }, ]; @@ -63,8 +65,6 @@ const goalValueOptions = [ }, ]; - - export function SelectDropdown({ options, selectedOption, @@ -113,6 +113,68 @@ export function SelectDropdown({ ); } +async function generatePresignedUrl({ + userId, + portfolioId, + fileKey, +}: { + userId: string; + portfolioId: string; + fileKey: string; +}) { + // fileKey is a location in S3 where we want to upload the file + const response = await fetch("/api/upload/csv", { + method: "POST", + body: JSON.stringify({ + userId, + portfolioId, + fileKey, + }), + }); + + if (!response.ok) { + throw new Error("Failed to generate presigned url"); + } + + return response.json(); +} + +function useCreateRemoteAssessment({ portfolioId }: { portfolioId: string }) { + // 1) We want to upload the asset data. To do this, we format the asset data, generate a presigned URL, and upload the data to S3. + // 2) We then want to upload valuation data. To do this, we format the valuation data, generate a presigned URL, and upload the data to S3. + // 3) Trigger the engine!!!! This is an api at /api/plan/trigger with our body that we looked at in Miro + + // Set up the mutation with react-query, to generate a presigned URL + + const session = useSession(); + const userId = String(session.data?.user.dbId); + const fileKey = "8/-1/asset_list.csv"; + + const { + mutate: mutatePresignedUrl, + isLoading: presignedUrlIsLoading, + isError: presignedUrlIsError, + } = useMutation(generatePresignedUrl, { + onSuccess: (data) => { + console.log(data.url); + // On success, upload to that URL!!!! + }, + onError: (error) => { + console.error(error); + }, + }); + + function handleSubmit() { + mutatePresignedUrl({ userId, portfolioId, fileKey }); + console.log("SUCCESS"); // This is where we would want to trigger some kind of use feedback + } + + return { + handleSubmit, + presignedUrlIsLoading, + presignedUrlIsError, + }; +} export default function RemoteAssesmentModal({ portfolioId, @@ -137,7 +199,9 @@ export default function RemoteAssesmentModal({ setScenario(event.target.value); } - function handleAddressLineOneChange(event: React.ChangeEvent) { + function handleAddressLineOneChange( + event: React.ChangeEvent + ) { setAddressLineOne(event.target.value); } @@ -153,6 +217,11 @@ export default function RemoteAssesmentModal({ setValuation(event.target.value); } + const { handleSubmit, presignedUrlIsLoading, presignedUrlIsError } = + useCreateRemoteAssessment({ + portfolioId, + }); + useEffect(() => { function handleButtonDisabled(): boolean { return !( @@ -163,11 +232,19 @@ export default function RemoteAssesmentModal({ postcode && uprn && valuation - ); + ); } setButtonDisabled(handleButtonDisabled()); - }, [scenario, selectedGoal, housingType, addressLineOne, postcode, uprn, valuation]); + }, [ + scenario, + selectedGoal, + housingType, + addressLineOne, + postcode, + uprn, + valuation, + ]); return ( <> @@ -203,12 +280,17 @@ export default function RemoteAssesmentModal({ - {scenario} + className="text-lg font-medium leading-6 text-brandblue mb-3" + > + {scenario}
Scenario Name - +