From 4ffb6567ba95d99c5e2e2273c2cb4285c695dc1d Mon Sep 17 00:00:00 2001 From: THIS ONE IS A LITTLE BIT TRICKY KRUB Date: Thu, 13 Mar 2025 20:23:45 +0700 Subject: [PATCH] feat: update harvest and planting detail forms to handle data changes and improve type safety --- .../(sidebar)/setup/harvest-detail-form.tsx | 63 ++++++++++++++++++- frontend/app/(sidebar)/setup/page.tsx | 55 ++++++---------- .../(sidebar)/setup/planting-detail-form.tsx | 17 +---- 3 files changed, 82 insertions(+), 53 deletions(-) diff --git a/frontend/app/(sidebar)/setup/harvest-detail-form.tsx b/frontend/app/(sidebar)/setup/harvest-detail-form.tsx index 326daba..c356b46 100644 --- a/frontend/app/(sidebar)/setup/harvest-detail-form.tsx +++ b/frontend/app/(sidebar)/setup/harvest-detail-form.tsx @@ -24,7 +24,11 @@ import { Button } from "@/components/ui/button"; type harvestSchema = z.infer; -export default function HarvestDetailsForm() { +export default function HarvestDetailsForm({ + onChange, +}: { + onChange: (data: harvestSchema) => void; +}) { const form = useForm({ resolver: zodResolver(harvestDetailsFormSchema), defaultValues: { @@ -38,9 +42,15 @@ export default function HarvestDetailsForm() { expectedYieldPerAcre: 0, }, }); + const onSubmit: (data: harvestSchema) => void = (data) => { + onChange(data); + }; return (
- + { + // convert to number + const value = e.target.value + ? parseInt(e.target.value, 10) + : ""; + field.onChange(value); + }} /> @@ -81,6 +98,13 @@ export default function HarvestDetailsForm() { id="daysToMaturity" className="w-96" {...field} + onChange={(e) => { + // convert to number + const value = e.target.value + ? parseInt(e.target.value, 10) + : ""; + field.onChange(value); + }} /> @@ -105,6 +129,13 @@ export default function HarvestDetailsForm() { id="harvestWindow" className="w-96" {...field} + onChange={(e) => { + // convert to number + const value = e.target.value + ? parseInt(e.target.value, 10) + : ""; + field.onChange(value); + }} /> @@ -129,6 +160,13 @@ export default function HarvestDetailsForm() { id="estimatedLossRate" className="w-96" {...field} + onChange={(e) => { + // convert to number + const value = e.target.value + ? parseInt(e.target.value, 10) + : ""; + field.onChange(value); + }} /> @@ -178,6 +216,13 @@ export default function HarvestDetailsForm() { id="estimatedRevenue" className="w-96" {...field} + onChange={(e) => { + // convert to number + const value = e.target.value + ? parseInt(e.target.value, 10) + : ""; + field.onChange(value); + }} /> @@ -202,6 +247,13 @@ export default function HarvestDetailsForm() { id="expectedYieldPer100ft" className="w-96" {...field} + onChange={(e) => { + // convert to number + const value = e.target.value + ? parseInt(e.target.value, 10) + : ""; + field.onChange(value); + }} /> @@ -226,6 +278,13 @@ export default function HarvestDetailsForm() { id="expectedYieldPerAcre" className="w-96" {...field} + onChange={(e) => { + // convert to number + const value = e.target.value + ? parseInt(e.target.value, 10) + : ""; + field.onChange(value); + }} /> diff --git a/frontend/app/(sidebar)/setup/page.tsx b/frontend/app/(sidebar)/setup/page.tsx index 80eed7a..9394e96 100644 --- a/frontend/app/(sidebar)/setup/page.tsx +++ b/frontend/app/(sidebar)/setup/page.tsx @@ -4,48 +4,31 @@ import PlantingDetailsForm from "./planting-detail-form"; import HarvestDetailsForm from "./harvest-detail-form"; import { Separator } from "@/components/ui/separator"; import GoogleMapWithDrawing from "@/components/google-map-with-drawing"; +import { + plantingDetailsFormSchema, + harvestDetailsFormSchema, +} from "@/schemas/application.schema"; +import { z } from "zod"; + +type plantingSchema = z.infer; +type harvestSchema = z.infer; export default function SetupPage() { - type PlantingDetails = { - daysToEmerge: number; - plantSpacing: number; - rowSpacing: number; - plantingDepth: number; - averageHeight: number; - isPerennial: boolean; - autoCreateTasks: boolean; - startMethod?: string; - lightProfile?: string; - soilConditions?: string; - plantingDetails?: string; - pruningDetails?: string; - }; - - const [plantingDetails, setPlantingDetails] = - useState(null); - const [harvestDetails, setHarvestDetails] = useState(null); + const [plantingDetails, setPlantingDetails] = useState( + null + ); + const [harvestDetails, setHarvestDetails] = useState( + null + ); const [mapData, setMapData] = useState(null); // handle planting details submission - const handlePlantingDetailsChange = (data: { - daysToEmerge: number; - plantSpacing: number; - rowSpacing: number; - plantingDepth: number; - averageHeight: number; - isPerennial: boolean; - autoCreateTasks: boolean; - startMethod?: string; - lightProfile?: string; - soilConditions?: string; - plantingDetails?: string; - pruningDetails?: string; - }) => { + const handlePlantingDetailsChange = (data: plantingSchema) => { setPlantingDetails(data); }; // handle harvest details submission - const handleHarvestDetailsChange = (data: SetStateAction) => { + const handleHarvestDetailsChange = (data: harvestSchema) => { setHarvestDetails(data); }; @@ -54,9 +37,11 @@ export default function SetupPage() { setMapData(data); }; + // log the changes useEffect(() => { console.log(plantingDetails); - }, [plantingDetails]); + console.log(harvestDetails); + }, [plantingDetails, harvestDetails]); const handleSubmit = () => { if (!plantingDetails || !harvestDetails || !mapData) { @@ -105,7 +90,7 @@ export default function SetupPage() {
- {/* */} +
{/* Map Section */} diff --git a/frontend/app/(sidebar)/setup/planting-detail-form.tsx b/frontend/app/(sidebar)/setup/planting-detail-form.tsx index a75f606..13f7f5f 100644 --- a/frontend/app/(sidebar)/setup/planting-detail-form.tsx +++ b/frontend/app/(sidebar)/setup/planting-detail-form.tsx @@ -23,23 +23,8 @@ import { import { Textarea } from "@/components/ui/textarea"; import { Switch } from "@/components/ui/switch"; import { Button } from "@/components/ui/button"; -import { useState } from "react"; type plantingSchema = z.infer; -interface FormData { - daysToEmerge: number; - plantSpacing: number; - rowSpacing: number; - plantingDepth: number; - averageHeight: number; - startMethod?: string; - lightProfile?: string; - soilConditions?: string; - plantingDetails?: string; - pruningDetails?: string; - isPerennial: boolean; - autoCreateTasks: boolean; -} export default function PlantingDetailsForm({ onChange, @@ -64,7 +49,7 @@ export default function PlantingDetailsForm({ }, }); - const onSubmit = (data: FormData) => { + const onSubmit = (data: plantingSchema) => { onChange(data); }; return (