CRUD COMPONENTS - FORMS - CARDS

[MsSanli]

User Story

CREATE, READ, UPDATE, DELETE CRUD

• Functionality and Components

[MsSanli]

Use this basically and instead use member. Remember that this is Ophelia's team

import React, { useEffect, useState } from 'react'; import { useRouter } from 'next/router'; import PropTypes from 'prop-types'; import FloatingLabel from 'react-bootstrap/FloatingLabel'; import Form from 'react-bootstrap/Form'; import { Button } from 'react-bootstrap'; import { useAuth } from '../../utils/context/authContext'; import { createAuthor, updateAuthor } from '../../api/authorData';

const initialState = { first_name: '', last_name: '', email: '', favorite: false, };

function AuthorForm({ obj }) { const [formInput, setFormInput] = useState(initialState); const router = useRouter(); const { user } = useAuth();

useEffect(() => { if (obj.firebaseKey) setFormInput(obj); }, [obj, user]);

const handleChange = (e) => { const { name, value } = e.target; setFormInput((prevState) => ({ ...prevState,

}));

};

const handleSubmit = (e) => { e.preventDefault(); if (obj.firebaseKey) { updateAuthor(formInput).then(() => router.push(/author/${obj.firebaseKey})); } else { const payload = { ...formInput, uid: user.uid }; createAuthor(payload).then(({ name }) => { const patchPayload = { firebaseKey: name }; updateAuthor(patchPayload).then(() => { router.push('/authors'); }); }); } };

return (

{obj.firebaseKey ? 'Update' : 'Create'} Author

{obj.firebas eKey ? 'Update' : 'Create'} Author

); }

AuthorForm.propTypes = { obj: PropTypes.shape({ description: PropTypes.string, image: PropTypes.string, price: PropTypes.string, sale: PropTypes.bool, title: PropTypes.string, author_id: PropTypes.string, firebaseKey: PropTypes.string, }), };

AuthorForm.defaultProps = { obj: initialState, };

export default AuthorForm;

[MsSanli]

AUTHOR CARD

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 { deleteSingleAuthor } from '../api/authorData';

function AuthorCard({ authorObj, onUpdate }) { // FOR DELETE, WE NEED TO REMOVE THE AUTHOR AND HAVE THE VIEW RERENDER, // SO WE PASS THE FUNCTION FROM THE PARENT THAT GETS THE AUTHOR const deleteThisAuthor = () => { if (window.confirm(Delete ${authorObj.first_name} ${authorObj.last_name}?)) { deleteSingleAuthor(authorObj.firebaseKey).then(() => onUpdate()); } };

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

{authorObj.first_name} {authorObj.last_name} {authorObj.favorite ? '' : ''} {/* author email? */} VIEW EDIT DELETE ); } AuthorCard.propTypes = { authorObj: PropTypes.shape({ image: PropTypes.string, first_name: PropTypes.string, last_name: PropTypes.string, favorite: PropTypes.bool, // email, favorite firebaseKey: PropTypes.string, }).isRequired, onUpdate: PropTypes.func.isRequired, }; export default AuthorCard;

[MsSanli]

AUTHORS PAGE

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

function Authors() { // TODO: Set a state for books const [authors, setAuthors] = useState([]);

// TODO: Get user ID using useAuth Hook const { user } = useAuth();

// TODO: create a function that makes the API call to get all the books const getAllTheAuthors = () => { getAuthors(user.uid).then(setAuthors); };

// TODO: make the call to the API to get all the books on component render useEffect(() => { getAllTheAuthors(); });

return (

Add An Author

{/* TODO: map over books here using BookCard component */} {authors.map((author) => ( ))}

); }

export default Authors;