Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-08-17 16:45:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

support for not found component added to router

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-08-27 16:28:05 +03:00
parent 07ede8033b
commit 0a2a1e2685
1 changed files with 24 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
src/router/Router/Router.js
View file

@ -1,5 +1,6 @@
const React = require('react');
const PropTypes = require('prop-types');
const ReactIs = require('react-is');
const UrlUtils = require('url');
const { RoutesContainerProvider } = require('../RoutesContainerContext');
const queryParamsForQuery = require('./queryParamsForQuery');
@ -12,9 +13,7 @@ const Router = ({ onPathNotMatch, ...props }) => {
homePath: props.homePath,
viewsConfig: props.viewsConfig
}));
const [views, setViews] = React.useState(() => {
return Array(viewsConfig.length).fill(null);
});
const [views, setViews] = React.useState([]);
React.useEffect(() => {
if (typeof homePath === 'string') {
const { pathname, path } = UrlUtils.parse(window.location.hash.slice(1));
@ -33,7 +32,15 @@ const Router = ({ onPathNotMatch, ...props }) => {
const routeConfig = routeConfigForPath(viewsConfig, pathname);
if (!routeConfig) {
if (typeof onPathNotMatch === 'function') {
onPathNotMatch();
const component = onPathNotMatch();
if (ReactIs.isValidElementType(component)) {
setViews([{
key: '-1',
component,
urlParams: {},
queryParams: {}
}]);
}
}
return;
@ -41,17 +48,15 @@ const Router = ({ onPathNotMatch, ...props }) => {
const urlParams = urlParamsForPath(routeConfig, pathname);
const queryParams = queryParamsForQuery(typeof query === 'string' ? query : '');
const routeViewIndex = viewsConfig.findIndex((viewConfig) => viewConfig.includes(routeConfig));
const routeViewIndex = viewsConfig.findIndex((vc) => vc.includes(routeConfig));
const routeIndex = viewsConfig[routeViewIndex].findIndex((rc) => rc === routeConfig);
setViews((views) => {
return views.map((view, index) => {
if (index < routeViewIndex) {
return view;
} else if (index === routeViewIndex) {
return { routeConfig, urlParams, queryParams };
} else {
return null;
}
});
return views.slice(0, routeViewIndex).concat([{
key: `${routeViewIndex}${routeIndex}`,
component: routeConfig.component,
urlParams,
queryParams
}]);
});
};
window.addEventListener('hashchange', onLocationHashChanged);
@ -62,15 +67,11 @@ const Router = ({ onPathNotMatch, ...props }) => {
}, [onPathNotMatch]);
return (
<RoutesContainerProvider>
{
views
.filter((view) => view !== null)
.map(({ routeConfig, urlParams, queryParams }) => (
<Route key={routeConfig.component.name}>
{React.createElement(routeConfig.component, { urlParams, queryParams })}
</Route>
))
}
{views.map(({ key, component, urlParams, queryParams }) => (
<Route key={key}>
{React.createElement(component, { urlParams, queryParams })}
</Route>
))}
</RoutesContainerProvider>
);
};