From 0ecb830f9b9438dd2b6d893fb66c8d156ec49944 Mon Sep 17 00:00:00 2001 From: Vitomir Budimir Date: Fri, 10 Jan 2025 15:44:05 +0100 Subject: [PATCH] refactor: remove Next router from Course --- .../serlo-editor-integration/serlo-editor.tsx | 7 +++- .../course-serlo-static-renderer.tsx | 35 ---------------- .../contexts/serlo-only-features-context.ts | 1 + .../editor-integration/create-renderers.tsx | 2 + .../plugins/course/static/course-footer.tsx | 10 +---- .../course/static/course-navigation.tsx | 5 +-- .../src/plugins/course/static/static.tsx | 40 ++++++++++--------- 7 files changed, 32 insertions(+), 68 deletions(-) delete mode 100644 apps/web/src/serlo-editor-integration/serlo-plugin-wrappers/course-serlo-static-renderer.tsx diff --git a/apps/web/src/serlo-editor-integration/serlo-editor.tsx b/apps/web/src/serlo-editor-integration/serlo-editor.tsx index 3b8762d068..ca8235b162 100644 --- a/apps/web/src/serlo-editor-integration/serlo-editor.tsx +++ b/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 ( - + - {pages.length ? null : ( - - {strings.plugins.course.noPagesWarning} - - )} - - - ) -} diff --git a/packages/editor/src/core/contexts/serlo-only-features-context.ts b/packages/editor/src/core/contexts/serlo-only-features-context.ts index 5b854831bf..99f9633ea1 100644 --- a/packages/editor/src/core/contexts/serlo-only-features-context.ts +++ b/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 } diff --git a/packages/editor/src/editor-integration/create-renderers.tsx b/packages/editor/src/editor-integration/create-renderers.tsx index 1ccbc8865c..aca1007f1d 100644 --- a/packages/editor/src/editor-integration/create-renderers.tsx +++ b/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 }, diff --git a/packages/editor/src/plugins/course/static/course-footer.tsx b/packages/editor/src/plugins/course/static/course-footer.tsx index 6eab27c566..805fa04fef 100644 --- a/packages/editor/src/plugins/course/static/course-footer.tsx +++ b/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) => void pageUrls?: string[] - router: DummyNextRouter }) { const onOverviewClick = (e: MouseEvent) => { 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) diff --git a/packages/editor/src/plugins/course/static/course-navigation.tsx b/packages/editor/src/plugins/course/static/course-navigation.tsx index c3b71d2bb1..090f7b2c86 100644 --- a/packages/editor/src/plugins/course/static/course-navigation.tsx +++ b/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) diff --git a/packages/editor/src/plugins/course/static/static.tsx b/packages/editor/src/plugins/course/static/static.tsx index c0c0d62f3a..c9ed27e5ea 100644 --- a/packages/editor/src/plugins/course/static/static.tsx +++ b/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 -} - 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 : ( +
+ + {courseStrings.noPagesWarning} +
+ )} {pages.length ? ( @@ -73,7 +76,6 @@ export function CourseStaticRenderer({ onOverviewButtonClick={openCourseNav} activePageIndex={activePageIndex} pageUrls={serloContext?.coursePageUrls} - router={router} /> ) : null}