react-express-mongodb: clean frontend code

- apply prettier style on every js file
- remove mutation on immutable variables
- remove wrapper on top of axios
- fix form handling
- remove useless port definition in dockerfile

Signed-off-by: Jérémie Drouet <jeremie.drouet@gmail.com>
This commit is contained in:
Jérémie Drouet 2020-05-13 09:42:39 +02:00 committed by Guillaume Lours
parent be7f09b6ba
commit e5828ad1bf
10 changed files with 120 additions and 151 deletions

View File

@ -1 +0,0 @@
server/node_modules

View File

@ -0,0 +1 @@
node_modules

View File

@ -1,27 +1,14 @@
FROM node:13.13.0-stretch-slim
#Argument that is passed from docer-compose.yaml file
ARG NODE_PORT
#Echo the argument to check passed argument loaded here correctly
RUN echo "Argument port is : $NODE_PORT"
FROM node:lts-buster-slim
# Create app directory
WORKDIR /usr/src/app
#COPY . .
COPY . .
COPY package.json /usr/src/app/package.json
COPY package-lock.json /usr/src/app/package-lock.json
RUN npm ci
# Install app dependencies
# A wildcard is used to ensure both package.json AND package-lock.json are copied
# where available (npm@5+)
RUN npm install
#In my case my app binds to port NODE_PORT so you'll use the EXPOSE instruction to have it mapped by the docker daemon:
EXPOSE ${NODE_PORT}
CMD npm run dev
COPY . /usr/src/app
EXPOSE 3000
CMD [ "npm", "run", "dev" ]

View File

@ -1,12 +1,9 @@
version: "3.7"
services:
frontend:
build:
context: frontend
args:
FRONT_END_PORT: 5000
build: frontend
ports:
- 5000:5000
- 3000:3000
stdin_open: true
volumes:
- ./frontend:/usr/src/app
@ -21,10 +18,7 @@ services:
backend:
container_name: backend
restart: always
build:
context: backend
args:
NODE_PORT: 3000
build: backend
volumes:
- ./backend:/usr/src/app
- /usr/src/app/node_modules

View File

@ -1,3 +1,2 @@
node_modules
npm-debug.log
server/logs/

View File

@ -1,15 +1,9 @@
# Create image based on the official Node image from dockerhub
FROM node:13.13.0-stretch
#Argument that is passed from docer-compose.yaml file
ARG FRONT_END_PORT
FROM node:lts-buster-slim
# Create app directory
WORKDIR /usr/src/app
#Echo the argument to check passed argument loaded here correctly
RUN echo "Argument port is : $FRONT_END_PORT"
# Copy dependency definitions
COPY package.json /usr/src/app
COPY package-lock.json /usr/src/app
@ -24,7 +18,7 @@ RUN npm ci
COPY . /usr/src/app
# Expose the port the app runs in
EXPOSE ${FRONT_END_PORT}
EXPOSE 3000
# Serve the app
CMD ["npm", "start"]

View File

@ -1,41 +1,40 @@
import React from 'react';
import {request} from './utilities/httpRequestHandler'
import './App.scss';
import React from "react";
import axios from "axios";
import "./App.scss";
import AddTodo from "./components/AddTodo";
import TodoList from "./components/TodoList";
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
todos: []
}
todos: [],
};
}
componentDidMount() {
request('get','/api')
axios
.get("/api")
.then((response) => {
this.setState({
todos: response.data.data
todos: response.data.data,
});
})
}).catch((e) => console.log('Error : ', e))
.catch((e) => console.log("Error : ", e));
}
_handleAddTodo = (value) => {
request('post', '/api/todos', {text:value})
.then((response) => {
let todosCopy = this.state.todos;
todosCopy.unshift({text:value});
handleAddTodo = (value) => {
axios
.post("/api/todos", { text: value })
.then(() => {
this.setState({
todos : todosCopy
todos: [...this.state.todos, { text: value }],
});
this.refs.todo.value = ""
}).catch((e) => console.log('Error : ', e));
})
.catch((e) => console.log("Error : ", e));
};
render() {
return (
<div className="App container">
@ -44,7 +43,7 @@ export default class App extends React.Component{
<div className="col-xs-12 col-sm-8 col-md-8 offset-md-2">
<h1>Todos</h1>
<div className="todo-app">
<AddTodo handleAddTodo={(value) => {this._handleAddTodo(value)}}/>
<AddTodo handleAddTodo={this.handleAddTodo} />
<TodoList todos={this.state.todos} />
</div>
</div>

View File

@ -1,22 +1,33 @@
import React from 'react';
import React from "react";
export default class AddTodo extends React.Component {
_onAddTodo = () => {
if(this.refs.todo.value.length > 0) {
this.props.handleAddTodo(this.refs.todo.value);
this.refs.todo.value = '';
handleSubmit = (e) => {
e.preventDefault();
const { value } = e.target.elements.value;
if (value.length > 0) {
this.props.handleAddTodo(value);
e.target.reset();
}
};
render() {
return (
<div className="new-todo form-group">
<input type="text" className="form-control" ref="todo"/>
<button className="btn btn-primary" onClick={this._onAddTodo}>
<form
noValidate
onSubmit={this.handleSubmit}
className="new-todo form-group"
>
<input
type="text"
name="value"
required
minLength={1}
className="form-control"
/>
<button className="btn btn-primary" type="submit">
Add Todo
</button>
</div>
)
</form>
);
}
}

View File

@ -1,48 +1,49 @@
import React from 'react';
import React from "react";
export default class TodoList extends React.Component {
constructor(props) {
super(props);
this.state = {
activeIndex: 0,
}
};
}
_handleActive(index) {
handleActive(index) {
this.setState({
activeIndex: index
})
activeIndex: index,
});
}
_renderTodos(todos) {
renderTodos(todos) {
return (
<ul className="list-group">
{
todos.map((todo, i) => {
return (<li className={'list-group-item cursor-pointer ' + (i===this.state.activeIndex ? 'active' : '')}
{todos.map((todo, i) => (
<li
className={
"list-group-item cursor-pointer " +
(i === this.state.activeIndex ? "active" : "")
}
key={i}
onClick={() => {this._handleActive(i)}}
onClick={() => {
this.handleActive(i);
}}
>
{todo.text}
</li>)
})
}
</li>
))}
</ul>
)
);
}
render() {
let { todos } = this.props;
return (
todos.length > 0 ?
this._renderTodos(todos)
:
return todos.length > 0 ? (
this.renderTodos(todos)
) : (
<div className="alert alert-primary" role="alert">
No Todos to display
</div>
)
);
}
}

View File

@ -1,16 +0,0 @@
import axios from 'axios';
export function request (method, uri, data, headers = null, params = null) {
let query = {
method,
url: uri
};
if (headers !== null)
query.headers = headers;
if (params !== null)
query.params = params;
if (method === 'post' || method === 'put' || method === 'delete' || method === 'patch')
query.data = data;
return axios(query);
}