Donation Items Table - Add Pagination + Add/Edit/Delete Item

[Madhu2244]

Overview

"Computer programmers obtain quasi-magical, superhuman coding ability when they have a blood alcohol concentration percentage between 0.129% and 0.138%" - Former CEO of Microsoft

Previously, we have setup the Donation Items Table. Now it is time to add pagination as well as setup Add/Edit/Delete item by leveraging the Backend. This is a two part task, where you will need to add to the backend to setup pagination, as well as doing the frontend work for the rest of the task.

Running the program

1. Clone the repo through git clone
2. Navigate to the directory of your fph-frontend repo using the cd command.
3. Run git checkout dev and then git pull.
4. Create a branch off the dev branch in fph-frontend. For the name of the branch, use what the title of this issue as. Use git checkout -b <insert_branch_name>.
5. Install the necessary dependencies through running yarn. Test that your application works by running yarn format followed by yarn dev
6. Create your necessary code through creating files within the component folder.
7. Run the code with yarn (to install), yarn format (to format the code), and yarn start (to start the program).
8. Access localhost:3000/.

Task 1

https://www.figma.com/file/VkH80LtHkl1Ck76v88fTvk/Ideation?type=design&node-id=1115-3286&mode=design&t=EjUdVOl07yUPA80k-0 - This is the Figma to reference for your task.

Setup pagination in the backend so that if we are on page 1 then we have only 1-10 showing, if on page 2 its 11-20, etc. Reference this PR (ctc-uci/fph-backend@d58e7fe) to see how it is done in the backend.

Reference this PR (https://github.com/ctc-uci/fph-frontend/pull/39/files), more specifically the AdminFilterDashboard. See how they setup the pagination on there, there will be some code for filters, but just ignore that.

Task 2

https://www.figma.com/file/VkH80LtHkl1Ck76v88fTvk/FPH-Wireframes?type=design&node-id=1680-13935&mode=design&t=pmlMYHkJamNCUcrZ-0

In addition to setting up the pagination, set up the Add Item button, which should open up a modal. This modal should be defined in a different file and then called when we onClick() the Add Item button. This Add Item button should also be able to do edit item. Please make one compoennt for Add/Edit item only. Reference the following code on how to do an efficient Form for this section:

  const [formData, setFormData] = useState({
    thing1: null,
    thing2: null
  });
  
  const submitForm = async event => {
    event.preventDefault();
    if not edit:
          await backend.post('/donation', formData);
    else:
         await backend.put('/donation/id', formData);
  };

  const handleChange = event => {
    const name = event.target.name;
    var value = event.target.value;

    if (event.target.type === 'number') {
      value = value ? parseInt(value, 10) : '';
    }
    setFormData(prevState => ({ ...prevState, [name]: value }));
  };
  
  ...
  
  <Input
          id="personName"
          placeholder="Enter your name"
          size="lg"
          name="reporter"
          onChange={handleChange}
        />

Use Chakra Components only to create the fields for this task.

There should be zero css created for this task.

Support

Feel free to reach out to Madhu and Josh on Slack/Messenger for assistance.