Skip to content

Feature edit delete order func #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Feature edit delete order func #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
072c118
feature: pass props to orderForm to handle edit
Jul 29, 2020
1377646
feature: add edit and delete api calls
Jul 29, 2020
3330759
style: reformat code
Jul 29, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
129 changes: 65 additions & 64 deletions application/src/components/order-form/orderForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,77 +7,78 @@ import './orderForm.css';
const ADD_ORDER_URL = `${SERVER_IP}/api/add-order`

const mapStateToProps = (state) => ({
auth: state.auth,
auth: state.auth,
})

class OrderForm extends Component {
constructor(props) {
super(props);
this.state = {
order_item: "",
quantity: "1"
}
constructor(props) {
super(props);
this.state = {
order_item: "",
quantity: "1"
}
}

menuItemChosen(event) {
this.setState({ item: event.target.value });
}
menuItemChosen(event) {
this.setState({ order_item: event.target.value });
}

menuQuantityChosen(event) {
this.setState({ quantity: event.target.value });
}
menuQuantityChosen(event) {
this.setState({ quantity: event.target.value });
}

submitOrder(event) {
event.preventDefault();
if (this.state.order_item === "") return;
fetch(ADD_ORDER_URL, {
method: 'POST',
body: JSON.stringify({
order_item: this.state.order_item,
quantity: this.state.quantity,
ordered_by: this.props.auth.email || 'Unknown!',
}),
headers: {
'Content-Type': 'application/json'
}
})
.then(res => res.json())
.then(response => console.log("Success", JSON.stringify(response)))
.catch(error => console.error(error));
}
submitOrder(event) {
event.preventDefault();
if (this.state.order_item === "") return;
fetch(ADD_ORDER_URL, {
method: 'POST',
body: JSON.stringify({
order_item: this.state.order_item,
quantity: this.state.quantity,
ordered_by: this.props.auth.email || 'Unknown!'
}),
headers: {
'Content-Type': 'application/json'
}
})
.then(res => res.json())
.then(response => console.log("Success", JSON.stringify(response)))
.catch(error => console.error(error));
}

render() {
return (
<Template>
<div className="form-wrapper">
<form>
<label className="form-label">I'd like to order...</label><br />
<select
value={this.state.order_item}
onChange={(event) => this.menuItemChosen(event)}
className="menu-select"
>
<option value="" defaultValue disabled hidden>Lunch menu</option>
<option value="Soup of the Day">Soup of the Day</option>
<option value="Linguini With White Wine Sauce">Linguini With White Wine Sauce</option>
<option value="Eggplant and Mushroom Panini">Eggplant and Mushroom Panini</option>
<option value="Chili Con Carne">Chili Con Carne</option>
</select><br />
<label className="qty-label">Qty:</label>
<select value={this.state.quantity} onChange={(event) => this.menuQuantityChosen(event)}>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<button type="button" className="order-btn" onClick={(event) => this.submitOrder(event)}>Order It!</button>
</form>
</div>
</Template>
);
}
render() {
const { order_item, quantity, _id, isEdit, menuQuantityChosen, menuItemChosen, submitOrder } = this.props;
return (
<Template>
<div className="form-wrapper">
<form>
<label className="form-label">I'd like to order...</label><br />
<select
value={isEdit ? order_item : this.state.order_item}
onChange={isEdit ? menuItemChosen : (event) => this.menuItemChosen(event)}
className="menu-select"
>
<option value="" defaultValue disabled hidden>Lunch menu</option>
<option value="Soup of the Day">Soup of the Day</option>
<option value="Linguini With White Wine Sauce">Linguini With White Wine Sauce</option>
<option value="Eggplant and Mushroom Panini">Eggplant and Mushroom Panini</option>
<option value="Chili Con Carne">Chili Con Carne</option>
</select><br />
<label className="qty-label">Qty:</label>
<select value={isEdit ? quantity : this.state.quantity} onChange={isEdit ? menuQuantityChosen : (event) => this.menuQuantityChosen(event)}>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<button type="button" className="order-btn" value={_id ? _id : ''} onClick={isEdit ? submitOrder : (event) => this.submitOrder(event)}>Order It!</button>
</form>
</div>
</Template>
);
}
}

export default connect(mapStateToProps, null)(OrderForm);
export default connect(mapStateToProps, null)(OrderForm);
215 changes: 176 additions & 39 deletions application/src/components/view-orders/viewOrders.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,52 +1,189 @@
import React, { Component } from 'react';
import { Template } from '../../components';
import OrderForm from '../order-form/orderForm'
import { SERVER_IP } from '../../private';
import { connect } from 'react-redux';
import './viewOrders.css';

const ADD_ORDER_URL = `${SERVER_IP}/api/add-order`;
const DELETE_ORDER_URL = `${SERVER_IP}/api/delete-order`;
const EDIT_ORDER_URL = `${SERVER_IP}/api/edit-order`;

class ViewOrders extends Component {
state = {
orders: []
state = {
orders: [],
order: {},
isEdit: false,
}

fetchData = async() => {
try {
const response = await fetch(`${SERVER_IP}/api/current-orders`);
const json = await response.json();
if(json.success) {
this.setState({ orders: json.orders });
} else {
console.log('Error getting orders');
}
} catch (error) {
console.log('Error: ', error);
}
}

componentDidMount = () => {
this.fetchData();
}

menuItemChosen = event => {
this.setState({
order : {
...this.state.order,
order_item : event.target.value
}
});
}

menuQuantityChosen = event => {
this.setState({
order : {
...this.state.order,
quantity : event.target.value
}
});
}

componentDidMount() {
fetch(`${SERVER_IP}/api/current-orders`)
.then(response => response.json())
.then(response => {
if(response.success) {
this.setState({ orders: response.orders });
} else {
console.log('Error getting orders');
}
});
toggleEditMode = event => {
this.setState({ isEdit: true });
const filteredOrder = this.state.orders.filter(order => order._id === event.target.value)[0];
const { order_item, quantity, _id } = filteredOrder;
this.setState({
order : {
order_item,
quantity,
_id
}
})
}

submitOrder = async(event) => {
if(!this.state.isEdit) {
const { order_item, quantity } = this.state.order
event.preventDefault();
if (order_item === "") return;
try {
const response = await fetch(ADD_ORDER_URL, {
method: 'POST',
body: JSON.stringify({
order_item: order_item,
quantity: quantity,
ordered_by: this.props.auth.email || 'Unknown!',
}),
headers: {
'Content-Type': 'application/json'
}
});
const json = await response.json();
if(json.success) {
this.setState({ isEdit: false });
this.fetchData()
} else {
console.log('error posting orders')
}
} catch (error) {
console.log('Error: ', error);
}
} else {
const { order_item, quantity, _id } = this.state.order;
try {
const response = await fetch(EDIT_ORDER_URL, {
method: 'POST',
body: JSON.stringify({
id: _id,
order_item: order_item,
quantity: quantity,
ordered_by: this.props.auth.email || 'Unknown!',
}),
headers: {
'Content-Type': 'application/json'
}
});
const json = await response.json();
if(json.success) {
this.setState({ isEdit: false });
this.fetchData();
} else {
console.log('error posting orders')
}
} catch (error) {
console.log('Error: ', error);
}
}
}

render() {
return (
<Template>
<div className="container-fluid">
{this.state.orders.map(order => {
const createdDate = new Date(order.createdAt);
return (
<div className="row view-order-container" key={order._id}>
<div className="col-md-4 view-order-left-col p-3">
<h2>{order.order_item}</h2>
<p>Ordered by: {order.ordered_by || ''}</p>
</div>
<div className="col-md-4 d-flex view-order-middle-col">
<p>Order placed at {`${createdDate.getHours()}:${createdDate.getMinutes()}:${createdDate.getSeconds()}`}</p>
<p>Quantity: {order.quantity}</p>
</div>
<div className="col-md-4 view-order-right-col">
<button className="btn btn-success">Edit</button>
<button className="btn btn-danger">Delete</button>
</div>
</div>
);
})}
</div>
</Template>
);
handleDelete = async(e) => {
let id = e.target.value;
try {
const response = await fetch(DELETE_ORDER_URL, {
method: 'POST',
body: JSON.stringify({ id }),
headers: {
'Content-Type': 'application/json',
}
});
const json = await response.json();
if(json.success) {
this.fetchData();
} else {
console.log('error deleting order')
}
} catch(error) {
console.log('Error: ', error);
}
}

render() {
const { isEdit, order, orders } = this.state
if(isEdit) return (
<OrderForm
order_item={order.order_item}
quantity={order.quantity}
_id={order._id}
menuItemChosen={this.menuItemChosen}
menuQuantityChosen={this.menuQuantityChosen}
submitOrder={this.submitOrder}
isEdit={isEdit}
/>
)
return (
<Template>
<div className="container-fluid">
{orders.map(order => {
const createdDate = new Date(order.createdAt);
return (
<div className="row view-order-container" key={order._id}>
<div className="col-md-4 view-order-left-col p-3">
<h2>{order.order_item}</h2>
<p>Ordered by: {order.ordered_by || ''}</p>
</div>
<div className="col-md-4 d-flex view-order-middle-col">
<p>Order placed at {`${createdDate.getHours()}:${createdDate.getMinutes()}:${createdDate.getSeconds()}`}</p>
<p>Quantity: {order.quantity}</p>
</div>
<div className="col-md-4 view-order-right-col">
<button className="btn btn-success" value={order._id} onClick={this.toggleEditMode}>Edit</button>
<button className="btn btn-danger" value={order._id} onClick={this.handleDelete}>Delete</button>
</div>
</div>
);
})}
</div>
</Template>
);
}
}

export default ViewOrders;
const mapStateToProps = ({ auth }) => ({
auth
})

export default connect(mapStateToProps, null)(ViewOrders);