- 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>pull/66/head
parent
be7f09b6ba
commit
e5828ad1bf
@ -1 +0,0 @@ |
||||
server/node_modules |
@ -0,0 +1 @@ |
||||
node_modules |
@ -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 . . |
||||
|
||||
# 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} |
||||
COPY package.json /usr/src/app/package.json |
||||
COPY package-lock.json /usr/src/app/package-lock.json |
||||
RUN npm ci |
||||
|
||||
CMD npm run dev |
||||
COPY . /usr/src/app |
||||
|
||||
EXPOSE 3000 |
||||
|
||||
CMD [ "npm", "run", "dev" ] |
||||
|
@ -1,3 +1,2 @@ |
||||
node_modules |
||||
npm-debug.log |
||||
server/logs/ |
@ -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> |
||||
); |
||||
} |
||||
} |
@ -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> |
||||
) |
||||
); |
||||
} |
||||
} |
@ -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); |
||||
} |
Loading…
Reference in new issue