text: // import React, { useState, useEffect } from 'react';
  // import { Jumbotron, Container, CardColumns, Card, Button } from 'react-bootstrap';
  
  // import { getMe, deleteBook } from '../utils/API';
  // import Auth from '../utils/auth';
  // import { removeBookId } from '../utils/localStorage';
  
  // const SavedTasks = () => {
  //   const [userData, setUserData] = useState({});
  
  //   // use this to determine if `useEffect()` hook needs to run again
  //   const userDataLength = Object.keys(userData).length;
  
  //   useEffect(() => {
  //     const getUserData = async () => {
  //       try {
  //         const token = Auth.loggedIn() ? Auth.getToken() : null;
  
  //         if (!token) {
  //           return false;
  //         }
  
  //         const response = await getMe(token);
  
  //         if (!response.ok) {
  //           throw new Error('something went wrong!');
  //         }
  
  //         const user = await response.json();
  //         setUserData(user);
  //       } catch (err) {
  //         console.error(err);
  //       }
  //     };
  
  //     getUserData();
  //   }, [userDataLength]);
  
  //   // create function that accepts the book's mongo _id value as param and deletes the book from the database
  //   const handleDeleteTask = async (taskId) => {
  //     const token = Auth.loggedIn() ? Auth.getToken() : null;
  
  //     if (!token) {
  //       return false;
  //     }
  
  //     try {
  //       const response = await deleteTask(taskId, token);
  
  //       if (!response.ok) {
  //         throw new Error('something went wrong!');
  //       }
  
  //       const updatedUser = await response.json();
  //       setUserData(updatedUser);
  //       // upon success, remove book's id from localStorage
  //       removeTaskId(taskId);
  //     } catch (err) {
  //       console.error(err);
  //     }
  //   };
  
  //   // if data isn't here yet, say so
  //   if (!userDataLength) {
  //     return <h2>LOADING...</h2>;
  //   }
  
  //   return (
  //     <>
  //       <Jumbotron fluid className='text-light bg-dark'>
  //         <Container>
  //           <h1>Viewing saved tasks!</h1>
  //         </Container>
  //       </Jumbotron>
  //       <Container>
  //         <h2>
  //           {userData.savedTasks.length
  //             ? `Viewing ${userData.savedTasks.length} saved ${userData.savedTasks.length === 1 ? 'task' : 'tasks'}:`
  //             : 'You have no saved books!'}
  //         </h2>
  //         <CardColumns>
  //           {userData.savedTasks.map((task) => {
  //             return (
  //               <Card key={task.taskId} border='dark'>
  //                 {task.task ? <Card.Img src={book.image} alt={`The cover for ${task.task}`} variant='top' /> : null}
  //                 <Card.Body>
  //                   <Card.Title>{book.title}</Card.Title>
  //                   <p className='small'>Authors: {book.authors}</p>
  //                   <Card.Text>{book.description}</Card.Text>
  //                   <Button className='btn-block btn-danger' onClick={() => handleDeleteTask(book.bookId)}>
  //                     Delete this task!
  //                   </Button>
  //                 </Card.Body>
  //               </Card>
  //             );
  //           })}
  //         </CardColumns>
  //       </Container>
  //     </>
  //   );
  // };
  
  // export default SavedTask;
  