Switch the base framework from Create React App to Next.JS

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

src/hooks/common/use-application-state.ts

@@ -5,8 +5,8 @@
  */
 
 import { useSelector } from 'react-redux'
-import type { ApplicationState } from '../../redux'
 import equal from 'fast-deep-equal'
+import type { ApplicationState } from '../../redux/application-state'
 
 /**
  * Accesses the global application state to retrieve information.

src/hooks/common/use-array-string-url-parameter.ts

@@ -0,0 +1,17 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { useRouter } from 'next/router'
+import { useMemo } from 'react'
+
+export const useArrayStringUrlParameter = (parameter: string): string[] => {
+  const router = useRouter()
+
+  return useMemo(() => {
+    const value = router.query[parameter]
+    return (typeof value === 'string' ? [value] : value) ?? []
+  }, [parameter, router.query])
+}

src/hooks/common/use-backend-base-url.ts

@@ -4,6 +4,16 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
+import { isMockMode } from '../../utils/test-modes'
+import { useMemo } from 'react'
+
 export const useBackendBaseUrl = (): string => {
-  return process.env.REACT_APP_BACKEND_BASE_URL ?? '/mock-backend/'
+  return useMemo(() => {
+    const mockMode = isMockMode()
+    if (!mockMode && process.env.NEXT_PUBLIC_BACKEND_BASE_URL === undefined) {
+      throw new Error('NEXT_PUBLIC_BACKEND_BASE_URL is unset and mock mode is disabled')
+    }
+
+    return mockMode ? '/mock-backend/' : (process.env.NEXT_PUBLIC_BACKEND_BASE_URL as string)
+  }, [])
 }

src/hooks/common/use-customize-assets-url.ts

@@ -8,5 +8,5 @@ import { useBackendBaseUrl } from './use-backend-base-url'
 
 export const useCustomizeAssetsUrl = (): string => {
   const backendBaseUrl = useBackendBaseUrl()
-  return process.env.REACT_APP_CUSTOMIZE_ASSETS_URL || `${backendBaseUrl}public/`
+  return process.env.NEXT_PUBLIC_CUSTOMIZE_ASSETS_URL || `${backendBaseUrl}public/`
 }

src/hooks/common/use-document-title-with-note-title.ts

@@ -7,10 +7,11 @@
 import { useTranslation } from 'react-i18next'
 import { useApplicationState } from './use-application-state'
 import { useDocumentTitle } from './use-document-title'
+import { useMemo } from 'react'
 
 export const useDocumentTitleWithNoteTitle = (): void => {
   const { t } = useTranslation()
-  const untitledNote = t('editor.untitledNote')
+  const untitledNote = useMemo(() => t('editor.untitledNote'), [t])
   const noteTitle = useApplicationState((state) => state.noteDetails.noteTitle)
 
   useDocumentTitle(noteTitle === '' ? untitledNote : noteTitle)

src/hooks/common/use-frontend-assets-url.ts

@@ -1,12 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-import { useFrontendBaseUrl } from './use-frontend-base-url'
-
-export const useFrontendAssetsUrl = (): string => {
-  const frontendBaseUrl = useFrontendBaseUrl()
-  return process.env.REACT_APP_FRONTEND_ASSETS_URL || frontendBaseUrl
-}

src/hooks/common/use-frontend-base-url.ts

@@ -1,15 +1,15 @@
 /*
- SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
- SPDX-License-Identifier: AGPL-3.0-only
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { useLocation } from 'react-router'
+import { useRouter } from 'next/router'
+import { useMemo } from 'react'
 
 export const useFrontendBaseUrl = (): string => {
-  const { pathname } = useLocation()
-  const location = window.location
-  const cleanedPathName = location.pathname.replace(pathname, '')
-
-  return `${location.protocol}//${location.host}${cleanedPathName}/`
+  const { asPath } = useRouter()
+  return useMemo(() => {
+    return process.env.NEXT_PUBLIC_FRONTEND_ASSETS_URL || window.location.toString().replace(asPath, '') + '/'
+  }, [asPath])
 }

src/hooks/common/use-single-string-url-parameter.ts

@@ -0,0 +1,17 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { useRouter } from 'next/router'
+import { useMemo } from 'react'
+
+export const useSingleStringUrlParameter = <T>(parameter: string, fallback: T): string | T => {
+  const router = useRouter()
+
+  return useMemo(() => {
+    const value = router.query[parameter]
+    return (typeof value === 'string' ? value : value?.[0]) ?? fallback
+  }, [fallback, parameter, router.query])
+}

src/hooks/common/use-trimmed-note-markdown-content-without-frontmatter.ts

@@ -6,21 +6,29 @@
 
 import { useMemo } from 'react'
 import { useApplicationState } from './use-application-state'
-import { useNoteMarkdownContent } from './use-note-markdown-content'
+import equal from 'fast-deep-equal'
 
+/**
+ * Returns the markdown content from the global application state trimmed to the maximal note length and without the frontmatter lines.
+ */
 export const useTrimmedNoteMarkdownContentWithoutFrontmatter = (): string[] => {
   const maxLength = useApplicationState((state) => state.config.maxDocumentLength)
-  const markdownContent = useNoteMarkdownContent()
-  const markdownContentLines = useApplicationState((state) => state.noteDetails.markdownContentLines)
+  const markdownContent = useApplicationState(
+    (state) => ({
+      lines: state.noteDetails.markdownContentLines,
+      content: state.noteDetails.markdownContent
+    }),
+    equal
+  )
   const lineOffset = useApplicationState((state) => state.noteDetails.frontmatterRendererInfo.lineOffset)
 
   const trimmedLines = useMemo(() => {
-    if (markdownContent.length > maxLength) {
-      return markdownContent.slice(0, maxLength).split('\n')
+    if (markdownContent.content.length > maxLength) {
+      return markdownContent.content.slice(0, maxLength).split('\n')
     } else {
-      return markdownContentLines
+      return markdownContent.lines
     }
-  }, [markdownContent, markdownContentLines, maxLength])
+  }, [markdownContent, maxLength])
 
   return useMemo(() => {
     return trimmedLines.slice(lineOffset)