diff --git a/src/App.tsx b/src/App.tsx index 81d9988..3cc1839 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,7 +2,7 @@ import React, { useState } from 'react'; import { useForm, SubmitHandler } from 'react-hook-form'; import { Input } from 'components'; import { getDeliveryFee } from 'calculator'; -import { InputFields, InputDetails } from 'types'; +import { FormValues } from 'types'; import { TYPE_DATETIME, TYPE_NUMBER, @@ -11,38 +11,11 @@ import { } from 'utils'; import style from 'style/style.module.css'; -const INPUT_DETAILS: InputDetails[] = [ - { - id: 'cartValue', - label: 'Cart value (€)', - type: TYPE_TEXT, - description: 'Value of the shopping cart in euros.', - }, - { - id: 'deliveryDistance', - label: 'Delivery distance (meters)', - type: TYPE_NUMBER, - description: 'The distance between the store and location of customer in meters.', - }, - { - id: 'numberOfItems', - label: 'Number of items', - type: TYPE_NUMBER, - description: 'The number of items in the shopping cart of customer.', - }, - { - id: 'orderTime', - label: 'Order time (datetime)', - type: TYPE_DATETIME, - description: 'The date/time when the order is being made', - }, -]; - export default function App() { - const { register, handleSubmit, setError, formState: { errors } } = useForm(); + const { register, handleSubmit, setError, formState: { errors } } = useForm(); const [fee, setFee] = useState(0); - const onSubmit: SubmitHandler = (data) => { + const onSubmit: SubmitHandler = (data) => { if (isNaN(data.cartValue)) { setError('cartValue', { type: 'manual', @@ -88,20 +61,38 @@ export default function App() {

Delivery Fee Calculator

- { - INPUT_DETAILS.map(({ id, label, type, description }) => ( - - )) - } + + + + diff --git a/src/components/Input.tsx b/src/components/Input.tsx index 4eaa958..9d19f3a 100644 --- a/src/components/Input.tsx +++ b/src/components/Input.tsx @@ -1,17 +1,15 @@ import React from 'react'; -import { UseFormRegister, RegisterOptions } from 'react-hook-form'; -import { InputFields } from 'types'; +import { FieldValues } from 'react-hook-form'; import { isEmptyString } from 'utils'; import style from 'style/style.module.css'; type InputPropsType = { - id: keyof InputFields, + id: string, label: string, type: string, description: string, errorMessage: string - datetime: boolean, - register: UseFormRegister + options: FieldValues, } export const Input = ({ @@ -19,20 +17,9 @@ export const Input = ({ id, type, description, - errorMessage = '', - datetime = false, - register, + errorMessage, + options, }: InputPropsType) => { - const options: RegisterOptions = { - required: true, - }; - - if (datetime) { - options.valueAsDate = true; - } else { - options.valueAsNumber = true; - } - const isValid = isEmptyString(errorMessage); return ( @@ -48,14 +35,14 @@ export const Input = ({ id={ id } data-test-id={ id } type={ type } - defaultValue={ datetime ? new Date().toISOString().slice(0, 16) : '' } className={ style.input } + required={ true } aria-label={ label } aria-labelledby={ `${id}-label` } aria-describedby={ `${id}Feedback` } aria-required={ true } aria-invalid={ !isValid } - { ...register(id) } + { ...options } />
{ isValid ? description : `Invalid input. Error: ${errorMessage}` } diff --git a/src/types.ts b/src/types.ts index 3ee3391..fc190bb 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,13 +1,6 @@ -export type InputFields = { +export type FormValues = { cartValue: number, deliveryDistance: number, numberOfItems: number, orderTime: string, } - -export type InputDetails = { - id: keyof InputFields, - label: string, - type: string, - description: string, -}