CORS is Sucks a big longer p.... product

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<PredictResponseType>(
-      `${this.baseURL}/predict_price`,
-      data,
-    );
-    return response.data;
+  predictPrice = async (
+    data: PredictRequestType,
+  ): Promise<PredictResponseType> => {
+    try {
+      const response = await axios.post<PredictResponseType>(
+        `${this.baseURL}/predict_price`,
+        data,
+      );
+      return response.data;
+    } catch (error) {
+      console.error('Error predicting price:', error);
+      throw error;
+    }
   };
 }
 

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<SelectorProps> = ({ field, handleSetValue, list }) => {
@@ -16,12 +16,6 @@ const Selector: FC<SelectorProps> = ({ field, handleSetValue, list }) => {
     handleSetValue(field, value);
   };
 
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value;
-    setInputValue(value);
-    handleSetValue(field, value);
-  };
-
   return (
     <div className={classes.selectorContainer}>
       <select
@@ -38,13 +32,6 @@ const Selector: FC<SelectorProps> = ({ field, handleSetValue, list }) => {
           </option>
         ))}
       </select>
-      <input
-        type="text"
-        className={classes.input}
-        value={inputValue}
-        onChange={handleInputChange}
-        placeholder="Or type your own"
-      />
     </div>
   );
 };

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;

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<PredictRequestType>({
-    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<PredictResponseType>({
     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) => (
           <Selector
             key={field}
-            handleSetValue={(value) => updateField(field, value)}
-            list={[]}
+            handleSetValue={updateField}
+            list={mockUpOptions[field]}
             field={field}
           />
         ))}
@@ -64,7 +103,11 @@ const Form = () => {
         onClick={(e: FormEvent) => handleGetPredict(e)}
         label={'Отправить'}
       />
-      {response && <span>Ответ: {response.predicted_price}</span>}
+      {response && (
+        <span style={{ color: 'white' }}>
+          Ответ: {response.predicted_price}
+        </span>
+      )}
     </form>
   );
 };

src/widgets/form/styles.module.scss

@@ -9,6 +9,7 @@
     width: 100%;
     justify-content: center;
     padding: 25px;
+    border-radius: 8px;
 
     .selectorList {
         display: flex;