Zpcolburn / Heavy-Track

1 stars 0 forks source link

STRETCH - JobSIte - Delete #30

Closed Zpcolburn closed 3 months ago

Zpcolburn commented 3 months ago

User Story

I, as the user should be able to close out the job site once it is finished. The delete button at the bottom each card will allow the user to be able to delete or (close out) a job site.

Acceptance Criteria

This is the wireframe of the new job site card with edit and delete on it. image

Dependecies

28 API calls must be created and tested

29 Wouldn't hurt to get the create and edit work.

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

function EquipmentCard({ equipmentObj, onUpdate }) { // FOR DELETE, WE NEED TO REMOVE THE EQUIPMENT AND HAVE THE VIEW RERENDER, // SO WE PASS THE FUNCTION FROM THE PARENT THAT GETS THE Equipment const deleteThisEquipment = () => { if (window.confirm(Delete ${equipmentObj.name}?)) { deleteEquipment(equipmentObj.firebaseKey).then(() => onUpdate()); } }; return ( <Card style={{ width: '16rem', margin: '10px' }}> <Card.Img variant="top" src={equipmentObj.image} style={{ height: '200px', objectFit: 'cover' }} />

{equipmentObj.name} {equipmentObj.size} {equipmentObj.location} {/* DYNAMIC LINK TO VIEW THE EQUIPMENT DETAILS */} {/* DYNAMIC LINK TO EDIT THE EQUIPMENT DETAILS */} ); } EquipmentCard.propTypes = { equipmentObj: PropTypes.shape({ firebaseKey: PropTypes.string, name: PropTypes.string, size: PropTypes.string, image: PropTypes.string, location: PropTypes.string, }).isRequired, onUpdate: PropTypes.func.isRequired, }; export default EquipmentCard;