Merge pull request #4391 from serlo/refactor/remove-next-router-from-…

…course

refactor: remove Next router from Course

apps/web/src/components/entity/entity.tsx

@@ -1,6 +1,7 @@
 import {
   EditorPluginType,
   isArticleDocument,
+  isCourseDocument,
   isEmptyArticle,
 } from '@editor/package'
 import {
@@ -43,7 +44,7 @@ export function Entity({ data }: EntityProps) {
   const { strings } = useInstanceData()
   return wrapWithSchema(
     <>
-      {renderNotices()}
+      {renderNotices(data.content)}
       {renderStyledH1()}
       {renderUserTools({ aboveContent: true })}
       <div className="min-h-[25vh]" key={data.id}>
@@ -144,7 +145,7 @@ export function Entity({ data }: EntityProps) {
     )
   }
 
-  function renderNotices() {
+  function renderNotices(document: EntityData['content']) {
     if (data.trashed)
       return (
         <InfoPanel icon={faTrash} doNotIndex>
@@ -180,5 +181,18 @@ export function Entity({ data }: EntityProps) {
         </InfoPanel>
       )
     }
+
+    const isCourse =
+      document &&
+      !Array.isArray(document) &&
+      document.plugin === EditorPluginType.Course &&
+      isCourseDocument(document)
+    if (isCourse && !document.state.pages.length) {
+      return (
+        <InfoPanel icon={faExclamationCircle} type="warning" doNotIndex>
+          {strings.content.courseNoPagesWarning}
+        </InfoPanel>
+      )
+    }
   }
 }

apps/web/src/data/en/index.ts

@@ -137,6 +137,8 @@ export const instanceData = {
       picture: 'Picture',
       previewImage: 'Preview Image',
       task: 'Task',
+      courseNoPagesWarning:
+        'Sorry there seem to be no reviewed pages in this course yet.',
     },
     consent: {
       title: 'Consent for external Content',

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

@@ -36,7 +36,6 @@ import { ComponentProps } from 'react'
 
 import { ExtraInfoIfRevisionView } from './extra-info-if-revision-view'
 import { EditorH5PDocument } from './h5p'
-import { CourseSerloStaticRenderer } from './serlo-plugin-wrappers/course-serlo-static-renderer'
 import { GeogebraSerloStaticRenderer } from './serlo-plugin-wrappers/geogebra-serlo-static-renderer'
 import { ImageSerloStaticRenderer } from './serlo-plugin-wrappers/image-serlo-static-renderer'
 import { VideoSerloStaticRenderer } from './serlo-plugin-wrappers/video-serlo-static-renderer'
@@ -160,7 +159,6 @@ export function createRenderers(): InitRenderersArgs {
         renderer: DropzoneImageStaticRenderer,
       },
       { type: EditorPluginType.Box, renderer: BoxStaticRenderer },
-      { type: EditorPluginType.Course, renderer: CourseSerloStaticRenderer },
       { type: EditorPluginType.SerloTable, renderer: SerloTableStaticRenderer },
       {
         type: EditorPluginType.Injection,

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/i18n/strings/de/static.ts

@@ -40,8 +40,6 @@ export const staticStrings = {
       pages: 'Kursübersicht',
       next: 'Weiter',
       back: 'Zurück',
-      noPagesWarning:
-        'Leider gibt es für diesen Kurs noch keine akzeptierten Seiten.',
       noRevisionForPage: 'Ungegeprüfte Seite',
     },
     exercise: {

packages/editor/src/i18n/strings/en/static.ts

@@ -38,8 +38,6 @@ export const staticStrings = {
       pages: 'Course overview',
       next: 'Next',
       back: 'Back',
-      noPagesWarning:
-        'Sorry there seem to be no reviewed pages in this course yet.',
       noRevisionForPage: 'unreviewed page',
     },
     exercise: {

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,27 @@
+import { SerloOnlyFeaturesContext } from '@editor/core/contexts/serlo-only-features-context'
 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 { 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 { 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(
@@ -61,7 +55,6 @@ export function CourseStaticRenderer({
         courseNavOpen={courseNavOpen}
         setCourseNavOpen={setCourseNavOpen}
         pageUrls={pageUrls}
-        router={router}
       />
 
       {pages.length ? (
@@ -73,7 +66,6 @@ export function CourseStaticRenderer({
             onOverviewButtonClick={openCourseNav}
             activePageIndex={activePageIndex}
             pageUrls={serloContext?.coursePageUrls}
-            router={router}
           />
         </>
       ) : null}