qmining-page/src/pages/userQuestions.js

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

import LoadingIndicator from '../components/LoadingIndicator'
import Layout from '../components/layout'

import constants from '../constants.json'

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

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

  if (loaded) {
    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 (
      <Layout currPageName='UserQuestions' >
        <div className='uquestionscontainer'>
          {questions}
        </div>
      </Layout>
    )
  } else {
    return (
      <Layout currPageName='UserQuestions' >
        <LoadingIndicator />
      </Layout>
    )
  }
}