79 lines
1.9 KiB
TypeScript
Raw Normal View History

2024-10-16 10:18:20 +04:00
import api from '@/shared/api/api';
import {
PredictRequestType,
PredictResponseType,
} from '@/shared/types/predict';
2024-10-30 00:57:52 +04:00
import { FormEvent, useCallback, useState } from 'react';
2024-10-16 10:18:20 +04:00
import classes from './styles.module.scss';
2024-10-30 00:57:52 +04:00
import { Button } from '@/shared/components/button';
import { Selector } from '@/shared/components/selector';
2024-11-05 23:20:46 +04:00
import { mockUpOptions } from '@/shared/constants';
2024-10-16 10:18:20 +04:00
const Form = () => {
2024-10-30 00:57:52 +04:00
const [request, setRequest] = useState<PredictRequestType>({
brand: 'Apple',
processor: 'Core i5 10th Gen',
ram: 16,
os: 'Windows 11',
ssd: 1024,
display: 15.3,
gpu: 'NVIDIA GeForce RTX 3060',
weight: 2.0,
battery_size: 90,
release_year: 2023,
display_type: '4K',
2024-10-30 00:57:52 +04:00
});
const [response, setResponse] = useState<PredictResponseType>({
predicted_price: -1,
});
2024-10-16 10:18:20 +04:00
2024-10-30 00:57:52 +04:00
const fields = Object.keys(request);
const handleInputChange = useCallback(
(updatedRequest: PredictRequestType) => {
setRequest(updatedRequest);
},
[],
);
const updateField = (field: string, value: string) => {
handleInputChange({
...request,
[field]: value,
});
};
const handleGetPredict = async (event: FormEvent) => {
event.preventDefault();
console.log(request);
2024-10-16 10:18:20 +04:00
const newResponse = await api.predictPrice(request);
2024-10-30 00:57:52 +04:00
setResponse(newResponse);
2024-10-16 10:18:20 +04:00
};
return (
2024-10-30 00:57:52 +04:00
<form className={classes.form}>
<div className={classes.selectorList}>
{fields.map((field) => (
<Selector
key={field}
handleSetValue={updateField}
list={mockUpOptions[field]}
2024-10-30 00:57:52 +04:00
field={field}
/>
))}
</div>
<Button
onClick={(e: FormEvent) => handleGetPredict(e)}
2024-11-05 23:20:46 +04:00
label={'Submit'}
2024-10-30 00:57:52 +04:00
/>
{response && (
<span style={{ color: 'white' }}>
Ответ: {response.predicted_price}
</span>
)}
2024-10-16 10:18:20 +04:00
</form>
);
};
export default Form;