228 reusable popup - Githubissues

closes #228

What is it supposed to do
Adds a reusable component that allows developers to easily implement popups to show errors or other content that requires awareness. Popups are dynamic; the contents can be changed and several actions can be added.

How can we test your branch
At the moment there is only one scenario where the popup appears. Turn off your local API and try logging in. A popup saying a network error occurred. Try interacting with this popup and see if it is working as you would expect.

Also try playing around with the popup component. The popup component is called from the loginPrompt component (line 70). To make sure the contents are the same for popups with the same purpose (such as showing a network error), the contents are fetched from popUpData.js. For example, if you want the close button in the popup to not contain text, you can remove the title attribute of the close action object in actions > close. The actions themselves (such as closing the popup) are defined in the parent component, so in order to change the actions of a button in a popup, you would have to change them in the parent component (loginPrompt). You could try adding the popup to another component. Just inject the PopUp component with JSX: Then add a popup attribute to the state of the component (initialise it with null). To make the popup appear, change the popup attribute of the state. Try to evaluate the process and consider other methods that could be more dynamic, easier to use or cleaner.

General checklist

[x] Tested happy flow.
[x] Tested unhappy flow.
[x] No unexpected exceptions.
[x] No code with high complexity. (Big O)
[x] EOF newline.
[x] No floating comma's and spaces.
[x] No unexpected/unhandled errors.
[x] Lines no longer than 'guideline' in IDE.
[x] Correct indentation.
[x] No usage of legacy functionalities.
[x] (JS) Curly braces on the sameline as reserved keywords (if () { instead of { on line below)
[x] (JS) No double quotes.
[x] (JS) Single newline above unique code structures and reserved keywords.
[x] (JS) Variables bundled where possible.
[x] (JS) No semi-colons except where they have a functional necessity, such as for-loops.

If relevant, front-end checklist

[x] Responsive. (Desktop all the way to mobile 320px)
[x] Using SCSS variables where relevant.
[x] Relevant class names
[x] No modified global SCSS properties, except if necessary and fully tested the impact.
[x] Checked caniuse for more modern CSS properties.

If relevant, back-end checklist

[ ] No unhandled promise rejections.
[ ] Seeders still functional.
[ ] No primary-key violations.
[ ] Normalization, atleast 3NF.
[ ] Used guards (middleware) where necessary and tested if route is guarded.

If relevant, test these browsers

[x] Chrome
[ ] Firefox
[ ] Opera
[x] Edge
[ ] Safari

PR Rules
1. Add relevant labels.
2. Select atleast two reviewers.
3. Assign all reviewers allowed to merge the branch, including yourself.
4. If relevant to the sprint, put related issue in 'Awaiting Approval' column on project board.
5. Add to the corresponding milestone.

AjobK / Seaqull

228 reusable popup #265