coder4cbus/react-bootcamp-day-3-3.html

## react-bootcamp-day-3-3.html
<!DOCTYPE html>
<html>
<head>
  <title>First React App</title>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src='https://unpkg.com/babel-standalone@6/babel.min.js'></script>
</head>
<body>
  <div id='app'></div>

  <script>
    window.API = {
      fetchFriends() {
        return new Promise((res, rej) => {
          const friends = [
            {
              name: 'Jordyn',
              active: true,
            },
            {
              name: 'Mikenzi',
              active: true,
            },
            {
              name: 'Jake',
              active: false
            }
          ]

          setTimeout(() => res(friends), 2000)
        })
      }
    }
  </script>

  <script type='text/babel'>
    function ActiveFriends (props) {
      return (
        <div>
          <h2>Active Friends</h2>
          <ul>
            {props.list.map((friend) => (
              <li key={friend.name}>
                <span>{friend.name}</span>
                <button onClick={() => props.onRemoveFriend(friend.name)}>Remove</button>
                <button onClick={() => props.onToggleFriend(friend.name)}>Deactivate</button>
              </li>
            ))}
          </ul>
        </div>
      )
    }

    function InactiveFriends (props) {
      return (
        <div>
          <h2>Inactive Friends</h2>
          <ul>
            {props.list.map((friend) => (
              <li key={friend.name}>
                <span>{friend.name}</span>
                <button onClick={() => props.onToggleFriend(friend.name)}>Activate</button>
              </li>
            ))}
          </ul>
        </div>
      )
    }

    class App extends React.Component {
      constructor(props) {
        super(props)
        this.state = {
          friends: [],
          input: '',
        }
        this.handleRemoveFriend = this.handleRemoveFriend.bind(this)
        this.updateInput = this.updateInput.bind(this)
        this.handleAddFriend = this.handleAddFriend.bind(this)
        this.handleToggleFriend = this.handleToggleFriend.bind(this)

        console.log('--constructor--')
      }
      componentDidMount() {
        console.log('--componentDidMount--')
        API.fetchFriends()
          .then((friends) => {
            this.setState({
              friends,
              loading: false,
            })
        })
      }
      componentDidUpdate() {
        console.log('--componentDidUpdate--')
      }
      componentWillUnmount() {
        console.log('--componentWillUnmount--')
      }
      handleAddFriend() {
        this.setState((currentState) => {
          return {
            friends: currentState.friends.concat([{
              name: this.state.input,
              active: true
            }]),
            input: ''
          }
        })
      }
      handleRemoveFriend(name) {
        this.setState((currentState) => {
          return {
            friends: currentState.friends.filter((friend) => friend.name !== name)
          }
        })
      }
      handleToggleFriend(name) {
        this.setState((currentState) => {
          const friend = currentState.friends.find((friend) => friend.name === name)
          return {
            friends: currentState.friends.filter((friend) => friend.name !== name)
              .concat([{
                name,
                active: !friend.active
              }])
          }
        })
      }
      updateInput(e) {
        const value = e.target.value
        this.setState({
          input: value
        })
      }
      render() {
        console.log('--render--')

        if (this.state.loading === true) {
          return <h1>LOADING</h1>
        }

        return (
          <div>
            <input
              type='text'
              placeholder='new friend'
              value={this.state.input}
              onChange={this.updateInput}
            />
            <button onClick={this.handleAddFriend}>
              Submit
            </button>
            <div>
              <button onClick={() => this.setState({
                friends: []
              })}>Clear All</button>
            </div>
            <ActiveFriends
              list={this.state.friends.filter((friend) => friend.active === true)}
              onRemoveFriend={this.handleRemoveFriend}
              onToggleFriend={this.handleToggleFriend}
            />
            <InactiveFriends
              list={this.state.friends.filter((friend) => friend.active === false)}
              onToggleFriend={this.handleToggleFriend}
            />
          </div>
        )
      }
    }
    ReactDOM.render(
      <App />,
      document.getElementById('app')
    )
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>First React App</title>
	<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
	<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
	<script src='https://unpkg.com/babel-standalone@6/babel.min.js'></script>
	</head>
	<body>
	<div id='app'></div>

	<script>
	window.API = {
	fetchFriends() {
	return new Promise((res, rej) => {
	const friends = [
	{
	name: 'Jordyn',
	active: true,
	},
	{
	name: 'Mikenzi',
	active: true,
	},
	{
	name: 'Jake',
	active: false
	}
	]

	setTimeout(() => res(friends), 2000)
	})
	}
	}
	</script>

	<script type='text/babel'>
	function ActiveFriends (props) {
	return (
	<div>
	<h2>Active Friends</h2>
	<ul>
	{props.list.map((friend) => (
	<li key={friend.name}>
	<span>{friend.name}</span>
	<button onClick={() => props.onRemoveFriend(friend.name)}>Remove</button>
	<button onClick={() => props.onToggleFriend(friend.name)}>Deactivate</button>
	</li>
	))}
	</ul>
	</div>
	)
	}

	function InactiveFriends (props) {
	return (
	<div>
	<h2>Inactive Friends</h2>
	<ul>
	{props.list.map((friend) => (
	<li key={friend.name}>
	<span>{friend.name}</span>
	<button onClick={() => props.onToggleFriend(friend.name)}>Activate</button>
	</li>
	))}
	</ul>
	</div>
	)
	}

	class App extends React.Component {
	constructor(props) {
	super(props)
	this.state = {
	friends: [],
	input: '',
	}
	this.handleRemoveFriend = this.handleRemoveFriend.bind(this)
	this.updateInput = this.updateInput.bind(this)
	this.handleAddFriend = this.handleAddFriend.bind(this)
	this.handleToggleFriend = this.handleToggleFriend.bind(this)

	console.log('--constructor--')
	}
	componentDidMount() {
	console.log('--componentDidMount--')
	API.fetchFriends()
	.then((friends) => {
	this.setState({
	friends,
	loading: false,
	})
	})
	}
	componentDidUpdate() {
	console.log('--componentDidUpdate--')
	}
	componentWillUnmount() {
	console.log('--componentWillUnmount--')
	}
	handleAddFriend() {
	this.setState((currentState) => {
	return {
	friends: currentState.friends.concat([{
	name: this.state.input,
	active: true
	}]),
	input: ''
	}
	})
	}
	handleRemoveFriend(name) {
	this.setState((currentState) => {
	return {
	friends: currentState.friends.filter((friend) => friend.name !== name)
	}
	})
	}
	handleToggleFriend(name) {
	this.setState((currentState) => {
	const friend = currentState.friends.find((friend) => friend.name === name)
	return {
	friends: currentState.friends.filter((friend) => friend.name !== name)
	.concat([{
	name,
	active: !friend.active
	}])
	}
	})
	}
	updateInput(e) {
	const value = e.target.value
	this.setState({
	input: value
	})
	}
	render() {
	console.log('--render--')

	if (this.state.loading === true) {
	return <h1>LOADING</h1>
	}

	return (
	<div>
	<input
	type='text'
	placeholder='new friend'
	value={this.state.input}
	onChange={this.updateInput}
	/>
	<button onClick={this.handleAddFriend}>
	Submit
	</button>
	<div>
	<button onClick={() => this.setState({
	friends: []
	})}>Clear All</button>
	</div>
	<ActiveFriends
	list={this.state.friends.filter((friend) => friend.active === true)}
	onRemoveFriend={this.handleRemoveFriend}
	onToggleFriend={this.handleToggleFriend}
	/>
	<InactiveFriends
	list={this.state.friends.filter((friend) => friend.active === false)}
	onToggleFriend={this.handleToggleFriend}
	/>
	</div>
	)
	}
	}
	ReactDOM.render(
	<App />,
	document.getElementById('app')
	)
	</script>
	</body>
	</html>