What is it supposed to do
Adds a toast component using the react-hot-toast package that can be used from anywhere in the application to display success, error, warning and general messages. The contents can be configured through a toastData.js file, containing all the configurations. You can configure the message's title, description, type (success, error, etc), and duration.
How can we test your branch
Currently there is only one place where a toast is created; in the AppRouter file (pages/index.js). You could try calling this from other places and give other input. For different input take a look at the toastData file (components/toast/toastData.js). Try different combinations. For example, if you want to have a toast that doesn't close without user input, add a duration field to your object and give it the Infinity value (this overrides the default duration value, defined at the top of the file).
Additional notes
Since react-hot-toast doesn't seem to support two pieces of text (title and description) for creating a toast, I had to generate an object with data which is then turned into a string, so the toast component can parse it back into an object and use the data. To avoid any hassle I made a ToastUtil file, so this logic doesn't have to be worried about.
1. General checklist
[x] a. Tested happy flow.
[x] b. Tested unhappy flow.
[x] c. No unexpected exceptions.
[X] d. No code with high complexity. (Big O)
[x] e. EOF newline.
[x] f. No linter warnings or errors.
2. If relevant, front-end checklist
[x] a. Responsive. (Desktop all the way to mobile 320px)
[x] b. Using SCSS variables where relevant.
[x] c. Relevant class names
[x] d. No modified global SCSS properties, except if necessary and fully tested the impact.
[x] e. Checked caniuse for more modern CSS properties.
closes #382
What is it supposed to do
Adds a toast component using the react-hot-toast package that can be used from anywhere in the application to display success, error, warning and general messages. The contents can be configured through a toastData.js file, containing all the configurations. You can configure the message's title, description, type (success, error, etc), and duration.
How can we test your branch
Currently there is only one place where a toast is created; in the AppRouter file (pages/index.js). You could try calling this from other places and give other input. For different input take a look at the toastData file (components/toast/toastData.js). Try different combinations. For example, if you want to have a toast that doesn't close without user input, add a duration field to your object and give it the Infinity value (this overrides the default duration value, defined at the top of the file).
Additional notes
Since react-hot-toast doesn't seem to support two pieces of text (title and description) for creating a toast, I had to generate an object with data which is then turned into a string, so the toast component can parse it back into an object and use the data. To avoid any hassle I made a ToastUtil file, so this logic doesn't have to be worried about.
1. General checklist
2. If relevant, front-end checklist
3. If relevant, test these browsers