{"size": 1147, "ext": "js", "max_stars_repo_path": "part1/sandbox/src/index.js", "max_stars_repo_name": "jasonlwj/fullstack-open", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "part1/sandbox/src/index.js", "max_issues_repo_name": "jasonlwj/fullstack-open", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "part1/sandbox/src/index.js", "max_forks_repo_name": "jasonlwj/fullstack-open", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 18.8032786885, "max_line_length": 57, "alphanum_fraction": 0.614646905}
import React, { useState } from 'react'
import ReactDOM from 'react-dom'
import './index.css'

const History = ({ allClicks }) => {
	// if empty click history
	if (allClicks.length === 0 ) {
		return (
			<div>
				the app is used by pressing the buttons
			</div>
		)
	}

	// default
	return (
		<div>
			button press history: {allClicks.join(' ')}
		</div>
	)
}

const Button = ({ onClick, text }) => {
	return (
		<button onClick={onClick}>{text}</button>
	)
}

const App = () => {
	// declare the state
	const [left, setLeft] = useState(0)
	const [right, setRight] = useState(0)
	const [allClicks, setAll] = useState([])

	// onClick handlers
	const handleLeftClick = () => {
		setAll(allClicks.concat('L'))
		setLeft(left + 1)
	}

	const handleRightClick = () => {
		setAll(allClicks.concat('R'))
		setRight(right + 1)
	}

	// render to the screen
	return (
		<div className="App">
			<div>
				{left}
				<Button onClick={handleLeftClick} text='left' />
				<Button onClick={handleRightClick} text='right' />
				{right}
			</div>
			<History allClicks={allClicks} />
		</div>
	)
}

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