Popup
Popups are the most commonly used component and is a vital component for improving user experiences
There are several occations to where popups are used such as when uploading, when deleting and so on. Due to its multi-functionality of re-routing user, displaying normal/warning text and displaying itself, there are also many prop values (as state and its updating function) required for each popup to function properly.
This means that it wouldn't be sensible to define same sets of useState hooks for every single use occation as it would produce too many replicated code. Therefore we have created a common context, similar to the UserContext mentioned in User Validation section.
PopupContext.js
This creates a common context for all popups which defines the sets of useState hooks required for each popup to function properly.
The trigger state is used to indicate whether a popup should be displayed or not. The popUpText state defines the text to be displayed on the popup screen. The routing state defines where would the user be rerouted to after closing the popup, and warning state defines whether the popup is displaying warning message or not.
index.js
Similar to how we used the UserContext, we need to wrap the provider of PopupContext around the components where the context would be used. In this case it is the entire application
components/Popup/Popup.js
This creates the visuals of the actual popup, which displays a small popup window with a NavButton to close the popup and for re-routing, and slightly 'hides' the background.
Since we have defined the common state to be used by all popups, we only needed to retrieve those states from the common context. And we also need the setTrigger function such that we can close the popup menu onclick of the NavButton component.
components/Button/NavButton.js
The main purpose of this component is for navigating user to another link specified by the props. However, it also supports additional function to be executed onClick of the button, which in the popup scenario, is to set trigger to false and closes the popup.
components/ChangePassword/ChangePassword.js
This is an example scenario to when a popup is used, in this case it is a form for changing password of current user.
We have collected the state updating functions from the PopupContext, and as you can see below in the changePassword function, the states are set by those functions according to the response recieved from the backend.
Since the popups are using a common context, there isn't the need of specifying props for the Popup component, the Popup component would just use the states provided by the common context.
