Added not found state for mdx page view

packages/website/ts/pages/docs/page.tsx

@@ -23,60 +23,83 @@ import { DocsPageLayout } from 'ts/components/docs/layout/docs_page_layout';
 import { Separator } from 'ts/components/docs/separator';
 import { IContents, TableOfContents } from 'ts/components/docs/sidebar/table_of_contents';
 
+import { FullscreenMessage } from 'ts/pages/fullscreen_message';
+
 import { Paragraph } from 'ts/components/text';
 
-interface IDocsViewProps {
+import { colors } from 'ts/style/colors';
+
+interface IDocsPageProps {
     match: match<any>;
 }
 
-interface IDocsViewState {
+interface IDocsPageState {
     Component: React.ReactNode;
     contents: IContents[];
     title: string;
+    subtitle: string;
+    wasNotFound: boolean;
 }
 
-export const DocsView: React.FC<IDocsViewProps> = ({ match }) => {
-    const [state, setState] = useState<IDocsViewState>({
+export const DocsPage: React.FC<IDocsPageProps> = ({ match }) => {
+    const [state, setState] = useState<IDocsPageState>({
         Component: null,
         contents: [],
         title: '',
+        subtitle: '',
+        wasNotFound: false,
     });
 
-    const { Component, contents, title } = state;
+    const { Component, contents, title, subtitle, wasNotFound } = state;
+    const isLoading = !Component && !wasNotFound;
     const { page, type } = match.params;
 
-    useEffect(() => {
-        void loadPageAsync(page, type);
-    }, [page, type]);
+    useEffect(
+        () => {
+            void loadPageAsync(page, type);
+        },
+        [page, type],
+    );
 
     const loadPageAsync = async (fileName: string, dirName: string) => {
-        const component = await import(`../../../mdx/${dirName}/${fileName}.mdx`);
+        try {
+            const component = await import(`../../../mdx/${dirName}/${fileName}.mdx`);
 
-        if (component) {
             setState({
+                ...state,
                 Component: component.default,
                 contents: component.tableOfContents(),
                 title: component.meta.title,
             });
+        } catch (error) {
+            setState({ ...state, title: '404', wasNotFound: true });
         }
     };
 
     return (
-        <DocsPageLayout title={title} loading={!Component}>
-            <Columns>
-                <TableOfContents contents={contents} />
-                <Separator />
-                <ContentWrapper>
-                    <MDXProvider components={mdxComponents}>
-                        {/*
+        <DocsPageLayout title={title} subtitle={subtitle} loading={isLoading}>
+            {wasNotFound ? (
+                <FullscreenMessage
+                    headerText={'Not found'}
+                    headerTextColor={colors.brandDark}
+                    bodyText={"Hm... looks like we couldn't find what you are looking for."}
+                />
+            ) : (
+                <Columns>
+                    <TableOfContents contents={contents} />
+                    <Separator />
+                    <ContentWrapper>
+                        <MDXProvider components={mdxComponents}>
+                            {/*
                                 // @ts-ignore */}
-                        <Component />
-                    </MDXProvider>
-                    <NewsletterWidget />
-                    <HelpCallout />
-                    <HelpfulCta page={page} />
-                </ContentWrapper>
-            </Columns>
+                            <Component />
+                        </MDXProvider>
+                        <NewsletterWidget />
+                        <HelpCallout />
+                        <HelpfulCta page={page} />
+                    </ContentWrapper>
+                </Columns>
+            )}
         </DocsPageLayout>
     );
 };

packages/website/ts/pages/fullscreen_message.tsx

@@ -3,23 +3,28 @@ import styled from 'styled-components';
 import { colors } from 'ts/style/colors';
 
 export interface FullscreenMessageProps {
-    headerText: string;
     bodyText: string;
+    headerText: string;
+    headerTextColor?: string;
 }
 
-export const FullscreenMessage = (props: FullscreenMessageProps) => {
+export const FullscreenMessage: React.FC<FullscreenMessageProps> = props => {
     return (
         <div className="mx-auto max-width-4 py4">
             <div className="center py4">
-                <Heading>{props.headerText}</Heading>
+                <Heading color={props.headerTextColor}>{props.headerText}</Heading>
                 <Paragraph>{props.bodyText}</Paragraph>
             </div>
         </div>
     );
 };
 
+FullscreenMessage.defaultProps = {
+    headerTextColor: colors.brandLight,
+};
+
 const Heading = styled.h1`
-    color: ${colors.brandLight};
+    color: ${({ color }) => color};
     font-size: 78px;
     font-weight: 300;
     margin-bottom: 35px;

packages/website/ts/pages/not_found.tsx

@@ -14,17 +14,13 @@ export interface NotFoundProps {
     dispatcher: Dispatcher;
 }
 
-export class NotFound extends React.Component<NotFoundProps> {
-    public render(): React.ReactNode {
-        return (
-            <SiteWrap isFullScreen={true}>
-                <DocumentTitle {...documentConstants.LANDING} />
+export const NotFound: React.FC<NotFoundProps> = () => (
+    <SiteWrap isFullScreen={true}>
+        <DocumentTitle {...documentConstants.LANDING} />
 
-                <FullscreenMessage
-                    headerText={'404'}
-                    bodyText={"Hm... looks like we couldn't find what you are looking for."}
-                />
-            </SiteWrap>
-        );
-    }
-}
+        <FullscreenMessage
+            headerText={'404'}
+            bodyText={"Hm... looks like we couldn't find what you are looking for."}
+        />
+    </SiteWrap>
+);