Fixes to the peer review editor and to the end of page component (#1309)

* Change indices

* Reformat query

* Refactor and fix next page text logic

* Fix peer review editor textarea height on peer review editor

* Update snapshots

services/cms/src/utils/documentSchemaProcessor.tsx

@@ -246,11 +246,13 @@ export function denormalizeDocument(input: CmsPageUpdate): UnnormalizedDocument
         needs_peer_review: exercise.needs_peer_review,
         needs_self_review: exercise.needs_self_review,
         peer_or_self_review_config:
-          exercise.needs_peer_review && !exercise.use_course_default_peer_or_self_review_config
+          (exercise.needs_peer_review || exercise.needs_self_review) &&
+          !exercise.use_course_default_peer_or_self_review_config
             ? JSON.stringify(exercise.peer_or_self_review_config)
             : "null",
         peer_or_self_review_questions_config:
-          exercise.needs_peer_review && !exercise.use_course_default_peer_or_self_review_config
+          (exercise.needs_peer_review || exercise.needs_self_review) &&
+          !exercise.use_course_default_peer_or_self_review_config
             ? JSON.stringify(exercise.peer_or_self_review_questions)
             : "null",
         use_course_default_peer_review: exercise.use_course_default_peer_or_self_review_config,

services/course-material/src/components/ContentRenderer/moocfi/NavigationContainer/NextPage.tsx

@@ -1,14 +1,18 @@
 import { useQuery } from "@tanstack/react-query"
 import { differenceInSeconds, formatDuration, parseISO } from "date-fns"
-import React, { useEffect } from "react"
+import { i18n, TFunction } from "i18next"
+import React, { useMemo } from "react"
 import { useTranslation } from "react-i18next"
 
 import useTime from "../../../../hooks/useTime"
 import { fetchPageNavigationData } from "../../../../services/backend"
 import { courseFrontPageRoute, coursePageRoute } from "../../../../utils/routing"
 
+import { PageNavigationInformation } from "@/shared-module/common/bindings"
 import ErrorBanner from "@/shared-module/common/components/ErrorBanner"
-import NextSectionLink from "@/shared-module/common/components/NextSectionLink"
+import NextSectionLink, {
+  NextSectionLinkProps,
+} from "@/shared-module/common/components/NextSectionLink"
 import Spinner from "@/shared-module/common/components/Spinner"
 
 export interface NextPageProps {
@@ -18,6 +22,9 @@ export interface NextPageProps {
   organizationSlug: string
 }
 
+const NUMERIC = "numeric"
+const LONG = "long"
+
 const NextPage: React.FC<React.PropsWithChildren<NextPageProps>> = ({
   chapterId,
   currentPageId,
@@ -26,165 +33,141 @@ const NextPage: React.FC<React.PropsWithChildren<NextPageProps>> = ({
 }) => {
   const { t, i18n } = useTranslation()
   const now = useTime()
-  const [nextPageChapterOpen, setnextPageChapterOpen] = React.useState(false)
 
   const getPageRoutingData = useQuery({
     queryKey: [`pages-${chapterId}-page-routing-data`, currentPageId],
     queryFn: () => fetchPageNavigationData(currentPageId),
   })
 
-  useEffect(() => {
+  const nextPageProps = useMemo(() => {
     if (!getPageRoutingData.data) {
-      return
-    }
-    if (!getPageRoutingData.data.next_page) {
-      return
-    }
-    if (getPageRoutingData.data.next_page.chapter_opens_at === null) {
-      setnextPageChapterOpen(true)
-      return
+      return null
     }
-    const diffSeconds = differenceInSeconds(getPageRoutingData.data.next_page.chapter_opens_at, now)
-    setnextPageChapterOpen(diffSeconds <= 0)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [getPageRoutingData.data])
+    return deriveNextpageProps(
+      t,
+      getPageRoutingData.data,
+      chapterId,
+      now,
+      i18n,
+      organizationSlug,
+      courseSlug,
+      currentPageId,
+    )
+  }, [
+    chapterId,
+    courseSlug,
+    currentPageId,
+    getPageRoutingData.data,
+    i18n,
+    now,
+    organizationSlug,
+    t,
+  ])
 
   if (getPageRoutingData.isError) {
     return <ErrorBanner variant={"readOnly"} error={getPageRoutingData.error} />
   }
-  if (getPageRoutingData.isPending) {
+  if (getPageRoutingData.isPending || !nextPageProps) {
     return <Spinner variant={"medium"} />
   }
 
-  const { chapter_front_page, next_page, previous_page } = getPageRoutingData.data
-
-  if (next_page === null) {
-    // if data is null we have reached the end of the course material. i.e. no page or chapter found
-    return (
-      <NextSectionLink
-        title={t("title-congratulations")}
-        subtitle={t("reached-end-of-course-material")}
-        nextTitle={t("action-back-to-front-page")}
-        url={courseFrontPageRoute(organizationSlug, courseSlug)}
-      />
-    )
+  return (
+    // Chapter exists, but next chapter not open yet.
+    <NextSectionLink {...nextPageProps} />
+  )
+}
+
+function deriveNextpageProps(
+  t: TFunction,
+  info: PageNavigationInformation,
+  chapterId: string | null,
+  now: Date,
+  i18n: i18n,
+  organizationSlug: string,
+  courseSlug: string,
+  currentPageId: string,
+): NextSectionLinkProps {
+  const res: NextSectionLinkProps = {
+    title: t("reached-end-of-topic"),
+    subtitle: t("proceed-to-next-topic"),
+    nextTitle: "",
+    chapterFrontPageURL: coursePageRoute(
+      organizationSlug,
+      courseSlug,
+      info.chapter_front_page?.url_path ?? "",
+    ),
   }
 
-  if (previous_page === null) {
-    // if data is null, we are in the beginning of the course (chapter-1 frontpage precisely)
-    // eslint-disable-next-line i18next/no-literal-string
-    return (
-      <NextSectionLink
-        title={t("start-studying")}
-        subtitle={t("proceed-to-the-first-topic")}
-        nextTitle={next_page.title}
-        url={coursePageRoute(organizationSlug, courseSlug, next_page.url_path)}
-      />
-    )
+  const endOfCourse = info.next_page === null
+  const endOfChapter = info.next_page?.chapter_id !== chapterId
+  const currentPageIsChapterFrontPage = Boolean(
+    info.chapter_front_page && info.chapter_front_page.chapter_front_page_id === currentPageId,
+  )
+  let nextPageIsNotOpen = false
+  if (info.next_page && info.next_page.chapter_opens_at !== null) {
+    const diffSeconds = differenceInSeconds(info.next_page.chapter_opens_at, now)
+    if (diffSeconds > 0) {
+      nextPageIsNotOpen = true
+    }
   }
 
-  const NUMERIC = "numeric"
-  const LONG = "long"
-  const nextPageUrl = coursePageRoute(organizationSlug, courseSlug, next_page.url_path)
-
-  const previousPageUrl = coursePageRoute(organizationSlug, courseSlug, previous_page.url_path)
-
-  if (chapter_front_page === null) {
-    // if data is null, we are in the chapter front-page
-    return (
-      <NextSectionLink
-        title={t("start-studying")}
-        subtitle={t("proceed-to-the-first-topic")}
-        nextTitle={next_page.title}
-        url={coursePageRoute(organizationSlug, courseSlug, next_page.url_path)}
-      />
-    )
+  if (info.previous_page !== null) {
+    res.previous = coursePageRoute(organizationSlug, courseSlug, info.previous_page.url_path)
+  }
+  if (info.next_page !== null) {
+    res.nextTitle = info.next_page.title
+    res.url = coursePageRoute(organizationSlug, courseSlug, info.next_page.url_path)
   }
 
-  // eslint-disable-next-line i18next/no-literal-string
-  const chapterPageUrl = coursePageRoute(organizationSlug, courseSlug, chapter_front_page.url_path)
-
-  // Chapter front page NextSectionLink
-  if (next_page.chapter_front_page_id === currentPageId) {
-    return (
-      <NextSectionLink
-        title={t("start-studying")}
-        subtitle={t("proceed-to-the-first-topic")}
-        nextTitle={next_page.title}
-        url={nextPageUrl}
-        previous={previousPageUrl}
-      />
-    )
+  if (currentPageIsChapterFrontPage) {
+    res.title = t("start-studying")
+    res.subtitle = t("proceed-to-the-first-topic")
+    res.chapterFrontPageURL = undefined
   }
-  if (nextPageChapterOpen) {
-    if (chapterId !== next_page.chapter_id) {
-      // End of chapter NextSectionLink
-      return (
-        <NextSectionLink
-          title={t("impressive-reached-end-of-chapter")}
-          subtitle={t("proceed-to-the-next-chapter")}
-          nextTitle={next_page.title}
-          url={nextPageUrl}
-          previous={previousPageUrl}
-          chapterFrontPageURL={chapterPageUrl}
-        />
-      )
-    } else {
-      // End of page NextSectionLink
-      return (
-        <NextSectionLink
-          title={t("reached-end-of-topic")}
-          subtitle={t("proceed-to-next-topic")}
-          nextTitle={next_page.title}
-          url={nextPageUrl}
-          previous={previousPageUrl}
-          chapterFrontPageURL={chapterPageUrl}
-        />
-      )
-    }
-  } else {
-    let closedUntil
-    if (next_page.chapter_opens_at) {
-      const diffSeconds = differenceInSeconds(next_page.chapter_opens_at, now)
+
+  if (endOfChapter) {
+    res.title = t("impressive-reached-end-of-chapter")
+    res.subtitle = t("proceed-to-the-next-chapter")
+  }
+
+  if (endOfCourse) {
+    res.title = t("title-congratulations")
+    res.subtitle = t("reached-end-of-course-material")
+    res.nextTitle = t("action-back-to-front-page")
+    res.url = courseFrontPageRoute(organizationSlug, courseSlug)
+  }
+
+  if (nextPageIsNotOpen) {
+    res.nextTitle = t("closed")
+    res.url = undefined
+    if (info.next_page?.chapter_opens_at) {
+      const diffSeconds = differenceInSeconds(info.next_page.chapter_opens_at, now)
       if (diffSeconds <= 0) {
-        // eslint-disable-next-line i18next/no-literal-string
-        setnextPageChapterOpen(true)
-        closedUntil = t("opens-now")
-        // Insert confetti drop here.
+        res.nextTitle = t("opens-now")
       } else if (diffSeconds < 60 * 10) {
         const minutes = Math.floor(diffSeconds / 60)
         const seconds = diffSeconds % 60
         const formatted = formatDuration({
           minutes,
           seconds,
         })
-        closedUntil = t("opens-in-time", { "relative-time": formatted })
+        res.nextTitle = t("opens-in-time", { "relative-time": formatted })
       } else {
-        const date = parseISO(next_page.chapter_opens_at).toLocaleString(i18n.language, {
+        const date = parseISO(info.next_page.chapter_opens_at).toLocaleString(i18n.language, {
           year: NUMERIC,
           month: LONG,
           day: NUMERIC,
         })
-        const time = parseISO(next_page.chapter_opens_at).toLocaleString(i18n.language, {
+        const time = parseISO(info.next_page.chapter_opens_at).toLocaleString(i18n.language, {
           hour: NUMERIC,
           minute: NUMERIC,
         })
-        closedUntil = t("available-on-date-at-time", { date: date, time: time })
+        res.nextTitle = t("available-on-date-at-time", { date: date, time: time })
       }
-    } else {
-      closedUntil = t("closed")
     }
-    return (
-      // Chapter exists, but next chapter not open yet.
-      <NextSectionLink
-        title={t("impressive-reached-end-of-chapter")}
-        subtitle={t("please-wait-until-next-chapter-opens")}
-        nextTitle={closedUntil}
-        previous={previousPageUrl}
-        chapterFrontPageURL={chapterPageUrl}
-      />
-    )
   }
+
+  return res
 }
 
 export default NextPage

services/headless-lms/migrations/20240906071926_index_changes.down.sql

@@ -0,0 +1,2 @@
+DROP INDEX feedback_course_id_idx;
+DROP INDEX user_exercise_states_fast_search_3;

services/headless-lms/migrations/20240906071926_index_changes.up.sql

@@ -0,0 +1,5 @@
+DROP INDEX IF EXISTS exercise_tasks_exercise_slide_id_idx1;
+DROP INDEX IF EXISTS pages_course_id_idx1;
+DROP INDEX IF EXISTS peer_review_queue_entries_exercise_id_idx;
+CREATE INDEX ON feedback (course_id);
+CREATE INDEX user_exercise_states_fast_search_3 ON user_exercise_states (deleted_at, exercise_id, reviewing_stage);