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>

CHANGELOG.md

@@ -77,6 +77,7 @@ SPDX-License-Identifier: CC-BY-SA-4.0
 - Images that are currently uploading will be rendered as "uploading".
 - Code blocks with `plantuml` as language are rendered as [PlantUML](https://plantuml.com/) diagram using a configured render server.
 - File based motd that supports markdown without html.
+- New notes can be created with a pre-given content when accessing `/new?content=Example%20content`.
 
 ### Changed
 

locales/en.json

@@ -551,5 +551,15 @@
   },
   "motd": {
     "title": "Information"
+  },
+  "errors": {
+    "notFound": {
+      "title": "404 - page not found",
+      "description": "The requested page either does not exist or you don't have permission to access it."
+    },
+    "noteCreationFailed": {
+      "title": "Note could not be created",
+      "description": "The note could not be created. Maybe you don't have permission to create notes."
+    }
   }
 }

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>
+  )
+}

src/pages/404.tsx

@@ -1,17 +1,16 @@
 /*
- * 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
  */
-
-import React from 'react'
-import { NotFoundErrorScreen } from '../components/common/routing/not-found-error-screen'
+import { CommonErrorPage } from '../components/error-pages/common-error-page'
+import type { NextPage } from 'next'
 
 /**
  * Renders a hedgedoc themed 404 page
  */
-const Custom404: React.FC = () => {
-  return <NotFoundErrorScreen />
+const Custom404: NextPage = () => {
+  return <CommonErrorPage titleI18nKey={'errors.notFound.title'} descriptionI18nKey={'errors.notFound.description'} />
 }
 
 export default Custom404

src/pages/[id].tsx

@@ -1,16 +1,16 @@
 /*
- SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
- SPDX-License-Identifier: AGPL-3.0-only
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
  */
 
 import React from 'react'
 import { getNote } from '../api/notes'
-import { NotFoundErrorScreen } from '../components/common/routing/not-found-error-screen'
 import type { NextPage } from 'next'
 import { useAsync } from 'react-use'
 import { Redirect } from '../components/common/redirect'
 import { useSingleStringUrlParameter } from '../hooks/common/use-single-string-url-parameter'
+import { CommonErrorPage } from '../components/error-pages/common-error-page'
 
 /**
  * Redirects the user to the editor if the link is a root level direct link to a version 1 note.
@@ -30,7 +30,7 @@ export const DirectLinkFallback: NextPage = () => {
   })
 
   if (error !== undefined) {
-    return <NotFoundErrorScreen />
+    return <CommonErrorPage titleI18nKey={'errors.notFound.title'} descriptionI18nKey={'errors.notFound.description'} />
   } else if (value !== undefined) {
     return <Redirect to={`/n/${value}`} />
   } else {

src/pages/api/mock-backend/private/notes/index.ts

@@ -0,0 +1,59 @@
+/*
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import type { NextApiRequest, NextApiResponse } from 'next'
+import { HttpMethod, respondToMatchingRequest } from '../../../../../handler-utils/respond-to-matching-request'
+import type { Note } from '../../../../../api/notes/types'
+
+const handler = (req: NextApiRequest, res: NextApiResponse): void => {
+  respondToMatchingRequest<Note>(
+    HttpMethod.POST,
+    req,
+    res,
+    {
+      content: 'new note content',
+      metadata: {
+        id: 'featuresId',
+        version: 2,
+        viewCount: 0,
+        updatedAt: '2021-04-24T09:27:51.000Z',
+        createdAt: '2021-04-24T09:27:51.000Z',
+        updateUsername: null,
+        primaryAddress: 'features',
+        editedBy: [],
+        title: 'New note',
+        tags: ['hedgedoc', 'demo', 'react'],
+        description: 'Many features, such wow!',
+        aliases: [
+          {
+            name: 'features',
+            primaryAlias: true,
+            noteId: 'featuresId'
+          }
+        ],
+        permissions: {
+          owner: 'tilman',
+          sharedToUsers: [
+            {
+              username: 'molly',
+              canEdit: true
+            }
+          ],
+          sharedToGroups: [
+            {
+              groupName: '_LOGGED_IN',
+              canEdit: false
+            }
+          ]
+        }
+      },
+      editedByAtPosition: []
+    },
+    201
+  )
+}
+
+export default handler

src/pages/new.tsx

@@ -0,0 +1,41 @@
+/*
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import type { NextPage } from 'next'
+import { useSingleStringUrlParameter } from '../hooks/common/use-single-string-url-parameter'
+import { useAsync } from 'react-use'
+import { createNote } from '../api/notes'
+import { AsyncLoadingBoundary } from '../components/common/async-loading-boundary'
+import { Redirect } from '../components/common/redirect'
+import { CommonErrorPage } from '../components/error-pages/common-error-page'
+
+/**
+ * Creates a new note, optionally including the passed content and redirects to that note.
+ */
+export const NewNotePage: NextPage = () => {
+  const newContent = useSingleStringUrlParameter('content', '')
+
+  const { loading, error, value } = useAsync(() => {
+    return createNote(newContent)
+  }, [newContent])
+
+  return (
+    <AsyncLoadingBoundary
+      loading={loading}
+      componentName={'NewNotePage'}
+      error={error}
+      errorComponent={
+        <CommonErrorPage
+          titleI18nKey={'errors.noteCreationFailed.title'}
+          descriptionI18nKey={'errors.noteCreationFailed.description'}
+        />
+      }>
+      {value ? <Redirect to={`/n/${value.metadata.primaryAddress}`} /> : null}
+    </AsyncLoadingBoundary>
+  )
+}
+
+export default NewNotePage