How to use @commercetools-frontend/application-shell-connectors - 10 common examples

const useIsAuthorized = ({
  demandedPermissions,
  demandedActionRights,
  demandedDataFences,
  selectDataFenceData,
  shouldMatchSomePermissions = false,
}: {
  demandedPermissions: TPermissionName[];
  demandedActionRights?: TDemandedActionRight[];
  demandedDataFences?: TDemandedDataFence[];
  selectDataFenceData?: TSelectDataFenceData;
  shouldMatchSomePermissions?: boolean;
}) => {
  const actualPermissions = useApplicationContext(
    applicationContext => applicationContext.permissions
  );
  const actualActionRights = useApplicationContext(
    applicationContext => applicationContext.actionRights
  );
  const actualDataFences = useApplicationContext(
    applicationContext => applicationContext.dataFences
  );

  // if the user has no permissions and no dataFences assigned to them, they are not authorized
  if (!actualPermissions && !actualDataFences) return false;

  let hasDemandeDataFences = false;
  if (demandedDataFences && demandedDataFences.length > 0) {
    if (!selectDataFenceData) {
      reportErrorToSentry(

const RouteCatchAll = () => {
  // NOTE: it's important that the return value is a `Route` component!
  const servedByProxy = useApplicationContext(
    context => context.environment.servedByProxy
  );
  // In case the application is served by a proxy server, we assume that
  // the reverse proxy router handles requests forwarding to the specified
  // service.
  // For example, if the current "loaded" app is products and I click
  // on a link to discounts, the products app does not know about the
  // discount routes, thus falling back to this "catch all route" component.
  // At this point we force a page reload, effectively handing the
  // route control logic to the reverse proxy in our cluster. There,
  // the router mapping will match the discounts route and it will forward
  // the request to the discounts app.
  // If no route matches, the application fallback will handle the request
  // instead, showing e.g. a 404 page.
  if (servedByProxy)
    return (

const StateMachinesList = props => {
  const cachedStateMachine = useSelector(selectStateMachinesFromCache);
  const cachedStateMachineObjectsCount = cachedStateMachine
    ? Object.keys(cachedStateMachine).length
    : null;

  const dataLocale = useApplicationContext(context => context.dataLocale);

  return (
    
      
        
        
          {({ isLoading, result, error, hasNoResults /* , refresh */ }) => {
            if (isLoading) return ;
            if (error) return <div>{getErrorMessage(error)}</div>;
            if (hasNoResults) {
              return (
                <div>
                  
                </div>
              );
            }

export const ServicePageProjectSwitcher = () => {
  const params = useParams();
  const numberOfProjects = useApplicationContext(
    context => context.user.projects.total
  );
  if (numberOfProjects === 0) return null;
  return (
    
      
    
  );

demandedPermissions,
  demandedActionRights,
  demandedDataFences,
  selectDataFenceData,
  shouldMatchSomePermissions = false,
}: {
  demandedPermissions: TPermissionName[];
  demandedActionRights?: TDemandedActionRight[];
  demandedDataFences?: TDemandedDataFence[];
  selectDataFenceData?: TSelectDataFenceData;
  shouldMatchSomePermissions?: boolean;
}) => {
  const actualPermissions = useApplicationContext(
    applicationContext => applicationContext.permissions
  );
  const actualActionRights = useApplicationContext(
    applicationContext => applicationContext.actionRights
  );
  const actualDataFences = useApplicationContext(
    applicationContext => applicationContext.dataFences
  );

  // if the user has no permissions and no dataFences assigned to them, they are not authorized
  if (!actualPermissions && !actualDataFences) return false;

  let hasDemandeDataFences = false;
  if (demandedDataFences && demandedDataFences.length > 0) {
    if (!selectDataFenceData) {
      reportErrorToSentry(
        new Error(
          `@commercetools-frontend/permissions/Authorized: Missing data fences selector "selectDataFenceData".`
        )

// Trigger loading the menu from local file, for local development
  React.useEffect(() => {
    if (shallowlyMergedConfig.skipRemoteQuery) {
      const devConfig = getDevConfig(shallowlyMergedConfig.options);
      if (devConfig.menuLoader && !menu) {
        devConfig.menuLoader().then(setMenu);
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []); // Make sure to run this effect only once, otherwise we might end up in an infinite loop!

  // Prepare to fetch config.
  // We set up the apollo query as lazy, in order to execute it conditionally
  // since hooks cannot be defined conditionally.
  const mcProxyApiUrl = useApplicationContext(
    context => context.environment.mcProxyApiUrl
  );
  const [
    loadMenuData,
    { called: hasApplicationsMenuQueryBeenCalled, data: menuQueryResult },
  ] = useLazyQuery(FetchApplicationsMenu, {
    ...shallowlyMergedConfig.queryOptions,
    fetchPolicy:
      shallowlyMergedConfig.queryOptions.fetchPolicy || 'cache-first',
    context: {
      // Allow to overwrite the API url from `env.json`
      uri: `${mcProxyApiUrl || defaultApiUrl}/api/graphql`,
    },
  });

  // Return the local config

})
      .catch(() => {
        // Error is ignored under the assumption that page is being
        // reloaded whilst the request was being sent or network request was interrupted
      });
  }
  render() {
    return null;
  }
}
const mapDispatchToProps = {
  pushDependencyVersionCounter: actions.pushDependencyVersionCounter,
};
export default flowRight(
  connect(null, mapDispatchToProps),
  withApplicationContext(({ environment }) => ({
    applicationName: environment.applicationName,
  }))
)(VersionTracker);

const StateMachinesDetails = props => {
  const dataLocale = useApplicationContext(context => context.dataLocale);
  const dispatch = useDispatch();
  const fetcher = React.useCallback(
    (...args) => dispatch(fetchStateMachine(...args)),
    [dispatch]
  );
  const showApiErrorNotification = useShowApiErrorNotification();

  return (
    
      {({ isLoading, data, error }) => {
        if (isLoading) {

const TestComponent = () => {
      const applicationName = useApplicationContext(
        context => context.environment.applicationName
      );
      return <p>{`Application name: ${applicationName}`}</p>;
    };
    const rendered = renderApp();

export const NavBar = props => {
  const ref = React.useRef();
  const areProjectExtensionsEnabled = useFeatureToggle(PROJECT_EXTENSIONS);
  const disabledMenuItems = useApplicationContext(
    context => context.environment.disabledMenuItems
  );
  const menuVisibilities = useApplicationContext(
    context => context.menuVisibilities
  );
  const applicationsMenu = useApplicationsMenu({
    queryOptions: {
      onError: reportErrorToSentry,
    },
    skipRemoteQuery: !props.environment.servedByProxy,
    options: {
      __DEV_CONFIG__: {
        menuLoader: props.DEV_ONLY__loadNavbarMenuConfig,
        menuKey: 'navBar',
      },
    },
  });
  const { data: projectExtensionsQuery } = useQuery(
    FetchProjectExtensionsNavbar,