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-30 02:15:26 +04:00
|
|
|
|
|
2024-10-16 10:18:20 +04:00
|
|
|
|
const Form = () => {
|
2024-10-30 00:57:52 +04:00
|
|
|
|
const [request, setRequest] = useState<PredictRequestType>({
|
2024-10-30 02:15:26 +04:00
|
|
|
|
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();
|
2024-10-30 02:15:26 +04:00
|
|
|
|
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}
|
2024-10-30 02:15:26 +04:00
|
|
|
|
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
|
|
|
|
/>
|
2024-10-30 02:15:26 +04:00
|
|
|
|
{response && (
|
|
|
|
|
<span style={{ color: 'white' }}>
|
|
|
|
|
Ответ: {response.predicted_price}
|
|
|
|
|
</span>
|
|
|
|
|
)}
|
2024-10-16 10:18:20 +04:00
|
|
|
|
</form>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default Form;
|