diff --git a/src/shared/api/api.ts b/src/shared/api/api.ts index 602490a..d193e6d 100644 --- a/src/shared/api/api.ts +++ b/src/shared/api/api.ts @@ -2,14 +2,21 @@ import axios from 'axios'; import { PredictRequestType, PredictResponseType } from '../types/predict'; class Api { - readonly baseURL = `${import.meta.env.VITE_SERVER_URL}`; + readonly baseURL = import.meta.env.VITE_SERVER_URL; - predictPrice = async (data: PredictRequestType) => { - const response = await axios.post( - `${this.baseURL}/predict_price`, - data, - ); - return response.data; + predictPrice = async ( + data: PredictRequestType, + ): Promise => { + try { + const response = await axios.post( + `${this.baseURL}/predict_price`, + data, + ); + return response.data; + } catch (error) { + console.error('Error predicting price:', error); + throw error; + } }; } diff --git a/src/shared/components/selector/selector.component.tsx b/src/shared/components/selector/selector.component.tsx index 5f9d46d..4d52bc3 100644 --- a/src/shared/components/selector/selector.component.tsx +++ b/src/shared/components/selector/selector.component.tsx @@ -4,7 +4,7 @@ import classes from './styles.module.scss'; type SelectorProps = { field: string; handleSetValue: (field: string, value: string) => void; - list: string[]; + list: string[] | number[]; }; const Selector: FC = ({ field, handleSetValue, list }) => { @@ -16,12 +16,6 @@ const Selector: FC = ({ field, handleSetValue, list }) => { handleSetValue(field, value); }; - const handleInputChange = (e: React.ChangeEvent) => { - const value = e.target.value; - setInputValue(value); - handleSetValue(field, value); - }; - return (
-
); }; diff --git a/src/shared/types/predict.ts b/src/shared/types/predict.ts index d409a7a..600b449 100644 --- a/src/shared/types/predict.ts +++ b/src/shared/types/predict.ts @@ -1,9 +1,9 @@ export type PredictRequestType = { brand: string; processor: string; - ram: string; + ram: number; os: string; - ssd: string; + ssd: number; display: number; gpu: string; weight: number; diff --git a/src/widgets/form/form.widget.tsx b/src/widgets/form/form.widget.tsx index bfb2e4b..50ca123 100644 --- a/src/widgets/form/form.widget.tsx +++ b/src/widgets/form/form.widget.tsx @@ -8,19 +8,57 @@ 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: '', - processor: '', - ram: '', - os: '', - ssd: '', - display: -1, - gpu: '', - weight: -1, - battery_size: -1, - release_year: -1, - display_type: '', + 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, @@ -44,6 +82,7 @@ const Form = () => { const handleGetPredict = async (event: FormEvent) => { event.preventDefault(); + console.log(request); const newResponse = await api.predictPrice(request); setResponse(newResponse); }; @@ -54,8 +93,8 @@ const Form = () => { {fields.map((field) => ( updateField(field, value)} - list={[]} + handleSetValue={updateField} + list={mockUpOptions[field]} field={field} /> ))} @@ -64,7 +103,11 @@ const Form = () => { onClick={(e: FormEvent) => handleGetPredict(e)} label={'Отправить'} /> - {response && Ответ: {response.predicted_price}} + {response && ( + + Ответ: {response.predicted_price} + + )} ); }; diff --git a/src/widgets/form/styles.module.scss b/src/widgets/form/styles.module.scss index 06e400c..2512773 100644 --- a/src/widgets/form/styles.module.scss +++ b/src/widgets/form/styles.module.scss @@ -9,6 +9,7 @@ width: 100%; justify-content: center; padding: 25px; + border-radius: 8px; .selectorList { display: flex;