feat: migrate frontend app to nextjs app router

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
2025-05-22 11:15:23 -04:00 · 2023-05-29 17:32:44 +02:00 · 2023-05-29 17:32:44 +02:00 · 8602645bea
commit 8602645bea
parent 5b5dabc84e
108 changed files with 893 additions and 1188 deletions
--- a/frontend/src/app/(render)/global-error.tsx
+++ b/frontend/src/app/(render)/global-error.tsx
@ -0,0 +1,42 @@
+'use client'
+
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { UiIcon } from '../../components/common/icons/ui-icon'
+import { ExternalLink } from '../../components/common/links/external-link'
+import links from '../../links.json'
+import React, { useEffect } from 'react'
+import { Button, Container } from 'react-bootstrap'
+import { ArrowRepeat as IconArrowRepeat } from 'react-bootstrap-icons'
+
+export default function Error({ error, reset }: { error: Error; reset: () => void }) {
+  useEffect(() => {
+    console.error(error)
+  }, [error])
+
+  return (
+    <html>
+      <body>
+        <Container className='d-flex flex-column mvh-100'>
+          <div className='d-flex flex-column align-items-center justify-content-center my-5'>
+            <h1>An unknown error occurred</h1>
+            <p>
+              Don&apos;t worry, this happens sometimes. If this is the first time you see this page then try reloading
+              the app.
+            </p>
+            If you can reproduce this error, then we would be glad if you&#32;
+            <ExternalLink text={'open an issue on github'} href={links.issues} className={'text-primary'} />
+            &#32; or <ExternalLink text={'contact us on matrix.'} href={links.chat} className={'text-primary'} />
+            <Button onClick={reset} title={'Reload App'} className={'mt-4'}>
+              <UiIcon icon={IconArrowRepeat} />
+              &nbsp;Reload App
+            </Button>
+          </div>
+        </Container>
+      </body>
+    </html>
+  )
+}
--- a/frontend/src/app/(render)/layout.tsx
+++ b/frontend/src/app/(render)/layout.tsx
@ -0,0 +1,35 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import '../../../global-styles/index.scss'
+import { ApplicationLoader } from '../../components/application-loader/application-loader'
+import { BaseUrlContextProvider } from '../../components/common/base-url/base-url-context-provider'
+import { FrontendConfigContextProvider } from '../../components/common/frontend-config-context/frontend-config-context-provider'
+import { ExpectedOriginBoundary } from '../../components/layout/expected-origin-boundary'
+import { StoreProvider } from '../../redux/store-provider'
+import { baseUrlFromEnvExtractor } from '../../utils/base-url-from-env-extractor'
+import React from 'react'
+import { getConfig } from '../../api/config'
+
+export default async function RootLayout({ children }: { children: React.ReactNode }) {
+  const baseUrls = baseUrlFromEnvExtractor.extractBaseUrls()
+  const frontendConfig = await getConfig(baseUrls.renderer)
+
+  return (
+    <html lang='en'>
+      <body>
+        <ExpectedOriginBoundary expectedOrigin={baseUrls.renderer}>
+          <BaseUrlContextProvider baseUrls={baseUrls}>
+            <FrontendConfigContextProvider config={frontendConfig}>
+              <StoreProvider>
+                <ApplicationLoader>{children}</ApplicationLoader>
+              </StoreProvider>
+            </FrontendConfigContextProvider>
+          </BaseUrlContextProvider>
+        </ExpectedOriginBoundary>
+      </body>
+    </html>
+  )
+}
--- a/frontend/src/app/(render)/render/page.tsx
+++ b/frontend/src/app/(render)/render/page.tsx
@ -0,0 +1,23 @@
+'use client'
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { RendererToEditorCommunicatorContextProvider } from '../../../components/editor-page/render-context/renderer-to-editor-communicator-context-provider'
+import { RenderPageContent } from '../../../components/render-page/render-page-content'
+import type { NextPage } from 'next'
+import React from 'react'
+
+/**
+ * Renders the actual markdown renderer that receives the content and metadata via iframe communication.
+ */
+const RenderPage: NextPage = () => {
+  return (
+    <RendererToEditorCommunicatorContextProvider>
+      <RenderPageContent />
+    </RendererToEditorCommunicatorContextProvider>
+  )
+}
+
+export default RenderPage