New note creation (#1998)

* Add new note page

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

* Make new note button clickable

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

* Add CHANGELOG note

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

* Refactor error messages

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

* Use features note in mock

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

* Common Error page should always use i18n

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

src/components/common/async-loading-boundary.tsx

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import type { PropsWithChildren } from 'react'
+import type { PropsWithChildren, ReactNode } from 'react'
 import React, { Fragment } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { WaitSpinner } from './wait-spinner/wait-spinner'
@@ -14,6 +14,7 @@ export interface AsyncLoadingBoundaryProps {
   loading: boolean
   error?: Error | boolean
   componentName: string
+  errorComponent?: ReactNode
 }
 
 /**
@@ -23,16 +24,21 @@ export interface AsyncLoadingBoundaryProps {
  * @param loading Indicates that the component is currently loading. Setting this will show a spinner instead of the children.
  * @param error Indicates that an error occurred during the loading process. Setting this to any non-null value will show an error message instead of the children.
  * @param componentName The name of the component that is currently loading. It will be shown in the error message.
+ * @param errorComponent Optional component that will be used in case of an error instead of the default alert message.
  * @param children The child {@link ReactElement elements} that are only shown if the component isn't in loading or error state
  */
 export const AsyncLoadingBoundary: React.FC<PropsWithChildren<AsyncLoadingBoundaryProps>> = ({
   loading,
   error,
   componentName,
+  errorComponent,
   children
 }) => {
   useTranslation()
   if (error !== undefined && error !== false) {
+    if (errorComponent) {
+      return <Fragment>{errorComponent}</Fragment>
+    }
     return (
       <Alert variant={'danger'}>
         <Trans i18nKey={'common.errorWhileLoading'} values={{ name: componentName }} />

src/components/common/routing/not-found-error-screen.tsx

@@ -1,21 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-import type { PropsWithChildren } from 'react'
-import React from 'react'
-import { LandingLayout } from '../../landing-layout/landing-layout'
-
-export const NotFoundErrorScreen: React.FC<PropsWithChildren<unknown>> = () => {
-  return (
-    <LandingLayout>
-      <div className='text-light d-flex align-items-center justify-content-center my-5'>
-        <h1>
-          404 Not Found <small>oops.</small>
-        </h1>
-      </div>
-    </LandingLayout>
-  )
-}

src/components/editor-page/app-bar/new-note-button.tsx

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -8,13 +8,16 @@ import React from 'react'
 import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
 import { Trans, useTranslation } from 'react-i18next'
 import { Button } from 'react-bootstrap'
+import Link from 'next/link'
 
 export const NewNoteButton: React.FC = () => {
   useTranslation()
 
   return (
-    <Button className='mx-2' size='sm' variant='primary'>
-      <ForkAwesomeIcon icon='plus' /> <Trans i18nKey='editor.appBar.new' />
-    </Button>
+    <Link href={'/new'} passHref={true}>
+      <Button className='mx-2' size='sm' variant='primary'>
+        <ForkAwesomeIcon icon='plus' /> <Trans i18nKey='editor.appBar.new' />
+      </Button>
+    </Link>
   )
 }

src/components/error-pages/common-error-page.tsx

@@ -0,0 +1,43 @@
+/*
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import React from 'react'
+import type { PropsWithChildren } from 'react'
+import { LandingLayout } from '../landing-layout/landing-layout'
+import { useTranslation } from 'react-i18next'
+
+export interface CommonErrorPageProps {
+  titleI18nKey: string
+  descriptionI18nKey?: string
+}
+
+/**
+ * Renders a common customizable error page.
+ *
+ * @param titleI18nKey The translation key for the title of the error.
+ * @param descriptionI18nKey The translation key for the description of the error. Property is optional.
+ * @param children The optional child elements that will be displayed beneath the description.
+ */
+export const CommonErrorPage: React.FC<PropsWithChildren<CommonErrorPageProps>> = ({
+  titleI18nKey,
+  descriptionI18nKey,
+  children
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <LandingLayout>
+      <div className='text-light d-flex align-items-center justify-content-center my-5'>
+        <div>
+          <h1>{t(titleI18nKey)}</h1>
+          <br />
+          {descriptionI18nKey ? t(descriptionI18nKey) : null}
+          {children}
+        </div>
+      </div>
+    </LandingLayout>
+  )
+}