shop.js

gistfile1.txt

// -- definim aplicatia si o montam la id-ul #app vezi .html
const root = ReactDOM.createRoot(app)

// -- definim componenta App (entrypoint-ul aplicatiei)
const App = () => {
  // -- definim state-ul aplicatiei
  const [state, setState] = React.useState({
    user: null,
    cart: [],
    products: [
      {
        id: 1,
        name: 'Telefon mobil',
        price: 250.40
      },
      {
        id: 2,
        name: 'Televizor',
        price: 790.40
      }      
    ]
  })
  
  // -- handler pentru a face update la state
  const updateState = (patch) => setState(prev => ({...prev, ...patch}))
  
  return (<div>
    {state.user 
      ? <MyAccount state={state} updateState={updateState} /> 
      : <Login state={state} updateState={updateState} />
    }
    <hr />
    <h2>Application state</h2>
    <pre>{JSON.stringify(state, null, 2)}</pre>
  </div>)
}

// -- Login Page
const Login = ({state, updateState}) => {
  const [formState, setFormState] = React.useState({})
  
  const handleLogin = (e) => {
    e.preventDefault();
    
    // dummy user/password
    
    // -- facem update la state-ul principal cu state-ul form-ului
    if(formState.username === 'admin' && formState.password === 'admin')
      updateState({user: formState.username})
    else
      setFormState({error: 'User incorrect, try with u: admin p: admin'})
  };
  
  const handleFieldInput = ({target}) => setFormState(prev => ({
    ...prev,
    [target.name]: target.value
  }))
  
  const isButtonEnabled = formState.username && formState.password;
  
  return <div>
    <h1>Login</h1>
    <form onSubmit={handleLogin}>
      <input name="username" type="text" onChange={handleFieldInput} placeholder="Username" /><br />
      <input name="password" type="password" onChange={handleFieldInput} placeholder="Password" /><br /><br />
      <button type="submit" disabled={!isButtonEnabled}>Login</button>
    </form>
    <pre>
      {JSON.stringify(formState, null, 2)}
    </pre>
  </div>
}

// -- My Account Page
const MyAccount = ({state, updateState}) => {
  const handleLogout = () => {
    updateState({user: null})
  }
  
  return <div>
    <h1>Salut, {state.user}!     
      <button onClick={handleLogout}>Logout</button>
    </h1>
    <Cart state={state} updateState={updateState}/>
    <hr />
    <Products state={state} updateState={updateState} />
  </div>
}

// -- Cart component
const Cart = ({state, updateState}) => {
  const productsCount = state.cart.length;
  const getTotal = state.cart.reduce(function(prev, current){
    return prev + current.price
  }, 0)
  
  return <div>
    <h2>Cosul tau:</h2>
    Products: {productsCount}<br />
    <ol>{state.cart.map(el => {
    return <li key={el.id}>
      <strong>{el.name}</strong><br />
      <i>{el.price}</i><br />
      <button onClick={() => addToCart(el)}>Adauga in cos</button>
    </li>
  })}</ol>    
    Total: {getTotal}
  </div>
}

// -- Product listing
const Products = ({state, updateState}) => {
  // -- adaugam produsul la cele existente
  const addToCart = (product) => updateState({
    cart: {
      ...product,
      [product.id]: product
    }
  })
  
  return <ol>{state.products.map(el => {
    return <li key={el.id}>
      <strong>{el.name}</strong><br />
      <i>{el.price}</i><br />
      <button onClick={() => addToCart(el)}>Adauga in cos</button>
    </li>
  })}</ol>
}

// -- randam aplicatia
root.render(<App />)