How to use the strapi-helper-plugin.useGlobalContext function in strapi-helper-plugin

function ListView() {
  const { formatMessage } = useGlobalContext();

  // Fake data for now
  const data = [
    {
      id: 0,
      name: 'gatsby',
      isEnabled: false,
      url: 'http://thisisanexample.com/1234867874',
      headers: {
        Authorisation: 'x-secret',
      },
      hooks: ['createEntry', 'editEntry', 'deleteEntry', 'createMedia'],
      links: [
        {
          icon: 'pencil',
          onClick: () => {

function EditViewButton(props) {
  const { emitEvent, formatMessage } = useGlobalContext();
  // Retrieve URL from props
  const { modifiedData, componentSlug, type } = get(
    props,
    ['viewProps', '0'],

    {
      componentSlug: '',
    }
  );

  const baseUrl = `/plugins/content-type-builder/${
    type === 'content-types' ? type : 'component-categories'
  }`;
  const category = get(modifiedData, 'category', '');

  const suffixUrl =

function Main({
  getData,
  getLayout,
  groups,
  groupsAndModelsMainPossibleMainFields,
  isLoading,
  layouts,
  location: { pathname, search },
  global: { currentEnvironment, plugins },
  models,
  resetProps,
}) {
  strapi.useInjectReducer({ key: 'main', reducer, pluginId });
  strapi.useInjectSaga({ key: 'main', saga, pluginId });
  const { emitEvent } = useGlobalContext();
  const slug = pathname.split('/')[3];
  const source = getQueryParameters(search, 'source');
  const getDataRef = useRef();
  const getLayoutRef = useRef();
  const resetPropsRef = useRef();

  getDataRef.current = getData;
  getLayoutRef.current = getLayout;
  resetPropsRef.current = resetProps;

  const shouldShowLoader =
    slug !== 'ctm-configurations' && layouts[slug] === undefined;

  useEffect(() => {
    getDataRef.current();

function EditView() {
  const { formatMessage } = useGlobalContext();
  const [reducerState, dispatch] = useReducer(reducer, initialState);
  const location = useLocation();

  const { modifiedWebhook, initialWebhook } = reducerState.toJS();

  const { name } = modifiedWebhook;

  const id = location.pathname.split('/')[3];
  const isCreatingWebhook = id === 'create';

  useEffect(() => {
    if (!isCreatingWebhook) {
      fetchData();
    }
  }, [fetchData, isCreatingWebhook]);

function SettingsPage() {
  const { formatMessage } = useGlobalContext();

  const menuItems = [
    {
      title: { id: 'app.components.LeftMenuLinkContainer.general' },
      links: [
        {
          title: formatMessage({ id: `Settings.webhooks.title` }),
          to: '/settings/webhooks',
          name: 'webhooks',
        },
      ],
    },
  ];

  return (

function ListView() {
  const { formatMessage } = useGlobalContext();
  const [webhooksToDelete, setWebhooksToDelete] = useState([]);
  const [showModal, setShowModal] = useState(false);
  const [reducerState, dispatch] = useReducer(reducer, initialState);

  const { shouldRefetchData, webhooks } = reducerState.toJS();

  useEffect(() => {
    fetchData();
  }, []);

  useEffect(() => {
    if (shouldRefetchData) {
      fetchData();
    }
  }, [shouldRefetchData]);

function LeftMenu({ wait }) {
  const {
    components,
    componentsGroupedByCategory,
    contentTypes,
    isInDevelopmentMode,
    sortedContentTypesList,
  } = useDataManager();
  const { emitEvent, formatMessage } = useGlobalContext();
  const { push } = useHistory();

  const componentsData = sortBy(
    Object.keys(componentsGroupedByCategory).map(category => ({
      name: category,
      title: category,
      isEditable: isInDevelopmentMode,
      onClickEdit: (e, data) => {
        e.stopPropagation();

        const search = makeSearch({
          actionType: 'edit',
          modalType: 'editCategory',
          categoryName: data.name,
          headerDisplayName: data.name,
          headerDisplayCategory: formatMessage({

className,
  customRowComponent,
  items,
  addComponentToDZ,
  targetUid,
  mainTypeName,
  editTarget,
  isFromDynamicZone,
  isMain,
  firstLoopComponentName,
  firstLoopComponentUid,
  secondLoopComponentName,
  secondLoopComponentUid,
  isSub,
}) {
  const { formatMessage } = useGlobalContext();
  const { isInDevelopmentMode } = useDataManager();
  const { openModalAddField } = useListView();
  const onClickAddField = () => {
    let headerDisplayName = mainTypeName;

    if (firstLoopComponentName) {
      headerDisplayName = firstLoopComponentName;
    }

    if (secondLoopComponentUid) {
      headerDisplayName = secondLoopComponentName;
    }

    openModalAddField(
      editTarget,
      targetUid,

function Switch({ name, value, onChange }) {
  const { formatMessage } = useGlobalContext();

  return (
    
       {
          onChange({ target: { name, value: e.target.checked } });
        }}
      />
      <div>
        <div></div>
        <div></div>
      </div>
      <p>
        {value</p>