Add gating to routes

[kirillku]

1. With filter

const HomeRoute = createRoute({
  path: "/",
  // does not trigger any route events if `filter` is falsy
  filter: $isAuthenticated,
});

// Show some other page
const LoginRoute = createRoute({
  path: "/",
  filter: $isAuthenticated.map(isAuthenticated => !isAuthenticated),
});

const App = () => (
  <Switch>
    <LoginRoute><LoginPage /></LoginRoute>
    <HomeRoute><HomePage /></HomeRoute>
  </Switch>
);

// Or redirect to some other page
const NotAuthenticatedRoute = createRoute({
  path: "/",
  filter: $isAuthenticated.map(isAuthenticated => !isAuthenticated),
});

const LoginRoute = createRoute({
  path: "/login",
});

sample({
  source: NotAuthenticatedRoute.open,
  target: LoginRoute.navigate
});

2. Custom complex logic on top of filter (handling of auth, access control, and feature flags at the same time)

const createAccessRoute = ({ path, $hasFeatureFlag, $hasAccess }) => {
  const $isNotAuthenticated = $isAuthenticated.map((isAuthenticated) => !isAuthenticated);
  const NoAuthenticatedRoute = createRoute({
    path,
    filter: $isNotAuthenticated,
  });

  const $hasNoFeatureFlag = combine(
    $isAuthenticated,
    $hasFeatureFlag,
    (isAuthenticated, hasFeatureFlag) => isAuthenticated && !hasFeatureFlag
  );
  const NoFeatureFlagRoute = createRoute({
    path,
    filter: $hasNoFeatureFlag,
  });

  const $hasNoAccess = combine(
    $isAuthenticated,
    $hasFeatureFlag,
    $hasAccess,
    (isAuthenticated, hasFeatureFlag, hasAccess) => isAuthenticated && hasFeatureFlag && !hasAccess
  );
  const NoAccessRoute = createRoute({
    path,
    filter: $hasNoAccess,
  });

  $canEnterRoute = combine(
    $isAuthenticated,
    $hasFeatureFlag,
    $hasAccess,
    (isAuthenticated, hasFeatureFlag, hasAccess) => isAuthenticated && hasFeatureFlag && hasAccess
  );
  const FeatureRoute = createRoute({
    path,
    filter: $canEnterRoute,
  });

  return (props) => (
    <Switch>
      <NoAuthenticatedRoute>
        <LoginPage />
      </NoAuthenticatedRoute>
      <NoFeatureFlagRoute>
        <NotFoundPage />
      </NoFeatureFlagRoute>
      <NoAccessRoute>
        <NoAccessPage />
      </NoAccessRoute>
      <FeatureRoute {...props} />
    </Switch>
  );
};

const SettingsRoute = createAccessRoute({
  path: "/settings",
  $hasFeatureFlag: hasFeatureFlag("SETTINGS"),
  $hasAccess: hasAccess("SETTINGS"),
});

[kirillku]

Possible approach to the same problem in atomic-router: atomic-router/atomic-router#10