From 60fb92f7ee6a3339118dfb7ede9076a04888767f Mon Sep 17 00:00:00 2001
From: yonadavGit <yonadav.le@gmail.com>
Date: Tue, 23 Jan 2024 21:30:15 +0200
Subject: [PATCH] feat(TopicPageEditor): display colored 'review state' of
 topic prompts near topic prompt

---
 static/css/s2.css   | 16 ++++++++++++++++
 static/js/Story.jsx | 23 +++++++++++++++++++++++
 2 files changed, 39 insertions(+)

diff --git a/static/css/s2.css b/static/css/s2.css
index a53431c3f8..16e927922d 100644
--- a/static/css/s2.css
+++ b/static/css/s2.css
@@ -7584,6 +7584,22 @@ a .button:hover {
   width: -moz-fit-content;
   width: fit-content;
 }
+
+.button.extraSmall.reviewState {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+.button.extraSmall.reviewState.reviewed {
+  background-color: #5D956F;
+
+}
+.button.extraSmall.reviewState.notReviewed {
+  background-color: #CB6158;
+}
+.button.extraSmall.reviewState.edited {
+  background-color: yellowgreen;
+}
 .button.extraSmall {
   border-radius: 6px;
   box-shadow: none;
diff --git a/static/js/Story.jsx b/static/js/Story.jsx
index da5f0f6225..14a9fb4f9e 100644
--- a/static/js/Story.jsx
+++ b/static/js/Story.jsx
@@ -126,7 +126,29 @@ StorySheetList.propTypes = {
     sheets: PropTypes.arrayOf(sheetPropType).isRequired,
     toggleSignUpModal: PropTypes.func
 };
+function toCamelCase(str) {
+  return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function(word, index) {
+    return index === 0 ? word.toLowerCase() : word.toUpperCase();
+  }).replace(/\s+/g, '');
+}
+function capitalizeWords(str) {
+  const words = str.split(' ');
 
+  const capitalizedWords = words.map(word => {
+    return word.charAt(0).toUpperCase() + word.slice(1);
+  });
+  const result = capitalizedWords.join(' ');
+
+  return result;
+}
+const ReviewStateIndicator = ({reviewState}) => {
+    let reviewStateCamel = toCamelCase(reviewState)
+    let reviewStateCapitalized = capitalizeWords(reviewState)
+    return(
+    <div className={`button extraSmall reviewState ${reviewStateCamel}`}>
+        {reviewStateCapitalized}
+    </div>);
+};
 const IntroducedTextPassage = ({text, topic, afterSave, toggleSignUpModal, bodyTextIsLink=false}) => {
     if (!text.ref) { return null; }
     const versions = text.versions || {}
@@ -142,6 +164,7 @@ const IntroducedTextPassage = ({text, topic, afterSave, toggleSignUpModal, bodyT
         <StoryFrame cls="introducedTextPassageStory">
             <CategoryHeader type="sources" data={[topic, text]} buttonsToDisplay={["edit"]}>
                 <StoryTitleBlock en={text.descriptions?.en?.title} he={text.descriptions?.he?.title}/>
+                <ReviewStateIndicator reviewState={text.descriptions?.en?.review_state}></ReviewStateIndicator>
             </CategoryHeader>
             <div className={"systemText learningPrompt"}>
                 <InterfaceText text={{"en": text.descriptions?.en?.prompt, "he": text.descriptions?.he?.prompt}} />