Clase 3

[zamarrowski]

AddTaskButton.js

import React from 'react'

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

InputText.js

import React from 'react'

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

List.js

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>

ListContainer.js

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

ListItem.js

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)} />
  </>

RemoveTaskButton.js

import React from 'react'

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

Seconds.js

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>
      </>
    )
  }
}

Tasks.js

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>
  }
}

Test.js

import React from 'react'

class Test extends React.Component {

  state = {
    text: 'hola',
  }

  componentDidMount() {
    console.log('despues del primer render')
  }

  componentDidUpdate() {
    console.log('se ha actualizado')
  }

  componentWillUnmount() {
    console.log('adiós')
  }

  render() {
    return (
      <>
        <h1>{this.state.text}</h1>
        <input type="text" onChange={e => this.setState({ text: e.target.value })} />
      </>
    )
  }

}

export default Test

Users.js

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!')
  }
}