MVP - READ/DELETE - EXPENSE CARD COMPONENTS

[keanacobarde]

User Story

I, as the user, should be able to see all the expenses pertaining to a specific category laid out and organized in an easy-to-read format. Most likely, through cards. These cards will have the following: the title of the expense, the amount of the expense, and an edit/delete button.

Acceptance Criteria

WIREFRAME

The entity of expenses is as follows. Each card will display the title of the expense, its amount, as well as the category of the expense. This isn't seen in the wireframe, just because the annotation is covering it. Originally, I felt that adding the category names to the card would be redundant, but these cards will be reused within the monthly timeline as well, so the category names are necessary:

A more faithful view of the expense card without the Figma annotation in the way.

Dependencies

• TEST DATA AND PLANNING SHOULD ALL BE COMPLETED
• NECESSARY API CALLS MUST BE CREATED (READ AND DELETE)

  10 - A mutual dependency. Both are dependent one one another. The existence of this page allows for the testing of the rendering of this component, and the completion of this page is dependent on the completion of this expense.

Dev Notes

• Will be very similar to #9 in structure. Will utilize the same structure, if a design library is utilized.
• Delete API call will need to be created and implemented onto this page.

CARD STRUCTURE

• [x] Title
• [x] Category
• [x] Expense amount
• [x] Delete and Edit button

/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable @next/next/no-img-element */
import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import Link from 'next/link';
import { Button } from 'react-bootstrap';
import { deletePost } from '../api/postData';
import { fetchPostWithCategories } from '../api/categoryData';

export default function PostCard({ postObj, onUpdate, userIdent }) {
  const deleteThisPost = () => {
    if (window.confirm(`Delete ${postObj.postName}?`)) {
      deletePost(postObj.id).then(() => onUpdate());
    }
  };

  // Getting categories
  const [getCat, setCat] = useState('');

  // fetchPostWithCategories(postObj.id).then(setCat);

  const getTheCategories = () => fetchPostWithCategories(postObj.id).then(setCat);

  useEffect(() => {
    getTheCategories();
  }, [postObj]);

  return (
    <div id="postCard" className="card">
      <img src={postObj.imageUrl} alt={postObj.postName} width="100" height="100" />
      <p className="card-title">{postObj.postName}</p>
      <div className="cat">{getCat.categories?.map((cat) => <p className="small-dec"> {cat.categoryName} </p>)}</div>
      <p className="small-desc">
        {postObj.description}
      </p>

      <div className="buttons">{userIdent === postObj.userId ? (
        <>
          <Link href={`/posts/edit/${postObj.id}`} passHref>
            <Button variant="info">EDIT</Button>
          </Link>
          <Button variant="danger" onClick={deleteThisPost} className="m-2">
            DELETE
          </Button>
        </>
      ) : ''}
      </div>
      <div className="go-corner">
        <div className="go-arrow">→</div>
      </div>
    </div>
  );
}

PostCard.propTypes = {
  postObj: PropTypes.shape({
    id: PropTypes.number.isRequired,
    userId: PropTypes.number,
    imageUrl: PropTypes.string,
    postName: PropTypes.string,
    description: PropTypes.string,
  }).isRequired,
  onUpdate: PropTypes.func.isRequired,
  userIdent: PropTypes.number,
};

PostCard.defaultProps = {
  userIdent: undefined,
};

[keanacobarde]

ALL GOVERNING EXPENSE CARD FUNCTIONALITY AND STYLING HAS BEEN IMPLEMENTED AND TESTED. CLOSING TICKET.