import { changeOrderByPrice, getPriceColor } from './Functions'

test('order ascending', () => {
    const productsOreder = [
        {
            id: 1,
            name: 'Chachopo',
            price: 30,
        },
        {
            id: 3,
            name: 'Navajas',
            price: 25,
        },
        {
            id: 2,
            name: 'Chorizo a la sidra',
            price: 15,
        }
    ]
    const products = [

        {
            id: 3,
            name: 'Navajas',
            price: 25,
        },
        {
            id: 1,
            name: 'Chachopo',
            price: 30,
        },
        {
            id: 2,
            name: 'Chorizo a la sidra',
            price: 15,
        }
    ]
    expect(changeOrderByPrice(products)).toStrictEqual(productsOreder);
    expect(changeOrderByPrice()).toBe(null);
})

test('color red', () => {
    expect(getPriceColor(30)).toBe('red');
})

test('color orange', () => {
    expect(getPriceColor(25)).toBe('orange');
})

test('color green', () => {
    expect(getPriceColor()).toBe('green');
    expect(getPriceColor(undefined)).toBe('green');
    expect(getPriceColor(null)).toBe('green');
    expect(getPriceColor(15)).toBe('green');
})

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Select from './Select';

const languages = [
  {
    value: 'es',
    text: 'español'
  },
  {
    value: 'en',
    text: 'english'
  }
]

const countries = [
  {
    value: 'es',
    text: 'spain'
  },
  {
    value: 'usa',
    text: 'usa'
  }
]

class App extends React.Component {

  state = {
    selectedLanguage: 'es',
    selectedCountry: 'es',
  }
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <Select 
            items={languages} 
            value={this.state.selectedLanguage} 
            onChange={(e) => this.setState({ selectedLanguage: e.target.value })}
          />

          <Select 
            items={countries} 
            value={this.state.selectedCountry} 
            onChange={(e) => this.setState({ selectedCountry: e.target.value })}
          />
        </header>
      </div>
    );
  }
}

export default App;

import React from 'react'
import InputError from './InputError'

export default class FormTest extends React.Component {

  render() {
    return (
      <>
        <InputError />
      </>
    )
  }
}

export const sum = (num1, num2) => num1 + num2

import React from 'react'

const validText = 'A tope con React'

export default class InputError extends React.Component {

  state = {
    text: ''
  }

  render() {
    return(
      <>
        <input
          type="text"
          value={this.state.text}
          onChange={e => this.setState({ text: e.target.value })}
        />
        {this.state.text !== validText && <p style={{color: 'red'}}>El texto introducido no mola</p>}
      </>
    )
  }
}

import React from 'react'

export default class Login extends React.Component {

  state = {
    username: '',
    password: '',
  }

  handleChange = e => {
    this.setState({
      [e.target.name]: e.target.value
    })
  }

  checkForm = () => {
    return this.state.username && this.state.password.length >= 8
  }

  onSubmitForm = e => {
    console.log(this.state)
    e.preventDefault()
  }

  render() {
    return (
      <form onSubmit={this.onSubmitForm} onChange={this.handleChange}>
        <input name="username" type="text" />
        <input name="password" type="password" />
        <button disabled={!this.checkForm()} type="submit">Login</button>
      </form>
    )
  }

}

import React from 'react'

export default props =>
  <select value={props.value} onChange={props.onChange}>
    {props.items.map(val => (
      <option value={val}>{val}</option>
    ))}
  </select>

import { sum } from './helpers'

test('Should return 4', () => {
  expect(sum(2, 2)).toBe(4)
})

<Title text="Necesito partir en componentes todo esto" />
        <Text>Para ello puedo usar React que me permitirá poder reutilizar todos esos componentes. Para ello tengo que:</Text>
        <List>
          <ListItem>Observar el HTML</ListItem>
          <ListItem>Pensar en como puedo extraer cada trozo en componentes</ListItem>
          <ListItem>Usarlos en React</ListItem>
        </List>
        <Link to="https://reactjs.org/" text="React Docs" />

import React from 'react'

export default props => <h1>{props.text}</h1>

import React from 'react'

export default props =>
  <p>{props.children}</p>

import React from 'react'

export default props =>
  <ul>
    {props.children}
  </ul>

import React from 'react'

export default props => <li>{props.children}</li>

import React from 'react'

export default props =>
  <a href={props.to} target={props.openInNewTab ? '_blank' : '_self'}>{props.text}</a>

import React from 'react'

import './App.css'
import productsConstants from './products.constants'
import ProductsList from './ProductsList'

class App extends React.Component {

  state = {
    selectedProducts: [],
    codeText: '',
    applyDiscount: false,
  }

  addProduct = product => {
    this.setState({ selectedProducts: [...this.state.selectedProducts, product] })
  }

  removeProduct = product => {
    this.setState({ selectedProducts: this.state.selectedProducts.filter(p => p.id !== product.id) })
  }

  getTotalPrice = () => {
    let totalPrice = this.state.selectedProducts.reduce((prev, next) => prev + next.price, 0)
    if (this.state.applyDiscount) totalPrice *= 0.90
    return totalPrice
  }

  applyDiscount = () => {
    if (this.state.codeText === 'SAVE10') {
      this.setState({ applyDiscount: true })
    } else {
      alert('Invalid code')
    }
  }

  onHandleCode = e => {
    this.setState({ codeText: e.target.value })
  }

  componentDidUpdate() {
    localStorage.setItem('state', JSON.stringify(this.state))
  }

  componentDidMount() {
    this.setState(JSON.parse(localStorage.getItem('state')))
  }

  render() {
    return (
      <div>
        <div>
          <h1>Products</h1>
          <ProductsList products={productsConstants} onClick={this.addProduct} actionLabel="Add product" />
        </div>
        <div>
          <h1>Selected products</h1>
          <ProductsList products={this.state.selectedProducts} onClick={this.removeProduct} actionLabel="Remove product" />
          <p>Total price: {this.getTotalPrice()}</p>
          <input type="text" placeholder="Type code" onChange={this.onHandleCode} />
          <button onClick={this.applyDiscount}>Apply discount</button>
        </div>
      </div>
    )
  }

}

export default App

import React from 'react'

const ProductsList = props =>
  props.products.map(product => (
    <div key={product.id}>
      <div>Name: {product.name}</div>
      <div>Price: {product.price}</div>
      <img width="100" src={product.img} alt="" />
      <button onClick={() => props.onClick(product)}>{props.actionLabel}</button>
    </div>
  ))


export default ProductsList

export default [
  {
    id: 1,
    name: 'iPhone 11',
    price: 700,
    img: 'https://thumb.pccomponentes.com/w-530-530/articles/23/233093/n1.jpg'
  },
  {
    id: 2,
    name: 'iPhone 12',
    price: 800,
    img: 'https://thumb.pccomponentes.com/w-530-530/articles/23/233099/b1.jpg'
  },
  {
    id: 3,
    name: 'iPhone 12S',
    price: 1000,
    img: 'https://thumb.pccomponentes.com/w-530-530/articles/17/170988/iphone-xs-gold-58-2-g97c-uw.jpg'
  }
]

export const getHobbies = (hobby, checked, hobbies) => {
  if (checked) {
    return [...hobbies, hobby]
  } else {
    return hobbies.filter(h => h !== hobby)
  }
}

import React from 'react'
import { getHobbies } from './helpers'

export default class Form extends React.Component {

  state = {
    name: '',
    firstName: '',
    description: '',
    gender: '',
    age: 0,
    country: '',
    province: '',
    hobbies: []
  }

  handleChange = (e) => {
    let name = e.target.name
    let value = e.target.value

    if (e.target.type === 'checkbox') {
      value = getHobbies(e.target.value, e.target.checked, this.state.hobbies)
    }

    this.setState({
      [name]: value
    })

  }

  handleSubmit = e => {
    console.log(this.state)
    e.preventDefault()
  }

  render() {
    return (
      <form onChange={this.handleChange} onSubmit={this.handleSubmit}>
        <input type="text" name="name" />
        <input type="text" name="firstName" />
        <textarea name="description" />
        <input type="radio" name="gender" value="male" /> Male
        <input type="radio" name="gender" value="female" /> Female
        <input type="number" name="age" />
        <select name="country">
          <option>Select one</option>
          <option value="spain">Spain</option>
          <option value="usa">USA</option>
        </select>
        {this.state.country === 'spain' && (
          <select name="province">
            <option>Select one</option>
            <option value="guadalajara">Guadalajara</option>
            <option value="madrid">Madrid</option>
          </select>
        )}
        <label>
          <input name="hobbies" type="checkbox" value="Games" />
          Games
        </label>
        <label>
          <input name="hobbies" type="checkbox" value="Football" />
          Football
        </label>
        <label>
          <input name="hobbies" type="checkbox" value="Basketball" />
          Basketball
        </label>
        <label>
          <input name="hobbies" type="checkbox" value="Art" />
          Art
        </label>
        <button type="submit">Enviar</button>
      </form>
    )
  }

}

const { getHobbies } = require("./helpers")

test('Should remove football from array', () => {
  expect(getHobbies('football', false, ['football']).length).toBe(0)
  expect(getHobbies('football', false, ['football'])).not.toContain('football')
})

test('Should add football from array', () => {
  expect(getHobbies('football', true, ['basketball']).length).toBe(2)
  expect(getHobbies('football', true, ['basketball'])).toContain('football')
  expect(getHobbies('football', true, ['basketball'])).toContain('basketball')
})

import React from 'react'
import './../App.css'
import ProductList from './ProductList'
import products from './products.constants'

class Shop extends React.Component {

  state = {
    selectedProducts: [],
    discountCode: '',
    applyDiscount: false,
  }

  componentDidMount() {
    if (localStorage.state) {
      this.setState(JSON.parse(localStorage.state))
    }
  }

  componentDidUpdate() {
    localStorage.state = JSON.stringify(this.state)
  }

  onAddProduct = product => {
    this.setState({ selectedProducts: [...this.state.selectedProducts, product] })
  }

  onRemoveProduct = product => {
    this.setState({ selectedProducts: this.state.selectedProducts.filter(p => p.id !== product.id) })
  }

  getTotalPrice = () => {
    const result = this.state.selectedProducts.reduce((acum, next) => acum + next.price, 0)
    return this.state.applyDiscount ? result * 0.90 : result
  }

  handleChangeDiscountCode = e => {
    this.setState({ discountCode: e.target.value })
  }

  onApplyDiscount = () => {
    this.setState({ applyDiscount: this.state.discountCode === 'SAVE10' })
  }

  render() {
    return (
      <>
        <h1>Shop</h1>
        <div className="shop-container">
          <div>
            Products:
            <ProductList 
              products={products} 
              action={(product) => <button onClick={() => this.onAddProduct(product)}>Add</button>} 
            />
          </div>
          <div>
            Selected Products:
            <ProductList 
              products={this.state.selectedProducts} 
              action={(product) => <button onClick={() => this.onRemoveProduct(product)}>Remove</button>} 
            />
            <h1>Total: {this.getTotalPrice()}</h1>
            <input value={this.state.discountCode} onChange={this.handleChangeDiscountCode} type="text" />
            <button onClick={this.onApplyDiscount}>Apply discount</button>
          </div>
        </div>
      </>
    )
  }

}

export default Shop

const ProductList = props => props.products.map(product => (
  <div key={product.id}>
    <img src={product.img} alt="iphone" height="100" />
    <p>Name: {product.name}</p>
    <p>Price: {product.price}</p>
    {props.action(product)}
  </div>
))


export default ProductList

const products = [
  {
    id: 1,
    name: 'iPhone X',
    price: 900,
    img: 'https://thumb.pccomponentes.com/w-300-300/articles/32/328890/1391-apple-iphone-12-pro-max-256gb-azul-pacifico-libre.jpg'
  },
  {
    id: 2,
    name: 'iPhone 12',
    price: 1200,
    img: 'https://thumb.pccomponentes.com/w-300-300/articles/32/328889/1312-apple-iphone-12-pro-max-256gb-oro-libre.jpg'
  },
  {
    id: 3,
    name: 'iPhone 13',
    price: 1500,
    img: 'https://thumb.pccomponentes.com/w-300-300/articles/32/328931/1319-apple-iphone-12-128gb-product-rojo-libre.jpg'
  },
]

export default products

import React from 'react'

const List = props => 
    <ul>
        {props.children}
    </ul>

const ListItem = props => 
    <li>
        <InputText onChange={(e) => props.onChange(e, props.task.id)} value={props.task.text} /> 
        <BasicButton onClick={() => props.onDelete(props.task.text)} label="Borrar" />
    </li>

const InputText = props => 
    <input type="text" value={props.value} onChange={props.onChange} />

const Button = props => 
    <button onClick={props.onClick}>{props.label}</button>

const AddTaskButton = props => 
    <Button onClick={props.onClick} label={'Añadir boton'}/>

const BasicButton = props => 
    <button style={{backgroundColor: props.action ? 'green' : 'orange'}} onClick={props.onClick}>{props.label}</button>

export default class ListContainer extends React.Component {
    state = {
        tasks: [{
            id: 1,
            text: 'zamarro'
        }],
        text: '',
    }

    addTask = () => {
        this.setState({ tasks: [...this.state.tasks, this.state.text] })
    }

    deleteTask = (text) => {
        let newTasks = this.state.tasks.filter(el => el !== text)
        this.setState({ tasks: newTasks })
    }

    onChangeTask = (e, id) => {
        let tasks = this.state.tasks.map(element => {
            if (element.id === id) element.text = e.target.value
            return element
        })
        this.setState({ tasks: tasks })
    }

    render() {
        return(
            <>
                <List>
                    {this.state.tasks.map((element) => (
                        <ListItem 
                            onDelete={this.deleteTask}
                            onChange={this.onChangeTask}
                            task={element}
                            key={element}
                        />
                    ))}
                </List>
                <InpuText type="text" onChange={e => this.setState({ text: e.target.value })} />
                <BasicButton onClick={this.addTask} label="Añadir tarea" action="success"  />
            </>
        )
    }
}

import React from 'react'
import { getTotalPrice } from './clase3_3/helpers'
import Products from './clase3_3/Products'
import productsConstants from './clase3_3/products.constants'


class App extends React.Component {

  state = {
    products: [],
    code: '',
    applyDiscount: false,
  }

  componentDidMount() {
    if (localStorage.fictiziaShop) this.setState(JSON.parse(localStorage.fictiziaShop))
  }

  componentDidUpdate() {
    localStorage.fictiziaShop = JSON.stringify(this.state)
  }

  addProduct = product => {
    this.setState({ products: [...this.state.products, product] })
  }

  removeProduct = product => {
    this.setState({ products: this.state.products.filter(p => p.id !== product.id) })
  }

  handleChangeCode = e => {
    this.setState({ code: e.target.value })
  }

  applyDiscount = () => {
    if (this.state.code !== 'SAVE10') {
      alert('codigo erroneo')
    } else {
      this.setState({ applyDiscount: this.state.code === 'SAVE10' })
    }
  }

  render() {
    return (
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
        <div>
          <h1>Products</h1>
          <Products
            products={productsConstants}
            onAddProduct={this.addProduct}
            button={(product) => <button onClick={() => this.addProduct(product)}>Add</button>}
          />
        </div>
        <div>
          <h1>Cart</h1>
          <Products
            products={this.state.products}
            onAddProduct={this.addProduct}
            button={(product) => <button onClick={() => this.removeProduct(product)}>Remove</button>}
          />
          <h3>Total: {getTotalPrice(this.state.products, this.state.applyDiscount)}€</h3>
          <input onChange={this.handleChangeCode} type="text" placeholder="CODE" />
          <button onClick={this.applyDiscount}>Apply</button>
        </div>
      </div>
    )
  }

}

export default App

const Products = props => props.products.map(product => (
  <div key={product.id}>
    <img src={product.image} />
    <p>{product.name}</p>
    <p>{product.price}€</p>
    {/* <button onClick={() => props.onAddProduct(product)}>Add</button> */}
    {props.button(product)}
  </div>
))

export default Products

import React from 'react'

const PasswordStrength = props => {

  let texto = ''
  let points = 0

  if (!props.password) {
    texto = 'no hay contraseña'
  }

  if (props.password.length >= 8) points++
  if (/[0-9]/.test(props.password)) points++
  if (/[A-Z]/.test(props.password)) points++
  if (/[$%&/()+-]/.test(props.password)) points++

  if (points === 0 && props.password) texto = 'contraseña muy débil'
  if (points === 1) texto = 'contraseña débil'
  if (points > 1 && points <= 3) texto = 'contraseña media'
  if (points >= 4) texto = 'contraseña fuerte'

  return (
    <p>{texto}</p>
  )
}

export default PasswordStrength

import React from 'react'


class App extends React.Component {

  state = {
    username: '',
    password: '',
  }

  handleChange = e => {
    this.setState({ [e.target.name]: e.target.value })
  }

  isValid = () => {
    return this.state.username && this.state.password && this.state.password.length >= 8
  }

  handleSubmit = (e) => {
    e.preventDefault()
    console.log(this.state)
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit} onChange={this.handleChange}>
        <input name="username" type="text" />
        <input name="password" type="password" />
        <button disabled={!this.isValid()}>Login</button>
      </form>
    )
  }

}

export default App

import React from 'react'

const Greeting = props => <h1>{props.children}</h1>

export default Greeting

import React from 'react'

export default props =>
  <a href={props.to} target={props.openInNewTab ? '_blank' : '_self'}>{props.text}</a>

import React from 'react'

export default props =>
  <ul>
    {props.children}
  </ul>

import React from 'react'

export default props => <li>{props.children}</li>

export default props => props.show ? props.children : 'Loading...'

import React from 'react'

const ShowName = props => <p>{props.user.name} - {props.age}</p>

export default ShowName

import React from 'react'

const TestChildren = props =>
  <>
    <div>hola1</div>
    <div>hola2</div>
  </>

export default TestChildren

import React from 'react'

export default props =>
  <p>{props.children}</p>

import React from 'react'

export default props => <h1>{props.text}</h1>

import React from 'react'

class App extends React.Component {

  state = {
    text: ''
  }

  changeText = (e) => this.setState({ text: e.target.value })

  render() {
    return <>
      <h1>{this.state.text}</h1>
      <input type="text" onChange={this.changeText} />
    </>
  }

}

export default App

import React from 'react'
import './App.css'
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from 'react-router-dom'
import HomePage from './clase9/HomePage'
import UsersPage from './clase9/UsersPage'
import NotFoundPage from './clase9/NotFoundPage'

const App = () => {
  return (
    <div>
      <Router>
        <nav>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/users">Users</Link></li>
          </ul>
        </nav>

        <Switch>
          <Route exact path="/">
            <HomePage />
          </Route>
          <Route path="/users">
            <UsersPage />
          </Route>
          <Route path="*">
            <NotFoundPage />
          </Route>
        </Switch>
      </Router>
    </div>
  )
}

export default App

import React from 'react'

export default () => <h1>Page not found</h1>

import React from 'react'
import { Link, Switch, Route } from 'react-router-dom'
import UserDetail from './UserDetail'

const users = [{id: 1, username: 'zamarro'}, { id: 2, username: 'Cristina' }]

export default () => (
  <>
    <Switch>
      <Route exact path="/users">
        <ul>
        {users.map(user => (
          <li key={user.id}>
            <Link to={`/users/${user.id}`}>{user.username}</Link>
          </li>
        ))}
      </ul>
      </Route>
      <Route path="/users/:id">
        <UserDetail />
      </Route>
    </Switch>
  </>
)

import React from 'react'

export default () => <h1>¡Bienvenido!</h1>

import React from 'react'
import { useParams } from 'react-router-dom'

export default () => {

  const { id } = useParams()

  return (<h1>El user id es: {id}</h1>)

}

export const editTodo = (todos, value, id) => {
  return todos.map(todo => {
    if (todo.id === id) todo.title = value
    return todo
  })
}

import { editTodo } from "./helpers"

test('Should edit a todo', () => {
  const todos = [{ id: 1, title: 'hola' }]
  const newMessage = 'editado!'
  const newTodos = editTodo(todos, newMessage, todos[0].id)
  expect(newTodos[0].title).toBe(newMessage)
})

import React from 'react'

export default props =>
  <button onClick={props.onPress}>{props.label}</button>

import React from 'react'

export default class Chronometer extends React.Component {
  state = {
    count: 0
  }

  updateStateInterval = null

  componentDidMount() {
    console.log('holi!')
  }

  componentDidUpdate(prevProps, prevState) {
    console.log(prevProps, prevState)
  }

  startChrono = () => {
    setTimeout(() => {
      this.setState({count: this.state.count + 1})
    }, 1000)
    setInterval(() => {
      this.setState({count: this.state.count + 1})
    }, 2000)
  }

  componentWillUnmount() {
    console.log('me voy!')
    clearInterval(this.updateStateInterval)
  }

  render() {
    return (
      <>
        <h1>{this.state.count}</h1>
        <button onClick={this.startChrono}>Start</button>
      </>
    )
  }
}

import React, { Component } from 'react'
import Title from './Title'
import Button from './Button'

class Counter extends Component {

  state = {
    count: 0,
  }

  handleChange = action => {
    this.setState(prevState =>
      ({ count: action === 'increment' ? prevState.count + 1 : prevState.count - 1 })
    )
  }

  render() {
    return (
      <>
        <Title text={this.state.count} />
        <Button onPress={() => this.handleChange('increment')} label="Increment"/>
        <Button onPress={() => this.handleChange('decrement')} label="Decrement"/>
      </>
    )
  }
}

export default Counter

import React, { Component } from 'react'

class CounterText extends Component {

  state = {
    text: '',
  }

  increment = () => {
    this.setState(prevState => ({ text: prevState.text + 'a' }))
  }

  decrement = () => {
    this.setState(prevState => ({ text: prevState.text.slice(1) }))
  }

  render() {
    return (
      <>
        <div>{this.state.text}</div>
        <button onClick={this.increment}>Increment</button>
        <button onClick={this.decrement}>Decrement</button>
      </>
    )
  }
}

export default CounterText

import React from 'react'

export default () => <input type="text" onChange={e => console.log(e.target.value)} />

import React from 'react'

export default class Likes extends React.Component {
  state = {
    likes: 50,
    liked: false
  }

  handleChange = () => {
    this.setState(prevState => ({
      liked: !prevState.liked,
      likes: prevState.liked ? prevState.likes-- : prevState.likes++
    }))
  }

  render() {
    return (
      <>
        <h1>{this.state.likes}</h1>
        <button onClick={this.handleChange}>{this.state.liked ? 'Dislike' : 'Like'}</button>
      </>
    )
  }
}

import React from 'react'

export default props => {
  console.log(props)
  return(
    <p>Mira las developers tools</p>
  )
}

import React from 'react'

export default class Password extends React.Component {
  state = {
    show: false
  }

  togglePassword = () => {
    this.setState(prevState => ({ show: !prevState.show }))
  }

  render() {
    return (
      <>
        <input type={this.state.show ? 'text' : 'password'} />
        <button onClick={this.togglePassword}>Toggle</button>
      </>
    )
  }
}

import React from 'react'

const Title = (props) => <h1>{props.text}</h1>
export default Title

import React, { useState, useEffect } from 'react'

export default () => {

  const [todos, setTodos] = useState([])

  const fetchTodos = async () => {
    let response = await fetch('https://jsonplaceholder.typicode.com/todos')
    let data = await response.json()
    setTodos(data)
  }

  useEffect(() => {
    fetchTodos()
  }, [])

  return (
    <>
      <h1>Todos</h1>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            {todo.title}
          </li>
        ))}
      </ul>
    </>
  )
}

import React from 'react'

class Chrono extends React.Component {

  state = {
    count: 0
  }

  countInterval = null

  componentWillUnmount() {
    this.stop()
  }

  start = () => {
    this.countInterval = setInterval(() => {
      this.setState(state => ({ count: state.count + 1 }))
      console.log('actualizado')
    }, 1000)
  }

  stop = () => clearInterval(this.countInterval)

  render() {
    return (
      <>
        <h1>{this.state.count}</h1>
        <button onClick={this.start}>Start</button>
        <button onClick={this.stop}>Stop</button>
      </>
    )
  }

}

export default Chrono

import React from 'react'

class Tasks extends React.Component {

  state = {
    tasks: []
  }

  componentDidMount() {
    this.fetchTasks()
  }

  fetchTasks = async () => {
    let response = await (await fetch('https://jsonplaceholder.typicode.com/todos')).json()
    this.setState({ tasks: response })
  }

  render() {
    return <pre>{JSON.stringify(this.state.tasks)}</pre>
  }

}

export default Tasks

import React, { useState, useEffect } from 'react'
import useApiCall from './useApiCall'

export default () => {

  const [todos, loading] = useApiCall('https://jsonplaceholder.typicode.com/todos')

  return (
    <>
      <h1>Todos</h1>
      <ul>
        {todos && todos.map(todo => (
          <li key={todo.id}>
            {todo.title}
          </li>
        ))}
      </ul>
    </>
  )
}

import { useState, useEffect } from 'react'

export default url => {

  const [data, setData] = useState(null)
  const [loading, setLoading] = useState(false)

  const fetchData = async (url) => {
    setLoading(true)
    let response = await fetch(url)
    let data = await response.json()
    setData(data)
    setLoading(false)
  }

  useEffect(() => {
    fetchData(url)
  }, [url])

  return [data, loading]
}

import React from 'react'
import productsConstants from './products.constants'
import ProductsList from './ProductsList'
import { getPrice } from './helpers'

class ShopPage extends React.Component {

  state = {
    selectedProducts: [],
    discountCode: '',
    applyDiscount: false,
  }

  componentDidMount() {
    const selectedProducts = this.getProductsFormLocalStorage()
    this.setState({ selectedProducts })
  }

  addProduct = product => {
    const newProducts = [...this.state.selectedProducts, product]
    this.setProductsInLocalStorage(newProducts)
    this.setState({
      selectedProducts: newProducts
    })
  }

  removeProduct = product => {
    const newProducts = this.state.selectedProducts.filter(p => p.id !== product.id)
    this.setProductsInLocalStorage(newProducts)
    this.setState({
      selectedProducts: newProducts
    })
  }

  setProductsInLocalStorage = products => {
    localStorage.selectedProducts = JSON.stringify(products)
  }

  getProductsFormLocalStorage = () => {
    const selectProducts = localStorage.selectedProducts
    if (selectProducts) return JSON.parse(localStorage.selectedProducts)
    return []
  }

  handleChangeDiscountCode = e => {
    this.setState({
      discountCode: e.target.value
    })
  }

  validateDiscountCode = () => {
    if (this.state.discountCode === 'SAVE10') {
      this.setState({ applyDiscount: true })
    } else {
      this.setState({ applyDiscount: false })
    }
  }

  render() {
    return (
      <div className="shopContainer">
        <div>
          <h1>Products</h1>
          <ProductsList products={productsConstants} button={product => <button onClick={() => this.addProduct(product)}>Add product</button>} />
        </div>
        <div>
          <h1>Selected Products</h1>
          <ProductsList products={this.state.selectedProducts} button={product => <button onClick={() => this.removeProduct(product)}>Remove product</button>} />
          <input type="text" onChange={this.handleChangeDiscountCode}/>
          <button onClick={this.validateDiscountCode}>Validate discount code</button>
          {this.state.selectedProducts.length > 0 && <p>Total: {this.state.applyDiscount ? getPrice(this.state.selectedProducts) * 0.90 : getPrice(this.state.selectedProducts)}€</p>}
        </div>
      </div>
    )
  }

}

export default ShopPage

import React from 'react'

export default props => {
  return (
    props.products.map(product => (
      <div key={product.id}>
        {product.name} - {product.price}
        {props.button(product)}
      </div>
    ))
  )
}

import React from 'react'

class Chronometer extends React.Component {

  state = {
    count: 0
  }

  startChronometer = () => {
    setInterval(() => {
      this.setState(prevState => ({ count: prevState.count + 1 }))
    }, 1000)
  }

  render() {
    return (
      <>
        <h1>{this.state.count}</h1>
        <button onClick={this.startChronometer}>Start</button>
      </>
    )
  }

}

export default Chronometer

import React from 'react'

export default props => <button onClick={props.onAdd}>Add task</button>

import React from 'react'

export default props => <input type="text" value={props.value} onChange={props.onChange} />

import React from 'react'
import ListItem from './ListItem'

export default props =>
  <ul>
    {props.tasks.map(task => (
      <ListItem
        key={task.id}
        task={task}
        onRemove={props.onRemove}
        onEdit={props.onEdit}
      />
    ))}
  </ul>

import React from 'react'
import List from './List'
import InputText from './InputText'
import AddTaskButton from './AddTaskButton'

class ListContainer extends React.Component {

  state = {
    tasks: [{
      id: 10001,
      title: 'Comprar el pan'
    }, {
      id: 10002,
      title: 'Sacar a India'
    }],
    newTaskText: ''
  }

  handleNewTaskText = e => {
    this.setState({ newTaskText: e.target.value })
  }

  addTask = () => {
    this.setState({
      tasks: [...this.state.tasks, { id: Math.random(), title: this.state.newTaskText }],
      newTaskText: '',
    })
  }

  removeTask = taskId => {
    let newTasks = this.state.tasks.filter(task => task.id !== taskId)
    this.setState({ tasks: newTasks })
  }

  editTask = (taskId, value) => {
    const newTasks = this.state.tasks.map(task => {
      if (task.id === taskId) task.title = value
      return task
    })
    this.setState({ tasks: newTasks })
  }

  render() {
    return (
      <>
        <List tasks={this.state.tasks} onRemove={this.removeTask} onEdit={this.editTask} />
        <InputText onChange={this.handleNewTaskText} value={this.state.newTaskText} />
        <AddTaskButton onAdd={this.addTask} />
      </>
    )
  }

}

export default ListContainer

import React from 'react'
import RemoveTaskButton from './RemoveTaskButton'

export default props =>
  <>
    <li>
      <input
        type="text"
        value={props.task.title}
        onChange={e => props.onEdit(props.task.id, e.target.value)}
      />
    </li>
    <RemoveTaskButton onRemove={() => props.onRemove(props.task.id)} />
  </>

import React from 'react'

export default props => <button onClick={props.onRemove}>Remove</button>

import React from 'react'

export default class Seconds extends React.Component {
  state = {
    count: 0
  }

  componentDidMount() {
    setInterval(() => {
      this.setState(prevState => ({count: prevState.count++}))
    }, 1000)
  }

  render() {
    return (
      <>
        <h1>{this.state.count}</h1>
      </>
    )
  }
}

import React from 'react'

export default class Tasks extends React.Component {
  state = {
    tasks: []
  }

  fetchTasks = async () => {
    let data = await (await fetch('https://jsonplaceholder.typicode.com/todos')).json()
    this.setState({ tasks: data })
  }

  componentDidMount() {
    this.fetchTasks()
  }

  render() {
    return <pre>{JSON.stringify(this.state.tasks)}</pre>
  }
}

import React from 'react'

export default class Users extends React.Component {
  state = {
    users: ['sergio', 'vero']
  }

  componentDidMount() {
    this.setState(prevState => ({ users: [...prevState.users, 'cris'] }))
  }

  render() {
    return <p>{this.state.users.join(', ')}</p>
  }

  componentWillUnmount() {
    console.log('¡Componente destruido!')
  }
}