Firstly, I use create-react-app to create my project files. But then I’ll delete everything in src folder and start from scratch to get the things I want to have in it.
In preparation for some packages I’ll need later on, I “yarn add” (same as “npm install”, using yarn the following packages: redux, redux-promise, react-redux, and react-router-dom.
I also want to use the Material UI framework, so I’ll yarn add “@material-ui/core”.
I also need to yarn add ‘redux-thunk’.
import React, { Component } from "react"; import { connect } from "react-redux"; import { Router, browserHistory } from "react-router"; import { withRouter } from "react-router-dom"; import { loadHeadaches, removeHeadaches, addHeadache, postNewHeadache } from "../store/actions/headaches.js"; import { withStyles } from "@material-ui/core/styles"; import { DateFormatInput, TimeFormatInput } from "material-ui-next-pickers"; import TextField from "@material-ui/core/TextField"; import MenuItem from "@material-ui/core/MenuItem"; import InputAdornment from "@material-ui/core/InputAdornment"; import Input from "@material-ui/core/Input"; import InputLabel from "@material-ui/core/InputLabel"; import Button from "@material-ui/core/Button"; import "./MyHeadacheNewForm.css"; import { format, parse } from "date-fns"; // console.log("postNewHeadache", postNewHeadache); const buttonStyle = { margin: "5px", color: "blue" }; const styles = theme => ({ container: { display: "flex", flexWrap: "wrap" }, textField: { marginLeft: theme.spacing.unit, marginRight: theme.spacing.unit, width: 200 } }); const pain = [ { value: 1, label: "1" }, { value: 2, label: "2" }, { value: 3, label: "3" }, { value: 4, label: "4" }, { value: 5, label: "5" }, { value: 6, label: "6" }, { value: 7, label: "7" }, { value: 8, label: "8" }, { value: 9, label: "9" }, { value: 10, label: "10" } ]; pain.map(function(item) { console.log("pain item", item); }); // let date = {}; class NewHeadacheForm extends Component<{}, NewHeadacheForm> { constructor(props) { super(props); const { authUser } = this.props; this.state = { date: "", painLevel: 0, comment: "" }; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); // this.handleNewHeadache = this.handleNewHeadache.bind(this); // this.onChangeDate = this.onChangeDate.bind(this); // this.postNewHeadache = this.postNewHeadache.bind(this); } handleChange = prop => event => { console.log("prop", prop, "event.target.value", event.target.value); this.setState({ [prop]: event.target.value }); // console.log("this.state", this.state); }; // onChangeDate = (event, date) => { // console.log("Date:", date); // this.setState({ selectedDate: date, dateText: format(date, "MM/DD/YYYY") }); // }; handleNewHeadache = event => { console.log("event", event); event.preventDefault(); console.log("postNewHeadache", postNewHeadache); console.log("this.state", { ...this.state }); // console.log("this.router.history", this.router.history); this.props.postNewHeadache({ ...this.state }); console.log("hello"); // this.setState({}); this.props.history.push("/myHeadaches/list"); }; handleSubmit(e) { console.log("AuthForm.js this.props", this.props); e.preventDefault(); const authType = this.props.signUp ? "signup" : "signin"; console.log("MyHeadacheNewForm - authType", authType); console.log("MyHeadacheNewForm - this.props", this.props); this.props .onAuth(authType, this.state) .then(() => { this.props.history.push("/myHeadaches/list"); }) .catch(() => { return; }); } render() { return ( <form onSubmit={this.handleNewHeadache}> <div> <h1>New Headache Form</h1> <TextField className="headacheInput" id="date" name="date" label="Headache Date" type="date" defaultValue="2020-01-01" onChange={this.handleChange("date")} InputLabelProps={{ shrink: true }} /> <p> </p> <TextField id="painLevel" className="headacheInput" select label="Pain Level" value={this.state.painLevel} onChange={this.handleChange("painLevel")} > {pain.map(option => ( <MenuItem key={option.value} value={option.value}> {option.label} </MenuItem> ))} </TextField> <p> </p> <TextField id="name" className="headacheInput" label="Comment" value={this.state.comment} onChange={this.handleChange("comment")} type="text" name="comment" /> </div> <div> <Button variant="outlined" label="Submit" style={buttonStyle} type="submit" > Submit </Button> </div> </form> ); } } // interface NewHeadacheForm { // date: Date; // } function mapStateToProps(state) { return { errors: state.errors, newHeadache: state }; } export default withRouter( connect( mapStateToProps, { postNewHeadache } )(NewHeadacheForm) );
Continues….
I had to add a sort function to my map function in order to get the headache entries to display in descending order of date.
<TableBody> {myHeadaches .sort((a, b) => (a.date < b.date ? 0 : -1)) .map(n => { return ( <TableRow key={n._id}> <TableCell numeric>{n.date}</TableCell> <TableCell numeric>{n.painLevel}</TableCell> <TableCell numeric>{n.comment}</TableCell> <TableCell numeric> <span> <button onClick={removeHeadache.bind(this, n.user._id, n._id)} > X </button> </span> </TableCell> </TableRow> ); })} </TableBody>