qmining-page/src/pages/addQuestion.js

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 [isSubmitting, setIsSubmitting] = useState(false)
  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]
    }

    setIsSubmitting(true)

    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
          setIsSubmitting(false)
        } else {
          console.log(resp)
          alert('Hiba beküldés közben :/') // eslint-disable-line
          setIsSubmitting(false)
        }
      })
      .catch((e) => {
        alert('Hiba beküldés közben :/') // eslint-disable-line
        console.log(e)
        setIsSubmitting(false)
      })
  }

  const renderStuff = (props) => {
    return (
      <div>
        {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>
        {isSubmitting
          ? <div className={styles.issubmitting}>
              Kérdések feldolgozása folyamatban, ha sokat küldtél, akkor több perc is lehet
          </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>
          Ezek a kérdések ellenőrizve lesznek hogy megvannak-e már
        </li>
        <li>
          Ha több válasz van, akkor ', '-vel válaszd el őket ( "válasz1, válasz2, válasz3" )
        </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>
          Ha sok új kérdést küldsze be, akkor akár több percig is eltarthat a dolog. Akárhány
          kérdést be lehet egyszerre küldeni, de max 10-15 az ajánlott
        </li>
        <li>
          Bármilyen szöveget beküldhettek, de ne tegyétek, más felhasználóknak és magatoknak lesz
          rosz, ty!
        </li>
      </ul>

    )
  }

  if (subjects) {
    return (
      <div>
        {renderUsage()}
        <hr />
        {renderSubjSelector({ subjects })}
        {renderStuff()}
      </div>
    )
  } else {
    return (
      <LoadingIndicator />
    )
  }
}