import api from '@/shared/api/api'; import { PredictRequestType, PredictResponseType, } from '@/shared/types/predict'; import { FormEvent, useCallback, useState } from 'react'; import classes from './styles.module.scss'; import { Button } from '@/shared/components/button'; import { Selector } from '@/shared/components/selector'; // MockUp Selectors data options const mockUpOptions: { [key: string]: string[] | number[] } = { brand: [ 'Dell', 'HP', 'Lenovo', 'Apple', 'Asus', 'Acer', 'MSI', 'Microsoft', 'Samsung', 'Toshiba', ], processor: [ 'Intel Core i3 10th Gen', 'Intel Core i5 10th Gen', 'Intel Core i7 10th Gen', 'AMD Ryzen 3 4000 Series', 'AMD Ryzen 5 4000 Series', 'AMD Ryzen 7 4000 Series', ], os: ['Windows 10', 'Windows 11', 'macOS', 'Linux'], gpu: [ 'Integrated', 'NVIDIA GeForce GTX 1650', 'NVIDIA GeForce RTX 3060', 'AMD Radeon RX 5600M', ], display: [13.3, 14.0, 15.6, 17.3], display_type: ['HD', 'Full HD', '4K', 'OLED'], ram: [4, 8, 16, 32], ssd: [0, 256, 512, 1024], weight: [1.2, 1.5, 2.0, 2.5, 3.0], battery_size: [45, 60, 70, 90, 100], release_year: [2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023, 2024], }; const Form = () => { const [request, setRequest] = useState({ 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', }); const [response, setResponse] = useState({ predicted_price: -1, }); 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); const newResponse = await api.predictPrice(request); setResponse(newResponse); }; return (
{fields.map((field) => ( ))}