From 98e85a1ae32586c03e7695427bb0adae31a08e38 Mon Sep 17 00:00:00 2001
From: MrFry <mrfry@airmail.cc>
Date: Mon, 4 May 2020 15:10:52 +0200
Subject: [PATCH] Added addQuestion page

---
 src/data/tabs.json               |   4 +
 src/pages/addQuestion.js         | 300 +++++++++++++++++++++++++++++++
 src/pages/addQuestion.module.css |  85 +++++++++
 3 files changed, 389 insertions(+)
 create mode 100644 src/pages/addQuestion.js
 create mode 100644 src/pages/addQuestion.module.css

diff --git a/src/data/tabs.json b/src/data/tabs.json
index e7e44f1..100ee65 100644
--- a/src/data/tabs.json
+++ b/src/data/tabs.json
@@ -15,6 +15,10 @@
     "href": "/subjectBrowser",
     "text": "Tárgyak"
   },
+  "addQuestion": {
+    "href": "/addQuestion",
+    "text": "Kérdés beküldés"
+  },
   "pwRequest": {
     "href": "/pwRequest",
     "text": "Jelszó kérés"
diff --git a/src/pages/addQuestion.js b/src/pages/addQuestion.js
new file mode 100644
index 0000000..c3aa5d7
--- /dev/null
+++ b/src/pages/addQuestion.js
@@ -0,0 +1,300 @@
+import React, { useState, useEffect } from 'react'
+import fetch from 'unfetch'
+
+import LoadingIndicator from '../components/LoadingIndicator.js'
+
+import styles from './addQuestion.module.css'
+import constants from '../constants.json'
+
+const getDefaultQuestion = () => {
+  return {
+    Q: '',
+    A: '',
+    data: { type: 'simple' }
+  }
+}
+
+export default function AddQuestion (props) {
+  const [form, setForm] = useState({ quiz: [getDefaultQuestion()] })
+  const [subjects, setSubjects] = useState(undefined)
+  const [isNewSubj, setIsNewSubj] = useState(false)
+
+  useEffect(() => {
+    console.info('Fetching subject names')
+    fetch(`${constants.apiUrl}dataCount?detailed=true`, {
+      credentials: 'include'
+    })
+      .then((resp) => {
+        return resp.json()
+      })
+      .then((data) => {
+        let res = data.map((x) => {
+          return x.name
+        })
+        res = res.sort()
+        setSubjects(res)
+      })
+  }, [])
+
+  const onChange = (newData, index) => {
+    let quiz = form.quiz
+    quiz[index] = newData
+
+    setForm({
+      ...form,
+      quiz: quiz
+    })
+  }
+
+  const renderQuestionInput = (params) => {
+    const { index, onChange } = params
+    const currData = form.quiz[index]
+    const { Q, A, data } = form.quiz[index] || {}
+
+    return (
+      <div className={styles.questionContainer}>
+        <div
+          className={styles.inputContainer}
+        >
+          <input
+            placeholder='Kérdés...'
+            type='text'
+            onChange={e => onChange({ ...currData, Q: e.target.value }, index)}
+            value={Q || ''}
+            className={styles.questionInput}
+          />
+        </div>
+        <div
+          className={styles.inputContainer}
+        >
+          <input
+            placeholder='Válasz...'
+            type='text'
+            onChange={e => onChange({ ...currData, A: e.target.value }, index)}
+            value={A || ''}
+            className={styles.questionInput}
+          />
+        </div>
+        <div
+          className={styles.inputContainer}
+        >
+          <input
+            type='text'
+            onChange={e => {
+              // TODO: handle JSON
+              // try {
+              //   let newData = JSON.parse(e.target.value)
+              //   onChange({ ...currData, data: newData }, index)
+              // } catch (e) {
+
+              // }
+            }}
+            value={JSON.stringify(data) || ''}
+            className={styles.questionInput}
+          />
+          <span
+            className={styles.deleteButton}
+            onClick={() => deleteQuestion(index)}
+          >
+            Kérdés törlése
+          </span>
+        </div>
+        <hr />
+      </div>
+    )
+  }
+
+  const deleteQuestion = (index) => {
+    let quiz = form.quiz
+
+    quiz.splice(index, 1)
+
+    setForm({
+      ...form,
+      quiz: quiz
+    })
+  }
+
+  const handleSubmit = async () => {
+    if (!form.subj) {
+      alert('Nem választottál ki tantárgyat!') // eslint-disable-line
+      return
+    }
+    let isValid = form.quiz.every((x) => {
+      return x.Q && x.A
+    })
+    if (!isValid || form.quiz.length === 0) {
+      alert('Kérdés kitöltése kötelező!') // eslint-disable-line
+      return
+    }
+
+    const t = document.getElementById('cid').value
+    let cid = ''
+    let version = ''
+    if (t) {
+      cid = t.split('|')[0]
+      version = t.split('|')[1]
+    }
+
+    const rawResponse = await fetch(constants.apiUrl + 'isAdding', {
+      method: 'POST',
+      credentials: 'include',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        ...form,
+        id: cid,
+        version: 'WEBSITE',
+        scriptVersion: version
+      })
+    })
+    rawResponse.json()
+      .then((resp) => {
+        if (resp.success) {
+          alert('Sikeres beküldés, ' + resp.newQuestions + ' új kérdés') // eslint-disable-line
+        } else {
+          console.log(resp)
+          alert('Hiba beküldés közben :/') // eslint-disable-line
+        }
+      })
+      .catch((e) => {
+        alert('Hiba beküldés közben :/') // eslint-disable-line
+        console.log(e)
+      })
+  }
+
+  const renderStuff = (props) => {
+    return (
+      <div className={styles.feedback} >
+        {form.quiz.map((q, i) => {
+          return (
+            <div key={i}>
+              {renderQuestionInput({
+                index: i,
+                onChange
+              })}
+            </div>
+          )
+        })}
+        <div className={styles.buttonContainer} >
+          <button
+            className={styles.button}
+            onClick={() => {
+              let quiz = form.quiz
+              quiz.push(getDefaultQuestion())
+              setForm({
+                ...form,
+                quiz: quiz
+              })
+            }}
+          >
+            Új kérdés hozzáadása
+          </button>
+        </div>
+        <div className={styles.buttonContainer} >
+          <button
+            className={styles.button}
+            onClick={handleSubmit}
+          >
+            Kérdések beküldése
+          </button>
+        </div>
+        <input
+          type='text'
+          id='cid'
+          name='cid'
+          hidden
+        />
+      </div>
+    )
+  }
+
+  const renderSubjSelector = (props) => {
+    // TODO: handle if new subject
+    return (
+      <div className={styles.subjSelectorContainer}>
+        {isNewSubj
+          ? <input
+            placeholder='Új tárgy neve...'
+            type='text'
+            className={styles.questionInput}
+            onChange={(e) => {
+              setForm({
+                ...form,
+                subj: e.target.value
+              })
+            }} />
+          : <select
+            className={styles.subjSelector}
+            onChange={(e) => {
+              setForm({
+                ...form,
+                subj: subjects[e.target.value]
+              })
+            }}>
+            <option key={-1} value={-1}>Válassz egy tárgyat...</option>
+            {props.subjects.map((subjName, i) => {
+              return (
+                <option key={i} value={i}>{subjName}</option>
+              )
+            })}
+
+          </select>
+
+        }
+        <span
+          className={styles.newSubj}
+          onClick={() => { setIsNewSubj(!isNewSubj) }}
+        >
+          {isNewSubj
+            ? 'Létező tárgy ...'
+            : 'Új tárgy ...'
+          }
+        </span>
+      </div>
+    )
+  }
+
+  const renderUsage = () => {
+    return (
+      <ul className={styles.usage} >
+        <li>
+          Ezen az oldalon kérdéseket tudsz beküldeni manuálisan.
+        </li>
+        <li>
+          Egyszerre csak egy tárgyhoz lehet kérdéseket hozzáadni, de ahhoz bármennyit
+        </li>
+        <li>
+          Ezek a kérdések ellenőrizve lesznek hogy megvannak-e már
+        </li>
+        <li>
+          Kérdéseknél az utolsó sor (ahol a JSON cucc van) jelenleg nem módosítható, csak olyan
+          kérdéseket lehet beküldeni, amik sima kérdés-válaszok, szóval pl nincs benne kép. Ez
+          később bővül majd
+        </li>
+        <li>
+          Bármilyen szöveget beküldhettek, de ne tegyétek, más felhasználókkal és magatokkal szúrtok
+          ki, ty!
+        </li>
+      </ul>
+
+    )
+  }
+
+  if (subjects) {
+    return (
+      <div>
+        {renderUsage()}
+        <hr />
+        {renderSubjSelector({ subjects })}
+        {renderStuff()}
+      </div>
+    )
+  } else {
+    return (
+      <LoadingIndicator />
+    )
+  }
+}
diff --git a/src/pages/addQuestion.module.css b/src/pages/addQuestion.module.css
new file mode 100644
index 0000000..2710d89
--- /dev/null
+++ b/src/pages/addQuestion.module.css
@@ -0,0 +1,85 @@
+.questionInput {
+  flex-grow: 1;
+  font-size: 22px;
+  background-color: var(--background-color);
+  color: white;
+  border: none;
+  padding: 8px;
+  border: 1px solid;
+  border-color: var(--background-color);
+}
+
+.questionContainer {
+  margin-top: 30px;
+  margin-bottom: 30px;
+  margin-right: 10px;
+  margin-left: 10px;
+}
+
+.inputContainer {
+  width: 100%;
+  display: flex;
+}
+
+.buttonContainer {
+  text-align: "center";
+  width: 200px;
+  margin: 0 auto;
+  padding: 10px;
+}
+
+.deleteButton {
+  padding: 6px;
+  font-size: 22px;
+  background-color: var(--background-color);
+  color: white;
+  cursor: pointer;
+  border: 1px solid;
+  border-color: var(--background-color);
+}
+
+.questionInput:hover {
+  border: 1px solid;
+}
+
+.deleteButton:hover {
+  border: 1px solid;
+}
+
+.button {
+  cursor: pointer;
+  background-color: var(--text-color);
+  border: none;
+  padding: 10px 30px;
+  color: white;
+  width: 200px;
+}
+
+.subjSelectorContainer {
+  width: 100%;
+  display: flex;
+}
+
+.subjSelector {
+  flex-grow: 1;
+  background-color: var(--background-color);
+  font-size: 24px;
+  color: white;
+  height: 50px;
+}
+
+.newSubj {
+  padding: 10px;
+  cursor: pointer;
+  font-size: 20px;
+  color: white;
+}
+
+.usage li {
+  margin: 5px;
+}
+
+.usage {
+  font-size: 18px;
+  color: white;
+}