Ggtcf

export class LeaveAComment extends Component 
 constructor(props) 
 super(props);

 this.state = 
 name: "",
 comment: "",
 date: ""
 

 this.onChangeName = this.onChangeName.bind(this);
 this.onChangeComment = this.onChangeComment.bind(this);
 this.onSubmit = this.onSubmit.bind(this);
 

 onChangeName(e) 
 this.setState(
 name: e.target.value
 )
 

 onChangeComment(e) 
 this.setState(
 comment: e.target.value
 )
 

 onSubmit(e) 
 e.preventDefault();
 console.log(`The values are $this.state.name, $this.state.comment, and $this.state.date`);

 var data = new FormData(e.target);

 //console.log(data)

 fetch("api/Comment", 
 method: 'POST',
 body: data
 )

 // Clear input boxes
 this.setState(
 name: "",
 comment: "",
 date: ""
 )

 // Re-load FetchComments.js here?

 

 render() 
 return (
 <div>
 <header>
 <h2> Leave A Comment </h2>
 </header>

 <form
 onSubmit=this.onSubmit
 method="POST"> 
 <label> Name: </label>
 <input
 name= "name"
 className="form-control" value=''
 value=this.state.name
 onChange=this.onChangeName/>
 <br />

 <label> Comment: </label>
 <input
 name="comment"
 className="form-control"
 value=this.state.comment
 onChange=this.onChangeComment/>
 <br />

 <div
 name="date"
 className="form-control"
 value=new Date().getDate()
 hidden>
 </div>

 <input type="submit" value="Submit" className="btn btn-primary" />
 </form>
 </div>
 );
 

export class FetchComments extends Component 
 constructor() 
 super();

 this.state = 
 loading: true,
 commentList: []
 ;
 

 componentDidMount() 
 fetch('api/Comment')
 .then(res => res.json())
 .then(cl => this.setState( loading: false, commentList: cl ,
 () => console.log("successfully fetched all comments", cl)))
 

 renderCommentTable() 
 return (
 < div className = "container" >
 <div className="panel panel-default p50 uth-panel">
 <table className="table table-hover">
 <thead>
 <tr>
 <th> Name </th>
 <th> Comment </th>
 <th> Time Stamp </th>
 </tr>
 </thead>
 <tbody>
 this.state.commentList.map(c =>
 <tr key=c.id>
 <td>c.name </td>
 <td>c.comment</td>
 <td> new Intl.DateTimeFormat('en-US').format(c.comentDate) </td>
 </tr>
 )
 </tbody>
 </table>
 </div>
 </div >
 )
 

 render() 
 let contents = this.state.loading ? <p> <img src="/Icons/LoadingPaopu.gif" alt="Loading Paopu Icon" /> </p>
 : this.renderCommentTable(this.state.commentList); 

 return (
 <div>
 <h2> Comment List </h2>

 contents
 </div>
 );