View Team

[PaulPatterson48]

User Story

GIVEN: as a user who is logged in, I should be able to see the Team View

Acceptance Criteria

Cards appear on the DOM with all the team members

Dependecies

ability to login and see all the cards on DOM

Dev Notes

import React from 'react'; import PropTypes from 'prop-types'; import Button from 'react-bootstrap/Button'; import Card from 'react-bootstrap/Card'; import Link from 'next/link'; import { deleteBook } from '../api/bookData';

function BookCard({ bookObj, onUpdate }) { // FOR DELETE, WE NEED TO REMOVE THE BOOK AND HAVE THE VIEW RERENDER, // SO WE PASS THE FUNCTION FROM THE PARENT THAT GETS THE BOOKS const deleteThisBook = () => { if (window.confirm(Delete ${bookObj.title}?)) { deleteBook(bookObj.firebaseKey).then(() => onUpdate()); } };

return ( <Card style={{ width: '18rem', margin: '10px' }}> <Card.Img variant="top" src={bookObj.image} alt={bookObj.title} style={{ height: '400px' }} />

{bookObj.title}

{bookObj.sale && SALE
} ${bookObj.price}

{/* DYNAMIC LINK TO VIEW THE BOOK DETAILS */} VIEW {/* DYNAMIC LINK TO EDIT THE BOOK DETAILS */} EDIT DELETE ); } BookCard.propTypes = { bookObj: PropTypes.shape({ image: PropTypes.string, title: PropTypes.string, sale: PropTypes.bool, price: PropTypes.string, firebaseKey: PropTypes.string, }).isRequired, onUpdate: PropTypes.func.isRequired, }; export default BookCard;