@xtreamsrl/react-feedback-management

This package exposes a provider GlobalFeedbackProvider and the following hooks:

• useGlobalError
• useGlobalSuccess
• useErrorManagement
• useSuccessManagement

The library is a wrapper that keeps track of Success and Error. Moreover, it provides functions to update their values.

Installation

npm install @xtreamsrl/react-feedback-management

Usage

Before actually using these library tools it is necessary to define the structure of Error and Success relying on augmentation in file feedback.d.ts (the name is not relevant) with the following structure:

import { Error, Success } from '@xtreamsrl/react-feedback-management';

declare module '@xtreamsrl/react-feedback-management' {

  interface Error {
    /*
    * Here you can define your error type.
    * e.g. */
    code: number;
    message: string
  }

  interface Success {
    /*
    * Here you can define your success type.
    * e.g. */
    message: string
  }
}

GlobalFeedbackProvider

After having defined the Error and Success interfaces using augmentation, it is necessary to wrap the main app with the GlobalFeedbackProvider

import { GlobalFeedbackProvider } from '@xtreamsrl/react-feedback-management';

function App() {
  return <GlobalFeedbackProvider>
    <MainApp/>
  </GlobalFeedbackProvider>
}

With these two steps done, one can use the available hooks as needed.

useErrorManagement

A possible way of using this hook is to show and hide error toasts. Here is an example:

import {useErrorManagement} from "@xtreamsrl/react-feedback-management";
import Snackbar from '@mui/material/Snackbar';
import Alert from '@mui/material/Alert'

const ErrorToast: React.FC = () => {
  const { error, setError } = useErrorManagement();
  const handleClose = () => setError(null);

  return error ? (
    <Snackbar
      data-test="success-toast"
      anchorOrigin={{
        vertical: 'bottom',
        horizontal: 'center',
      }}
      open={error !== null}
      autoHideDuration={3000}
      onClose={handleClose}>
      <Alert sx={{ width: '100%' }} onClose={handleClose} severity="error" variant="filled">
        {error?.message}
      </Alert>
    </Snackbar>
  ) : <button onClick={() => setError({message: 'not ok', code: 1})}>Show</button>;
};

Here the error is set in the component itself using the button, but generally it is set from outside the component, more specifically, in the catch clause of asynchronous operations.

useGlobalError

This hook is useful to globally set an error if an operation fails. An example may be using the return values of a query execution (e.g., error or isError) and pass them to the useGlobalError.

useGlobalError({isError, error: {message: error.message, code: error.code}})

useSuccessManagement

A possible way of using this hook is to show and hide success toasts. Here is an example:

import {useSuccessManagement} from "@xtreamsrl/react-feedback-management";
import Snackbar from '@mui/material/Snackbar';
import Alert from '@mui/material/Alert'

const SuccessToast: React.FC = () => {
  const { success, setSuccess } = useSuccessManagement();
  const handleClose = () => setSuccess(null);

  return success ? (
    <Snackbar
      data-test="success-toast"
      anchorOrigin={{
        vertical: 'bottom',
        horizontal: 'center',
      }}
      open={success !== null}
      autoHideDuration={3000}
      onClose={handleClose}>
      <Alert sx={{ width: '100%' }} onClose={handleClose} severity="success" variant="filled">
        {success?.message}
      </Alert>
    </Snackbar>
  ) : <button onClick={() => setSuccess({message: 'ok'})}>Show</button>;
};

useGlobalSuccess

This hook is useful to globally set a success if an operation succeed. An example may be using the return values of a query execution (e.g., isSuccess) and pass them to the useGlobalSuccess.

useGlobalSuccess({isSuccess, success: {message: 'Operation completed'}})

Who we are