useNavigation.js

import React, { useCallback } from "react";
import { useDispatch, useSelector } from "react-redux";
import { SELECTOR_VIEW, viewsActions } from "../store/main";
import bridge from '@vkontakte/vk-bridge'; // VK Brige
import { ActionSheet, ScreenSpinner, Snackbar, ActionSheetDefaultIosCloseItem } from "@vkontakte/vkui";
import {
  Icon28CheckCircleFill,
  Icon28CancelCircleFillRed,
} from '@vkontakte/icons';
const queryString = require('query-string');

export const useNavigation = () => {
    const d = useDispatch();
    const { snackbar, popout, activeModal, modalHistory } = useSelector(SELECTOR_VIEW);
    const setPopout = useCallback((popout) => d(viewsActions.setPopout(popout)), [d]);
    const setSnackbar = useCallback((payload) => d(viewsActions.setSnackbar(payload)), [d])
    const hash = queryString.parse(window.location.hash);

    const setHash = (hash) => {
      bridge.send("VKWebAppSetLocation", { "location": hash });
      window.location.hash = "#"+hash;
    }

    const goBack = () => window.history.back();

    const sendMetrika = (event_name, json) => {
      // Логика метрики
      console.log(event_name, json)
    }

    const setBigLoader = useCallback((state=true) => {
      if(state) return setPopout(<ScreenSpinner />);
      setPopout(null);
    }, [setPopout])
    
    const getSimpleSnack = useCallback((text, icon) => {
      setSnackbar(
        <Snackbar
        onClose={() => setSnackbar(null)}
        before={icon}>
          {text}
        </Snackbar>
      )
    }, [setSnackbar])
    const setSuccessfulSnack = useCallback((text) => {
      getSimpleSnack(text, <Icon28CheckCircleFill />);
    }, [getSimpleSnack])

    const setAbortSnack = useCallback((text) => {
      getSimpleSnack(text, <Icon28CancelCircleFillRed />);
    }, [getSimpleSnack])

    const callActionSheet = (toggleRef, items) => {
      setPopout(
        <ActionSheet
        onClose={() => setPopout(null)}
        iosCloseItem={<ActionSheetDefaultIosCloseItem />}
        toggleRef={toggleRef}
        >
          {items}
        </ActionSheet>
      )
    }

    const setActiveModal = useCallback((new_modal) => {
      new_modal = new_modal || null;
      let modalHistoryF = modalHistory ? [...modalHistory] : [];
  
      if (new_modal === null) {
          modalHistoryF = [];
      } else if (modalHistoryF.indexOf(new_modal) !== -1) {
          modalHistoryF = modalHistoryF.splice(0, modalHistoryF.indexOf(new_modal) + 1);
      } else {
          modalHistoryF.push(new_modal);
      }
      d(viewsActions.setModal(new_modal));
      d(viewsActions.setModalHistory(modalHistoryF));
    }, [d, modalHistory])


    return {
      sendMetrika,
      setBigLoader,
      setAbortSnack,
      setSuccessfulSnack,
      getSimpleSnack,
      setHash,
      setSnackbar,
      setPopout,
      callActionSheet,
      setActiveModal,
      goBack,
      snackbar,
      hash,
      popout,
      activeModal,
    }
}