Added user questions

src/pages/allQuestions.js

@@ -1,94 +1,69 @@
-import React, { PureComponent } from 'react'
+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'
 import Layout from '../components/layout'
 
-class AllQuestions extends PureComponent {
-  constructor (props) {
-    super(props)
+import constants from '../constants.json'
 
-    this.state = {
-      loaded: false,
-      activeSubjName: '',
-      searchTerm: ''
-    }
+export default function AllQuestions (props) {
+  const [data, setData] = useState(null)
+  const [loaded, setLoaded] = useState(false)
+  const [activeSubjName, setActiveSubjName] = useState('')
+  const [searchTerm, setSearchTerm] = useState('')
 
+  // TODO: fetches twice
+  useEffect(() => {
     console.info('Fetching data')
-    fetch(`${constants.serverUrl}data.json`) // eslint-disable-line
+    fetch(`${constants.serverUrl}data.json`)
       .then((resp) => {
         return resp.json()
       })
       .then((data) => {
-        this.data = data
-        this.setState({
-          loaded: true
-        })
+        setData(data)
+        setLoaded(true)
       })
-  }
+  }, [loaded])
 
-  onSubjSelect (name) {
-    this.setState({
-      activeSubjName: name
+  if (loaded) {
+    let currSubj = data.Subjects.find((subj) => {
+      return subj.Name === activeSubjName
     })
-  }
 
-  searchBarOnChange (e) {
-    let text = e.target.value
-    this.setState({
-      searchTerm: text
-    })
-  }
-
-  render () {
-    const { loaded, activeSubjName, searchTerm } = this.state
-
-    if (loaded) {
-      let currSubj = this.data.Subjects.find((subj) => {
-        return subj.Name === activeSubjName
-      })
-
-      return (
-        <Layout currPageName='allQuestions' >
+    return (
+      <Layout currPageName='allQuestions' >
+        <div>
           <div>
-            <div>
-              <input
-                placeholder='Keresés...'
-                className='searchBar'
-                type='text'
-                value={searchTerm}
-                onChange={this.searchBarOnChange.bind(this)}
-              />
-            </div>
-
-            <SubjectSelector
-              data={this.data}
-              activeSubjName={activeSubjName}
-              searchTerm={searchTerm}
-              onSubjSelect={this.onSubjSelect.bind(this)}
+            <input
+              placeholder='Keresés...'
+              className='searchBar'
+              type='text'
+              value={searchTerm}
+              onChange={(e) => { setSearchTerm(e.target.value) }}
             />
-
-            <hr />
-            <div>
-              <Subject
-                subj={currSubj}
-              />
-            </div>
           </div>
-        </Layout>
-      )
-    } else {
-      return (
-        <Layout currPageName='allQuestions' >
-          <LoadingIndicator />
-        </Layout>
-      )
-    }
+          <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>
+    )
   }
 }
-
-export default AllQuestions