imp: Chapter18

Author: danielgara

Chapter18/todoapp/frontend/package-lock.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "axios": "^0.25.0",
     "bootstrap": "^5.1.3",
+    "moment": "^2.29.1",
     "react": "^17.0.2",
     "react-bootstrap": "^2.1.1",
     "react-dom": "^17.0.2",

Chapter18/todoapp/frontend/package.json

@@ -1,10 +1,68 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import TodoDataService from '../services/todos';
+import { Link } from 'react-router-dom';
+import Card from 'react-bootstrap/Card';
+import Container from 'react-bootstrap/Container';
+import Button from 'react-bootstrap/Button';
+import Alert from 'react-bootstrap/Alert';
+import moment from 'moment';
+
+const TodosList = props => {
+  const [todos, setTodos] = useState([]);
+
+  useEffect(() => {
+    retrieveTodos();
+  }, [props.token]);
+
+  const retrieveTodos = () => {
+    TodoDataService.getAll(props.token)
+      .then(response => {
+        setTodos(response.data);
+      })
+      .catch(e => {
+        console.log(e);
+      });
+  }
 
-function TodosList() {
   return (
-    <div className="App">
-      Todos List
-    </div>
+    <Container>
+      {props.token == null || props.token === "" ? (
+        <Alert variant='warning'>
+          You are not logged in. Please <Link to={"/login"}>login</Link> to see your todos.
+        </Alert>
+      ) : (
+        <div>
+          {todos.map((todo) => {
+            return (
+              <Card key={todo.id} className="mb-3">
+                <Card.Body>
+                  <div>
+                    <Card.Title>{todo.title}</Card.Title>
+                    <Card.Text><b>Memo:</b> {todo.memo}</Card.Text>
+                    <Card.Text>
+                      Date created: {moment(todo.created).format("Do MMMM YYYY")}
+                    </Card.Text>
+                  </div>
+                  <Link to={{
+                    pathname: "/todos/" + todo.id,
+                    state: {
+                      currentTodo: todo
+                    }
+                  }}>
+                    <Button variant="outline-info" className="me-2">
+                      Edit
+                    </Button>
+                  </Link>
+                  <Button variant="outline-danger">
+                    Delete
+                  </Button>
+                </Card.Body>
+              </Card>
+            )
+          })}
+        </div>
+      )}
+    </Container>
   );
 }