Components

Components

Dialog box

The dialog box can be imported in from components, it just needs to be included in the scope of the return of the component you wish to have the dialog box.

Prerequisites:

• Need to setup a state variable for the dialog open status (recommended to call it dialogOpen with a change function called setDialogOpen)
• The function of what to do on accept
• The function of what to do on decline
• The title and message the dialog box should show

Implementation:

Import from components

import { DialogBox } from "../../../../components";

Using the following JSX object:

<DialogBox
	title={"title goes here"}
	message={"Dialog message goes here?"}
	onAccept={onAcceptFunction}
	onDecline={onDeclineFunction}
	isOpen={dialogOpen}
	toggleOpen={setDialogOpen(!dialogOpen)}
/>

An example of how this has been implemented can be found in RecipeHeaderMenu

Toast notifications

The toast notification system for this project is triggered using a redux slice. To use the notification system:

1. Bring in the hook useDistaptch() from react-redux and the function setToast() from the toast slice
2. Use the dispatch object to call setToast(), passing it an object with the notification message, alert type (used for the colour of notification that will be displayed) and isOpen (passing true opens the toast panel). The function should look something link this:

dispatch(
	setToast({ message: "good morning!", alertType: "info", isOpen: true }),
);

For details on the different alert types see the options available for Alert components in the MaterialUI documentation.