lakamsani · April 11, 2018 19:12
diff --git a/react-bootcamp-d2-hw.html b/react-bootcamp-d2-hw.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 type='text/babel'>

  // conditional logic for active/inactive label  but has Remove button
  function FriendsList2 (props) {
    return (
      <ul>
        {props.list.map((friend) => (
          <li key={friend.name}>
            <span>{friend.name}</span>
            <button onClick={() => props.onRemoveFriend(friend.name)}>Remove</button>
            <button onClick={() => props.onSetFriendState(friend)}>{friend.active ? 'Inactivate' : 'Activate'}</button>
          </li>
        ))}
      </ul>
    )
  }

  /*
   same as above but additional conditional logic to hide remove button if showing inactive members.
    */
  function FriendsList (props) {
    const active = props.active
    return (
      <ul>
        {props.list.map((friend) => (
          <li key={friend.name}>
            <span>{friend.name}</span>
            {active && <button onClick={() => props.onRemoveFriend(friend.name)}>Remove</button>}
            <button onClick={() => props.onSetFriendState(friend)}>{friend.active ? 'Inactivate' : 'Activate'}</button>
          </li>
        ))}
      </ul>
    )
  }

  class App extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        friends: [{name: 'Jordyn', active: true}, {name: 'Mikenzi', active: true}, {name: 'Jake', active: true}],
        input: '',
      }

      this.handleRemoveFriend = this.handleRemoveFriend.bind(this)
      this.updateInput = this.updateInput.bind(this)
      this.handleAddFriend = this.handleAddFriend.bind(this)
      this.handleFriendActiveState = this.handleFriendActiveState.bind(this)
    }

    handleAddFriend() {

      let name = String(this.state.input)
      let newFriends = this.state.friends
      const index =  this.state.friends.findIndex( (friend) => {
         return friend.name === name
      })

      let empty = !name || 0 === name.length || !name.trim()
      if (index > -1 ||  empty) {
        console.log(`ignore already existing or empty input name`)
      } else {
        newFriends = newFriends.concat([{name: this.state.input, active: true}])
      }

      this.setState((currentState) => {
        return {
          friends: newFriends,
          input: ''
        }
      })
    }


    handleRemoveFriend(name) {
      this.setState((currentState) => {
        return {
          friends: currentState.friends.filter((friend) => friend.name !== name)
        }
      })
    }

    handleFriendActiveState(inFriend) {
      console.log("here")
      this.setState((currentState) => {

        const updatedFriends =  currentState.friends.map((friend) => {
            if (friend.name === inFriend.name) {
              friend.active = !inFriend.active
            }
            return friend
        })
        console.log(updatedFriends)
        return {
          friends: updatedFriends
        }
      })
    }

    updateInput(e) {
      const value = e.target.value

      this.setState({
        input: value
      })
    }
    render() {

      const actives = this.state.friends.filter((friend) => friend.active)
      const inactives = this.state.friends.filter((friend) => !friend.active)

      return (
        <div>
          <input
            type='text'
            placeholder='new friend'
            value={this.state.input}
            onChange={this.updateInput}
          />
          <button onClick={this.handleAddFriend}>
            Submit
          </button>
          <h1>Active Friends</h1>
          <FriendsList
            list={actives}
            active={true}
            onRemoveFriend={this.handleRemoveFriend}
            onSetFriendState={this.handleFriendActiveState}
          />
          <h1>Inctive Friends</h1>
          <FriendsList
            list={inactives}
            onRemoveFriend={this.handleRemoveFriend}
            onSetFriendState={this.handleFriendActiveState}
          />
        </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 type='text/babel'>

	// conditional logic for active/inactive label but has Remove button
	function FriendsList2 (props) {
	return (
	<ul>
	{props.list.map((friend) => (
	<li key={friend.name}>
	<span>{friend.name}</span>
	<button onClick={() => props.onRemoveFriend(friend.name)}>Remove</button>
	<button onClick={() => props.onSetFriendState(friend)}>{friend.active ? 'Inactivate' : 'Activate'}</button>
	</li>
	))}
	</ul>
	)
	}

	/*
	same as above but additional conditional logic to hide remove button if showing inactive members.
	*/
	function FriendsList (props) {
	const active = props.active
	return (
	<ul>
	{props.list.map((friend) => (
	<li key={friend.name}>
	<span>{friend.name}</span>
	{active && <button onClick={() => props.onRemoveFriend(friend.name)}>Remove</button>}
	<button onClick={() => props.onSetFriendState(friend)}>{friend.active ? 'Inactivate' : 'Activate'}</button>
	</li>
	))}
	</ul>
	)
	}

	class App extends React.Component {
	constructor(props) {
	super(props)
	this.state = {
	friends: [{name: 'Jordyn', active: true}, {name: 'Mikenzi', active: true}, {name: 'Jake', active: true}],
	input: '',
	}

	this.handleRemoveFriend = this.handleRemoveFriend.bind(this)
	this.updateInput = this.updateInput.bind(this)
	this.handleAddFriend = this.handleAddFriend.bind(this)
	this.handleFriendActiveState = this.handleFriendActiveState.bind(this)
	}

	handleAddFriend() {

	let name = String(this.state.input)
	let newFriends = this.state.friends
	const index = this.state.friends.findIndex( (friend) => {
	return friend.name === name
	})

	let empty = !name \|\| 0 === name.length \|\| !name.trim()
	if (index > -1 \|\| empty) {
	console.log(`ignore already existing or empty input name`)
	} else {
	newFriends = newFriends.concat([{name: this.state.input, active: true}])
	}

	this.setState((currentState) => {
	return {
	friends: newFriends,
	input: ''
	}
	})
	}


	handleRemoveFriend(name) {
	this.setState((currentState) => {
	return {
	friends: currentState.friends.filter((friend) => friend.name !== name)
	}
	})
	}

	handleFriendActiveState(inFriend) {
	console.log("here")
	this.setState((currentState) => {

	const updatedFriends = currentState.friends.map((friend) => {
	if (friend.name === inFriend.name) {
	friend.active = !inFriend.active
	}
	return friend
	})
	console.log(updatedFriends)
	return {
	friends: updatedFriends
	}
	})
	}

	updateInput(e) {
	const value = e.target.value

	this.setState({
	input: value
	})
	}
	render() {

	const actives = this.state.friends.filter((friend) => friend.active)
	const inactives = this.state.friends.filter((friend) => !friend.active)

	return (
	<div>
	<input
	type='text'
	placeholder='new friend'
	value={this.state.input}
	onChange={this.updateInput}
	/>
	<button onClick={this.handleAddFriend}>
	Submit
	</button>
	<h1>Active Friends</h1>
	<FriendsList
	list={actives}
	active={true}
	onRemoveFriend={this.handleRemoveFriend}
	onSetFriendState={this.handleFriendActiveState}
	/>
	<h1>Inctive Friends</h1>
	<FriendsList
	list={inactives}
	onRemoveFriend={this.handleRemoveFriend}
	onSetFriendState={this.handleFriendActiveState}
	/>
	</div>
	)
	}
	}


	ReactDOM.render(
	<App />,
	document.getElementById('app')
	)
	</script>
	</body>
	</html>