Skip to content

Instantly share code, notes, and snippets.

@benkissi
Last active April 15, 2019 19:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save benkissi/1f4d2873d768614bc5b10f37f991c85b to your computer and use it in GitHub Desktop.
Save benkissi/1f4d2873d768614bc5b10f37f991c85b to your computer and use it in GitHub Desktop.
Context blog
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