Update Members

[PaulPatterson48]

User Story

GIVEN: As an authenticated user, I should be able to se an edit button on each member card

Acceptance Criteria

Edit button visible on the card Should see information about the member pre-populated Can edit the information on the form Promises for PATCH request

Dependecies

api\memberData.js with Promises components\forms\NavBar.js components\forms\memberCard.js pages\member\edit[firebaseKey].js for routing pages\member\edit[firbaekey].js pages\member\edit\new.js

Dev Notes

// TODO: UPDATE BOOK const updateBook = (payload) => new Promise((resolve, reject) => { fetch(${endpoint}/books/${payload.firebaseKey}.json, { method: 'PATCH', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(payload), }) .then((response) => response.json()) .then((data) => resolve(data)) .catch(reject); });

import React, { useEffect, useState } from 'react'; import { useRouter } from 'next/router'; import { getSingleBook } from '../../../api/bookData'; import BookForm from '../../../components/forms/BookForm';

export default function EditBook() { const [editItem, setEditItem] = useState({}); const router = useRouter(); // TODO: grab the firebasekey const { firebaseKey } = router.query;

// TODO: make a call to the API to get the book data useEffect(() => { getSingleBook(firebaseKey).then(setEditItem); }, [firebaseKey]);

// TODO: pass object to form return (); }

/ eslint-disable @next/next/no-img-element / import React, { useEffect, useState } from 'react'; import { useRouter } from 'next/router'; import { viewBookDetails } from '../../api/mergedData';

export default function ViewBook() { const [bookDetails, setBookDetails] = useState({}); const router = useRouter();

// TODO: grab firebaseKey from url const { firebaseKey } = router.query;

// TODO: make call to API layer to get the data useEffect(() => { viewBookDetails(firebaseKey).then(setBookDetails); }, [firebaseKey]);

return (

{bookDetails.title} by {bookDetails.authorObject?.first_name} {bookDetails.authorObject?.last_name} {bookDetails.authorObject?.favorite ? ' 🤍' : ''}

Author Email: {bookDetails.authorObject?.email}

{bookDetails.description || ''}

---

{bookDetails.sale ? `🏷️ Sale $${bookDetails.price}` : `$${bookDetails.price}`}

); }

import React from 'react'; import BookForm from '../../components/forms/BookForm';

// TODO: create a reusable form to add/edit book and render in this view

export default function AddBook() { return ; }