qmining-page/src/pages/allQuestions.js

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

import LoadingIndicator from '../components/LoadingIndicator.js'
import Subject from '../components/Subject.js'
import SubjectSelector from '../components/SubjectSelector.js'
import Layout from '../components/layout'

import constants from '../constants.json'

export default function AllQuestions (props) {
  const [data, setData] = useState(null)
  const [activeSubjName, setActiveSubjName] = useState('')
  const [searchTerm, setSearchTerm] = useState('')

  useEffect(() => {
    console.info('Fetching data')
    fetch(`${constants.serverUrl}data.json`)
      .then((resp) => {
        return resp.json()
      })
      .then((data) => {
        setData(data)
      })
  }, [])

  if (data) {
    let currSubj = data.Subjects.find((subj) => {
      return subj.Name === activeSubjName
    })

    return (
      <Layout currPageName='allQuestions' >
        <div>
          <div>
            <input
              placeholder='Keresés...'
              className='searchBar'
              type='text'
              value={searchTerm}
              onChange={(e) => { setSearchTerm(e.target.value) }}
            />
          </div>
          <SubjectSelector
            data={data}
            activeSubjName={activeSubjName}
            searchTerm={searchTerm}
            onSubjSelect={(subjName) => { setActiveSubjName(subjName) }}
          />
          <hr />
          <div>
            <Subject
              subj={currSubj}
            />
          </div>
        </div>
      </Layout>
    )
  } else {
    return (
      <Layout currPageName='allQuestions' >
        <LoadingIndicator />
      </Layout>
    )
  }
}