feat(TopicPageEditor): display colored 'review state' of topic prompt…

…s near topic prompt
Sefaria · Jan 23, 2024 · 60fb92f · 60fb92f
1 parent 2ca2138
commit 60fb92f
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 0 deletions.
diff --git 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
@@ -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}} />