Question searcher / subject browser improving

src/pages/subjectBrowser.js

@@ -0,0 +1,61 @@
+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 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.apiUrl}data.json`)
+      .then((resp) => {
+        return resp.json()
+      })
+      .then((data) => {
+        setData(data)
+      })
+  }, [])
+
+  if (data) {
+    let currSubj = data.Subjects.find((subj) => {
+      return subj.Name === activeSubjName
+    })
+
+    return (
+      <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>
+    )
+  } else {
+    return (
+      <LoadingIndicator />
+    )
+  }
+}