Merge pull request #4 from brendigler/custom-hooks

Custom hooks
brendanrsmith · Jun 3, 2021 · 0a9f0cb · 0a9f0cb
2 parents b695af2 + 7c0f0a9
commit 0a9f0cb
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 49 deletions.
diff --git a/README.md b/README.md
@@ -7,7 +7,7 @@
 ### Links and Resources
 
 - [deployed site](https://distracted-galileo-14f56e.netlify.app/)
-- [pull request](https://github.com/brendigler/todo/pull/1)
+- [pull request](https://github.com/brendigler/todo/pull/4)
 
 ### Setup
 

diff --git a/src/components/hooks/ajax-hook.js b/src/components/hooks/ajax-hook.js
@@ -71,7 +71,7 @@ const useAjax = (apiUrl, method, body) => {
       method: 'get',
     })
       .then(response => response.data)
-      .then(data => setList(data.results))
+      .then(data => setList(data))
       .catch(console.error);
   };
 

diff --git a/src/components/todo/list.js b/src/components/todo/list.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, Card } from 'react-bootstrap';
+import { Badge, Button, Toast } from 'react-bootstrap';
 
 function TodoList(props) {
 
@@ -10,20 +10,20 @@ function TodoList(props) {
           className={`complete-${item.complete.toString()}`}
           key={item._id}
         >
-          <Card >
-            <Card.Body onClick={() => props.handleComplete(item._id)}>
-              <Card.Title>
-                {item.text}
-              </Card.Title>
-              <Card.Subtitle>
-                {'>'} {item.assignee}
-              </Card.Subtitle>
-              <Card.Text>
+          <Toast>
+            <Toast.Header closeButton={false}>
+              <Badge className="completeBadge">Complete</Badge>
+              <Badge className="pendingBadge">Pending</Badge>
+              <strong>{item.assignee}</strong>
+              <Button className="btn-close" onClick={() => props.handleDelete(item._id)}>X</Button>
+            </Toast.Header>
+            <Toast.Body onClick={() => props.handleComplete(item._id)}>
+              <p>{item.text}</p>
+              <small>
                 difficulty: {item.difficulty}
-              </Card.Text>
-            </Card.Body>
-            <Button variant="outline-dark" onClick={() => props.handleDelete(item._id)}>X</Button>
-          </Card>
+              </small>
+            </Toast.Body>
+          </Toast>
         </li>
       ))}
     </ul>

diff --git a/src/components/todo/todo-connected.js b/src/components/todo/todo-connected.js
@@ -7,9 +7,9 @@ import './todo.scss';
 
 const ToDo = () => {
 
-  const todoAPI = 'https://api-js401.herokuapp.com/api/v1/todo';
-  // problem with my API server - not sure
-  // const todoAPI = 'https://brsmith-api-server.herokuapp.com/todos';
+  // const todoAPI = 'https://api-js401.herokuapp.com/api/v1/todo'; // class API
+
+  const todoAPI = 'https://brsmith-api-server.herokuapp.com/todos'; // BRS API
 
   const [_addItem, _toggleComplete, _deleteItem, list] = useAjax(todoAPI);
 

diff --git a/src/components/todo/todo.scss b/src/components/todo/todo.scss
@@ -40,6 +40,12 @@ header {
     justify-content: flex-start;
     margin: 2em;
 
+    .completeBadge {
+        background-color: salmon;
+    }
+    .pendingBadge {
+        background: #688;
+    }
     form {
         border: 1px solid #eee;
         border-radius: .2em;
@@ -48,6 +54,9 @@ header {
         flex-direction:column;
         margin-right: 2em;
 
+        .form-control {
+            margin-bottom: 1em;
+        }
         label {
             display: flex;
             flex-direction:column;
@@ -60,44 +69,55 @@ header {
         padding:0;
 
         li {
-            align-items: center;
-            display:flex;
-            flex-direction:row;
-            font-size: .75em;
+            .toast {
 
-            &.complete-true {
-              .card {
-                background: hsl(350, 100%, 88%);
-                text-decoration:line-through;
-                &:hover {
-                   background: #c0ffdc;
+                margin-bottom: 1em;
+                min-width: 40vw;
+                cursor:pointer;
+                .badge {
+                    margin-right: 2em;
+                }
+                .completeBadge {
+                    display: none;
                 }
+                .pendingBadge {
+                  display: block;
               }
-            }
 
-            .card {
-                background: hsl(133, 0%, 88%);
-                margin-bottom: 0;
-                border-radius: 0;
-                cursor:pointer;
                 &:hover {
-                    background: pink;
+                    background: rgba(250, 128, 114, 0.5);
+                }
+
+                .toast-header {
+                    display: flex;
+
+                    strong {
+                        margin-right: auto;
+                    }
+
+                    button {
+                        background: transparent;
+                        border:none;
+                        cursor:pointer;
+                        align-self: flex-end;
+                    }
                 }
-            }
-             .card, input {
-                border: none;
-                 width: 50vw;
-             }
-
-            button {
-                background: transparent;
-                border:none;
-                // color:blue;
-                cursor:pointer;
-                // padding:0;
-                // margin: 0 .75em;
             }
 
+            &.complete-true {
+                .toast {
+                // background-color: #0000000f;
+                  &:hover {
+                     background: rgba(102, 136, 136, 0.5);
+                  }
+                  .completeBadge {
+                      display: block;
+                  }
+                  .pendingBadge {
+                    display: none;
+                }
+                }
+              }
         }
     }