How to use the notistack.useSnackbar function in notistack

export function Edit(): JSX.Element | null {
  const [language, setLanguage] = React.useState<
    Illuminsight.Pub['languages'][0]
  >('');
  const { enqueueSnackbar } = useSnackbar();
  const [cover, setCover] = React.useState();
  const [tags, setTags] = React.useState([]);
  const [pub, setPub] = React.useState(null);
  const [tag, setTag] = React.useState('');
  const history = useHistory();
  const classes = useStyles();
  const match = useRouteMatch();

  function onChange(prop: keyof Illuminsight.Pub, value: any): void {
    if (pub) setPub({ ...pub, [prop]: value });
  }

  function onResetBookmark(): void {
    onChange('bookmark', {
      element: 0,
      section: 0,

function Settings() {
  const { t } = useTranslation()
  const [{ productsSelected, lang, maxThreadsPerProduct, openLinkIn, displayNotifications }, dispatch] = useSettings()
  const [{ startPage }, defaultDispatch] = useContext(DefaultContext)
  const [theme, setTheme] = useTheme()
  const [products, setProducts] = useState([])
  const { enqueueSnackbar } = useSnackbar()

  useEffect(() => {
    ;(async () => {
      const localStorage = await getBrowserStorage('local')
      setProducts(localStorage.products)
      try {
        const response = await getAllProducts()
        const result = response.result.map(e => ({
          ...e,
          icon: `${e.name
            .toLowerCase()
            .split(' ')
            .join('-')}-64.png`
        }))
        if (JSON.stringify(localStorage.products) === JSON.stringify(result)) return
        setBrowserStorage('local', { products: result })

export function SearchCards() {
  const { t } = useTranslation()
  const { enqueueSnackbar } = useSnackbar()
  const [isEndOfList, setIsEndOfList] = useState(true)
  const [isError, setIsError] = useState(false)
  const [{ cards, isSearching }, dispatch] = useContext(DefaultContext)
  const [{ page, value }, { setPage }] = useSearchParams()
  const [{ productsSelected, lang }] = useSettings()
  const currentLang = useRef(lang)
  const productsVisible = useRef(productsSelected.filter(e => e.visible).length)
  const isSubscribed = useRef(false)

  useEffect(() => {
    const controller = new AbortController()
    if (!productsSelected.length) {
      dispatch({ type: REMOVE_CARDS })
      dispatch({ type: SET_SEARCHING_STATUS, isSearching: false })
      return
    }

export default function CopyPasteModulesContainer(
  props: ICopyPasteModulesContainerProps
) {
  const { enqueueSnackbar } = useSnackbar();
  const [pastedModulesList, setPastedModulesList] = React.useState("");
  const [clipboardErrorOccurred, setClipboardErrorOccurred] = React.useState(
    false
  );

  const handleClickCopyListModulesCommand = () => {
    let commandTextarea: any = document.getElementById("list-modules-command");
    commandTextarea.select();
    document.execCommand("copy");
    enqueueSnackbar("✔️ Copied!");
  };

  const navigatorClipboardSupported =
    !clipboardErrorOccurred && !!navigator.clipboard && !!navigator.clipboard.readText;

  const parsePastedList = (text: string) => {

export default function useSnackbar(
  message: string,
  config: AllowedConfig,
  show: boolean,
  dismissPrevious?: boolean,
) {
  const {enqueueSnackbar, closeSnackbar} = useNotistackSnackbar();
  const stringConfig = JSON.stringify(config);
  const [snackbarKey, setSnackbarKey] = useState(null);
  useEffect(() => {
    if (show) {
      const config: AllowedConfig = JSON.parse(stringConfig);
      const k = enqueueSnackbar(message, {
        children: key => (
          
        ),
        ...config,
      });
      if (dismissPrevious) {

function CloseButton(snackKey) {
  const intl = useIntl();
  const snackbar = useSnackbar();
  const closeAriaLabel = intl.formatMessage(messages.close);

  return (
     snackbar.closeSnackbar(snackKey)}
      className="App-snackbar-icon"
      color="inherit"
      aria-label={closeAriaLabel}
    >
      
    
  );
}

export function useEnqueueSnackbar() {
  const {enqueueSnackbar} = useNotistackSnackbar();
  return useCallback(
    (message: string, config: Object) =>
      enqueueSnackbar(message, {
        children: key => (
          
        ),
        ...config,
      }),
    [enqueueSnackbar],
  );
}

export default function CreateJREContainer(props: ICreateJREContainerProps) {
  const { enqueueSnackbar } = useSnackbar();

  let includedModulesString: string = props.includedJDKModules.join(",");
  let optionAdditionalModules: string = props.manuallySpecifiedModules.trim();

  let moduleString: string = "";

  if (includedModulesString !== "" || optionAdditionalModules !== "") {
    moduleString = " --add-modules ";
    if (includedModulesString !== "") {
      moduleString += includedModulesString;
    }
    if (includedModulesString !== "" && optionAdditionalModules !== "") {
      moduleString += ",";
    }
    if (optionAdditionalModules !== "") {
      moduleString += optionAdditionalModules;

export function ImageButton(props) {
  const intl = useIntl();
  const snackbar = useSnackbar();
  const styles = useStyles();

  const handleMouseDown = evt => evt.preventDefault();

  const handleClick = evt => {
    evt.preventDefault();

    document.forms[IMAGE_FORM_NAME].elements[IMAGE_INPUT_NAME].click();
  };

  const handleFileChange = async (evt, files) => {
    const { editorState, isError } = await uploadFiles(props.onMediaUpload, props.getEditorState(), evt.target.files);

    document.forms[IMAGE_FORM_NAME].elements[IMAGE_INPUT_NAME].value = null;

    if (isError) {

export default function HiddenSnackbarShim({ message, variant }) {
  const intl = useIntl();
  const snackbar = useSnackbar();

  useEffect(() => {
    snackbar.enqueueSnackbar(intl.formatMessage(message), { variant });
  });

  return null;
}