State Management

Managing context, state and hooks

Context API

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

We are using context for login methods - Auth0, JWT, Firebase, AWS.

SWR

SWR is a popular library used for data fetching and state management in React applications. Data fetching is covered in Axios API calls section, here we are going to cover about state management using SWR.

Mantis is managing state of following using SWR

1. Snackbar states

2. Menu states

3. E-commerce Cart

1. Snackbar

Snackbar is used to show notification in application. Whenever component dispatch a action with data to show snackbar, it appears in app. The initial state of snackbar is being capture using useSWR hooks and after that, we are mutating it state based on action calls. Following is the initital state:

src/api/snackbar.ts

const initialState: SnackbarProps = {
  action: false,
  open: false,
  message: 'Note archived',
  anchorOrigin: {
    vertical: 'bottom',
    horizontal: 'right'
  },
  variant: 'default',
  alert: {
    color: 'primary',
    variant: 'filled'
  },
  transition: 'Fade',
  close: false,
  actionButton: false,
  maxStack: 3,
  dense: false,
  iconVariant: 'usedefault'
};

This values has been inititilised using useSWR like below:

src/api/snackbar.ts

export function useGetSnackbar() {
  const { data } = useSWR(endpoints.key, () => initialState, {
    revalidateIfStale: false,
    revalidateOnFocus: false,
    revalidateOnReconnect: false
  });

  const memoizedValue = useMemo(() => ({ snackbar: data! }), [data]);

  return memoizedValue;
}

Now how to read these values and update as well.

To read the values and listen, following SWR hooks is sufficient in component. Whenever any changes happen, it activated like redux selector and act based on logic.

@extended\Snackbar.tsx

...
import { closeSnackbar, useGetSnackbar } from 'api/snackbar';
...

// ==============================|| SNACKBAR ||============================== //

const Snackbar = () => {
  const { snackbar } = useGetSnackbar();
  ...
  ...
};

export default Snackbar;

To open Snack bar, we need to change the value and mutate the state. Here is how it is done

src/api/snackbar.ts

export function openSnackbar(snackbar: SnackbarProps) {
  // to update local state based on key

  const { action, open, message, anchorOrigin, variant, alert, transition, close, actionButton } = snackbar;

  mutate(
    endpoints.key,
    (currentSnackbar: any) => {
      return {
        ...currentSnackbar,
        action: action || initialState.action,
        open: open || initialState.open,
        message: message || initialState.message,
        anchorOrigin: anchorOrigin || initialState.anchorOrigin,
        variant: variant || initialState.variant,
        alert: {
          color: alert?.color || initialState.alert.color,
          variant: alert?.variant || initialState.alert.variant
        },
        transition: transition || initialState.transition,
        close: close || initialState.close,
        actionButton: actionButton || initialState.actionButton
      };
    },
    false
  );
}

And then the method openSnackbar will be called from components to open snackbar.

apps\invoice\create.tsx

...
import { openSnackbar } from 'api/snackbar';
// types
import { SnackbarProps } from 'types/snackbar';
...

// ==============================|| INVOICE - CREATE ||============================== //

const Create = () => {
  ...
  const handlerCreate = (values: any) => {
    const newList: InvoiceList = {
      ...
    };
    ...
    openSnackbar({
      open: true,
      message: 'Invoice Added successfully',
      anchorOrigin: { vertical: 'top', horizontal: 'right' },
      variant: 'alert',
      alert: {
        color: 'success'
      }
    } as SnackbarProps);
    ...
  };



  return (
    <MainCard>
      ...
    </MainCard>
  );
};

export default Create;