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

src/components/Question.js

@@ -1,78 +1,121 @@
-import React, { PureComponent } from 'react'
+import React from 'react'
 
 import styles from './question.module.css'
 
-class Question extends PureComponent {
-  render () {
-    const { subjInd, question, onChange, deleteQuestion } = this.props
+const overflowLength = 140
 
-    let qdata = question.data
-    if (typeof qdata === 'object' && qdata.type === 'simple') {
-      qdata = ''
-    }
-    if (qdata) {
-      try {
-        qdata = JSON.stringify(qdata)
-      } catch (e) {}
-    }
+export default function Question({ question, onChange, index }) {
+  // FIXME: focus change when input changes to textarea
+  const possibleAnswers =
+    question.possibleAnswers || question.data.possibleAnswers
 
-    const qChange = (e) => {
-      onChange(subjInd, question.ind, {
-        ...question,
-        [e.target.name]: e.target.value
-      })
-    }
-
-    const qDataChange = (e) => {
-      try {
-        let newData = JSON.parse(e.target.value)
-        onChange(subjInd, question.ind, {
-          ...question,
-          data: newData
-        })
-      } catch (e) {
-        console.log('invalid JSON')
-      }
-    }
-
-    return (
-      <div className={styles.questionContainer}>
-        <div className={styles.inputContainer}>
-          <input
-            className={styles.questionInput}
-            type='text'
-            value={question.Q}
-            onChange={qChange}
-            name='Q'
-          />
-        </div>
-        <div className={styles.inputContainer}>
-          <input
-            className={styles.questionInput}
-            type='text'
-            value={question.A}
-            onChange={qChange}
-            name='A'
-          />
-        </div>
-        <div className={styles.inputContainer}>
-          <input
-            className={styles.questionInput}
-            type='text'
-            value={JSON.stringify(question.data)}
-            onChange={qDataChange}
-            name='data'
-          />
-          <span
-            className={styles.deleteButton}
-            onClick={() => { deleteQuestion(subjInd, question.ind) }}
-          >
-            Delete question
-          </span>
-        </div>
-      </div>
-    )
-  }
+  return (
+    <div className={styles.questionContainer}>
+      {question.Q && question.Q.length > overflowLength ? (
+        <textarea
+          placeholder="Kérdés..."
+          value={question.Q}
+          onChange={(e) => {
+            onChange({
+              ...question,
+              Q: e.target.value,
+            })
+          }}
+        />
+      ) : (
+        <input
+          placeholder="Kérdés..."
+          type="text"
+          value={question.Q}
+          onChange={(e) => {
+            onChange({
+              ...question,
+              Q: e.target.value,
+            })
+          }}
+        />
+      )}
+      {question.A && question.A.length > overflowLength ? (
+        <textarea
+          placeholder="Helyes válasz..."
+          value={question.A}
+          onChange={(e) => {
+            onChange({
+              ...question,
+              A: e.target.value,
+            })
+          }}
+        />
+      ) : (
+        <input
+          placeholder="Helyes válasz..."
+          type="text"
+          value={question.A}
+          onChange={(e) => {
+            onChange({
+              ...question,
+              A: e.target.value,
+            })
+          }}
+        />
+      )}
+      {possibleAnswers && possibleAnswers.length > 0 ? (
+        <>
+          <div className={styles.text}>Lehetséges válaszok:</div>
+          <div className={styles.possibleAnswers}>
+            {possibleAnswers.map((possibleAnswer, i) => {
+              return (
+                <div key={i}>
+                  <div>
+                    <input
+                      onChange={() => {
+                        onChange({
+                          ...question,
+                          A: possibleAnswer,
+                        })
+                      }}
+                      checked={possibleAnswer === question.A}
+                      value={possibleAnswer}
+                      type="radio"
+                      name={`possiblea${index ? index : ''}`}
+                    />
+                    <span>{possibleAnswer}</span>
+                  </div>
+                  <span
+                    onClick={() => {
+                      const newPossibleAnswers = possibleAnswers.filter(
+                        (pa, j) => {
+                          return j !== i
+                        }
+                      )
+                      // FIXME: 2 possible answers?
+                      onChange({
+                        ...question,
+                        data: {
+                          ...question.data,
+                          possibleAnswers: newPossibleAnswers,
+                        },
+                        possibleAnswers: newPossibleAnswers,
+                      })
+                    }}
+                    className={styles.delete}
+                  >
+                    Törlés
+                  </span>
+                </div>
+              )
+            })}
+          </div>
+        </>
+      ) : null}
+      <input
+        type="text"
+        value={JSON.stringify(question.data)}
+        name="data"
+        onChange={(e) => {
+          console.log(e.target.value)
+        }}
+      />
+    </div>
+  )
 }
-
-export default Question