Skip to content

Instantly share code, notes, and snippets.

@myraft

myraft/TodoForm.js

Created May 29, 2020 14:13
Show Gist options
  • Save myraft/8a14cef33844c8eb3105af4fa413dc8e to your computer and use it in GitHub Desktop.
Save myraft/8a14cef33844c8eb3105af4fa413dc8e to your computer and use it in GitHub Desktop.
Download ZIP
TODO updates
Raw
TodoForm.js
import React, { Component } from "react"
import TextField from '@material-ui/core/TextField'
import Button from '@material-ui/core/Button'
import Grid from "@material-ui/core/Grid"
import TextareaAutosize from '@material-ui/core/TextareaAutosize'
import Badge from '@material-ui/core/Badge';
import MailIcon from '@material-ui/icons/Mail';
import { makeStyles } from '@material-ui/core/styles';
import { Typography } from "@material-ui/core";
import Paper from "@material-ui/core/Paper"
class TodoForm extends Component {
useStyles= makeStyles((theme) => ({
root: {
'& > *': {
margin: theme.spacing(2),
},
paper: {
margin: "1em",
padding: "2em",
textAlign: "justify"
}
}
}))
defaultProps = {
color: 'secondary',
children: <MailIcon />,
};
constructor(props) {
super(props)
this.classes = makeStyles();
let defaultTask = "7th item"
let defaultBody = "Body of the seventh item"
this.api_url = `http://localhost:3001/api/v1/todos`
this.state = {
items: [],
isLoading: false,
api_url: props.api_url,
task: defaultTask,
body: defaultBody,
defaultTaskValue: defaultTask,
defaultBodyValue: defaultBody
}
this.handleSubmit = this.handleSubmit.bind(this);
this.handleTaskChange = this.handleTaskChange.bind(this);
this.handleBodyChange = this.handleBodyChange.bind(this);
//
}
handleSubmit(event) {
event.preventDefault();
this.formSubmit(event.target);
}
async formSubmit(formData) {
var data = new FormData(formData);
await fetch(this.state.api_url, {
method: "POST",
mode: "cors",
body: data
}).then(response => response.json())
.then(response => this.props.updateTodoList(response))
this.setState({
task: this.state.defaultTaskValue,
body: this.state.defaultBodyValue
})
this.getTasks();
}
handleTaskChange(event) {
this.setState({
task: event.target.value
})
}
handleBodyChange(event) {
this.setState({
body: event.target.value
})
}
componentDidMount() {
console.log("Farooq 6.1 - " + JSON.stringify(this.item, null, 2))
this.getTasks();
}
getTasks() {
console.log("Farooq 6 - getTasks")
fetch(this.api_url)
.then(response => response.json())
.then(response_items => {
this.setState({
items: response_items.reverse()
})
});
console.log("Farooq 6.0 - getTasks item count " + this.state.items.length)
}
loadCount = (callback) => {
// this.getTasks()
// callback();
let _items = [...this.state.items];
console.log("Farooq 6.2 loadCount- _items : " + _items.length)
console.log("Farooq 6.3 loadCount- items : " + this.state.items.length)
return _items.length -1 ;
}
render() {
// this.classes = useStyles();
const { items, isLoading } = this.state;
return (
<Grid container>
<Grid item xs></Grid>
<Grid item xs></Grid>
<Grid item xs>
<Paper elevation={10} className={this.classes.paper}>
<Typography variant="h4" className={this.classes.heading}>
<div className={this.classes.root}>
<Badge
isLoading={this.state.isLoading}
badgeContent={this.state.items.length}
{...this.defaultProps}
/>
</div>
</Typography>
</Paper>
</Grid>
<Grid item xs></Grid>
<Grid item xs={10}>
<form
onSubmit={this.handleSubmit}
id="todo_form"
autoComplete="off">
<Grid container>
<Grid item xs={12}>
<TextField
id="task_input"
label="Task Heading"
variant="outlined"
type="text"
value={this.state.task}
name="todo[task]"
onChange={this.handleTaskChange}
fullWidth />
</Grid>
<Grid item xs={12}>
<TextareaAutosize
id="body_input"
label="Task Body"
variant="outlined"
type="text"
style={{width: "99%", borderRadius: "5px"}}
rowsMin="3"
placeholder="Description..."
value={this.state.body}
onChange={this.handleBodyChange}
name="todo[body]"/>
</Grid>
<Grid item xs={2}>
<Button variant="contained"
color="primary"
type="submit"
style={{ height: "100%" }}>Add Task</Button>
</Grid>
</Grid>
</form>
</Grid>
<Grid item xs></Grid>
</Grid>
)
}
}
export default TodoForm;
import React from "react";
import Grid from "@material-ui/core/Grid"
import Paper from "@material-ui/core/Paper"
import { makeStyles } from "@material-ui/core/styles"
import Button from "@material-ui/core/Button"
import DeleteIcon from "@material-ui/icons/Delete"
import Typography from "@material-ui/core/Typography"
const useStyles = makeStyles({
root: {
height: "auto",
padding: "2em",
margin: "1em"
},
divider: {
// this is the divider / line under
width: "25%",
margin: "1em"
},
paper: {
margin: "1em",
padding: "2em",
textAlign: "justify"
},
heading: {
textAlign: "center"
},
todo_body: {
padding: "1em"
}
})
export default function TodoItem(props) {
const classes = useStyles();
function handleDelete() {
props.deleteItem(props.item)
}
return (
<Grid container spacing={0}>
<Grid item xs={1}></Grid>
<Grid item xs={10}>
<Paper elevation={10} className={classes.paper}>
<Typography variant="h4" className={classes.heading}>
{props.item.task}
</Typography>
<hr className={classes.divider} style={{marginLeft: "37.5"}}/>
<div className={classes.todo_body}>
<Typography variant="body1">
{props.item.body}
</Typography>
</div>
<hr className={classes.divider}/>
<Button
variant="contained"
color="secondary"
size="small"
startIcon={<DeleteIcon />}
onClick={handleDelete}>
Delete
</Button>
</Paper>
</Grid>
</Grid>
)
}
import React, { Component } from "react"
import TodoForm from "./TodoForm"
import TodoItem from "./TodoItem"
import Grid from "@material-ui/core/Grid"
const api_url = `http://localhost:3001/api/v1/todos`
class TodoList extends Component {
constructor(props) {
super(props)
this.state = {
items: []
}
this.updateTodoList = this.updateTodoList.bind(this);
this.deleteItem = this.deleteItem.bind(this);
}
componentDidMount() {
this.getTasks();
}
getTasks() {
fetch(api_url)
.then(response => response.json())
.then(response_items => {
this.setState({
items: response_items.reverse()
})
});
}
updateTodoList(item) {
let _items = this.state.items
_items.unshift(item)
this.setState({
items: _items
})
}
deleteItem(item) {
// delete the item remotely
// localhost:3001/api/v1/todos + /13
console.log("Farooq 3.0 BEFORE deleteItem - items : " + this.state.items.length)
var deleteURL = api_url + `/${item.id}`
fetch(deleteURL, {
method: "DELETE"
}).then(() => {
// Client side delete
var _items = this.state.items;
var index = _items.indexOf(item)
console.log("Farooq 3.0.1 BETWEEN deleteItem - items : " + _items.length)
_items.splice(index, 1);
this.setState({
items: _items,
isLoading: false,
})
console.log("Farooq 3.0.2 BETWEEN deleteItem - items : " + _items.length)
})
console.log("Farooq 3.1 AFTER deleteItem - items : " + this.state.items.length)
}
render() {
// console.log("Farooq 3.x state.items: " + JSON.stringify(this.state.items,null,2))
// console.log("Farooq 3.x state.items.length: " + this.state.items.length) // for whatever reason - this shows 0
return (
<Grid container spacing={3}>
<Grid item xs={12}>
<TodoForm api_url={api_url} updateTodoList={this.updateTodoList} />
</Grid>
<Grid item xs={12} id="todo_list">
{this.state.items.map((item) => (
<TodoItem
key={item.id}
item={item}
deleteItem={this.deleteItem} />
))}
</Grid>
</Grid>
)
}
}
export default TodoList;import React, { Component } from "react"
import TextField from '@material-ui/core/TextField'
import Button from '@material-ui/core/Button'
import Grid from "@material-ui/core/Grid"
import TextareaAutosize from '@material-ui/core/TextareaAutosize'
import Badge from '@material-ui/core/Badge';
import MailIcon from '@material-ui/icons/Mail';
import { makeStyles } from '@material-ui/core/styles';
import { Typography } from "@material-ui/core";
import Paper from "@material-ui/core/Paper"
class TodoForm extends Component {
useStyles= makeStyles((theme) => ({
root: {
'& > *': {
margin: theme.spacing(2),
},
paper: {
margin: "1em",
padding: "2em",
textAlign: "justify"
}
}
}))
defaultProps = {
color: 'secondary',
children: <MailIcon />,
};
constructor(props) {
super(props)
this.classes = makeStyles();
let defaultTask = "7th item"
let defaultBody = "Body of the seventh item"
this.api_url = `http://localhost:3001/api/v1/todos`
this.state = {
items: [],
isLoading: false,
api_url: props.api_url,
task: defaultTask,
body: defaultBody,
defaultTaskValue: defaultTask,
defaultBodyValue: defaultBody
}
this.handleSubmit = this.handleSubmit.bind(this);
this.handleTaskChange = this.handleTaskChange.bind(this);
this.handleBodyChange = this.handleBodyChange.bind(this);
//
}
handleSubmit(event) {
event.preventDefault();
this.formSubmit(event.target);
}
async formSubmit(formData) {
var data = new FormData(formData);
await fetch(this.state.api_url, {
method: "POST",
mode: "cors",
body: data
}).then(response => response.json())
.then(response => this.props.updateTodoList(response))
this.setState({
task: this.state.defaultTaskValue,
body: this.state.defaultBodyValue
})
this.getTasks();
}
handleTaskChange(event) {
this.setState({
task: event.target.value
})
}
handleBodyChange(event) {
this.setState({
body: event.target.value
})
}
componentDidMount() {
console.log("Farooq 6.1 - " + JSON.stringify(this.item, null, 2))
this.getTasks();
}
getTasks() {
console.log("Farooq 6 - getTasks")
fetch(this.api_url)
.then(response => response.json())
.then(response_items => {
this.setState({
items: response_items.reverse()
})
});
console.log("Farooq 6.0 - getTasks item count " + this.state.items.length)
}
loadCount = (callback) => {
// this.getTasks()
// callback();
let _items = [...this.state.items];
console.log("Farooq 6.2 loadCount- _items : " + _items.length)
console.log("Farooq 6.3 loadCount- items : " + this.state.items.length)
return _items.length -1 ;
}
render() {
// this.classes = useStyles();
const { items, isLoading } = this.state;
return (
<Grid container>
<Grid item xs></Grid>
<Grid item xs></Grid>
<Grid item xs>
<Paper elevation={10} className={this.classes.paper}>
<Typography variant="h4" className={this.classes.heading}>
<div className={this.classes.root}>
<Badge
isLoading={this.state.isLoading}
badgeContent={this.state.items.length}
{...this.defaultProps}
/>
</div>
</Typography>
</Paper>
</Grid>
<Grid item xs></Grid>
<Grid item xs={10}>
<form
onSubmit={this.handleSubmit}
id="todo_form"
autoComplete="off">
<Grid container>
<Grid item xs={12}>
<TextField
id="task_input"
label="Task Heading"
variant="outlined"
type="text"
value={this.state.task}
name="todo[task]"
onChange={this.handleTaskChange}
fullWidth />
</Grid>
<Grid item xs={12}>
<TextareaAutosize
id="body_input"
label="Task Body"
variant="outlined"
type="text"
style={{width: "99%", borderRadius: "5px"}}
rowsMin="3"
placeholder="Description..."
value={this.state.body}
onChange={this.handleBodyChange}
name="todo[body]"/>
</Grid>
<Grid item xs={2}>
<Button variant="contained"
color="primary"
type="submit"
style={{ height: "100%" }}>Add Task</Button>
</Grid>
</Grid>
</form>
</Grid>
<Grid item xs></Grid>
</Grid>
)
}
}
export default TodoForm;
Raw
TodoItem.js
import React from "react";
import Grid from "@material-ui/core/Grid"
import Paper from "@material-ui/core/Paper"
import { makeStyles } from "@material-ui/core/styles"
import Button from "@material-ui/core/Button"
import DeleteIcon from "@material-ui/icons/Delete"
import Typography from "@material-ui/core/Typography"
const useStyles = makeStyles({
root: {
height: "auto",
padding: "2em",
margin: "1em"
},
divider: {
// this is the divider / line under
width: "25%",
margin: "1em"
},
paper: {
margin: "1em",
padding: "2em",
textAlign: "justify"
},
heading: {
textAlign: "center"
},
todo_body: {
padding: "1em"
}
})
export default function TodoItem(props) {
const classes = useStyles();
function handleDelete() {
props.deleteItem(props.item)
}
return (
<Grid container spacing={0}>
<Grid item xs={1}></Grid>
<Grid item xs={10}>
<Paper elevation={10} className={classes.paper}>
<Typography variant="h4" className={classes.heading}>
{props.item.task}
</Typography>
<hr className={classes.divider} style={{marginLeft: "37.5"}}/>
<div className={classes.todo_body}>
<Typography variant="body1">
{props.item.body}
</Typography>
</div>
<hr className={classes.divider}/>
<Button
variant="contained"
color="secondary"
size="small"
startIcon={<DeleteIcon />}
onClick={handleDelete}>
Delete
</Button>
</Paper>
</Grid>
</Grid>
)
}
Raw
TodoList.js
import React, { Component } from "react"
import TodoForm from "./TodoForm"
import TodoItem from "./TodoItem"
import Grid from "@material-ui/core/Grid"
const api_url = `http://localhost:3001/api/v1/todos`
class TodoList extends Component {
constructor(props) {
super(props)
this.state = {
items: []
}
this.updateTodoList = this.updateTodoList.bind(this);
this.deleteItem = this.deleteItem.bind(this);
}
componentDidMount() {
this.getTasks();
}
getTasks() {
fetch(api_url)
.then(response => response.json())
.then(response_items => {
this.setState({
items: response_items.reverse()
})
});
}
updateTodoList(item) {
let _items = this.state.items
_items.unshift(item)
this.setState({
items: _items
})
}
deleteItem(item) {
// delete the item remotely
// localhost:3001/api/v1/todos + /13
console.log("Farooq 3.0 BEFORE deleteItem - items : " + this.state.items.length)
var deleteURL = api_url + `/${item.id}`
fetch(deleteURL, {
method: "DELETE"
}).then(() => {
// Client side delete
var _items = this.state.items;
var index = _items.indexOf(item)
console.log("Farooq 3.0.1 BETWEEN deleteItem - items : " + _items.length)
_items.splice(index, 1);
this.setState({
items: _items,
isLoading: false,
})
console.log("Farooq 3.0.2 BETWEEN deleteItem - items : " + _items.length)
})
console.log("Farooq 3.1 AFTER deleteItem - items : " + this.state.items.length)
}
render() {
// console.log("Farooq 3.x state.items: " + JSON.stringify(this.state.items,null,2))
// console.log("Farooq 3.x state.items.length: " + this.state.items.length) // for whatever reason - this shows 0
return (
<Grid container spacing={3}>
<Grid item xs={12}>
<TodoForm api_url={api_url} updateTodoList={this.updateTodoList} />
</Grid>
<Grid item xs={12} id="todo_list">
{this.state.items.map((item) => (
<TodoItem
key={item.id}
item={item}
deleteItem={this.deleteItem} />
))}
</Grid>
</Grid>
)
}
}
export default TodoList;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment