Permalink
Browse files

Initial Todo app for testing

  • Loading branch information...
jackfranklin committed Dec 15, 2015
0 parents commit 408de34721a9cbfe36c7d880897c792d1739b46b
Showing with 251 additions and 0 deletions.
  1. +2 −0 .gitignore
  2. +25 −0 app/add-todo.js
  3. +19 −0 app/index.js
  4. +25 −0 app/todo.js
  5. +67 −0 app/todos.js
  6. +72 −0 index.html
  7. +25 −0 package.json
  8. +16 −0 webpack.config.js
@@ -0,0 +1,2 @@
node_modules/
bundle.js
@@ -0,0 +1,25 @@
import React from 'react';
export default class AddTodo extends React.Component {
addTodo(e) {
e.preventDefault();
const newTodoName = this.refs.todoTitle.value;
if (newTodoName) {
this.props.onNewTodo({
name: newTodoName
});
this.refs.todoTitle.value = '';
}
}
render() {
return (
<div className="add-todo">
<input type="text" placeholder="Walk the dog" ref="todoTitle" />
<button onClick={(e) => this.addTodo(e) }>
Add Todo
</button>
</div>
)
}
}
@@ -0,0 +1,19 @@
import React from 'react';
import { render } from 'react-dom';
import Todos from './todos';
class AppComponent extends React.Component {
render() {
return (
<div>
<Todos />
</div>
);
}
}
render(
<AppComponent />,
document.getElementById('app')
);
@@ -0,0 +1,25 @@
import React from 'react';
export default class Todo extends React.Component {
toggleDone() {
this.props.doneChange(this.props.todo.id);
}
deleteTodo(e) {
e.preventDefault();
this.props.deleteTodo(this.props.todo.id);
}
render() {
const { todo } = this.props;
const className = todo.done ? 'done-todo' : '';
return (
<div className={`todo ${className}`}>
<p onClick={() => this.toggleDone() }>{ todo.name }</p>
<a className="delete-todo" href="#" onClick={(e) => this.deleteTodo(e) }>Delete</a>
</div>
)
}
}
@@ -0,0 +1,67 @@
import React from 'react';
import Todo from './todo';
import AddTodo from './add-todo';
export default class Todos extends React.Component {
constructor(props) {
super(props);
this.state = {
todos: [
{ id: 1, name: 'Write the blog post', done: false },
{ id: 2, name: 'Buy Christmas presents', done: false },
{ id: 3, name: 'Leave Santa his mince pies', done: false },
]
}
}
toggleDone(id) {
const todos = this.state.todos.map((todo) => {
if (todo.id === id) {
todo.done = !todo.done;
}
return todo;
});
this.setState({ todos });
}
addTodo(todo) {
const lastTodo = this.state.todos[this.state.todos.length - 1];
todo.id = lastTodo.id + 1;
todo.done = false;
this.setState({
todos: this.state.todos.concat([todo])
});
}
deleteTodo(id) {
this.setState({
todos: this.state.todos.filter((todo) => todo.id !== id)
})
}
renderTodos() {
return this.state.todos.map((todo) => {
return (
<li key={todo.id}>
<Todo
todo={todo}
doneChange={(id) => this.toggleDone(id)}
deleteTodo={(id) => this.deleteTodo(id)} />
</li>
);
});
}
render() {
return (
<div>
<p>The <em>best</em> todo app out there.</p>
<h1>Things to get done:</h1>
<ul className="todos-list">{ this.renderTodos() }</ul>
<AddTodo onNewTodo={(todo) => this.addTodo(todo)} />
</div>
)
}
}
@@ -0,0 +1,72 @@
<!DOCTYPE html>
<html>
<head>
<title>React Testing</title>
<style>
body {
background: #eee;
}
#app {
width: 600px;
background: white;
border: 1px solid #ddd;
padding: 10px;
margin: 20px auto;
}
#app h1 {
margin-top: 0;
}
.todo p:hover {
cursor: pointer;
}
.done-todo {
text-decoration: line-through;
}
.add-todo {
margin-top: 30px;
border-top: 1px solid #ddd;
padding: 20px 0 10px 0;
}
.add-todo input, .add-todo button {
display: block;
width: 100%;
margin: 5px 0;
padding: 5px 0;
box-sizing: border-box;
font-size: 15px;
}
.add-todo button {
background: #ddd;
border: 1px solid #000;
}
.add-todo button:hover {
cursor: pointer;
}
.todo {
position: relative;
border-bottom: 1px solid #eee;
}
.todo a {
position: absolute;
right: 20px;
top: 0;
}
</style>
</head>
<body>
<div id="app">
</div>
<script src="bundle.js"></script>
</body>
</html>
@@ -0,0 +1,25 @@
{
"name": "testing-react",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"watch": "webpack -w",
"start": "live-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"babel-preset-react": "^6.3.13",
"react": "^0.14.3",
"react-dom": "^0.14.3"
},
"devDependencies": {
"babel-core": "^6.3.17",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.3.13",
"live-server": "^0.9.0",
"webpack": "^1.12.9"
}
}
@@ -0,0 +1,16 @@
module.exports = {
entry: './app/index.js',
output: {
filename: 'bundle.js'
},
module: {
loaders: [{
test: /\.js$/,
exlude: /node_modules/,
loader: 'babel',
query: {
presets: ['react', 'es2015']
}
}]
}
}

0 comments on commit 408de34

Please sign in to comment.