feat(client): indicate problem review more clearly by tag (#548)

ia-toki · Oct 23, 2023 · f88fbb5 · f88fbb5
1 parent dd0008e
commit f88fbb5
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 12 deletions.
diff --git a/...t/src/components/ProblemWorksheetCard/Programming/ProblemReviewCard/ProblemReviewCard.jsx b/...t/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/...components/ProblemWorksheetCard/Programming/ProblemStatementCard/ProblemStatementCard.jsx b/...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
@@ -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/...e/problems/single/Programming/ChapterProblemStatementPage/ChapterProblemStatementPage.jsx b/...e/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>
   );