diff --git a/src/components/form.tsx b/src/components/form.tsx index a2f5c27..7b1a5b8 100644 --- a/src/components/form.tsx +++ b/src/components/form.tsx @@ -1,11 +1,8 @@ -import Button from '@mui/material/Button' -import Box from '@mui/material/Box' +import { Box } from '@mui/material' import TextField from './text-field' -const SX_SUBMIT_BUTTON = { display: 'none' } - -const Form = ({ +export default function Form({ inputCodes, values, isErrors, @@ -15,30 +12,23 @@ const Form = ({ values: Record isErrors: Record handleNext: () => void -}) => { - const TextFields = inputCodes.map(code => ( - (values[code] = value)} - /> - )) - +}) { return ( { e.preventDefault() - return handleNext() + handleNext() }}> - {TextFields} - + {inputCodes.map(code => ( + (values[code] = value)} + /> + ))} ) } - -export default Form diff --git a/src/components/result-box/result-box.tsx b/src/components/result-box/result-box.tsx index 087247b..e920eb9 100644 --- a/src/components/result-box/result-box.tsx +++ b/src/components/result-box/result-box.tsx @@ -1,5 +1,5 @@ // vendors -import { useRef, useState, useEffect, useMemo } from 'react' +import { useRef, useState, useEffect } from 'react' import { Box, Button, IconButton, Tooltip } from '@mui/material' import dayjs from 'dayjs' // icons @@ -21,11 +21,7 @@ let calculationResults: AnuType[] = [] export default function ResultBox() { const { logEvent } = useFirebase() - const { formValues: temp, setFormValues, setActiveStep } = useGlobals() - - const dataset = useMemo(() => { - return { ...temp } - }, [temp]) + const { formValues: dataset, setFormValues, setActiveStep } = useGlobals() const [isDetailOpen, setIsDetailOpen] = useState(false) const [summaryData, setSummaryData] = useState([]) @@ -33,14 +29,6 @@ export default function ResultBox() { const detailBtnRef = useRef(null) - useEffect(() => { - setFormValues({ ...temp, pricePerKg }) - - calculationResults = calculatePalmGrade(temp) - - setSummaryData(getSummaryData(calculationResults, temp)) - }, [pricePerKg]) - useEffect(() => { setPricePerKg(dataset.pricePerKg || '') }, [dataset.savedAt, dataset.pricePerKg]) @@ -80,6 +68,21 @@ export default function ResultBox() { localStorage.setItem('savedDatasets', JSON.stringify(savedDatasets)) } + function handlePriceChange(value: number) { + setPricePerKg(value) + setFormValues(prev => { + const newValues = { + ...prev, + pricePerKg: value, + } + + calculationResults = calculatePalmGrade(newValues) + setSummaryData(getSummaryData(calculationResults, newValues)) + + return newValues + }) + } + return ( <> setPricePerKg(value)} + onValueChange={handlePriceChange} value={pricePerKg} onBlur={() => logEvent('enter_price')} /> diff --git a/src/components/text-field.tsx b/src/components/text-field.tsx index 0180308..c1759a5 100644 --- a/src/components/text-field.tsx +++ b/src/components/text-field.tsx @@ -6,12 +6,12 @@ import categoriesDataset from '../data/categories' export default function TextField({ code, - toParent, + onValueChange, onBlur, ...props }: { code: string - toParent: (value: number) => void + onValueChange: (value: number) => void onBlur?: () => void value?: string | number isError?: boolean @@ -45,10 +45,10 @@ export default function TextField({ return ( { - if (isError) setIsError(false) - toParent(parseFloat(e.target.value)) - return setValue(e.target.value) + onChange={({ target: { value } }) => { + setIsError(false) + onValueChange(parseFloat(value)) + setValue(value) }} label={category?.name} onBlur={onBlur} diff --git a/tsconfig.app.tsbuildinfo b/tsconfig.app.tsbuildinfo index 3f05968..6e62fbe 100644 --- a/tsconfig.app.tsbuildinfo +++ b/tsconfig.app.tsbuildinfo @@ -1 +1 @@ -{"root":["./src/app.tsx","./src/main.tsx","./src/sw.ts","./src/vite-env.d.ts","./src/classes/category.ts","./src/classes/item.ts","./src/classes/rule.ts","./src/components/disclaimer-dialog.tsx","./src/components/footer.tsx","./src/components/form.tsx","./src/components/header.tsx","./src/components/saved-calculation.tsx","./src/components/stepper.tsx","./src/components/text-field.tsx","./src/components/donation-dialog/donation-dialog.tsx","./src/components/donation-dialog/index.ts","./src/components/donation-dialog/components/qris-dialog.tsx","./src/components/donation-dialog/components/saweria-dialog.tsx","./src/components/result-box/index.ts","./src/components/result-box/result-box.tsx","./src/components/result-box/components/detail-dialog.tsx","./src/components/result-box/components/summary-table.tsx","./src/components/result-box/components/value-table-cell.tsx","./src/components/result-box/components/detail-dialog/components/detail-table.tsx","./src/data/categories.ts","./src/functions/get-saved-datasets.ts","./src/helpers/calculate-palm-grade.ts","./src/helpers/index.ts","./src/hooks/use-firebase.ts","./src/hooks/use-globals.ts","./src/providers/index.tsx","./src/providers/components/firebase-provider.tsx","./src/providers/components/globals-provider.tsx","./vite.config.ts"],"version":"5.6.3"} \ No newline at end of file +{"root":["./src/app.tsx","./src/main.tsx","./src/sw.ts","./src/vite-env.d.ts","./src/classes/category.ts","./src/classes/item.ts","./src/classes/rule.ts","./src/components/disclaimer-dialog.tsx","./src/components/footer.tsx","./src/components/form.tsx","./src/components/header.tsx","./src/components/saved-calculation.tsx","./src/components/stepper.tsx","./src/components/text-field.tsx","./src/components/donation-dialog/donation-dialog.tsx","./src/components/donation-dialog/index.ts","./src/components/donation-dialog/components/qris-dialog.tsx","./src/components/donation-dialog/components/saweria-dialog.tsx","./src/components/feedback-dialog/feedback-dialog.tsx","./src/components/feedback-dialog/index.ts","./src/components/result-box/index.ts","./src/components/result-box/result-box.tsx","./src/components/result-box/components/detail-dialog.tsx","./src/components/result-box/components/summary-table.tsx","./src/components/result-box/components/value-table-cell.tsx","./src/components/result-box/components/detail-dialog/components/detail-table.tsx","./src/data/categories.ts","./src/functions/get-saved-datasets.ts","./src/helpers/calculate-palm-grade.ts","./src/helpers/index.ts","./src/hooks/use-firebase.ts","./src/hooks/use-globals.ts","./src/providers/index.tsx","./src/providers/components/firebase-provider.tsx","./src/providers/components/globals-provider.tsx","./vite.config.ts"],"version":"5.6.3"} \ No newline at end of file