qmining-data-editor/src/pages/index.js

import React, { useState, useEffect } from 'react'
import fetch from 'unfetch'

import SubjectView from '../components/subjectView'
import QuestionView from '../components/questionView'
import LoadingIndicator from '../components/LoadingIndicator'

import styles from './index.module.css'
import constants from '../constants.json'

const views = {
  subject: 'SUBJECT',
  question: 'QUESTION'
}

// TODO: Add question on subjects view
// TODO: Add subject on subjects view
// TODO: question.data editor
// TODO: edit \n-s in questions / answers

export default function Index (props) {
  const [data, setData] = useState(null)
  const [view, setView] = useState(views.subject)
  const [error, setError] = useState(null)
  const [password, setPassword] = useState('')
  const [editedQuestions, setEditedQuestions] = useState({})

  const [initialCount, setInitialCount] = useState({})

  const getCount = (d) => {
    return {
      subjectCount: d.Subjects.length,
      questionCount: d.Subjects.reduce((acc, subj) => {
        acc += subj.Questions.length
        return acc
      }, 0)
    }
  }

  const setIndexes = (d) => {
    d.Subjects.forEach((subj, i) => {
      subj.ind = i
      subj.Questions.forEach((question, j) => {
        question.ind = j
      })
    })
    return d
  }

  const LoadData = () => {
    setData(null)
    const toFetch = `${constants.apiUrl}data.json`
    console.info('Fetching', toFetch)
    fetch(toFetch)
      .then((resp) => {
        if (resp && resp.ok) {
          return resp.json()
        } else {
          console.error('Error while fetching data')
          setError('Error while fetching data')
        }
      })
      .then((resp) => {
        setData(setIndexes(resp))
        const count = getCount(resp)
        console.info(`Data count`, count)
        setInitialCount(count)
      })
      .catch((e) => {
        console.error(e)
        console.error('Error while fetching data')
        setError('Error while fetching data')
      })
  }

  useEffect(() => {
    LoadData()
  }, [])

  if (error) {
    return (
      <div>
        {error}
      </div>
    )
  }

  const deleteQuestion = (subjInd, questionInd) => {
    data.Subjects[subjInd].Questions.splice(questionInd, 1)

    setData({
      ...setIndexes(data)
    })
  }

  const onChange = (subjInd, questionInd, newVal) => {
    const key = subjInd + '/' + questionInd
    setEditedQuestions({
      ...editedQuestions,
      [key]: editedQuestions[key] ? editedQuestions[key] + 1 : 1
    })

    data.Subjects[subjInd].Questions[questionInd] = newVal
    setData({
      ...data
    })
  }

  const SendDataToServer = async () => {
    const rawResponse = await fetch(constants.apiUrl + 'uploaddata', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        newData: data,
        count: getCount(data),
        initialCount: initialCount,
        password: password,
        editedQuestions: editedQuestions
      })
    })
    rawResponse.json()
      .then((resp) => {
        if (resp.status === 'ok') {
          alert(`Successfull upload! thanks ${resp.user}!`) // eslint-disable-line
          console.log('OK')
        } else if (resp.status === 'invalidPass') {
          alert('Invalid password!') // eslint-disable-line
          console.log('invalidPass')
        } else {
          alert('Error while uploading (server side)! More in console') // eslint-disable-line
          console.error('RESPONSE', resp)
          console.error(resp.message)
        }
      })
      .catch((e) => {
        alert('Error while uploading (client side)! More in console') // eslint-disable-line
        console.error('Error posting data', e)
      })
  }

  const renderView = () => {
    if (view === views.subject) {
      return (
        <SubjectView
          onChange={onChange}
          data={data}
          deleteQuestion={deleteQuestion}
        />
      )
    } else if (view === views.question) {
      return (
        <QuestionView
          onChange={onChange}
          data={data}
          deleteQuestion={deleteQuestion}
        />
      )
    } else {
      return (
        <div>
          No view!
        </div>
      )
    }
  }

  if (!data) {
    return (
      <LoadingIndicator />
    )
  }

  return (
    <div>
      <div className={styles.optionsButtonContainer}>
        <span
          onClick={() => {
            LoadData()
          }}
        >
          Reload data
        </span>
        <span>
          <input
            placeholder='Password for uploading'
            type='text'
            value={password}
            onChange={(e) => { setPassword(e.target.value) }}
          />
        </span>
        <span
          onClick={() => {
            SendDataToServer()
          }}
        >
          Upload data
        </span>
      </div>
      <div className={styles.viewButtonContainer}>
        <span
          onClick={() => { setView(views.subject) }}>
            Subject view
        </span>
        <span
          onClick={() => { setView(views.question) }}>
            Question view
        </span>
      </div>
      {renderView()}
    </div>
  )
}