MVP - READ/DELETE - CATEGORY CARD COMPONENT

[keanacobarde]

User Story

I, as the user, should be able to see cards that pertain to the specific category. These cards will have the title of the category, the amount remaining to spend, and a 'See Details' link which will lead to a central category page.

Acceptance Criteria

The entity of the categories is as follows. Each card will display all information, except for the spending limit, which is reported on the category details page:

Dependencies

• ALL PLANNING MUST BE COMPLETED
• ALL NECESSARY API CALLS MUST BE COMPLETED (GET AND DELETE)

  5 , test data is essential to ensure everything is formatted correctly

  8 - While it's not essential for this to be created in its entirety, the skeleton should be completed so that we can test to ensure the cards are rendering in an expected fashion.

Dev Notes

As detailed in #8 , this component will be imported into the home page and mapped. A singular card will be created and stored within a components folder for repeated usage.

SAMPLE FROM 'HACKATHON AWARENESS'

• This deviates slightly, due to some specific functionality that needed to occur for specific pieces of information to render on the card; however, something similar may need to happen because a sum must be calculated to display the 'Amount Remaining', as seen in the wireframe. It'll be something along the lines of categorySpendingLimit - filteredExpenseArray.reduce() = amountRemaining. The amountRemaining is then displayed on the card. Some experimentation with the API call will have to occur, though, because the amountRemaining is constantly changing.
• The delete API call must be created and the functionality will be written within this same file.

CARD STRUCTURE

• [x] Card title
• [x] Amount Remaining
• [x] Delete Button
• [x] See Details 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]

CREATED CATETGORY CARD COMPONENT AND MOUNTED IT TO DASHBOARD. CLOSING ISSUE.