READ/DELETE

[keanacobarde]

User Story

I, as the user, should be able to read the members of the team whenever I select the 'TEAM' link within the navbar.

Acceptance Criteria

AS STATED WITHIN INSTRUCTIONS

[READ Members]
As an authenticated user, I should be able to see the Team view with all the members I have created.
As an authenticated user I should not be able to see members that were created by another user.

BECAUSE DELETE IS A SEGMENT OF THE MEMBERCARD.JS SECTION

[DELETE Members]
As an authenticated user, I should see a delete button on each member.
As an authenticated user, when I click a delete button that member should be removed from firebase and the Team view should update.

Dependecies

https://github.com/keanacobarde/INDIVIDUAL-ASSIGNMENT-Team-Roster/issues/5 - a solid understanding of the components that are needed for the completion of this issue is needed, as well as the dependencies of that issue.

https://github.com/keanacobarde/INDIVIDUAL-ASSIGNMENT-Team-Roster/issues/6 - This is an important implementation. These functions are dependent on correctly sending GET requests to the database.

Creating user specific data is also needed to ensure that this feature is fully functional.

Dev Notes

EXAMPLES FROM SIMPLY BOOKS

READING AUTHOR CARDS

/* eslint-disable react-hooks/exhaustive-deps */
import React, { useEffect, useState } from 'react';
import Link from 'next/link';
import { Button } from 'react-bootstrap';
import { useAuth } from '../utils/context/authContext';
import { getAuthors } from '../api/authorData';
import AuthorCard from '../components/AuthorCard';

export default function Authors() {
  // Create useState for authors
  const [authors, setAuthors] = useState([]);

  // Obtain user.uid
  const { user } = useAuth();

  // Get all authors w/ user.uid w/ API call
  const getAllAuthors = () => {
    getAuthors(user.uid).then(setAuthors);
  };

  // Create useEffect so that operation is done whenever page is rednered.
  useEffect(() => {
    getAllAuthors();
  }, []);

  return (
    <div className="text-center my-4">
      <Link href="/author/new" passHref>
        <Button> Add an Author </Button>
      </Link>
      {authors.map((author) => <AuthorCard key={author.firebaseKey} authorObj={author} onUpdate={getAllAuthors} />)}
    </div>
  );
}

AUTHOR CARD COMPONENTS

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

export default function AuthorCard({ authorObj, onUpdate }) {
  const deleteThisAuthor = () => {
    if (window.confirm(`Delete ${authorObj.first_name} ${authorObj.last_name}?`)) {
      deleteAuthorBooks(authorObj.firebaseKey).then(() => onUpdate());
    }
  };

  return (
    <Card style={{ width: '18rem', margin: '10px' }}>
      <Card.Body>
        <Card.Title>{authorObj.first_name} {authorObj.last_name}</Card.Title>
        <p> {authorObj.email} </p>
        <Link href={`/author/${authorObj.firebaseKey}`} passHref>
          <Button variant="primary" className="m-2">VIEW</Button>
        </Link>
        {/* DYNAMIC LINK TO EDIT THE BOOK DETAILS  */}
        <Link href={`/author/edit/${authorObj.firebaseKey}`} passHref>
          <Button variant="info">EDIT</Button>
        </Link>
        <Button variant="danger" onClick={deleteThisAuthor} className="m-2">
          DELETE
        </Button>
        {authorObj.favorite ? <Button variant="success"> FAVORITE </Button> : ''}
      </Card.Body>
    </Card>
  );
}

AuthorCard.propTypes = {
  authorObj: PropTypes.shape({
    email: PropTypes.string,
    favorite: PropTypes.bool,
    firebaseKey: PropTypes.string,
    first_name: PropTypes.string,
    last_name: PropTypes.string,
  }).isRequired,
  onUpdate: PropTypes.func.isRequired,
};

'DELETE' - SEEN IN THE AUTHORCARD.JS COMPONENT

export default function AuthorCard({ authorObj, onUpdate }) {
  const deleteThisAuthor = () => {
    if (window.confirm(`Delete ${authorObj.first_name} ${authorObj.last_name}?`)) {
      deleteAuthorBooks(authorObj.firebaseKey).then(() => onUpdate());
    }
  };