Created
March 20, 2019 10:01
-
-
Save siddhant1/b17ec94e542c454a5fb78749d14d54e1 to your computer and use it in GitHub Desktop.
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 from "react"; | |
import { Query } from "react-apollo"; | |
import { GET_INCOMPLETE_TODOS } from "../queries"; | |
import MarkTodo from "./MarkTodo"; | |
import DeleteTodo from "./DeleteTodo"; | |
import AddTodos from "./AddTodo"; | |
import { | |
ListGroup, | |
ListGroupItem, | |
ButtonGroup, | |
Grid, | |
Row, | |
Col | |
} from "react-bootstrap"; | |
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; | |
import { faSpinner } from "@fortawesome/free-solid-svg-icons"; | |
const GetTodos = () => ( | |
<Query query={GET_INCOMPLETE_TODOS}> | |
{({ loading, error, data }) => { | |
if (loading) | |
return ( | |
<h2> | |
Loading...{" "} | |
<FontAwesomeIcon icon={faSpinner} style={{ color: "blue" }} spin /> | |
</h2> | |
); | |
if (error) return `Error! fetching todos.`; | |
if (data.todos.length === 0) | |
return ( | |
<div> | |
<h3>No Todos Created Yet</h3> | |
<AddTodos /> | |
</div> | |
); | |
let count = 0; | |
return ( | |
<div> | |
<Grid> | |
<Row> | |
<Col md={8} mdPush={2}> | |
<ListGroup> | |
{data.todos.map(todo => ( | |
<ListGroupItem> | |
<ButtonGroup className="pull-right"> | |
<MarkTodo todo_id={todo.todo_id} /> | |
<DeleteTodo todo_id={todo.todo_id} /> | |
</ButtonGroup> | |
<h4> | |
{(count = count + 1)}. {todo.todo_text} | |
</h4> | |
</ListGroupItem> | |
))} | |
</ListGroup> | |
<ListGroup> | |
<ListGroupItem> | |
<AddTodos /> | |
</ListGroupItem> | |
</ListGroup> | |
</Col> | |
</Row> | |
</Grid> | |
</div> | |
); | |
}} | |
</Query> | |
); | |
export default GetTodos; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment