Added user questions

src/components/layout.js

@@ -30,7 +30,12 @@ export default function Layout (props) {
         <Link href='/allQuestions' >
           <a
             className={currPageName === 'allQuestions' ? 'active' : ''}
-          >manual</a>
+          >AllQuestions</a>
+        </Link>
+        <Link href='/userQuestions' >
+          <a
+            className={currPageName === 'userQuestions' ? 'active' : ''}
+          >userQuestions</a>
         </Link>
       </div>
       <div className='content'>

src/pages/allQuestions.js

@@ -1,54 +1,34 @@
-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)
       })
-      })
-  }
-
-  onSubjSelect (name) {
-    this.setState({
-      activeSubjName: name
-    })
-  }
-
-  searchBarOnChange (e) {
-    let text = e.target.value
-    this.setState({
-      searchTerm: text
-    })
-  }
-
-  render () {
-    const { loaded, activeSubjName, searchTerm } = this.state
+  }, [loaded])
 
   if (loaded) {
-      let currSubj = this.data.Subjects.find((subj) => {
+    let currSubj = data.Subjects.find((subj) => {
       return subj.Name === activeSubjName
     })
 
@@ -61,17 +41,15 @@ class AllQuestions extends PureComponent {
               className='searchBar'
               type='text'
               value={searchTerm}
-                onChange={this.searchBarOnChange.bind(this)}
+              onChange={(e) => { setSearchTerm(e.target.value) }}
             />
           </div>
-
           <SubjectSelector
-              data={this.data}
+            data={data}
             activeSubjName={activeSubjName}
             searchTerm={searchTerm}
-              onSubjSelect={this.onSubjSelect.bind(this)}
+            onSubjSelect={(subjName) => { setActiveSubjName(subjName) }}
           />
-
           <hr />
           <div>
             <Subject
@@ -88,7 +66,4 @@ class AllQuestions extends PureComponent {
       </Layout>
     )
   }
-  }
 }
-
-export default AllQuestions

src/pages/manual.js

@@ -63,6 +63,8 @@ másnak a legfrissebb adatok állnak rendelkezésre.</b>
       </center>
       <hr />
       <table style={{ tableLayout: 'fixed', verticalAlign: 'top', width: '100%' }}>
+        <tbody>
+          <tr>
             <td>
               <p /> Először is tölts le egy userscript futtató kiegészítőt a böngésződhöz. Én <a
                 href='https://www.tampermonkey.net/'>Tampermonkeyt</a> használok, és ezzel van tesztelve a
@@ -114,6 +116,8 @@ másnak a legfrissebb adatok állnak rendelkezésre.</b>
             <td width='20%'>
               <img style={{ maxWidth: '100%', maxHeight: '100%' }} src='img/rtfm.jpg' alt='img' />
             </td>
+          </tr>
+        </tbody>
       </table>
       <center>
         <h3>Eddigi teszt kérdések:</h3>

src/pages/userQuestions.js

@@ -1,37 +1,29 @@
-import React, { PureComponent } from 'react'
+import React, { useState, useEffect } from 'react'
 
-import LoadingIndicator from '../LoadingIndicator'
+import LoadingIndicator from '../components/LoadingIndicator'
+import Layout from '../components/layout'
 
-import constants from '../../constants.json'
+import constants from '../constants.json'
 
-class UserQuestions extends PureComponent {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      loaded: false
-    }
+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) => {
-        this.qa = data
-
-        this.setState({
-          loaded: true
+        setQa(data)
+        setLoaded(true)
       })
-      })
-  }
-
-  render () {
-    const { loaded } = this.state
+  }, [loaded])
 
   if (loaded) {
-      let questions = Object.keys(this.qa).map((key, i) => {
-        let q = this.qa[key]
+    let questions = Object.keys(qa).map((key, i) => {
+      let q = qa[key]
       return (
         <div key={key} className='uquestioncontainer'>
           <div >
@@ -50,16 +42,17 @@ class UserQuestions extends PureComponent {
     }).reverse()
 
     return (
+      <Layout currPageName='UserQuestions' >
         <div className='uquestionscontainer'>
           {questions}
         </div>
+      </Layout>
     )
   } else {
     return (
+      <Layout currPageName='UserQuestions' >
         <LoadingIndicator />
+      </Layout>
     )
   }
-  }
 }
-
-export default UserQuestions