Feat: Error handling and Toast notification

Setup Toasts display

// \src\container\App.tsx

import { ToastWrapper } from "ui";
import { RootState } from '@/state/store';

export const App = (): JSX.Element => {
  ... 

  return (
    <QueryClientProvider client={queryClient}>
      <SessionContextWrapper includeTeams>
        <ToastWrapper<RootState> position="bottom-left">
         // ... app stuff
        </ToastWrapper>
      </SessionContextWrapper>
    </QueryClientProvider>
  );
};

RootState Here is to typecheck that the state of the current app is compatible (check if state has the toasts reducer, see below)

Intercept errors

// \src\state\store.ts

import {
  api,
  applyErrorInterceptor,
  toastsReducer
} from "utils";

export const store = configureStore({
  reducer: {
    user,
    epicVoting,
    featureFlags,
    judging,
    player,

    ...

    toasts: toastsReducer, // <---------------------------------- include the reducer
  },
});

applyErrorInterceptor(api, store); // <---------------------------------- intercept errors

sagaMiddleware.run(sagas);

export type RootState = ReturnType<typeof store.getState>;
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

Example usage in react

// \src\containers\2023\Live\Live.tsx

import { useToast } from 'ui';

const LivePage = () => {
  const toast = useToast();
  return (
    <>
      <h1>LivePage</h1>
      <button onClick={() => toast.success(<>Test <b>Success</b> message</>)}>Add a success toast</button>
      <button onClick={() => toast.error('Test errror message')}>Add a error toast</button>
    </>
  );
};

export default LivePage;

Demo

video

note : if the duration of the toast is not defined, the bar is on the left like the image above.