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

import LoadingIndicator from '../components/LoadingIndicator'

import constants from '../constants.json'

export default function UserQuestions (props) {
  const [qa, setQa] = useState(null)

  useEffect(() => {
    console.info('Fetching qa.json')
    fetch(`${constants.apiUrl}qa.json`) // eslint-disable-line
      .then((resp) => {
        return resp.json()
      })
      .then((data) => {
        setQa(data)
      })
  }, [])

  if (qa) {
    let questions = Object.keys(qa).map((key, i) => {
      let q = qa[key]
      return (
        <div key={key} className='uquestioncontainer'>
          <div >
            <div className='uquestionnumber'>
              {key}:
            </div>
            <div className='uquestion'>
              {q.q}
            </div>
          </div>
          <div className='uanswer'>
            {q.a}
          </div>
        </div>
      )
    }).reverse()

    return (
      <div className='uquestionscontainer'>
        {questions}
      </div>
    )
  } else {
    return (
      <LoadingIndicator />
    )
  }
}