{"size": 1580, "ext": "js", "max_stars_repo_path": "src/components/Port.js", "max_stars_repo_name": "cclrobotics/pecorino-app", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/Port.js", "max_issues_repo_name": "cclrobotics/pecorino-app", "max_issues_repo_issues_event_min_datetime": "2019-08-22T06:05:46.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-26T09:51:17.000Z", "max_forks_repo_path": "src/components/Port.js", "max_forks_repo_name": "cclrobotics/pecorino-app", "max_forks_repo_forks_event_min_datetime": "2019-02-14T07:49:51.000Z", "max_forks_repo_forks_event_max_datetime": "2019-02-14T07:49:51.000Z"}
{"max_stars_count": null, "max_issues_count": 6, "max_forks_count": 1, "avg_line_length": 25.0793650794, "max_line_length": 139, "alphanum_fraction": 0.5898734177}
import React from 'react'
import { Paper, Grid, Typography, Button, TextField } from '@material-ui/core';
import Api from './Api'

class Port extends React.Component{
	constructor(){
		super()
		this.state = {
			port : ''
		}
	}

	getPort = async () => {
		let response = await Api.get('/port')
		this.setState({
			port : response.data.name
		})
	}

	setPort = async () => {
		if(this.state.port.toString().trim() !== ''){
			Api.put('/port', {
				name : this.state.port
			})
		}
	}

	cyclePort = () => {
		Api.post('/port/cycle')
	}

	handleChange = (e) => {
		this.setState({
			port : e.target.value
		})
	}

	render(){
		return(
			<Paper>
				<Grid container={true} direction='column' className='buttonGroup' spacing={8}>
					<Grid item={true}>
						<Typography><strong>PORT</strong></Typography>
					</Grid>
					<Grid item={true}>
						<Button fullWidth={true} color='primary' size='small' variant='contained' onClick={this.getPort}>SHOW</Button>
					</Grid>
					<Grid item={true}>
						<TextField value={this.state.port} fullWidth={true} onChange={this.handleChange} InputProps={{style:{fontSize:'12px'}}}></TextField>
					</Grid>
					<Grid item={true}>
						<Button fullWidth={true} color='secondary' size='small' variant='contained' onClick={this.setPort}>SET</Button>
					</Grid>
					<Grid item={true}>
						<Button fullWidth={true} color='secondary' size='small' variant='contained' onClick={this.cyclePort}>CYCLE</Button>
					</Grid>
				</Grid>
			</Paper>
		)
	}
}

export default Port