CycleList.js

import React, {Component} from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.js';

// Procedures

var headers = new Headers();
headers.append('Content-Type', 'application/json');

var api_url = '/api/'

function tmssGetList(url, component){
   console.log('Getting '+ url)
   fetch(api_url+url, {headers: headers})
     .then(response => response.json())
     .then(response => {console.log(response);
                        component.setState({items:response.results});})
     .catch(err => console.log(err))
   }

function tmssGet(url, component){
   console.log('Getting '+ url)
   fetch(api_url+url, {headers: headers})
     .then(response => response.json())
     .then(response => {console.log(response);
                        component.setState(response);})
     .catch(err => console.log(err))
   }

function tmssPost(url, data, callback, callback_arg){
   console.log('Posting '+ url)
   var datastring = JSON.stringify(data);
   fetch(api_url+url, {headers: headers, method: 'POST', body: datastring})
     .then(callback(callback_arg))
     .catch(err => console.log(err))
   }

function tmssPut(url, data){
   console.log('Putting '+ url)
   var datastring = JSON.stringify(data);
   fetch(api_url+url, {headers: headers, method: 'PUT', body: datastring})
     .catch(err => console.log(err))
   }

function tmssPatch(url, data, component){
   console.log('Patching '+ url)
   var datastring = JSON.stringify(data);
   fetch(api_url+url, {headers: headers, method: 'PATCH', body: datastring})
     .then(component.setState(data))
     .catch(err => console.log(err))
   }

function tmssDelete(url, callback, callback_arg){
   console.log('Deleting '+ url)
   fetch(api_url+url, {headers: headers, method: 'DELETE'})
     .then(callback(callback_arg))
     .catch(err => console.log(err))
   }


// Components

const Tag = props => (
   <span className={props.tag === 'Test' ? 'badge badge-primary' : 'badge badge-secondary'}>{props.tag}</span>
)

class Cycle extends Component {
    constructor(props) {
        super(props);
        this.state = props.cycle;
        this.isnew = props.isnew;
        this.deleteItem = props.deleteItem;
        this.addItem = props.addItem;
        this.index = props.index;
    }

    componentWillReceiveProps({someProp}) {
      this.setState({...this.state,someProp})
    }

    handleChange(e, p){
        var value = e.target.value; 
        if(this.isnew){
             this.setState({[p]: value});
        }else{
            tmssPatch('cycle/'+this.state.name+'/', {[p]: value}, this);
        }
    }

    render(){
        return (
            <tr className={this.isnew ? 'table-info' : ''}>
                <td>{this.state.tags.map(
                  function(currentTag, i){
                    return <Tag tag={currentTag} key={i} />
                  }
                )}</td>
                <td><input type="text" className="form-control" value={this.state.name} onChange={(e) => this.handleChange(e, 'name')}/></td>
                <td><input type="number" className="form-control" value={this.state.number} min="0" onChange={(e) => this.handleChange(e, 'number')}/></td>
	            <td><input type="text" className="form-control" value={this.state.description} onChange={(e) => this.handleChange(e, 'description')}/></td>
                <td><input type='datetime-local' className="form-control" value={this.state.start} onChange={(e) => this.handleChange(e, 'start')}/></td>
                <td><input type='datetime-local' className="form-control" value={this.state.stop} onChange={(e) => this.handleChange(e, 'stop')}/></td>
                <td><input type="number" className="form-control" value={this.state.standard_hours} min="0" onChange={(e) => this.handleChange(e, 'standard_hours')}/></td>
                <td><input type="number" className="form-control" value={this.state.expert_hours} min="0"onChange={(e) => this.handleChange(e, 'expert_hours')}/></td>
                <td><input type="number" className="form-control" value={this.state.filler_hours} min="0"onChange={(e) => this.handleChange(e, 'filler_hours')}/></td>
                <td><select multiple className="form-control"onChange={(e) => this.handleChange(e, 'name')}>
                  {this.state.projects.map(
                  function(project, i){
                    return <option key={i}>{project}</option>
                  })}
                    </select></td>
                <td>{!this.isnew ? 
                  <button className="btn btn-danger"onClick={() => {
                    console.log(this.index);
                    tmssDelete('cycle/'+this.state.name, this.deleteItem, this.index);
                  }}>Delete</button> : 
                  <button className="btn btn-primary"onClick={() => {
                    tmssPost('cycle/', this.state, this.addItem, this.state);
                  }}>Create</button>}
                </td>
            </tr>
        )
    }}


class CycleList extends Component {

    constructor(props) {
        super(props);
        this.state = {items: []};
    }

    componentDidMount(){
        tmssGetList('cycle/', this);
    }

    deleteItem = (index) => {
        console.log('Deleting Item '+index)
        var itms = this.state.items;
        itms.map((j, i) => console.log(JSON.stringify(j)))
        itms.splice(index, 1);
        itms.map((j, i) => console.log(JSON.stringify(j)))
        this.setState( {items: itms} );
    }

    addItem = (data) => {
        var itms = this.state.items;
        itms.push(data);
        this.setState( {items: itms} );
    }

    cycles() {
        return this.state.items.map(
		    (currentCycle, i) => <Cycle cycle={currentCycle} key={currentCycle.name} index={i} deleteItem={this.deleteItem} setState={this.setState}/> 
	    );
    }

    render() {
        return (
            <div>
                <h3>Cycle List</h3> 
                <table className="table table-striped table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>Tags</th>
                            <th>Name</th>
                            <th>Number</th>
			                <th>Description</th>
                            <th>Start</th>
                            <th>Stop</th>
                            <th>Standard Hours</th>
                            <th>Expert Hours</th>
                            <th>Filler Hours</th>
                            <th>Projects</th>
                        </tr>
                    </thead>
                    <tbody>
                        { this.cycles() }
                        <Cycle cycle={{name: 'enter name', 
                                       tags: ["Test"], 
                                       number: 0, 
                                       description: "enter description", 
                                       standard_hours: 0, 
                                       expert_hours: 0, 
                                       filler_hours: 0, 
                                       projects: [], 
                                       start: '2020-01-01T10:00:00', 
                                       stop: '2021-01-01T10:00:00'}} 
                               key={-1} 
                               isnew={'true'}
                               addItem={this.addItem} /> 
                    </tbody>
                </table>
            </div>
        )
    }
}

export default CycleList