Use a single route component

app/importer/client/components/ImportHistoryPage.js

@@ -8,7 +8,7 @@ import { useRoute } from '../../../../client/contexts/RouterContext';
 import { useEndpoint } from '../../../../client/contexts/ServerContext';
 import { ProgressStep } from '../../lib/ImporterProgressStep';
 import ImportOperationSummary from './ImportOperationSummary';
-import { useSafely } from './useSafely';
+import { useSafely } from '../../../../client/hooks/useSafely';
 
 function ImportHistoryPage() {
 	const t = useTranslation();

app/importer/client/components/ImportProgressPage.js

@@ -6,7 +6,7 @@ import { useTranslation } from '../../../../client/contexts/TranslationContext';
 import { ProgressStep, ImportingStartedStates } from '../../lib/ImporterProgressStep';
 import { useToastMessageDispatch } from '../../../../client/contexts/ToastMessagesContext';
 import { ImporterWebsocketReceiver } from '../ImporterWebsocketReceiver';
-import { useSafely } from './useSafely';
+import { useSafely } from '../../../../client/hooks/useSafely';
 import { useEndpoint } from '../../../../client/contexts/ServerContext';
 import { useRoute } from '../../../../client/contexts/RouterContext';
 import { Page } from '../../../../client/components/basic/Page';

app/importer/client/components/ImportRoute.js

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import { usePermission } from '../../../../client/contexts/AuthorizationContext';
+import NotAuthorizedPage from '../../../ui-admin/client/components/NotAuthorizedPage';
+import ImportHistoryPage from './ImportHistoryPage';
+import NewImportPage from './NewImportPage';
+import PrepareImportPage from './PrepareImportPage';
+import ImportProgressPage from './ImportProgressPage';
+
+function ImportHistoryRoute({ page }) {
+	const canRunImport = usePermission('run-import');
+
+	if (!canRunImport) {
+		return <NotAuthorizedPage />;
+	}
+
+	if (page === 'history') {
+		return <ImportHistoryPage />;
+	}
+
+	if (page === 'new') {
+		return <NewImportPage />;
+	}
+
+	if (page === 'prepare') {
+		return <PrepareImportPage />;
+	}
+
+	if (page === 'progress') {
+		return <ImportProgressPage />;
+	}
+
+	return null;
+}
+
+export default ImportHistoryRoute;

app/importer/client/components/NewImportPage.js

@@ -24,7 +24,7 @@ import { useRoute, useRouteParameter } from '../../../../client/contexts/RouterC
 import { showImporterException } from '../functions/showImporterException';
 import { useEndpoint } from '../../../../client/contexts/ServerContext';
 import { Importers } from '../index';
-import { useSafely } from './useSafely';
+import { useSafely } from '../../../../client/hooks/useSafely';
 import { useFormatMemorySize } from '../../../ui/client/views/app/components/hooks';
 
 function NewImportPage() {

app/importer/client/components/PrepareImportPage.js

@@ -27,7 +27,7 @@ import {
 import { ImporterWebsocketReceiver } from '../ImporterWebsocketReceiver';
 import { showImporterException } from '../functions/showImporterException';
 import { useRoute } from '../../../../client/contexts/RouterContext';
-import { useSafely } from './useSafely';
+import { useSafely } from '../../../../client/hooks/useSafely';
 import { useEndpoint } from '../../../../client/contexts/ServerContext';
 
 const waitFor = (fn, predicate) => new Promise((resolve, reject) => {

app/importer/client/routes.js

@@ -2,20 +2,24 @@ import { registerAdminRoute } from '../../ui-admin/client';
 
 registerAdminRoute('/import', {
 	name: 'admin-import',
-	lazyRouteComponent: () => import('./components/ImportHistoryRoute'),
+	lazyRouteComponent: () => import('./components/ImportRoute'),
+	props: { page: 'history' },
 });
 
 registerAdminRoute('/import/new/:importerKey?', {
 	name: 'admin-import-new',
-	lazyRouteComponent: () => import('./components/NewImportRoute'),
+	lazyRouteComponent: () => import('./components/ImportRoute'),
+	props: { page: 'new' },
 });
 
 registerAdminRoute('/import/prepare', {
 	name: 'admin-import-prepare',
-	lazyRouteComponent: () => import('./components/PrepareImportRoute'),
+	lazyRouteComponent: () => import('./components/ImportRoute'),
+	props: { page: 'prepare' },
 });
 
 registerAdminRoute('/import/progress', {
 	name: 'admin-import-progress',
-	lazyRouteComponent: () => import('./components/ImportProgressRoute'),
+	lazyRouteComponent: () => import('./components/ImportRoute'),
+	props: { page: 'progress' },
 });

app/ui-admin/client/components/mailer/MailerRoute.js

@@ -5,7 +5,7 @@ import { usePermission } from '../../../../../client/contexts/AuthorizationConte
 import { useMethod } from '../../../../../client/contexts/ServerContext';
 import { useTranslation } from '../../../../../client/contexts/TranslationContext';
 import { Mailer } from './Mailer';
-import { NotAuthorizedPage } from '../settings/NotAuthorizedPage';
+import NotAuthorizedPage from '../NotAuthorizedPage';
 
 
 const useSendMail = () => {
@@ -33,5 +33,9 @@ export default function MailerRoute(props) {
 	const canAccessMailer = usePermission('access-mailer');
 	const sendMail = useSendMail();
 
-	return canAccessMailer ? <Mailer sendMail={sendMail} {...props} /> : <NotAuthorizedPage/>;
+	if (!canAccessMailer) {
+		return <NotAuthorizedPage/>;
+	}
+
+	return <Mailer sendMail={sendMail} {...props} />;
 }