{"size": 2796, "ext": "js", "max_stars_repo_path": "web/client/src/App.js", "max_stars_repo_name": "Zepelown/StudyingDBMS", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "web/client/src/App.js", "max_issues_repo_name": "Zepelown/StudyingDBMS", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "web/client/src/App.js", "max_forks_repo_name": "Zepelown/StudyingDBMS", "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": 24.9642857143, "max_line_length": 159, "alphanum_fraction": 0.6151645207}
import React, { Component } from 'react';
import Customer from './components/Customer'
import AddCustomer from './components/AddCustomer'
import Paper from '@material-ui/core/Paper';
import Table from '@material-ui/core/Table';
import TableHead from '@material-ui/core/TableHead';
import TableBody from '@material-ui/core/TableBody';
import TableRow from '@material-ui/core/TableRow';
import TableCell from '@material-ui/core/TableCell';
import CircularProgress from '@material-ui/core/CircularProgress';
import { withStyles } from '@material-ui/core/styles';

const styles = theme => ({
  root: {
    width: "100%",
    marginTop: theme.spacing.unit * 3,
    overflowX: "auto"
  },
  table: {
    minWidth: 1080
  },
  progress:{
	margin: theme.spacing.unit * 2
  }
});


class App extends Component {
  constructor(props){
	  super(props);
	  this.state = {
		  customers: '',
		  completed: 0
	  }
	  this.stateRefresh = this.stateRefresh.bind(this);
  }
	
  stateRefresh() {
	  this.setState({
		  customers: '',
		  completed: 0
	  });
	  this.callApi()
	  	.then(res => this.setState({customers: res}))
	    .catch(err => console.log(err));
  }
  
  componentDidMount() {
	this.timer = setInterval(this.progress, 20);
    this.callApi()
      .then(res => this.setState({customers: res}))
      .catch(err => console.log(err));
  }

  componentWillUnmount(){
	  clearInterval(this.timer);
  }
  
  callApi = async () => {
    const response = await fetch('/api/customers');
    const body = await response.json();
    return body;
  }
  
  progress = () => {
	  const { completed} = this.state;
	  this.setState(
		  { completed: completed >= 100 ? 0 : completed + 1});
  };
  
  render() {
    const { classes } = this.props;
    return (
	<div>
      <Paper className={classes.root}>
        <Table className={classes.table}>
          <TableHead>
            <TableRow>
              <TableCell>번호</TableCell>
              <TableCell>이미지</TableCell>
              <TableCell>이름</TableCell>
              <TableCell>생년월일</TableCell>
              <TableCell>성별</TableCell>
              <TableCell>직업</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
		{this.state.customers ? this.state.customers.map(c => {
		return <Customer stateRefresh={this.stateRefresh}key={c.id} id={c.id} image={c.image} name=			{c.name} birthday={c.birthday} gender={c.gender} job={c.job} />
	}) : 
		<TableRow>
			<TableCell colSpan="6" align="center">
				<CircularProgress className={classes.progress}
					variant="determinate"
					value={this.state.completed}
				/>
			</TableCell>
		</TableRow>
		}

          </TableBody>
        </Table>
      </Paper>
	  <AddCustomer stateRefresh={this.stateRefresh}/>
	</div>
      );
  }
}


export default withStyles(styles)(App);
