Skip to content

project done#6

Open
Ahmed-username wants to merge 1 commit into
constructorlabs:masterfrom
Ahmed-username:master
Open

project done#6
Ahmed-username wants to merge 1 commit into
constructorlabs:masterfrom
Ahmed-username:master

Conversation

@Ahmed-username

Copy link
Copy Markdown

No description provided.

@dmitrigrabov

Copy link
Copy Markdown
Contributor

Would be great to see more frequent commits.

Comment thread server.js
/////////////////////////////////////////////////////

function orders (){
let orders={};

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice

Comment thread server.js


app.post('/api/order/', function(req, res){
let orderId= `Order${id}`

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It might simpler to just use the id rather than append Order string to it

Comment thread src/components/App.js
}

showMenu(event){
document.querySelector(".app_menu").style.display="block"

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Avoid using DOM manipulation in React. It would be better to set a value in state and then based on that add a class during render

Comment thread src/components/Menu.js
class Menu extends React.Component {
constructor(){
super();
this.state={menu:[], order:{}, total:0, orderId:1};

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code would slightly more readable if each key/value pair was on own line

Comment thread src/components/Menu.js
fetch(`http://localhost:8080/menu`)
.then(function(response){
return response.json();
}).then(function(jsonData){

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you make this an arrow function, you don't need self

Comment thread src/components/Menu.js
this.setState({total: myTotal});
this.setState({order : allOrders});

document.querySelector(".charge").style.display="block";

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Avoid DOM manipulation in React

Comment thread src/components/Menu.js
const self=this;
this.setState({orderId:1});

fetch('http://localhost:8080/api/order', {

@dmitrigrabov dmitrigrabov Jul 20, 2018

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use relative url here /api/order otherwise code will break when deployed to another domain name

Comment thread src/components/Menu.js
<p> Total: £{this.state.total} <label className="charge"> + £{this.state.total/20} delivery charge </label> </p>
<button onClick={this.submitOrder}> Submit Order! </button>
</div>

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Indenation could be tidier

Comment thread src/components/Order.js
orderAgain(event)
{
const self=this;
fetch('http://localhost:8080/api/order', {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use relative url /api/order

Comment thread src/components/Order.js
}
}).then(function(response) {
return response.json();
}).then(function(data) {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

use arrow function to avoid self

Comment thread server.js
});


app.delete('/api/delete/', function(req, res){

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be better to use the route /api/order the delete islready implied by the HTTP method delete. The HTTP method is the action we are performing and the route name represents the resource we are performing the action on. Also, it would be good to use the id as a route param to indicate which item from orders is being deleted.

Comment thread src/components/Orders.js
fetchOrders(){

const self=this;
fetch(`http://localhost:8080/orders`)

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use relative URL

Comment thread src/components/Orders.js
import Order from './Order';

class Orders extends React.Component {
constructor(){

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

could do with some indentation

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants