complete pages and response

src/pages/laptop/laptop.page.tsx

@@ -32,7 +32,12 @@ const LaptopPredictPage = () => {
 
   const handleGetPredict = async (event: FormEvent) => {
     event.preventDefault();
-    console.log(request);
+    if (response.predicted_price) {
+      setResponse({
+        predicted_price: undefined,
+      });
+      return;
+    }
     const newResponse = await apiLaptop.predictPrice(request);
     setResponse(newResponse);
   };

src/pages/tv/tv.page.tsx

@@ -31,7 +31,12 @@ const TVPredictPage = () => {
 
   const handleGetPredict = async (event: FormEvent) => {
     event.preventDefault();
-    console.log(request);
+    if (response.predicted_price) {
+      setResponse({
+        predicted_price: undefined,
+      });
+      return;
+    }
     const newResponse = await apiTV.predictPrice(request);
     setResponse(newResponse);
   };

src/widgets/form/form.widget.tsx

@@ -1,5 +1,5 @@
 import { PredictResponseType } from '@/shared/types/predict';
-import { FormEvent } from 'react';
+import { FormEvent, useMemo } from 'react';
 import classes from './styles.module.scss';
 import { Button } from '@/shared/components/button';
 import { Selector } from '@/shared/components/selector';
@@ -22,26 +22,35 @@ const Form = <T extends Record<string, string[] | number[]>>({
     ? (Object.keys(selectorsData) as Array<keyof T>)
     : [];
 
+  const buttonLabel = useMemo(
+    () => (response.predicted_price ? 'Back to build' : 'Submit'),
+    [response.predicted_price],
+  );
+
   return (
     <form className={classes.form}>
-      <div className={classes.selectorList}>
+      {!response.predicted_price ? (
-        {fields.map((field) => (
+        <div className={classes.selectorList}>
-          <Expander key={field as string} title={field as string}>
+          {fields.map((field) => (
-            <Selector
+            <Expander key={field as string} title={field as string}>
-              handleSetValue={updateField}
+              <Selector
-              list={selectorsData ? selectorsData[field] : []}
+                handleSetValue={updateField}
-              field={field as string}
+                list={selectorsData ? selectorsData[field] : []}
-            />
+                field={field as string}
-          </Expander>
+              />
-        ))}
+            </Expander>
-      </div>
+          ))}
-      <div className={classes.divider} />
+        </div>
-      <Button onClick={(e: FormEvent) => handleGetPredict(e)}>Submit</Button>
+      ) : (
-      {response.predicted_price !== undefined && (
+        <div className={classes.response}>
-        <span style={{ color: 'white' }}>
+          <h3 className={classes.title}>Estimated price:</h3>
-          Ответ: {response.predicted_price}
+          <p className={classes.price}>{response.predicted_price} руб</p>
-        </span>
+        </div>
       )}
+      <div className={classes.divider} />
+      <Button onClick={(e: FormEvent) => handleGetPredict(e)}>
+        {buttonLabel}
+      </Button>
     </form>
   );
 };

src/widgets/form/styles.module.scss

@@ -1,4 +1,5 @@
-@use '../../shared/assets/styles/adaptive' as adaptive;
+@use '@shared/assets/styles/adaptive' as adaptive;
+@use '@shared/assets/styles/fonts' as fonts;
 
 .form {
     display: flex;
@@ -15,6 +16,25 @@
         gap: 8px;
     }
 
+    .response {
+        display: flex;
+        flex-direction: column;
+        padding: 16px;
+        gap: 16px;
+        background-color: var(--primary-white);
+        border-radius: 16px;
+
+        .title {
+            margin: 0;
+            @include fonts.urbanist-font(28px, 600);
+        }
+
+        .price {
+            margin: 0;
+            @include fonts.urbanist-font(20px, 500);
+        }
+    }
+
     .divider {
         height: 4px;
         width: 100%;