- 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,56 +1,55 @@ |
||||
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){ |
||||
export default class App extends React.Component { |
||||
constructor(props) { |
||||
super(props); |
||||
|
||||
this.state = { |
||||
todos: [] |
||||
} |
||||
todos: [], |
||||
}; |
||||
} |
||||
|
||||
componentDidMount() { |
||||
request('get','/api') |
||||
.then((response) => { |
||||
this.setState({ |
||||
todos: response.data.data |
||||
}) |
||||
}).catch((e) => console.log('Error : ', e)) |
||||
axios |
||||
.get("/api") |
||||
.then((response) => { |
||||
this.setState({ |
||||
todos: response.data.data, |
||||
}); |
||||
}) |
||||
.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}); |
||||
this.setState({ |
||||
todos : todosCopy |
||||
}); |
||||
this.refs.todo.value = "" |
||||
}).catch((e) => console.log('Error : ', e)); |
||||
}; |
||||
|
||||
handleAddTodo = (value) => { |
||||
axios |
||||
.post("/api/todos", { text: value }) |
||||
.then(() => { |
||||
this.setState({ |
||||
todos: [...this.state.todos, { text: value }], |
||||
}); |
||||
}) |
||||
.catch((e) => console.log("Error : ", e)); |
||||
}; |
||||
|
||||
render() { |
||||
return ( |
||||
<div className="App container"> |
||||
<div className="container-fluid"> |
||||
<div className="row"> |
||||
<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)}}/> |
||||
<TodoList todos={this.state.todos}/> |
||||
</div> |
||||
<div className="App container"> |
||||
<div className="container-fluid"> |
||||
<div className="row"> |
||||
<div className="col-xs-12 col-sm-8 col-md-8 offset-md-2"> |
||||
<h1>Todos</h1> |
||||
<div className="todo-app"> |
||||
<AddTodo handleAddTodo={this.handleAddTodo} /> |
||||
<TodoList todos={this.state.todos} /> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
} |
||||
|
@ -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 = ''; |
||||
} |
||||
}; |
||||
|
||||
render() { |
||||
return ( |
||||
<div className="new-todo form-group"> |
||||
<input type="text" className="form-control" ref="todo"/> |
||||
<button className="btn btn-primary" onClick={this._onAddTodo}> |
||||
Add Todo |
||||
</button> |
||||
</div> |
||||
) |
||||
handleSubmit = (e) => { |
||||
e.preventDefault(); |
||||
const { value } = e.target.elements.value; |
||||
if (value.length > 0) { |
||||
this.props.handleAddTodo(value); |
||||
e.target.reset(); |
||||
} |
||||
} |
||||
}; |
||||
|
||||
render() { |
||||
return ( |
||||
<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> |
||||
</form> |
||||
); |
||||
} |
||||
} |
||||
|
@ -1,48 +1,49 @@ |
||||
import React from 'react'; |
||||
import React from "react"; |
||||
|
||||
export default class TodoList extends React.Component { |
||||
constructor(props) { |
||||
super(props); |
||||
|
||||
constructor(props){ |
||||
super(props); |
||||
this.state = { |
||||
activeIndex: 0, |
||||
}; |
||||
} |
||||
|
||||
this.state = { |
||||
activeIndex:0, |
||||
} |
||||
} |
||||
handleActive(index) { |
||||
this.setState({ |
||||
activeIndex: index, |
||||
}); |
||||
} |
||||
|
||||
_handleActive(index) { |
||||
this.setState({ |
||||
activeIndex: index |
||||
}) |
||||
} |
||||
renderTodos(todos) { |
||||
return ( |
||||
<ul className="list-group"> |
||||
{todos.map((todo, i) => ( |
||||
<li |
||||
className={ |
||||
"list-group-item cursor-pointer " + |
||||
(i === this.state.activeIndex ? "active" : "") |
||||
} |
||||
key={i} |
||||
onClick={() => { |
||||
this.handleActive(i); |
||||
}} |
||||
> |
||||
{todo.text} |
||||
</li> |
||||
))} |
||||
</ul> |
||||
); |
||||
} |
||||
|
||||
_renderTodos(todos) { |
||||
return ( |
||||
<ul className="list-group"> |
||||
{ |
||||
todos.map((todo, i) => { |
||||
return (<li className={'list-group-item cursor-pointer ' + (i===this.state.activeIndex ? 'active' : '')} |
||||
key={i} |
||||
onClick={() => {this._handleActive(i)}} |
||||
> |
||||
{todo.text} |
||||
</li>) |
||||
}) |
||||
} |
||||
</ul> |
||||
) |
||||
} |
||||
|
||||
|
||||
render() { |
||||
let { todos } = this.props; |
||||
return ( |
||||
todos.length > 0 ? |
||||
this._renderTodos(todos) |
||||
: |
||||
<div className="alert alert-primary" role="alert"> |
||||
No Todos to display |
||||
</div> |
||||
) |
||||
} |
||||
} |
||||
render() { |
||||
let { todos } = this.props; |
||||
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