Update build info and refactor to fix delay bug, and rename prop from…

… `toParent` to `onValueChange` (#18)
sensasi-delight · Oct 9, 2024 · d31ab7a · d31ab7a
1 parent 0689e73
commit d31ab7a
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 45 deletions.
diff --git 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<string, number>
     isErrors: Record<string, boolean>
     handleNext: () => void
-}) => {
-    const TextFields = inputCodes.map(code => (
-        <TextField
-            key={code}
-            code={code}
-            value={values[code] || ''}
-            isError={isErrors[code]}
-            // setIsError={isErrors[code]}
-
-            toParent={value => (values[code] = value)}
-        />
-    ))
-
+}) {
     return (
         <Box
             component="form"
             onSubmit={e => {
                 e.preventDefault()
-                return handleNext()
+                handleNext()
             }}>
-            {TextFields}
-            <Button type="submit" sx={SX_SUBMIT_BUTTON}></Button>
+            {inputCodes.map(code => (
+                <TextField
+                    key={code}
+                    code={code}
+                    value={values[code] || ''}
+                    isError={isErrors[code]}
+                    onValueChange={value => (values[code] = value)}
+                />
+            ))}
         </Box>
     )
 }
-
-export default Form
diff --git 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,26 +21,14 @@ 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<TypeB[]>([])
     const [pricePerKg, setPricePerKg] = useState(dataset.pricePerKg || '')
 
     const detailBtnRef = useRef<HTMLButtonElement>(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 (
         <>
             <Box
@@ -90,7 +93,7 @@ export default function ResultBox() {
                 }}>
                 <TextField
                     code="price"
-                    toParent={value => setPricePerKg(value)}
+                    onValueChange={handlePriceChange}
                     value={pricePerKg}
                     onBlur={() => logEvent('enter_price')}
                 />

diff --git 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 (
         <TextFieldVendor
             value={value}
-            onChange={e => {
-                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
@@ -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"}
+{"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"}