Toasts

This document outlines the usage of toasts within the application using the React Toastify library. Toasts are used to provide user feedback and notifications in a non-intrusive manner. This documentation explains the implementation and usage of various toast types within the application.

Implementation

Toasts are implemented using the React Toastify library. The toast-related code is organized into functions for different toast types, each with its own styling and options. Below are the key components and functions related to toasts:

import classes from './styles.module.css'
import {toast, Id, ToastOptions} from 'react-toastify'
import {SVG} from '@hybr1d-tech/charizard'
import {ICONS} from 'app/utils/constants/icon'

type ToastType = ({msg, options}: {msg: string | React.ReactElement; options?: ToastOptions}) => Id

// Function for displaying success toasts
export const toastSuccess: ToastType = ({msg, options}) =>
  toast.success(msg, {
    position: 'top-right',
    autoClose: 1800,
    ...options,
    icon: (
      <SVG
        path={ICONS.checkedCircleOutlined}
        svgClassName={clsx(classes.icon, classes.success)}
        spanClassName={classes.iconSpan}
      />
    ),
  })

// Function for displaying error toasts
export const toastError: ToastType = ({msg, options}) =>
  toast.error(msg, {
    position: 'top-right',
    autoClose: 1800,
    ...options,
    icon: (
      <SVG
        path={ICONS.alertCircle}
        svgClassName={clsx(classes.icon, classes.error)}
        spanClassName={classes.iconSpan}
      />
    ),
  })

// Function for displaying info toasts
export const toastInfo: ToastType = ({msg, options}) =>
  toast.info(msg, {
    position: 'top-right',
    autoClose: 1800,
    ...options,
    icon: (
      <SVG
        path={ICONS.infoCircle}
        svgClassName={clsx(classes.icon, classes.info)}
        spanClassName={classes.iconSpan}
      />
    ),
  })

// Function for displaying warning toasts
export const toastWarning: ToastType = ({msg, options}) =>
  toast.warning(msg, {
    position: 'top-right',
    autoClose: 1800,
    ...options,
    icon: (
      <SVG
        path={ICONS.alertTriangle}
        svgClassName={clsx(classes.icon, classes.warning)}
        spanClassName={classes.iconSpan}
      />
    ),
  })

// Function for displaying a custom toast (e.g., NoUserFound component)
export const noUserFoundToast = () =>
  toast.error(<NoUserFound />, {
    position: 'top-right',
    autoClose: 1800,
  })

// Function to display a custom close button as a toast element
export function ToastCloseButton() {
  return (
    <SVG
      path={ICONS.close}
      svgClassName={classes.closeIcon}
      spanClassName={classes.closeIconSpan}
    />
  )
}

Usage

Toasts are used throughout the application to provide feedback and notifications. Below are examples of how to use the different toast functions:

Success Toast

Use the toastSuccess function to display a success toast:

toastSuccess({
  msg: 'Successfully connected',
  options: {
    toastId: 'connected_integration',
  },
})

Similar usage for other toast types e.g error, info and warning