Fix AcknowledgeModal to only show on initial load

[Skydodle]

Overview

We need to ensure AcknowledgeModal is displayed only once upon the initial load of the application and does not reappear after subsequent data load or filter updates, so that users can have more smooth interaction with the map.

More Info

We can create a flag state to track whether the modal has been shown before, initially set to false to always show the modal on intial load, and also condition the render to only show modal when flag is false. Attached the flag state's toggle to the modal's ok button, once user clicked the button to close the model, the flag state is set to true and the modal will not show again throughout the user's session.

Action Items

• [ ] Add a new state to MapContainer to track if the AcknowledgeModal has been shown:
  • Introduce a state variable, say acknowledgeModalShown, to the MapContainer class constructor, and set it to false initially.
  • Create a method/ handler, say onClose to set acknowledgeModelShown state to true.
  • Pass the callback prop onClose to AcknowledgeModal.
• [ ] Modify the conditional rendering logic:
  • Update the ternary to render the AcknowledgeModal only if the data is done loading (isDbLoading or isMapLoading is false) and acknowledgeModalShown is false (AcknowledgeModal has not shown before) .
• [ ] Update AcknowledgeModal to accept a callback prop for closing:
  • AcknowledgeModa should accept onClose prop, which it calls when the modal is closed by the button handler.

Resources/Instructions

• Previous issue that created the modals - #1676
• Linked PR that closed the previous issue - #1706

Demo Video of Proposed Fix

https://github.com/hackforla/311-data/assets/69279538/8566bfcf-ab1f-4d6e-a14a-f5c33f0cafbb

[ryanfchase]

@Skydodle thanks Johnny, this is ready to be picked up

cc @drakenguyen4000

[ryanfchase]

Moved this ticket to in review (previously should have been In-Progress).