Last active
April 15, 2019 19:55
-
-
Save benkissi/1f4d2873d768614bc5b10f37f991c85b to your computer and use it in GitHub Desktop.
Context blog
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { Component } from "react"; | |
import { AppConsumer } from "./app-context"; | |
import { Grid, Button, Input } from "semantic-ui-react"; | |
const TodoInput = props => { | |
let todo; | |
return ( | |
<AppConsumer> | |
{({ addTodo }) => ( | |
<form | |
onSubmit={e => { | |
e.preventDefault(); | |
}} | |
> | |
<Input | |
type="text" | |
id="todoInput" | |
onChange={e => { | |
todo = e.target.value; | |
}} | |
placeholder="type todo here" | |
/> | |
<Button | |
type="submit" | |
onClick={() => { | |
if (todo) { | |
addTodo(todo); | |
const inputEl = document.getElementById("todoInput"); | |
inputEl.value = ""; | |
} | |
}} | |
> | |
Add Todo | |
</Button> | |
</form> | |
)} | |
</AppConsumer> | |
); | |
}; | |
const DisplayTodos = props => { | |
return ( | |
<AppConsumer> | |
{({ todos, completed }) => { | |
const notCompleted = todos.filter(todo => { | |
if (todo.completed === false) { | |
return todo; | |
} | |
}); | |
return ( | |
<div> | |
<p>All your todos: {notCompleted.length}</p> | |
<ol> | |
{todos.length > 0 | |
? todos.map(todo => ( | |
<li | |
className={ | |
todo.completed | |
? "completed todo align-left" | |
: "todo align-left" | |
} | |
key={todo.id} | |
onClick={() => completed(todo.id)} | |
> | |
{todo.todo} | |
{" "} | |
<span className={todo.completed ? "date" : "date"}> | |
{new Date(todo.createdAt).toString()} | |
</span> | |
</li> | |
)) | |
: ""} | |
</ol> | |
</div> | |
); | |
}} | |
</AppConsumer> | |
); | |
}; | |
class TodoApp extends Component { | |
render() { | |
return ( | |
<div className="todos"> | |
<Grid columns={1} className="ui center aligned"> | |
<Grid.Row> | |
<Grid.Column className="todo-body" width={12}> | |
<h2>Simple Todo</h2> | |
<TodoInput /> | |
<div id="display-todos"> | |
<DisplayTodos className="align-left" /> | |
</div> | |
</Grid.Column> | |
</Grid.Row> | |
</Grid> | |
</div> | |
); | |
} | |
} | |
export default TodoApp; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment