refactor: Wrap suspending pages w/ error boundaries, extract (#1264)

generic pages from the guide/doc pages

Author: rschristian

src/components/controllers/blog-page.jsx

@@ -1,4 +1,4 @@
-import { useRoute } from 'preact-iso';
+import { useRoute, ErrorBoundary } from 'preact-iso';
 import { useContent } from '../../lib/use-content';
 import { NotFound } from './not-found';
 import { MarkdownRegion } from './markdown-region';
@@ -7,14 +7,14 @@ import { blogRoutes } from '../../lib/route-utils';
 import style from './style.module.css';
 
 export default function BlogPage() {
-	const { params } = useRoute();
-	const { slug } = params;
+	const { slug } = useRoute().params;
+	const isValidRoute = blogRoutes[`/blog/${slug}`];
 
-	if (!blogRoutes[`/blog/${slug}`]) {
-		return <NotFound />;
-	}
-
-	return <BlogLayout />;
+	return (
+		<ErrorBoundary>
+			{isValidRoute ? <BlogLayout /> : <NotFound />}
+		</ErrorBoundary>
+	);
 }
 
 function BlogLayout() {

src/components/controllers/doc-page.jsx renamed to src/components/controllers/guide-page.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'preact/hooks';
-import { useRoute } from 'preact-iso';
+import { useRoute, ErrorBoundary } from 'preact-iso';
 import { useContent } from '../../lib/use-content';
 import { useLanguage } from '../../lib/i18n.jsx';
 import config from '../../config.json';
@@ -12,37 +12,35 @@ import { docRoutes } from '../../lib/route-utils';
 import { LATEST_MAJOR } from '../doc-version';
 import style from './style.module.css';
 
-export function DocPage() {
-	const { params } = useRoute();
-	const { version, name } = params;
+export function GuidePage() {
+	const { version, name } = useRoute().params;
+	const isValidRoute = docRoutes[version]['/' + name];
 
-	if (!docRoutes[version]['/' + name]) {
-		return <NotFound />;
-	}
-
-	return <DocLayout isGuide />;
+	return (
+		<ErrorBoundary>
+			{isValidRoute ? <GuideLayout /> : <NotFound />}
+		</ErrorBoundary>
+	);
 }
 
-export function DocLayout({ isGuide = false }) {
+function GuideLayout() {
 	const [isMounted, setMounted] = useState(false);
 	const { path } = useRoute();
-	const { html, meta } = useContent(path === '/' ? 'index' : path);
+	const { html, meta } = useContent(path);
 
 	useEffect(() => {
 		setMounted(true);
 	}, []);
 
 	return (
-		<div class={cx(style.page, isGuide && style.withSidebar)}>
+		<div class={cx(style.page, style.withSidebar)}>
 			<div class={style.outer}>
-				{isGuide && (
-					<div class={style.sidebarWrap}>
-						<Sidebar />
-					</div>
-				)}
+				<div class={style.sidebarWrap}>
+					<Sidebar />
+				</div>
 				<div class={style.inner}>
-					{isGuide && <OldDocsWarning />}
-					{isGuide && isMounted && <UnmaintainedTranslationWarning meta={meta} />}
+					{<OldDocsWarning />}
+					{isMounted && <UnmaintainedTranslationWarning meta={meta} />}
 					<MarkdownRegion html={html} meta={meta} />
 					<Footer />
 				</div>
@@ -85,6 +83,11 @@ function OldDocsWarning() {
 
 // Maybe include zh? It's received some contributions recently
 const MAINTAINED_LANGUAGES = ['en', 'ru'];
+
+/**
+ * @param {object} props
+ * @param {import('../../types.d.ts').ContentMetaData} props.meta
+ */
 function UnmaintainedTranslationWarning({ meta }) {
 	const { path, params } = useRoute();
 	const { name, version } = params;

src/components/controllers/page.jsx

@@ -1,14 +1,35 @@
-import { useRoute } from 'preact-iso';
+import { useRoute, ErrorBoundary } from 'preact-iso';
 import { navRoutes } from '../../lib/route-utils';
+import { useContent } from '../../lib/use-content';
 import { NotFound } from './not-found';
-import { DocLayout } from './doc-page';
+import { MarkdownRegion } from './markdown-region';
+import Footer from '../footer/index';
+import style from './style.module.css';
 
+// Supports generic pages like `/`, `/about/*`, `/blog`, etc.
 export function Page() {
 	const { path } = useRoute();
+	const isValidRoute = navRoutes[path];
 
-	if (!navRoutes[path]) {
-		return <NotFound />;
-	}
+	return (
+		<ErrorBoundary>
+			{isValidRoute ? <PageLayout /> : <NotFound />}
+		</ErrorBoundary>
+	);
+}
+
+export function PageLayout() {
+	const { path } = useRoute();
+	const { html, meta } = useContent(path === '/' ? 'index' : path);
 
-	return <DocLayout />;
+	return (
+		<div class={style.page}>
+			<div class={style.outer}>
+				<div class={style.inner}>
+					<MarkdownRegion html={html} meta={meta} />
+					<Footer />
+				</div>
+			</div>
+		</div>
+	);
 }

src/components/controllers/repl-page.jsx

@@ -1,4 +1,4 @@
-import { useLocation, useRoute } from 'preact-iso';
+import { useLocation, useRoute, ErrorBoundary } from 'preact-iso';
 import { Repl } from './repl';
 import { base64ToText } from './repl/query-encode.js';
 import { fetchExample } from './repl/examples';
@@ -22,7 +22,9 @@ export default function ReplPage() {
 					overflow: hidden !important;
 				}
 			`}</style>
-			<Repl code={code} />
+			<ErrorBoundary>
+				<Repl code={code} />
+			</ErrorBoundary>
 		</div>
 	);
 }

src/components/controllers/tutorial-page.jsx

@@ -1,4 +1,4 @@
-import { useRoute } from 'preact-iso';
+import { useRoute, ErrorBoundary } from 'preact-iso';
 import { useEffect } from 'preact/hooks';
 import { Tutorial } from './tutorial';
 import { SolutionProvider } from './tutorial/contexts';
@@ -9,14 +9,14 @@ import { tutorialRoutes } from '../../lib/route-utils';
 import style from './tutorial/style.module.css';
 
 export default function TutorialPage() {
-	const { params } = useRoute();
-	const { step } = params;
+	const { step } = useRoute().params;
+	const isValidRoute = tutorialRoutes[`/tutorial${step ? `/${step}` : ''}`];
 
-	if (!tutorialRoutes[`/tutorial${step ? `/${step}` : ''}`]) {
-		return <NotFound />;
-	}
-
-	return <TutorialLayout />;
+	return (
+		<ErrorBoundary>
+			{isValidRoute ? <TutorialLayout /> : <NotFound />}
+		</ErrorBoundary>
+	);
 }
 
 function TutorialLayout() {

src/components/routes.jsx

@@ -1,16 +1,28 @@
 import { useState } from 'preact/hooks';
 import { Router, Route, lazy } from 'preact-iso';
 import { Page } from './controllers/page';
-import { DocPage } from './controllers/doc-page';
+import { GuidePage } from './controllers/guide-page';
 import { NotFound } from './controllers/not-found';
 import { navRoutes } from '../lib/route-utils';
 
 export const ReplPage = lazy(() => import('./controllers/repl-page'));
 export const BlogPage = lazy(() => import('./controllers/blog-page'));
 export const TutorialPage = lazy(() => import('./controllers/tutorial-page'));
 
-// @ts-ignore
-const routeChange = url => typeof ga === 'function' && ga('send', 'pageview', url);
+const routeChange = url =>
+	// @ts-ignore
+	typeof ga === 'function' && ga('send', 'pageview', url);
+
+const genericRoutes = Object.keys(navRoutes)
+	.filter(
+		route =>
+			!route.startsWith('/guide') &&
+			!route.startsWith('/tutorial') &&
+			!route.startsWith('/repl')
+	)
+	.map(route => (
+		<Route key={route} path={route} component={Page} />
+	));
 
 export default function Routes() {
 	const [loading, setLoading] = useState(false);
@@ -22,16 +34,11 @@ export default function Routes() {
 				onLoadEnd={() => setLoading(false)}
 				onRouteChange={routeChange}
 			>
-				{Object.keys(navRoutes)
-					.filter(route => !route.startsWith('/guide'))
-					.filter(route => !route.startsWith('/tutorial'))
-					.map(route => {
-						const component = route === '/repl' ? ReplPage : Page;
-						return <Route key={route} path={route} component={component} />;
-					})}
+				{genericRoutes}
 				<Route path="/tutorial/:step?" component={TutorialPage} />
-				<Route path="/guide/:version/:name" component={DocPage} />
+				<Route path="/guide/:version/:name" component={GuidePage} />
 				<Route path="/blog/:slug" component={BlogPage} />
+				<Route path="/repl" component={ReplPage} />
 				<Route default component={NotFound} />
 			</Router>
 		</main>