prevent authenticated user to access the Intro route

This commit is contained in:
unclekingpin 2023-07-20 14:12:30 -07:00
parent ba25c4791d
commit 3b1ccd378e
3 changed files with 55 additions and 28 deletions

View file

@ -6,13 +6,16 @@ const { useTranslation } = require('react-i18next');
const { Router } = require('stremio-router');
const { Core, Shell, Chromecast, DragAndDrop, KeyboardShortcuts, ServicesProvider } = require('stremio/services');
const { NotFound } = require('stremio/routes');
const { ToastProvider, CONSTANTS } = require('stremio/common');
const { ToastProvider, CONSTANTS, withCoreSuspender } = require('stremio/common');
const ServicesToaster = require('./ServicesToaster');
const DeepLinkHandler = require('./DeepLinkHandler');
const ErrorDialog = require('./ErrorDialog');
const withProtectedRoutes = require('./withProtectedRoutes');
const routerViewsConfig = require('./routerViewsConfig');
const styles = require('./styles');
const RouterWithProtectedRoutes = withCoreSuspender(withProtectedRoutes(Router));
const App = () => {
const { i18n } = useTranslation();
const onPathNotMatch = React.useCallback(() => {
@ -152,7 +155,7 @@ const App = () => {
<ToastProvider className={styles['toasts-container']}>
<ServicesToaster />
<DeepLinkHandler />
<Router
<RouterWithProtectedRoutes
className={styles['router']}
viewsConfig={routerViewsConfig}
onPathNotMatch={onPathNotMatch}

View file

@ -0,0 +1,20 @@
const React = require('react');
const { Intro } = require('stremio/routes');
const { useProfile } = require('stremio/common');
const withProtectedRoutes = (Component) => {
return function withProtectedRoutes(props) {
const profile = useProfile();
const onRouteChange = React.useCallback((routeConfig) => {
if (profile.auth !== null && routeConfig.component === Intro) {
window.location.replace('#/');
return true;
}
}, [profile]);
return (
<Component {...props} onRouteChange={onRouteChange} />
);
}
};
module.exports = withProtectedRoutes;

View file

@ -11,7 +11,7 @@ const Route = require('../Route');
const routeConfigForPath = require('./routeConfigForPath');
const urlParamsForPath = require('./urlParamsForPath');
const Router = ({ className, onPathNotMatch, ...props }) => {
const Router = ({ className, onPathNotMatch, onRouteChange, ...props }) => {
const viewsConfig = React.useMemo(() => props.viewsConfig, []);
const [views, setViews] = React.useState(() => {
return Array(viewsConfig.length).fill(null);
@ -42,37 +42,40 @@ const Router = ({ className, onPathNotMatch, ...props }) => {
const urlParams = urlParamsForPath(routeConfig, typeof pathname === 'string' ? pathname : '');
const routeViewIndex = viewsConfig.findIndex((vc) => vc.includes(routeConfig));
const routeIndex = viewsConfig[routeViewIndex].findIndex((rc) => rc === routeConfig);
setViews((views) => {
return views
.slice(0, viewsConfig.length)
.map((view, index) => {
if (index < routeViewIndex) {
return view;
} else if (index === routeViewIndex) {
return {
key: `${routeViewIndex}${routeIndex}`,
component: routeConfig.component,
urlParams: view !== null && isEqual(view.urlParams, urlParams) ?
view.urlParams
:
urlParams,
queryParams: view !== null && isEqual(Array.from(view.queryParams.entries()), Array.from(queryParams.entries())) ?
view.queryParams
:
queryParams
};
} else {
return null;
}
});
});
const handled = typeof onRouteChange === 'function' && onRouteChange(routeConfig, urlParams, queryParams);
if (!handled) {
setViews((views) => {
return views
.slice(0, viewsConfig.length)
.map((view, index) => {
if (index < routeViewIndex) {
return view;
} else if (index === routeViewIndex) {
return {
key: `${routeViewIndex}${routeIndex}`,
component: routeConfig.component,
urlParams: view !== null && isEqual(view.urlParams, urlParams) ?
view.urlParams
:
urlParams,
queryParams: view !== null && isEqual(Array.from(view.queryParams.entries()), Array.from(queryParams.entries())) ?
view.queryParams
:
queryParams
};
} else {
return null;
}
});
});
}
};
window.addEventListener('hashchange', onLocationHashChange);
onLocationHashChange();
return () => {
window.removeEventListener('hashchange', onLocationHashChange);
};
}, [onPathNotMatch]);
}, [onPathNotMatch, onRouteChange]);
return (
<div className={classnames(className, 'routes-container')}>
{
@ -93,6 +96,7 @@ const Router = ({ className, onPathNotMatch, ...props }) => {
Router.propTypes = {
className: PropTypes.string,
onPathNotMatch: PropTypes.func,
onRouteChange: PropTypes.func,
viewsConfig: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.exact({
regexp: PropTypes.instanceOf(RegExp).isRequired,
urlParamsNames: PropTypes.arrayOf(PropTypes.string).isRequired,