Complete project redo, got carried away, and forgot to commit during rewriting

src/components/Subject.js

@@ -1,33 +1,101 @@
-import React, { PureComponent } from 'react'
+import React from 'react'
 
 import Question from './Question.js'
 
-class Subject extends PureComponent {
-  render () {
-    const { subj, onChange, deleteQuestion } = this.props
+import styles from './subject.module.css'
+import commonStyles from '../commonStyles.module.css'
 
-    if (subj) {
-      return (
-        <div >
-          {subj.Questions.map((question, i) => {
-            return (
-              <Question
-                deleteQuestion={deleteQuestion}
-                onChange={onChange}
-                key={i}
-                subjInd={subj.ind}
-                question={question}
-              />
-            )
-          })}
+function DeletedQuestion({ reset }) {
+  return (
+    <div>
+      <div className={styles.deletedQuestion}>Törölt kérdés</div>
+      <div className={commonStyles.actions}>
+        <div
+          onClick={() => {
+            reset()
+          }}
+        >
+          Visszaállítás
         </div>
-      )
-    } else {
-      return (
-        <div />
-      )
-    }
-  }
+      </div>
+    </div>
+  )
 }
 
-export default Subject
+export default function Subject(props) {
+  const {
+    subj,
+    unsavedIndexes,
+    deletedIndexes,
+    editedIndexes,
+    resetQuestion,
+    handleQuestionChange,
+    saveQuestion,
+    deleteQuestion,
+  } = props
+
+  if (subj) {
+    return (
+      <div className={styles.questionContainer}>
+        {subj.Questions.map((question, i) => {
+          // FIXME: list edited questions first?
+          const unsaved = unsavedIndexes.includes(i)
+          const edited = editedIndexes.includes(i)
+          const deleted = deletedIndexes.includes(i)
+          return (
+            <React.Fragment key={i}>
+              <hr />
+              {deleted ? (
+                <DeletedQuestion
+                  reset={() => {
+                    resetQuestion(i)
+                  }}
+                  index={i}
+                />
+              ) : (
+                <div
+                  className={`${unsaved ? styles.unsaved : ''} ${
+                    edited ? styles.edited : ''
+                  }`}
+                >
+                  <Question
+                    index={i}
+                    onChange={(newq) => {
+                      handleQuestionChange(newq, i)
+                    }}
+                    question={question}
+                  />
+                  <div className={commonStyles.actions}>
+                    <div
+                      onClick={() => {
+                        resetQuestion(i)
+                      }}
+                    >
+                      Visszaállítás
+                    </div>
+                    <div
+                      onClick={() => {
+                        saveQuestion(i)
+                      }}
+                    >
+                      {edited ? 'Kérdés mentve' : 'Kérdés mentése'}
+                    </div>
+                    <div
+                      onClick={() => {
+                        deleteQuestion(i)
+                      }}
+                    >
+                      Kérdés törlése
+                    </div>
+                  </div>
+                </div>
+              )}
+            </React.Fragment>
+          )
+        })}
+      </div>
+    )
+  } else {
+    return <div />
+  }
+}