From f88fbb550d4718730f39817fc37741cf5cb8844f Mon Sep 17 00:00:00 2001
From: Ashar Fuadi <fushar@gmail.com>
Date: Mon, 23 Oct 2023 21:40:47 +0700
Subject: [PATCH] feat(client): indicate problem review more clearly by tag
 (#548)

---
 .../ProblemReviewCard/ProblemReviewCard.jsx   | 21 +++++++++++++++++++
 .../ProblemStatementCard.jsx                  | 11 +++++++---
 .../Programming/ProblemWorksheetCard.jsx      |  3 ++-
 .../ChapterProblemStatementPage.jsx           | 14 ++++++-------
 4 files changed, 37 insertions(+), 12 deletions(-)
 create mode 100644 judgels-client/src/components/ProblemWorksheetCard/Programming/ProblemReviewCard/ProblemReviewCard.jsx

diff --git a/judgels-client/src/components/ProblemWorksheetCard/Programming/ProblemReviewCard/ProblemReviewCard.jsx b/judgels-client/src/components/ProblemWorksheetCard/Programming/ProblemReviewCard/ProblemReviewCard.jsx
new file mode 100644
index 000000000..9c4ec33ef
--- /dev/null
+++ b/judgels-client/src/components/ProblemWorksheetCard/Programming/ProblemReviewCard/ProblemReviewCard.jsx
@@ -0,0 +1,21 @@
+import { Intent, Tag } from '@blueprintjs/core';
+import { ContentCard } from '../../../ContentCard/ContentCard';
+import { KatexText } from '../../../KatexText/KatexText';
+
+export function ProblemReviewCard({ alias, statement: { title }, editorial: { text } }) {
+  return (
+    <div class="programming-problem-worksheet">
+      <ContentCard>
+        <Tag intent={Intent.SUCCESS}>REVIEW</Tag>
+        <h2 className="programming-problem-statement__name">
+          {alias ? `${alias}. ` : ''}
+          {title}
+        </h2>
+
+        <div className="programming-problem-statement__text">
+          <KatexText key={alias}>{text}</KatexText>
+        </div>
+      </ContentCard>
+    </div>
+  );
+}
diff --git a/judgels-client/src/components/ProblemWorksheetCard/Programming/ProblemStatementCard/ProblemStatementCard.jsx b/judgels-client/src/components/ProblemWorksheetCard/Programming/ProblemStatementCard/ProblemStatementCard.jsx
index e82693fa1..a23057e20 100644
--- a/judgels-client/src/components/ProblemWorksheetCard/Programming/ProblemStatementCard/ProblemStatementCard.jsx
+++ b/judgels-client/src/components/ProblemWorksheetCard/Programming/ProblemStatementCard/ProblemStatementCard.jsx
@@ -5,7 +5,12 @@ import { KatexText } from '../../../KatexText/KatexText';
 
 import './ProblemStatementCard.scss';
 
-export function ProblemStatementCard({ alias, statement: { title, text }, limits: { timeLimit, memoryLimit } }) {
+export function ProblemStatementCard({
+  alias,
+  statement: { title, text },
+  limits: { timeLimit, memoryLimit },
+  showTitle = true,
+}) {
   const renderTimeLimit = timeLimit => {
     if (!timeLimit) {
       return '-';
@@ -29,8 +34,8 @@ export function ProblemStatementCard({ alias, statement: { title, text }, limits
   return (
     <ContentCard>
       <h2 className="programming-problem-statement__name">
-        {alias ? `${alias}. ` : ''}
-        {title}
+        {showTitle && alias ? `${alias}. ` : ''}
+        {showTitle && title}
       </h2>
       <HTMLTable condensed className="programming-problem-statement__limits">
         <tbody>
diff --git a/judgels-client/src/components/ProblemWorksheetCard/Programming/ProblemWorksheetCard.jsx b/judgels-client/src/components/ProblemWorksheetCard/Programming/ProblemWorksheetCard.jsx
index 6736633e8..f195c0b30 100644
--- a/judgels-client/src/components/ProblemWorksheetCard/Programming/ProblemWorksheetCard.jsx
+++ b/judgels-client/src/components/ProblemWorksheetCard/Programming/ProblemWorksheetCard.jsx
@@ -6,12 +6,13 @@ import './ProblemWorksheetCard.scss';
 export function ProblemWorksheetCard({
   alias,
   worksheet: { statement, limits, submissionConfig, reasonNotAllowedToSubmit },
+  showTitle,
   submissionWarning,
   gradingLanguage,
   onSubmit,
 }) {
   const renderStatement = () => {
-    return <ProblemStatementCard alias={alias} statement={statement} limits={limits} />;
+    return <ProblemStatementCard alias={alias} statement={statement} limits={limits} showTitle={showTitle} />;
   };
 
   const renderSubmission = () => {
diff --git a/judgels-client/src/routes/courses/courses/single/chapters/single/problems/single/Programming/ChapterProblemStatementPage/ChapterProblemStatementPage.jsx b/judgels-client/src/routes/courses/courses/single/chapters/single/problems/single/Programming/ChapterProblemStatementPage/ChapterProblemStatementPage.jsx
index 3b6bde73b..1f8f10438 100644
--- a/judgels-client/src/routes/courses/courses/single/chapters/single/problems/single/Programming/ChapterProblemStatementPage/ChapterProblemStatementPage.jsx
+++ b/judgels-client/src/routes/courses/courses/single/chapters/single/problems/single/Programming/ChapterProblemStatementPage/ChapterProblemStatementPage.jsx
@@ -6,7 +6,7 @@ import StatementLanguageWidget from '../../../../../../../../../../components/La
 import { selectCourse } from '../../../../../../../modules/courseSelectors';
 import { selectCourseChapter } from '../../../../../modules/courseChapterSelectors';
 import { ProblemWorksheetCard } from '../../../../../../../../../../components/ProblemWorksheetCard/Programming/ProblemWorksheetCard';
-import { ProblemEditorialCard } from '../../../../../../../../../../components/ProblemWorksheetCard/Programming/ProblemEditorialCard/ProblemEditorialCard';
+import { ProblemReviewCard } from '../../../../../../../../../../components/ProblemWorksheetCard/Programming/ProblemReviewCard/ProblemReviewCard';
 
 import './ChapterProblemStatementPage.scss';
 
@@ -27,14 +27,12 @@ export function ChapterProblemStatementPage({ worksheet }) {
     );
   };
 
-  const renderEditorial = () => {
+  const renderReview = () => {
     const { problem, editorial } = worksheet;
     if (!editorial) {
       return null;
     }
-    return (
-      <ProblemEditorialCard alias={problem.alias} statement={worksheet.worksheet.statement} editorial={editorial} />
-    );
+    return <ProblemReviewCard alias={problem.alias} statement={worksheet.worksheet.statement} editorial={editorial} />;
   };
 
   const renderStatement = () => {
@@ -44,9 +42,9 @@ export function ChapterProblemStatementPage({ worksheet }) {
       return (
         <details>
           <summary>
-            <small>Click to view original problem statement</small>
+            <small>View problem statement</small>
           </summary>
-          <ProblemWorksheetCard alias={problem.alias} worksheet={worksheet.worksheet} />
+          <ProblemWorksheetCard alias={problem.alias} worksheet={worksheet.worksheet} showTitle={false} />
         </details>
       );
     }
@@ -57,7 +55,7 @@ export function ChapterProblemStatementPage({ worksheet }) {
   return (
     <ContentCard className="chapter-programming-problem-statement-page">
       {renderStatementLanguageWidget()}
-      {renderEditorial()}
+      {renderReview()}
       {renderStatement()}
     </ContentCard>
   );