appwebtech/17_event_handling_part_2.html.html

## 17_event_handling_part_2.html.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://fb.me/react-with-addons-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>

<script id="jsbin-javascript">
// Converting data (names) fetched from the mock-data file into links.
// Its possible to enhance the links and restrict them from scrolling to the top of page by adding functionality on them. In my case, "handleClick". See NameList.js


// app.js
import React from 'react';
import ReactDOM from 'react-dom';

import Layout from './components/Layout';

import names from '../../mock-data';

// The convenient way to use React Classes.
class App extends React.Component {


	render() {
		return (
		React.createElement("div", null,
			React.createElement(Layout, {names: names})
		)
		)
	}
}


ReactDOM.render(
	React.createElement(App, null),
	document.getElementById('app')
	);


// Timer.js
import React from 'react';
import { TimerHeader } from './Timer/TimerHeader';
import TimerButton from './Timer/TimerButton';

export default class Timer extends React.Component {
  constructor() {
    super()
    this.state = {
      time: 0,
      isStarted: false
    }
    this.handleClick = this.handleClick.bind(this)
  }

// componentDidMount is a React built in method
// I'll use it to invoke the buttons upon mounting instead of clicking them.
  componentDidMount() {
    this.timer = setInterval(
      () => this.startTimer(),
      1000)
  }

  componentWillUnmount() {
    clearInterval(this.timer)
  }

  startTimer() {
    this.setState(prevState => ({
      time: prevState.time += 1
    }))
    this.setState({
      isStarted: true
    })
  }

  endTimer() {
    clearInterval(this.timer)
    this.setState({
      isStarted: false
    })
  }

  handleClick() {
    this.state.isStarted ?
      this.endTimer() :
      this.timer = setInterval(
        () => this.startTimer(),
        1000)
  }

  render() {
    return(
      React.createElement("div", null,
      React.createElement(TimerHeader, {time: this.state.time}),
      React.createElement(TimerButton, {handleClick: this.handleClick, isStarted: this.state.isStarted})
      )
    )
  }

}


// NameList.js
import React from 'react';

export default class NameList extends React.Component {
  constructor() {
    super();
    this.state = {
      names: [],
      event: 'no event detected'
    }
    this.handleClick = this.handleClick.bind(this);
  }

  componentWillMount() {
    // console.log(this.props.names);
    this.setState({
      names: this.props.names
    })
  }

  handleClick(event) {
    event.preventDefault();   // Prevent link from scrolling to top page upon click.
    this.setState({
      event: event.target.value
    })
  }

  render() {
    let {names} = this.state;
    return (
      React.createElement("div", null,
      React.createElement("h2", null, this.state.event),
        React.createElement("input", {onChange: this.handleClick, type: "text"}),
        names.map((name) => React.createElement("h3", {key: name.id}, React.createElement("a", {href: "#", onClick: this.handleClick}, name.first_name, " ", name.last_name)))

      )
    )
  }
}


// Layout.js
import React from 'react';

import NameList from './NameList';

import Timer from './Timer';


export default class Layout extends React.Component {
  constructor() {
    super();
  }

  render() {
    return (
      React.createElement("div", null,
        React.createElement("h1", null, "Just some React code..."),
        React.createElement("h3", null, "Just switched to the Atom text editor"),
        React.createElement("p", null, "Nam quaerat totam expedita? Officiis cumque. Eros curae, donec magna, senectus nostrum? Fusce dolores! Erat sapiente, venenatis assumenda blanditiis deserunt maiores reiciendis, modi, praesentium morbi? Litora nihil nihil aut vero suspendisse neque vel aperiam. Earum adipiscing! Illo?"),
          React.createElement(Timer, null),
          React.createElement(NameList, {names: this.props.names})

      )
   )
  }
}
</script>


<script id="jsbin-source-javascript" type="text/javascript">// Converting data (names) fetched from the mock-data file into links.
// Its possible to enhance the links and restrict them from scrolling to the top of page by adding functionality on them. In my case, "handleClick". See NameList.js


// app.js
import React from 'react';
import ReactDOM from 'react-dom';

import Layout from './components/Layout';

import names from '../../mock-data';

// The convenient way to use React Classes.
class App extends React.Component {


	render() {
		return (
		<div>
			<Layout names={names} />
		</div>
		)
	}
}


ReactDOM.render(
	<App/>,
	document.getElementById('app')
	);


// Timer.js
import React from 'react';
import { TimerHeader } from './Timer/TimerHeader';
import TimerButton from './Timer/TimerButton';

export default class Timer extends React.Component {
  constructor() {
    super()
    this.state = {
      time: 0,
      isStarted: false
    }
    this.handleClick = this.handleClick.bind(this)
  }

// componentDidMount is a React built in method
// I'll use it to invoke the buttons upon mounting instead of clicking them.
  componentDidMount() {
    this.timer = setInterval(
      () => this.startTimer(),
      1000)
  }

  componentWillUnmount() {
    clearInterval(this.timer)
  }

  startTimer() {
    this.setState(prevState => ({
      time: prevState.time += 1
    }))
    this.setState({
      isStarted: true
    })
  }

  endTimer() {
    clearInterval(this.timer)
    this.setState({
      isStarted: false
    })
  }

  handleClick() {
    this.state.isStarted ?
      this.endTimer() :
      this.timer = setInterval(
        () => this.startTimer(),
        1000)
  }

  render() {
    return(
      <div>
      <TimerHeader time={this.state.time}/>
      <TimerButton handleClick={this.handleClick} isStarted={this.state.isStarted}/>
      </div>
    )
  }

}


// NameList.js
import React from 'react';

export default class NameList extends React.Component {
  constructor() {
    super();
    this.state = {
      names: [],
      event: 'no event detected'
    }
    this.handleClick = this.handleClick.bind(this);
  }

  componentWillMount() {
    // console.log(this.props.names);
    this.setState({
      names: this.props.names
    })
  }

  handleClick(event) {
    event.preventDefault();   // Prevent link from scrolling to top page upon click.
    this.setState({
      event: event.target.value
    })
  }

  render() {
    let {names} = this.state;
    return (
      <div>
      <h2>{this.state.event}</h2>
        <input onChange={this.handleClick} type="text"/>
        {names.map((name) => <h3 key={name.id}><a href="#" onClick={this.handleClick}>{name.first_name} {name.last_name}</a></h3>)}

      </div>
    )
  }
}


// Layout.js
import React from 'react';

import NameList from './NameList';

import Timer from './Timer';


export default class Layout extends React.Component {
  constructor() {
    super();
  }

  render() {
    return (
      <div>
        <h1>Just some React code...</h1>
        <h3>Just switched to the Atom text editor</h3>
        <p>Nam quaerat totam expedita? Officiis cumque. Eros curae, donec magna, senectus nostrum? Fusce dolores! Erat sapiente, venenatis assumenda blanditiis deserunt maiores reiciendis, modi, praesentium morbi? Litora nihil nihil aut vero suspendisse neque vel aperiam. Earum adipiscing! Illo?</p>
          <Timer />
          <NameList names={this.props.names} />

      </div>
   )
  }
}


</script></body>
</html>

## jsbin.paluhaxigi.js
// Converting data (names) fetched from the mock-data file into links.
// Its possible to enhance the links and restrict them from scrolling to the top of page by adding functionality on them. In my case, "handleClick". See NameList.js


// app.js
import React from 'react';
import ReactDOM from 'react-dom';

import Layout from './components/Layout';

import names from '../../mock-data';

// The convenient way to use React Classes.
class App extends React.Component {


	render() {
		return (
		React.createElement("div", null,
			React.createElement(Layout, {names: names})
		)
		)
	}
}


ReactDOM.render(
	React.createElement(App, null),
	document.getElementById('app')
	);


// Timer.js
import React from 'react';
import { TimerHeader } from './Timer/TimerHeader';
import TimerButton from './Timer/TimerButton';

export default class Timer extends React.Component {
  constructor() {
    super()
    this.state = {
      time: 0,
      isStarted: false
    }
    this.handleClick = this.handleClick.bind(this)
  }

// componentDidMount is a React built in method
// I'll use it to invoke the buttons upon mounting instead of clicking them.
  componentDidMount() {
    this.timer = setInterval(
      () => this.startTimer(),
      1000)
  }

  componentWillUnmount() {
    clearInterval(this.timer)
  }

  startTimer() {
    this.setState(prevState => ({
      time: prevState.time += 1
    }))
    this.setState({
      isStarted: true
    })
  }

  endTimer() {
    clearInterval(this.timer)
    this.setState({
      isStarted: false
    })
  }

  handleClick() {
    this.state.isStarted ?
      this.endTimer() :
      this.timer = setInterval(
        () => this.startTimer(),
        1000)
  }

  render() {
    return(
      React.createElement("div", null,
      React.createElement(TimerHeader, {time: this.state.time}),
      React.createElement(TimerButton, {handleClick: this.handleClick, isStarted: this.state.isStarted})
      )
    )
  }

}


// NameList.js
import React from 'react';

export default class NameList extends React.Component {
  constructor() {
    super();
    this.state = {
      names: [],
      event: 'no event detected'
    }
    this.handleClick = this.handleClick.bind(this);
  }

  componentWillMount() {
    // console.log(this.props.names);
    this.setState({
      names: this.props.names
    })
  }

  handleClick(event) {
    event.preventDefault();   // Prevent link from scrolling to top page upon click.
    this.setState({
      event: event.target.value
    })
  }

  render() {
    let {names} = this.state;
    return (
      React.createElement("div", null,
      React.createElement("h2", null, this.state.event),
        React.createElement("input", {onChange: this.handleClick, type: "text"}),
        names.map((name) => React.createElement("h3", {key: name.id}, React.createElement("a", {href: "#", onClick: this.handleClick}, name.first_name, " ", name.last_name)))

      )
    )
  }
}


// Layout.js
import React from 'react';

import NameList from './NameList';

import Timer from './Timer';


export default class Layout extends React.Component {
  constructor() {
    super();
  }

  render() {
    return (
      React.createElement("div", null,
        React.createElement("h1", null, "Just some React code..."),
        React.createElement("h3", null, "Just switched to the Atom text editor"),
        React.createElement("p", null, "Nam quaerat totam expedita? Officiis cumque. Eros curae, donec magna, senectus nostrum? Fusce dolores! Erat sapiente, venenatis assumenda blanditiis deserunt maiores reiciendis, modi, praesentium morbi? Litora nihil nihil aut vero suspendisse neque vel aperiam. Earum adipiscing! Illo?"),
          React.createElement(Timer, null),
          React.createElement(NameList, {names: this.props.names})

      )
   )
  }
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	</head>
	<body>
	<script src="https://fb.me/react-with-addons-15.1.0.js"></script>
	<script src="https://fb.me/react-dom-15.1.0.js"></script>

	<script id="jsbin-javascript">
	// Converting data (names) fetched from the mock-data file into links.
	// Its possible to enhance the links and restrict them from scrolling to the top of page by adding functionality on them. In my case, "handleClick". See NameList.js



	// app.js
	import React from 'react';
	import ReactDOM from 'react-dom';

	import Layout from './components/Layout';

	import names from '../../mock-data';

	// The convenient way to use React Classes.
	class App extends React.Component {


	render() {
	return (
	React.createElement("div", null,
	React.createElement(Layout, {names: names})
	)
	)
	}
	}


	ReactDOM.render(
	React.createElement(App, null),
	document.getElementById('app')
	);


	// Timer.js
	import React from 'react';
	import { TimerHeader } from './Timer/TimerHeader';
	import TimerButton from './Timer/TimerButton';

	export default class Timer extends React.Component {
	constructor() {
	super()
	this.state = {
	time: 0,
	isStarted: false
	}
	this.handleClick = this.handleClick.bind(this)
	}

	// componentDidMount is a React built in method
	// I'll use it to invoke the buttons upon mounting instead of clicking them.
	componentDidMount() {
	this.timer = setInterval(
	() => this.startTimer(),
	1000)
	}

	componentWillUnmount() {
	clearInterval(this.timer)
	}

	startTimer() {
	this.setState(prevState => ({
	time: prevState.time += 1
	}))
	this.setState({
	isStarted: true
	})
	}

	endTimer() {
	clearInterval(this.timer)
	this.setState({
	isStarted: false
	})
	}

	handleClick() {
	this.state.isStarted ?
	this.endTimer() :
	this.timer = setInterval(
	() => this.startTimer(),
	1000)
	}

	render() {
	return(
	React.createElement("div", null,
	React.createElement(TimerHeader, {time: this.state.time}),
	React.createElement(TimerButton, {handleClick: this.handleClick, isStarted: this.state.isStarted})
	)
	)
	}

	}


	// NameList.js
	import React from 'react';

	export default class NameList extends React.Component {
	constructor() {
	super();
	this.state = {
	names: [],
	event: 'no event detected'
	}
	this.handleClick = this.handleClick.bind(this);
	}

	componentWillMount() {
	// console.log(this.props.names);
	this.setState({
	names: this.props.names
	})
	}

	handleClick(event) {
	event.preventDefault(); // Prevent link from scrolling to top page upon click.
	this.setState({
	event: event.target.value
	})
	}

	render() {
	let {names} = this.state;
	return (
	React.createElement("div", null,
	React.createElement("h2", null, this.state.event),
	React.createElement("input", {onChange: this.handleClick, type: "text"}),
	names.map((name) => React.createElement("h3", {key: name.id}, React.createElement("a", {href: "#", onClick: this.handleClick}, name.first_name, " ", name.last_name)))

	)
	)
	}
	}


	// Layout.js
	import React from 'react';

	import NameList from './NameList';

	import Timer from './Timer';


	export default class Layout extends React.Component {
	constructor() {
	super();
	}

	render() {
	return (
	React.createElement("div", null,
	React.createElement("h1", null, "Just some React code..."),
	React.createElement("h3", null, "Just switched to the Atom text editor"),
	React.createElement("p", null, "Nam quaerat totam expedita? Officiis cumque. Eros curae, donec magna, senectus nostrum? Fusce dolores! Erat sapiente, venenatis assumenda blanditiis deserunt maiores reiciendis, modi, praesentium morbi? Litora nihil nihil aut vero suspendisse neque vel aperiam. Earum adipiscing! Illo?"),
	React.createElement(Timer, null),
	React.createElement(NameList, {names: this.props.names})

	)
	)
	}
	}
	</script>



	<script id="jsbin-source-javascript" type="text/javascript">// Converting data (names) fetched from the mock-data file into links.
	// Its possible to enhance the links and restrict them from scrolling to the top of page by adding functionality on them. In my case, "handleClick". See NameList.js



	// app.js
	import React from 'react';
	import ReactDOM from 'react-dom';

	import Layout from './components/Layout';

	import names from '../../mock-data';

	// The convenient way to use React Classes.
	class App extends React.Component {


	render() {
	return (
	<div>
	<Layout names={names} />
	</div>
	)
	}
	}


	ReactDOM.render(
	<App/>,
	document.getElementById('app')
	);


	// Timer.js
	import React from 'react';
	import { TimerHeader } from './Timer/TimerHeader';
	import TimerButton from './Timer/TimerButton';

	export default class Timer extends React.Component {
	constructor() {
	super()
	this.state = {
	time: 0,
	isStarted: false
	}
	this.handleClick = this.handleClick.bind(this)
	}

	// componentDidMount is a React built in method
	// I'll use it to invoke the buttons upon mounting instead of clicking them.
	componentDidMount() {
	this.timer = setInterval(
	() => this.startTimer(),
	1000)
	}

	componentWillUnmount() {
	clearInterval(this.timer)
	}

	startTimer() {
	this.setState(prevState => ({
	time: prevState.time += 1
	}))
	this.setState({
	isStarted: true
	})
	}

	endTimer() {
	clearInterval(this.timer)
	this.setState({
	isStarted: false
	})
	}

	handleClick() {
	this.state.isStarted ?
	this.endTimer() :
	this.timer = setInterval(
	() => this.startTimer(),
	1000)
	}

	render() {
	return(
	<div>
	<TimerHeader time={this.state.time}/>
	<TimerButton handleClick={this.handleClick} isStarted={this.state.isStarted}/>
	</div>
	)
	}

	}


	// NameList.js
	import React from 'react';

	export default class NameList extends React.Component {
	constructor() {
	super();
	this.state = {
	names: [],
	event: 'no event detected'
	}
	this.handleClick = this.handleClick.bind(this);
	}

	componentWillMount() {
	// console.log(this.props.names);
	this.setState({
	names: this.props.names
	})
	}

	handleClick(event) {
	event.preventDefault(); // Prevent link from scrolling to top page upon click.
	this.setState({
	event: event.target.value
	})
	}

	render() {
	let {names} = this.state;
	return (
	<div>
	<h2>{this.state.event}</h2>
	<input onChange={this.handleClick} type="text"/>
	{names.map((name) => <h3 key={name.id}><a href="#" onClick={this.handleClick}>{name.first_name} {name.last_name}</a></h3>)}

	</div>
	)
	}
	}


	// Layout.js
	import React from 'react';

	import NameList from './NameList';

	import Timer from './Timer';


	export default class Layout extends React.Component {
	constructor() {
	super();
	}

	render() {
	return (
	<div>
	<h1>Just some React code...</h1>
	<h3>Just switched to the Atom text editor</h3>
	<p>Nam quaerat totam expedita? Officiis cumque. Eros curae, donec magna, senectus nostrum? Fusce dolores! Erat sapiente, venenatis assumenda blanditiis deserunt maiores reiciendis, modi, praesentium morbi? Litora nihil nihil aut vero suspendisse neque vel aperiam. Earum adipiscing! Illo?</p>
	<Timer />
	<NameList names={this.props.names} />

	</div>
	)
	}
	}




	</script></body>
	</html>