Fix stuff (#1185)

* Sort peer review questions in the editor * Rename old quiz types to use Old -prefix * Remove duplicate type * Move quizzes components around * Fixes to received peer review sorting * Add a warning to users of really old browsers * Fixes to the outdated browser warning * Increase max peer review question length
rage · Oct 6, 2023 · c32e171 · c32e171
1 parent 7fa2e12
commit c32e171
Show file tree

Hide file tree

Showing 87 changed files with 587 additions and 550 deletions.
diff --git a/services/cms/src/components/PeerReviewEditor.tsx b/services/cms/src/components/PeerReviewEditor.tsx
@@ -95,8 +95,6 @@ const StyledQuestionType = styled.div`
   }
 `
 
-const HEADING_TEXT = "Configure review answers option"
-
 export interface PeerReviewEditorExtraProps {
   attributes: Readonly<Partial<ExerciseAttributes>>
   setAttributes: (attr: Partial<ExerciseAttributes>) => void
@@ -407,10 +405,11 @@ const PeerReviewEditor: React.FC<PeerReviewEditorProps> = ({
                     handlePeerReviewValueChange(value, "accepting_threshold")
                   }}
                 />
-                <h2>{HEADING_TEXT}</h2>
+                <h2>{t("configure-review-answers-option")}</h2>
                 {parsedPeerReviewQuestionConfig &&
-                  parsedPeerReviewQuestionConfig.map(
-                    ({ id, question, question_type, answer_required }) => (
+                  parsedPeerReviewQuestionConfig
+                    .sort((o1, o2) => o1.order_number - o2.order_number)
+                    .map(({ id, question, question_type, answer_required }) => (
                       <List key={id} id={id}>
                         <StyledQuestion>
                           <StyledSelectField
@@ -450,8 +449,7 @@ const PeerReviewEditor: React.FC<PeerReviewEditorProps> = ({
                           <FontAwesomeIcon icon={faXmark} />
                         </DeleteBtn>
                       </List>
-                    ),
-                  )}
+                    ))}
                 <Button
                   variant="primary"
                   size="medium"

diff --git a/services/cms/src/pages/_app.tsx b/services/cms/src/pages/_app.tsx
@@ -2,13 +2,15 @@ import { config } from "@fortawesome/fontawesome-svg-core"
 import { QueryClientProvider } from "@tanstack/react-query"
 import type { AppProps } from "next/app"
 import Head from "next/head"
+import Script from "next/script"
 import React, { useEffect } from "react"
 
 import Layout from "../components/Layout"
 import { LoginStateContextProvider } from "../shared-module/contexts/LoginStateContext"
 import useLanguage from "../shared-module/hooks/useLanguage"
 import { queryClient } from "../shared-module/services/appQueryClient"
 import GlobalStyles from "../shared-module/styles/GlobalStyles"
+import { OUTDATED_BROWSER_WARNING_SCRIPT } from "../shared-module/utils/constants"
 import generateWebVitalsReporter from "../shared-module/utils/generateWebVitalsReporter"
 import initI18n from "../shared-module/utils/initI18n"
 import "../styles/Gutenberg/style.scss"
@@ -44,6 +46,9 @@ const MyApp: React.FC<React.PropsWithChildren<AppProps>> = ({ Component, pagePro
 
   return (
     <>
+      <Script noModule id="outdated-browser-warning">
+        {OUTDATED_BROWSER_WARNING_SCRIPT}
+      </Script>
       {language && (
         <Head>
           <html lang={language} />

diff --git a/...iew/PeerReviewReceivedComponent/Essay.tsx → ...ew/PeerReviewsReceivedComponent/Essay.tsx b/...iew/PeerReviewReceivedComponent/Essay.tsx → ...ew/PeerReviewsReceivedComponent/Essay.tsx
diff --git a/...ew/PeerReviewReceivedComponent/Likert.tsx → ...w/PeerReviewsReceivedComponent/Likert.tsx b/...ew/PeerReviewReceivedComponent/Likert.tsx → ...w/PeerReviewsReceivedComponent/Likert.tsx
diff --git a/...vedComponent/PeerReviewQuestionAnswer.tsx → ...sReceivedComponent/ReceivedPeerReview.tsx b/...vedComponent/PeerReviewQuestionAnswer.tsx → ...sReceivedComponent/ReceivedPeerReview.tsx
@@ -1,5 +1,6 @@
 import styled from "@emotion/styled"
 import * as React from "react"
+import { useMemo } from "react"
 import { useTranslation } from "react-i18next"
 
 import {
@@ -25,19 +26,37 @@ const Heading = styled.div`
   border-bottom: 2px solid #ebedee;
 `
 
-const PeerReviewQuestionAnswer: React.FunctionComponent<ReviewProps> = ({
+const ReceivedPeerReview: React.FunctionComponent<ReviewProps> = ({
   orderNumber,
   review,
   questions,
 }) => {
   const { t } = useTranslation()
-  // const { id, number_data, text_data, peer_review_question_id } = review
+
+  const sortedReview = useMemo(
+    () =>
+      review.sort((o1, o2) => {
+        const o1Question = questions.find((q) => q.id === o1.peer_review_question_id)
+        const o2Question = questions.find((q) => q.id === o2.peer_review_question_id)
+        if (!o1Question) {
+          return 1
+        }
+        if (!o2Question) {
+          return -1
+        }
+        return o1Question.order_number - o2Question.order_number
+      }),
+    [questions, review],
+  )
 
   return (
     <Wrapper>
       <Heading>{`${t("peer-review")} #${orderNumber + 1}`}</Heading>
-      {review?.map(({ id, number_data, text_data, peer_review_question_id }, index) => {
+      {sortedReview.map(({ id, number_data, text_data, peer_review_question_id }, index) => {
         const questionIndex = questions.findIndex((q) => q.id === peer_review_question_id)
+        if (questionIndex === -1) {
+          return null
+        }
         const question = questions[questionIndex].question
         return (
           <>
@@ -52,4 +71,4 @@ const PeerReviewQuestionAnswer: React.FunctionComponent<ReviewProps> = ({
   )
 }
 
-export default PeerReviewQuestionAnswer
+export default ReceivedPeerReview
diff --git a/...eerReviewReceivedComponent/SVGmatcher.tsx → ...erReviewsReceivedComponent/SVGmatcher.tsx b/...eerReviewReceivedComponent/SVGmatcher.tsx → ...erReviewsReceivedComponent/SVGmatcher.tsx
diff --git a/...iew/PeerReviewReceivedComponent/index.tsx → ...ew/PeerReviewsReceivedComponent/index.tsx b/...iew/PeerReviewReceivedComponent/index.tsx → ...ew/PeerReviewsReceivedComponent/index.tsx
@@ -3,18 +3,15 @@ import styled from "@emotion/styled"
 import { useQuery } from "@tanstack/react-query"
 import { groupBy } from "lodash"
 import * as React from "react"
+import { useMemo } from "react"
 import { useTranslation } from "react-i18next"
 
 import { fetchPeerReviewDataReceivedByExerciseId } from "../../../../../../services/backend"
-import {
-  PeerReviewQuestion,
-  PeerReviewQuestionSubmission,
-} from "../../../../../../shared-module/bindings"
 import ErrorBanner from "../../../../../../shared-module/components/ErrorBanner"
 import Spinner from "../../../../../../shared-module/components/Spinner"
 import { baseTheme, headingFont } from "../../../../../../shared-module/styles"
 
-import PeerReviewQuestionAnswer from "./PeerReviewQuestionAnswer"
+import ReceivedPeerReview from "./ReceivedPeerReview"
 
 const openAnimation = keyframes`
   0% { opacity: 0; }
@@ -108,16 +105,37 @@ interface PeerReviewProps {
   submissionId: string
 }
 
-const PeerReview: React.FunctionComponent<PeerReviewProps> = ({ id, submissionId }) => {
+const PeerReviewsReceived: React.FunctionComponent<PeerReviewProps> = ({ id, submissionId }) => {
   const { t } = useTranslation()
-  let result: PeerReviewQuestionSubmission[] = []
-  let questions: PeerReviewQuestion[] = []
 
   const getPeerReviewReceived = useQuery({
     queryKey: [`exercise-${id}-exercise-slide-submission-${submissionId}-peer-reviews-received`],
     queryFn: () => fetchPeerReviewDataReceivedByExerciseId(id, submissionId),
   })
 
+  const data = useMemo(() => {
+    const ordered = getPeerReviewReceived.data?.peer_review_question_submissions.sort(
+      (a, b) => b.created_at.getTime() - a.created_at.getTime(),
+    )
+
+    const groupByPeerReviewSubmissionId = groupBy(
+      ordered,
+      (review) => review.peer_review_submission_id,
+    )
+
+    let res = Object.values(groupByPeerReviewSubmissionId)
+    res = res.sort((a, b) => {
+      if (a.length === 0) {
+        return 1
+      }
+      if (b.length === 0) {
+        return -1
+      }
+      return b[0].created_at.getTime() - a[0].created_at.getTime()
+    })
+    return res
+  }, [getPeerReviewReceived.data?.peer_review_question_submissions])
+
   if (getPeerReviewReceived.isLoading) {
     return <Spinner variant={"medium"} />
   }
@@ -126,40 +144,24 @@ const PeerReview: React.FunctionComponent<PeerReviewProps> = ({ id, submissionId
     return <ErrorBanner variant={"readOnly"} error={getPeerReviewReceived.error} />
   }
 
-  if (
-    getPeerReviewReceived.isSuccess &&
-    getPeerReviewReceived.data.peer_review_question_submissions.length > 0
-  ) {
-    const { peer_review_questions, peer_review_question_submissions } = getPeerReviewReceived.data
-    result = peer_review_question_submissions
-    questions = peer_review_questions
-  }
-
-  const ordered = result.sort((a, b) => b.created_at.getTime() - a.created_at.getTime())
-
-  const groupByPeerReviewSubmissionId = groupBy(
-    ordered,
-    (review) => review.peer_review_submission_id,
-  )
-
   return (
     <Wrapper>
       <details>
         <summary>
           {t("peer-reviews-received-from-other-student")}
-          <Notification>{Object.keys(groupByPeerReviewSubmissionId).length ?? "0"}</Notification>
+          <Notification>{data.length ?? "0"}</Notification>
         </summary>
-        {Object.values(groupByPeerReviewSubmissionId).map((item, index) => (
-          <PeerReviewQuestionAnswer
+        {data.map((item, index) => (
+          <ReceivedPeerReview
             orderNumber={index}
             key={index}
             review={item}
-            questions={questions}
+            questions={getPeerReviewReceived.data.peer_review_questions}
           />
         ))}
       </details>
     </Wrapper>
   )
 }
 
-export default PeerReview
+export default PeerReviewsReceived
diff --git a/services/course-material/src/components/ContentRenderer/moocfi/ExerciseBlock/index.tsx b/services/course-material/src/components/ContentRenderer/moocfi/ExerciseBlock/index.tsx
@@ -35,7 +35,7 @@ import withErrorBoundary from "../../../../shared-module/utils/withErrorBoundary
 import ExerciseTask from "./ExerciseTask"
 import GradingState from "./GradingState"
 import PeerReviewView from "./PeerReviewView"
-import PeerReviewReceived from "./PeerReviewView/PeerReviewReceivedComponent/index"
+import PeerReviewReceived from "./PeerReviewView/PeerReviewsReceivedComponent/index"
 import WaitingForPeerReviews from "./PeerReviewView/WaitingForPeerReviews"
 
 interface ExerciseBlockAttributes {

diff --git a/services/course-material/src/pages/_app.tsx b/services/course-material/src/pages/_app.tsx
@@ -1,13 +1,15 @@
 import { config } from "@fortawesome/fontawesome-svg-core"
 import { QueryClientProvider } from "@tanstack/react-query"
 import type { AppProps } from "next/app"
+import Script from "next/script"
 import React, { useEffect } from "react"
 
 import Layout from "../components/layout/Layout"
 import { LoginStateContextProvider } from "../shared-module/contexts/LoginStateContext"
 import useLanguage from "../shared-module/hooks/useLanguage"
 import { queryClient } from "../shared-module/services/appQueryClient"
 import GlobalStyles from "../shared-module/styles/GlobalStyles"
+import { OUTDATED_BROWSER_WARNING_SCRIPT } from "../shared-module/utils/constants"
 import generateWebVitalsReporter from "../shared-module/utils/generateWebVitalsReporter"
 import initI18n from "../shared-module/utils/initI18n"
 
@@ -42,14 +44,19 @@ const MyApp: React.FC<React.PropsWithChildren<AppProps>> = ({ Component, pagePro
   }, [language])
 
   return (
-    <QueryClientProvider client={queryClient}>
-      <GlobalStyles />
-      <LoginStateContextProvider>
-        <Layout>
-          <Component {...pageProps} />
-        </Layout>
-      </LoginStateContextProvider>
-    </QueryClientProvider>
+    <>
+      <Script noModule id="outdated-browser-warning">
+        {OUTDATED_BROWSER_WARNING_SCRIPT}
+      </Script>
+      <QueryClientProvider client={queryClient}>
+        <GlobalStyles />
+        <LoginStateContextProvider>
+          <Layout>
+            <Component {...pageProps} />
+          </Layout>
+        </LoginStateContextProvider>
+      </QueryClientProvider>
+    </>
   )
 }
 

diff --git a/...ices/headless-lms/migrations/20231006092702_increate_peer_review_question_length.down.sql b/...ices/headless-lms/migrations/20231006092702_increate_peer_review_question_length.down.sql
@@ -0,0 +1,2 @@
+ALTER TABLE peer_review_questions
+ALTER COLUMN question TYPE VARCHAR(128);
diff --git a/services/headless-lms/migrations/20231006092702_increate_peer_review_question_length.up.sql b/services/headless-lms/migrations/20231006092702_increate_peer_review_question_length.up.sql
@@ -0,0 +1,2 @@
+ALTER TABLE peer_review_questions
+ALTER COLUMN question TYPE VARCHAR(1000);
diff --git a/services/main-frontend/src/pages/_app.tsx b/services/main-frontend/src/pages/_app.tsx
@@ -2,13 +2,15 @@ import { config } from "@fortawesome/fontawesome-svg-core"
 import { QueryClientProvider } from "@tanstack/react-query"
 import type { AppProps } from "next/app"
 import Head from "next/head"
+import Script from "next/script"
 import React, { useEffect } from "react"
 
 import Layout from "../components/Layout"
 import { LoginStateContextProvider } from "../shared-module/contexts/LoginStateContext"
 import useLanguage from "../shared-module/hooks/useLanguage"
 import { queryClient } from "../shared-module/services/appQueryClient"
 import GlobalStyles from "../shared-module/styles/GlobalStyles"
+import { OUTDATED_BROWSER_WARNING_SCRIPT } from "../shared-module/utils/constants"
 import generateWebVitalsReporter from "../shared-module/utils/generateWebVitalsReporter"
 import initI18n from "../shared-module/utils/initI18n"
 
@@ -43,6 +45,9 @@ const MyApp: React.FC<React.PropsWithChildren<AppProps>> = ({ Component, pagePro
 
   return (
     <>
+      <Script noModule id="outdated-browser-warning">
+        {OUTDATED_BROWSER_WARNING_SCRIPT}
+      </Script>
       {language && (
         <Head>
           <html lang={language} />

diff --git a/services/quizzes/src/components/SubmissionComponents/index.tsx b/services/quizzes/src/components/SubmissionComponents/index.tsx
diff --git a/...uizzes/src/components/widget/Checkbox.tsx → ...rcise/impl-by-quiz-item-type/Checkbox.tsx b/...uizzes/src/components/widget/Checkbox.tsx → ...rcise/impl-by-quiz-item-type/Checkbox.tsx
@@ -1,10 +1,10 @@
 import { css } from "@emotion/css"
 import React from "react"
 
-import { UserItemAnswerCheckbox } from "../../../types/quizTypes/answer"
-import { PublicSpecQuizItemCheckbox } from "../../../types/quizTypes/publicSpec"
-import withErrorBoundary from "../../shared-module/utils/withErrorBoundary"
-import MarkdownText from "../MarkdownText"
+import { UserItemAnswerCheckbox } from "../../../../../types/quizTypes/answer"
+import { PublicSpecQuizItemCheckbox } from "../../../../../types/quizTypes/publicSpec"
+import withErrorBoundary from "../../../../shared-module/utils/withErrorBoundary"
+import MarkdownText from "../../../MarkdownText"
 
 import { QuizItemComponentProps } from "."
 

diff --git a/...quizzes/src/components/widget/ChooseN.tsx → ...ercise/impl-by-quiz-item-type/ChooseN.tsx b/...quizzes/src/components/widget/ChooseN.tsx → ...ercise/impl-by-quiz-item-type/ChooseN.tsx
@@ -2,11 +2,11 @@ import { css } from "@emotion/css"
 import _ from "lodash"
 import React from "react"
 
-import { UserItemAnswerChooseN } from "../../../types/quizTypes/answer"
-import { PublicSpecQuizItemChooseN } from "../../../types/quizTypes/publicSpec"
-import { respondToOrLarger } from "../../shared-module/styles/respond"
-import withErrorBoundary from "../../shared-module/utils/withErrorBoundary"
-import { quizTheme } from "../../styles/QuizStyles"
+import { UserItemAnswerChooseN } from "../../../../../types/quizTypes/answer"
+import { PublicSpecQuizItemChooseN } from "../../../../../types/quizTypes/publicSpec"
+import { respondToOrLarger } from "../../../../shared-module/styles/respond"
+import withErrorBoundary from "../../../../shared-module/utils/withErrorBoundary"
+import { quizTheme } from "../../../../styles/QuizStyles"
 
 import { QuizItemComponentProps } from "."
 

diff --git a/...components/widget/ClosedEndedQuestion.tsx → ...by-quiz-item-type/ClosedEndedQuestion.tsx b/...components/widget/ClosedEndedQuestion.tsx → ...by-quiz-item-type/ClosedEndedQuestion.tsx
@@ -1,13 +1,13 @@
 import React, { useCallback, useId } from "react"
 import { useTranslation } from "react-i18next"
 
-import { UserItemAnswerClosedEndedQuestion } from "../../../types/quizTypes/answer"
-import { PublicSpecQuizItemClosedEndedQuestion } from "../../../types/quizTypes/publicSpec"
-import TextField from "../../shared-module/components/InputFields/TextField"
-import { stripNonPrintableCharacters } from "../../shared-module/utils/strings"
-import withErrorBoundary from "../../shared-module/utils/withErrorBoundary"
-import MarkdownText from "../MarkdownText"
-import CloseEndedQuestionWrapper from "../Shared/CloseEndedQuestionWrapper"
+import { UserItemAnswerClosedEndedQuestion } from "../../../../../types/quizTypes/answer"
+import { PublicSpecQuizItemClosedEndedQuestion } from "../../../../../types/quizTypes/publicSpec"
+import TextField from "../../../../shared-module/components/InputFields/TextField"
+import { stripNonPrintableCharacters } from "../../../../shared-module/utils/strings"
+import withErrorBoundary from "../../../../shared-module/utils/withErrorBoundary"
+import MarkdownText from "../../../MarkdownText"
+import CloseEndedQuestionWrapper from "../../../Shared/CloseEndedQuestionWrapper"
 
 import { QuizItemComponentProps } from "."
 

diff --git a/...s/quizzes/src/components/widget/Essay.tsx → ...Exercise/impl-by-quiz-item-type/Essay.tsx b/...s/quizzes/src/components/widget/Essay.tsx → ...Exercise/impl-by-quiz-item-type/Essay.tsx
@@ -2,11 +2,11 @@ import { css } from "@emotion/css"
 import React, { useMemo } from "react"
 import { useTranslation } from "react-i18next"
 
-import { UserItemAnswerEssay } from "../../../types/quizTypes/answer"
-import { PublicSpecQuizItemEssay } from "../../../types/quizTypes/publicSpec"
-import TextArea from "../../shared-module/components/InputFields/TextAreaField"
-import { wordCount } from "../../shared-module/utils/strings"
-import withErrorBoundary from "../../shared-module/utils/withErrorBoundary"
+import { UserItemAnswerEssay } from "../../../../../types/quizTypes/answer"
+import { PublicSpecQuizItemEssay } from "../../../../../types/quizTypes/publicSpec"
+import TextArea from "../../../../shared-module/components/InputFields/TextAreaField"
+import { wordCount } from "../../../../shared-module/utils/strings"
+import withErrorBoundary from "../../../../shared-module/utils/withErrorBoundary"
 
 import { QuizItemComponentProps } from "."