How to use the @webiny/app-admin/hooks/useSnackbar.useSnackbar function in @webiny/app-admin

export function usePublishRevisionHandler({ page }) {
    const client = useApolloClient();
    const { showSnackbar } = useSnackbar();

    const publishRevision = async revision => {
        const { data: res } = await client.mutate({
            mutation: PUBLISH_REVISION,
            variables: { id: revision.id },
            refetchQueries: ["PbListPages"],
            update: (cache, { data }) => {
                // Don't do anything if there was an error during publishing!
                if (data.pageBuilder.publishRevision.error) {
                    return;
                }

                const getPageQuery = GET_PAGE();

                // Update revisions
                const pageFromCache = cache.readQuery({

function Name({ file }: *) {
    const [editing, setEdit] = useState(false);
    const name = file.name || "";

    const { showSnackbar } = useSnackbar();
    const client = useApolloClient();

    const { queryParams } = useFileManager();

    if (editing) {
        return (
            <form name=""> {
                    setEdit(false);
                    await client.mutate({
                        mutation: UPDATE_FILE,
                        variables: {
                            id: file.id,</form>

const { file, uploadFile, validateFiles } = props;
    const filePlugin = getFileTypePlugin(file);
    const actions = get(filePlugin, "fileDetails.actions") || [];

    const { hideFileDetails } = useFileManager();

    useHotkeys({
        zIndex: 55,
        disabled: !file,
        keys: {
            esc: hideFileDetails
        }
    });

    const [deleteFile] = useMutation(DELETE_FILE, { refetchQueries: ["ListFiles"] });
    const { showSnackbar } = useSnackbar();

    const fileDeleteConfirmationProps = {
        title: t`Delete file`,
        message: file && (
            <span>
                {t`You're about to delete file {name}. Are you sure you want to continue?`({
                    name: file.name
                })}
            </span>
        )
    };

    return (
        
            {file &amp;&amp; (
                <div dir="ltr"></div>

export function useRevisionHandlers({ rev }) {
    const { showSnackbar } = useSnackbar();
    const { history } = useReactRouter();
    const client = useApolloClient();
    const { page } = usePageDetails();
    const { publishRevision } = usePublishRevisionHandler({ page });

    const createRevision = useCallback(async () => {
        const { data: res } = await client.mutate({
            mutation: CREATE_REVISION_FORM,
            variables: { revision: rev.id },
            refetchQueries: ["PbListPages"],
            awaitRefetchQueries: true
        });
        const { data, error } = res.pageBuilder.revision;

        if (error) {
            return showSnackbar(error.message);

const {
        selected,
        toggleSelected,
        dragging,
        setDragging,
        uploading,
        setUploading,
        showFileDetails,
        showingFileDetails,
        queryParams,
        setQueryParams,
        hasPreviouslyUploadedFiles,
        setHasPreviouslyUploadedFiles
    } = useFileManager();

    const { showSnackbar } = useSnackbar();

    const searchOnChange = useCallback(debounce(search => setQueryParams({ search }), 500), []);

    const toggleTag = useCallback(async ({ tag, queryParams }) => {
        const finalTags = Array.isArray(queryParams.tags) ? [...queryParams.tags] : [];

        if (finalTags.includes(tag)) {
            finalTags.splice(finalTags.indexOf(tag), 1);
        } else {
            finalTags.push(tag);
        }

        setQueryParams({ ...queryParams, tags: finalTags });
    }, []);

    const refreshOnScroll = useCallback(

function Tags({ file }) {
    const client = useApolloClient();

    const [editing, setEdit] = useState(false);
    const [saving, setSaving] = useState(false);
    const initialTags = Array.isArray(file.tags) ? [...file.tags] : [];
    const [currentTags, setCurrentTags] = useState(initialTags);
    const { showSnackbar } = useSnackbar();

    const { queryParams } = useFileManager();

    if (editing) {
        return (
            <>
                 {
                            setSaving(true);
                            client
                                .mutate({
                                    mutation: UPDATE_FILE,
                                    variables: {