"Current Volunteer Counts" div should be displayed on button click for each shelter fixed (issue 73)

[tnhi26990]

Fixes #73

What was changed?

I changed the Volunteering Opportunities page by adding the "View Current Volunteer Counts" button for each shelter. When the button is clicked, the "Current Volunteer Counts" div will be displayed. The button name is also changed to "Hide Current Volunteer Counts" and when it is clicked, the "Current Volunteer Counts" div is hidden. The "Current Volunteer Counts" div is also displayed when clicking on the "Start Time date picker" and "End Time date picker".

Why was it changed?

It was changed to facilitate ease of use and reduce the number of API calls.

How was it changed?

I initialized a state variable "hidden" using useState hook and used that variable to determine when to render "the Current Volunteer Counts div". The button element has an onClick event handler, and when clicked, it calls the arrow function toggling the value of hidden.

Screenshots that show the changes (if applicable):

[SiriChandanaGarimella]

@tnhi26990 - Summarizing the key points that we discussed for your reference,

1. Make the "View Current Volunteer Counts" an expandable and collapsable item.
2. If the "Current Volunteer Counts" section is expanded, clicking on the "Start time date picker" or "End time date picker" should not trigger any action, and if it is collapsed then clicking on the "Start time date picker" or "End time data picker" should expand the "Current Volunteer Counts" section.

[SiriChandanaGarimella]

@tnhi26990 - Great work 👍 It is all good! Just a small update, could you please update the variable names and css class names to be more meaningful. For example instead of hidden can you please make it as volunteerCountsHidden and setVolunteerCountsHidden. Also, instead of current-count as the className can you please make it something like current-volunteer-count.