120 lines
3.2 KiB
TypeScript
120 lines
3.2 KiB
TypeScript
import React from 'react';
|
|
import { Redirect, Route, useHistory, RouteProps, RouteComponentProps, match as MatchType } from 'react-router-dom';
|
|
|
|
import { Layout } from 'soapbox/components/ui';
|
|
import { useOwnAccount, useSettings } from 'soapbox/hooks';
|
|
|
|
import BundleColumnError from '../components/bundle-column-error';
|
|
import ColumnForbidden from '../components/column-forbidden';
|
|
import ColumnLoading from '../components/column-loading';
|
|
import ColumnsArea from '../components/columns-area';
|
|
import BundleContainer from '../containers/bundle-container';
|
|
|
|
type PageProps = {
|
|
params?: MatchType['params'],
|
|
layout?: any,
|
|
children: React.ReactNode,
|
|
};
|
|
|
|
interface IWrappedRoute extends RouteProps {
|
|
component: (...args: any[]) => any,
|
|
page?: React.ComponentType<PageProps>,
|
|
content?: React.ReactNode,
|
|
componentParams?: Record<string, any>,
|
|
layout?: any,
|
|
publicRoute?: boolean,
|
|
staffOnly?: boolean,
|
|
adminOnly?: boolean,
|
|
developerOnly?: boolean,
|
|
}
|
|
|
|
const WrappedRoute: React.FC<IWrappedRoute> = ({
|
|
component,
|
|
page: Page,
|
|
content,
|
|
componentParams = {},
|
|
layout,
|
|
publicRoute = false,
|
|
staffOnly = false,
|
|
adminOnly = false,
|
|
developerOnly = false,
|
|
...rest
|
|
}) => {
|
|
const history = useHistory();
|
|
|
|
const account = useOwnAccount();
|
|
const settings = useSettings();
|
|
|
|
const renderComponent = ({ match }: RouteComponentProps) => {
|
|
if (Page) {
|
|
return (
|
|
<BundleContainer fetchComponent={component} loading={renderLoading} error={renderError}>
|
|
{Component =>
|
|
(
|
|
<Page params={match.params} layout={layout} {...componentParams}>
|
|
<Component params={match.params} {...componentParams}>
|
|
{content}
|
|
</Component>
|
|
</Page>
|
|
)
|
|
}
|
|
</BundleContainer>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<BundleContainer fetchComponent={component} loading={renderLoading} error={renderError}>
|
|
{Component =>
|
|
(
|
|
<ColumnsArea layout={layout}>
|
|
<Component params={match.params} {...componentParams}>
|
|
{content}
|
|
</Component>
|
|
</ColumnsArea>
|
|
)
|
|
}
|
|
</BundleContainer>
|
|
);
|
|
};
|
|
|
|
const renderWithLayout = (children: JSX.Element) => (
|
|
<>
|
|
<Layout.Main>
|
|
{children}
|
|
</Layout.Main>
|
|
|
|
<Layout.Aside />
|
|
</>
|
|
);
|
|
|
|
const renderLoading = () => renderWithLayout(<ColumnLoading />);
|
|
const renderForbidden = () => renderWithLayout(<ColumnForbidden />);
|
|
const renderError = (props: any) => renderWithLayout(<BundleColumnError {...props} />);
|
|
|
|
const loginRedirect = () => {
|
|
const actualUrl = encodeURIComponent(`${history.location.pathname}${history.location.search}`);
|
|
localStorage.setItem('soapbox:redirect_uri', actualUrl);
|
|
return <Redirect to='/login' />;
|
|
};
|
|
|
|
const authorized = [
|
|
account || publicRoute,
|
|
developerOnly ? settings.get('isDeveloper') : true,
|
|
staffOnly ? account && account.staff : true,
|
|
adminOnly ? account && account.admin : true,
|
|
].every(c => c);
|
|
|
|
if (!authorized) {
|
|
if (!account) {
|
|
return loginRedirect();
|
|
} else {
|
|
return renderForbidden();
|
|
}
|
|
}
|
|
|
|
return <Route {...rest} render={renderComponent} />;
|
|
};
|
|
|
|
export {
|
|
WrappedRoute,
|
|
};
|