react express

import React from 'react';
// import logo from './logo.svg';
// import './App.css';
// import styled from 'styled-components'
// import SearchIcon from './components/shared/searchIcon'
// import { BrowserRouter as Router, Route, Link,Switch } from "react-router-dom";
// import UserDetail from './components/User/UserDetail'
// import App from './App'








// const RootWrapper = styled.div`
  
// `


class Root extends React.Component {
  constructor(props){
    super(props)
  this.state = {
    lists: [],
    nputValue: ""
  }

    


  this.handleChange = this.handleChange.bind(this)
  this.handleSubmit = this.handleSubmit.bind(this)
  }

  componentWillMount(){
    fetch('http://localhost:5000/posts')
      .then((response) => response.json())
      .then((lists)=> this.setState({lists: lists}))}

  handleSubmit(e){
    const obj = {hello: this.state.inputValue}
    const body = JSON.stringify(obj);
    const headers = {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      };

    const method = "POST";  
    
 
    fetch('http://localhost:5000/createPost', {method, headers, body})
      .then((res) => res.json())
      .then((lists)=>{console.log(lists)})
      e.target[0].value = ""   
  }
  
  handleChange(e){
    console.log(e.target.value)
    this.setState({inputValue: e.target.value})
  }

  renderEdit(){
    
  }
 

  render(){
      const {lists} = this.state
      console.log(lists)
     return(
       <div>
         {lists.map((list) => 
          {
            return (
              <div key={list.id}>
               <span >{list.id}:</span> 
               <span>{list.body}</span>
               <button>編集</button>
              </div>
            )  
          }         
         )}
       
       <form onSubmit={this.handleSubmit}>
        <input type="text" name="title" onChange={this.handleChange}/>
        <input type="submit" value="送信"/>   
       </form>
       </div>    
     )
  }

}


// class Root extends React.Component{
//   constructor(props){
//     super(props)
  

//   }

  


//  render(){
//    return (
//     <RootWrapper className="App">
//       <Router>
//       <Switch>
//        <Route exact path="/" component={App} />
//        <Route path="/user" component={UserDetail}/>
//       </Switch>
//      </Router>
//     </RootWrapper>
//   );
//  }
// }

export default Root;

var express = require('express');
var app = express();
var bodyParser = require('body-parser')
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));


let listCount = 3

const lists = [
{id:1, body:"test1"},
{id:2, body:"test2"},
{id:3, body:"test3"},
]

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
  });


app.get("/posts", function(req,res){
 console.log("get Lists")
  console.log(lists)
  res.send(lists)
})

app.post('/createPost',function(req,res){
  console.log("post List")
  console.log(req.body.hello)

  const list = {id: listCount + 1, body: req.body.hello}
  lists.push(list) 

  listCount += 1
})


app.listen(5000)