Venelin

Step 2

Dec 4th, 2020
691
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, {useState} from 'react'
  2. import { useForm } from "react-hook-form";
  3. import { useData, useProduct } from '../../utils/DataProvider'
  4. import Display from './Display';
  5. import screen from '../../assets/mock/display.png' // TODO: remove me after
  6.  
  7.  
  8. const Step2 = (props) => {
  9.   const serverProducts =  props.data;
  10.   const [state, setState] = useData()
  11.   const [products, setProducts] = useProduct();
  12.  
  13.   const [isType, setType] = useState('Indoor');
  14.  
  15.   const types = ["Indoor", "Outdoor"];
  16.   const indoorProductsData = serverProducts && serverProducts.filter(e => e["Indoor / Outdoor"] === 'INDOOR');
  17.   const outdoorProductsData = serverProducts && serverProducts.filter(e => e["Indoor / Outdoor"] === 'OUTDOOR');
  18.  
  19.   const filterTypes = (data) =>  (data.map(e => (
  20.     {
  21.       id: e.ID,
  22.       name: e.Product
  23.     }
  24.   )))
  25.   const {handleSubmit } = useForm();
  26.  
  27.   const onSubmit = data => {
  28.     setState(
  29.       state => ({
  30.         ...state,
  31.         step: 3
  32.       })
  33.     );
  34.  
  35.     setProducts(products => {
  36.       const activeProduct = products[state.activeProductIndex];
  37.         activeProduct.typeId= 6;
  38.         activeProduct.typeName= data.types;
  39.         activeProduct.productId= Math.floor(Math.random() * 10);
  40.         activeProduct.productName= data.serverProducts;
  41.         return [...products];
  42.     });
  43.   }
  44.  
  45.  
  46.   return (
  47.     <form className="form-root" onSubmit={handleSubmit(onSubmit)}>
  48.       <div className="form form--step2">
  49.  
  50.         <Display data={screen} />
  51.  
  52.         <div className="form__item">
  53.           <label htmlFor="type" className="form__label">Type</label>
  54.           <select
  55.               className="ui-select"
  56.               name="type"
  57.               onChange={(e) => setType(e.target.value)}
  58.               >
  59.             {types && types.map(value => (
  60.               <option key={value} value={value}>
  61.                 {value}
  62.               </option>
  63.             ))}
  64.           </select>
  65.         </div>
  66.         <div className="form__item">
  67.           <label htmlFor="serverProducts" className="form__label">Product</label>
  68.           <select
  69.               className="ui-select"
  70.               name="serverProducts"
  71.             >
  72.             { isType === 'Indoor' && filterTypes(indoorProductsData).map(item => (
  73.               <option key={item.id} value={item.name}>
  74.                 {item.name}
  75.               </option>
  76.  
  77.             ))}
  78.  
  79.             { isType === 'Outdoor' && filterTypes(outdoorProductsData).map(item => (
  80.               <option key={item.id} value={item.name}>
  81.                 {item.name}
  82.               </option>
  83.             ))}
  84.  
  85.           </select>
  86.         </div>
  87.       </div>
  88.       <div className="button-nav">
  89.         <div>
  90.         <button className="btn" onClick={() => setState(state => ({...state,step: 1}))}>Previous</button>
  91.         </div>
  92.         <div>
  93.           <button className="btn btn--active" type="submit">Next</button>
  94.         </div>
  95.       </div>
  96.     </form>
  97.   )
  98. }
  99. export default Step2;
RAW Paste Data