refactor: remove Next router from Course

apps/web/src/serlo-editor-integration/serlo-editor.tsx

@@ -6,12 +6,14 @@ import {
   type SerloEditorProps as EditorProps,
 } from '@editor/package'
 import dynamic from 'next/dynamic'
+import { useContext } from 'react'
 
 import { ArticleAddModal } from './components/article-add-modal/article-add-modal'
 import { ExternalRevisionLoader } from './components/external-revision-loader'
 import { SaveButton } from './components/save-button'
 import { useAuthentication } from '@/auth/use-authentication'
 import { useInstanceData } from '@/contexts/instance-context'
+import { RevisionViewContext } from '@/contexts/revision-view-context'
 import type { SetEntityMutationData } from '@/mutations/use-set-entity-mutation/types'
 
 const Editor = dynamic(
@@ -35,10 +37,13 @@ export function SerloEditor({
   const { lang, licenses } = useInstanceData()
   const auth = useAuthentication()
 
+  const isRevisionView = useContext(RevisionViewContext)
   const isNewEntity = !(initialState as { state?: { id?: string } }).state?.id
 
   return (
-    <SerloOnlyFeaturesContext.Provider value={{ licenses, ArticleAddModal }}>
+    <SerloOnlyFeaturesContext.Provider
+      value={{ isRevisionView, licenses, ArticleAddModal }}
+    >
       <Editor
         language={lang === 'de' ? 'de' : 'en'}
         editorVariant="serlo-org"

packages/editor/src/core/contexts/serlo-only-features-context.ts

@@ -18,6 +18,7 @@ export interface ArticleAddModalProps {
 }
 
 interface SerloOnlyFeaturesData {
+  isRevisionView?: boolean
   licenses?: LicenseData[]
   ArticleAddModal?: (props: ArticleAddModalProps) => JSX.Element
 }

packages/editor/src/editor-integration/create-renderers.tsx

@@ -6,6 +6,7 @@ import { AnchorStaticRenderer } from '@editor/plugins/anchor/static'
 import { ArticleStaticRenderer } from '@editor/plugins/article/static'
 import { BlanksExerciseStaticRenderer } from '@editor/plugins/blanks-exercise/static'
 import { BoxStaticRenderer } from '@editor/plugins/box/static'
+import { CourseStaticRenderer } from '@editor/plugins/course/static/static'
 import { DropzoneImageStaticRenderer } from '@editor/plugins/dropzone-image/static'
 import { EdusharingAssetStaticRenderer } from '@editor/plugins/edusharing-asset/static'
 import { EquationsStaticRenderer } from '@editor/plugins/equations/static'
@@ -38,6 +39,7 @@ export function createRenderers(): InitRenderersArgs {
     pluginRenderers: [
       // plugins
       { type: EditorPluginType.Article, renderer: ArticleStaticRenderer },
+      { type: EditorPluginType.Course, renderer: CourseStaticRenderer },
       { type: EditorPluginType.Rows, renderer: RowsStaticRenderer },
       { type: EditorPluginType.Text, renderer: TextStaticRenderer },
       { type: EditorPluginType.Image, renderer: ImageStaticRenderer },

packages/editor/src/plugins/course/static/course-footer.tsx

@@ -2,27 +2,22 @@ import { FaIcon } from '@editor/editor-ui/fa-icon'
 import { useStaticStrings } from '@editor/i18n/static-strings-provider'
 import { EditorCourseDocument } from '@editor/types/editor-plugins'
 import { cn } from '@editor/utils/cn'
-import { scrollIfNeeded } from '@editor/utils/scroll'
 import {
   faArrowCircleRight,
   faArrowCircleUp,
 } from '@fortawesome/free-solid-svg-icons'
 import { MouseEvent } from 'react'
 
-import { type DummyNextRouter } from './static'
-
 export function CourseFooter({
   activePageIndex: index,
   pages,
   onOverviewButtonClick,
   pageUrls,
-  router,
 }: {
   activePageIndex: number
   pages: EditorCourseDocument['state']['pages']
   onOverviewButtonClick: (e: MouseEvent<HTMLButtonElement>) => void
   pageUrls?: string[]
-  router: DummyNextRouter
 }) {
   const onOverviewClick = (e: MouseEvent<HTMLButtonElement>) => {
     location.href = '#course-overview'
@@ -38,10 +33,7 @@ export function CourseFooter({
   const courseStrings = useStaticStrings().plugins.course
 
   function navigate(toPath: string, newIndex: number) {
-    void router.push(toPath, undefined, { shallow: true })
-    scrollIfNeeded(document.querySelector('#course-title'))
-
-    void router.push(toPath, undefined, { shallow: true })
+    window.location.pathname = toPath
     setTimeout(() => {
       document.title = pages[newIndex].title
     }, 100)

packages/editor/src/plugins/course/static/course-navigation.tsx

@@ -1,7 +1,6 @@
 import { EditorCourseDocument } from '@editor/types/editor-plugins'
 import { cn } from '@editor/utils/cn'
 
-import { type DummyNextRouter } from './static'
 import { CourseNavigationRenderer } from '../renderer/course-navigation'
 
 export function CourseNavigation({
@@ -10,14 +9,12 @@ export function CourseNavigation({
   courseNavOpen,
   setCourseNavOpen,
   pageUrls,
-  router,
 }: {
   pages: EditorCourseDocument['state']['pages']
   activePageId?: string
   courseNavOpen: boolean
   setCourseNavOpen: (open: boolean) => void
   pageUrls?: string[]
-  router: DummyNextRouter
 }) {
   if (!pages) return null
 
@@ -35,7 +32,7 @@ export function CourseNavigation({
         function handleClick(e: React.MouseEvent) {
           e.preventDefault()
           if (!href) return
-          void router.push(href, undefined, { shallow: true })
+          window.location.pathname = href
           setTimeout(() => {
             document.title = title
           }, 100)

packages/editor/src/plugins/course/static/static.tsx

@@ -1,33 +1,31 @@
+import { FaIcon } from '@editor/editor-ui/fa-icon'
+import { useStaticStrings } from '@editor/i18n/static-strings-provider'
+import { SerloOnlyFeaturesContext } from '@editor/package'
 import { StaticRenderer } from '@editor/static-renderer/static-renderer'
 import { EditorCourseDocument } from '@editor/types/editor-plugins'
 import { cn } from '@editor/utils/cn'
-import { useState, MouseEvent } from 'react'
+import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons'
+import { useState, MouseEvent, useContext } from 'react'
 
 import { CourseFooter } from './course-footer'
 import { CourseNavigation } from './course-navigation'
 import { getCoursePageIdFromPath } from '../helper/get-course-id-from-path'
 
-export interface DummyNextRouter {
-  asPath: string
-  push(
-    url: string,
-    as?: undefined,
-    options?: { shallow: boolean }
-  ): Promise<boolean>
-}
-
 export function CourseStaticRenderer({
   state,
   serloContext,
-  router,
-  isRevisionView,
-}: EditorCourseDocument & {
-  router: DummyNextRouter
-  isRevisionView?: boolean
-}) {
+}: EditorCourseDocument) {
   const { pages } = state
 
-  const routerCourseId = getCoursePageIdFromPath(router.asPath)
+  const courseStrings = useStaticStrings().plugins.course
+  const { isRevisionView } = useContext(SerloOnlyFeaturesContext)
+
+  let asPath = ''
+  if (typeof window !== 'undefined') {
+    asPath =
+      window.location.pathname + window.location.search + window.location.hash
+  }
+  const routerCourseId = getCoursePageIdFromPath(asPath)
   const queryPageId = routerCourseId ?? serloContext?.activeCoursePageId
   // load nav opened when only some entries
   const [courseNavOpen, setCourseNavOpen] = useState(
@@ -55,13 +53,18 @@ export function CourseStaticRenderer({
 
   return (
     <>
+      {pages.length ? null : (
+        <div className="my-12 rounded-2xl bg-orange-200 p-4 font-bold">
+          <FaIcon icon={faExclamationCircle} />
+          {courseStrings.noPagesWarning}
+        </div>
+      )}
       <CourseNavigation
         {...state}
         activePageId={activePage?.id}
         courseNavOpen={courseNavOpen}
         setCourseNavOpen={setCourseNavOpen}
         pageUrls={pageUrls}
-        router={router}
       />
 
       {pages.length ? (
@@ -73,7 +76,6 @@ export function CourseStaticRenderer({
             onOverviewButtonClick={openCourseNav}
             activePageIndex={activePageIndex}
             pageUrls={serloContext?.coursePageUrls}
-            router={router}
           />
         </>
       ) : null}