schulze/fire
schulze/fire
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Releases Activity

auto update on value change

Browse Source
This commit is contained in:
Felix Schulze 2025-05-01 17:24:45 +02:00
parent 0d12ab9a47
commit 541c443efd
1 changed files with 44 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/app/components/FireCalculatorForm.tsx
View File

@ -1,6 +1,5 @@
"use client"; "use client";
import * as React from "react";
import { useState } from "react"; import { useState } from "react";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
@ -232,6 +231,10 @@ export default function FireCalculatorForm() {
placeholder="e.g., 10000" placeholder="e.g., 10000"
type="number" type="number"
{...field} {...field}
onChange={(value) => {
field.onChange(value);
void form.handleSubmit(onSubmit)();
}}
/> />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
@ -249,6 +252,10 @@ export default function FireCalculatorForm() {
placeholder="e.g., 500" placeholder="e.g., 500"
type="number" type="number"
{...field} {...field}
onChange={(value) => {
field.onChange(value);
void form.handleSubmit(onSubmit)();
}}
/> />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
@ -266,6 +273,10 @@ export default function FireCalculatorForm() {
placeholder="e.g., 30" placeholder="e.g., 30"
type="number" type="number"
{...field} {...field}
onChange={(value) => {
field.onChange(value);
void form.handleSubmit(onSubmit)();
}}
/> />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
@ -283,6 +294,10 @@ export default function FireCalculatorForm() {
placeholder="e.g., 90" placeholder="e.g., 90"
type="number" type="number"
{...field} {...field}
onChange={(value) => {
field.onChange(value);
void form.handleSubmit(onSubmit)();
}}
/> />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
@ -301,6 +316,10 @@ export default function FireCalculatorForm() {
type="number" type="number"
step="0.1" step="0.1"
{...field} {...field}
onChange={(value) => {
field.onChange(value);
void form.handleSubmit(onSubmit)();
}}
/> />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
@ -319,6 +338,10 @@ export default function FireCalculatorForm() {
type="number" type="number"
step="0.1" step="0.1"
{...field} {...field}
onChange={(value) => {
field.onChange(value);
void form.handleSubmit(onSubmit)();
}}
/> />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
@ -338,6 +361,10 @@ export default function FireCalculatorForm() {
placeholder="e.g., 2000" placeholder="e.g., 2000"
type="number" type="number"
{...field} {...field}
onChange={(value) => {
field.onChange(value);
void form.handleSubmit(onSubmit)();
}}
/> />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
@ -354,11 +381,15 @@ export default function FireCalculatorForm() {
<FormLabel>Retirement Age: {field.value}</FormLabel> <FormLabel>Retirement Age: {field.value}</FormLabel>
<FormControl> <FormControl>
<Slider <Slider
name="retirementAge"
value={[field.value]} value={[field.value]}
min={form.getValues().currentAge + 1} min={18}
max={form.getValues().lifeExpectancy - 1} max={form.getValues("lifeExpectancy")}
step={1} step={1}
onValueChange={field.onChange} onValueChange={(value) => {
field.onChange(...value);
void form.handleSubmit(onSubmit)();
}}
className="py-4" className="py-4"
/> />
</FormControl> </FormControl>
@ -366,12 +397,13 @@ export default function FireCalculatorForm() {
</FormItem> </FormItem>
)} )}
/> />
<FormItem className="col-span-full"></FormItem>
</div> </div>
{!result && (
<Button type="submit" className="w-full"> <Button type="submit" className="w-full">
Calculate Calculate
</Button> </Button>
)}
{result?.yearlyData && ( {result?.yearlyData && (
<Card className="rounded-md shadow-none"> <Card className="rounded-md shadow-none">
<CardHeader> <CardHeader>
@ -494,8 +526,8 @@ export default function FireCalculatorForm() {
<ReferenceLine <ReferenceLine
x={ x={
irlYear + irlYear +
(form.getValues().retirementAge - (form.getValues("retirementAge") -
form.getValues().currentAge) form.getValues("currentAge"))
} }
stroke="var(--chart-2)" stroke="var(--chart-2)"
strokeWidth={2} strokeWidth={2}
@ -547,8 +579,8 @@ export default function FireCalculatorForm() {
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<p className="text-3xl font-bold"> <p className="text-3xl font-bold">
{form.getValues().lifeExpectancy - {form.getValues("lifeExpectancy") -
form.getValues().retirementAge} form.getValues("retirementAge")}
</p> </p>
</CardContent> </CardContent>
</Card> </Card>