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,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

src/pages/manual.js

@@ -63,57 +63,61 @@ másnak a legfrissebb adatok állnak rendelkezésre.</b>
       </center>
       <hr />
       <table style={{ tableLayout: 'fixed', verticalAlign: 'top', width: '100%' }}>
-        <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
+        <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
         userscript is, ezért ez ajánlott. Más is működhet (violentmonkey, etc), de az nem garantált.
         Majd a <a href='http://qmining.frylabs.net/install'>weboldalról</a> egy kattintással elvileg
         le tudod tölteni a scriptet, és elvileg kész is. Script majd udvariasan megkéri, hogy
         hagy beszélgessen a szerverrel, mert mással nem tud.
-          <p />
-          <p /> Teszt közben még több dolog történhet:
-          <p />
-          <ul>
-            <li><b>Nem jó kérdésre ad választ a script:</b> Ilyenkor az van, hogy nincs meg a
+              <p />
+              <p /> Teszt közben még több dolog történhet:
+              <p />
+              <ul>
+                <li><b>Nem jó kérdésre ad választ a script:</b> Ilyenkor az van, hogy nincs meg a
               kérdés, vagy több hasonló kérdés/válasz van. Ilyenkor a jobbra/balra gombbal
               váltogathatsz azok a kérdés/válasz combók közül, amit talált a script</li>
 
-            <li><b>Több teszt kérdés van egy oldalon:</b> Fel le gombbal váltogathatsz a kérdések között.
+                <li><b>Több teszt kérdés van egy oldalon:</b> Fel le gombbal váltogathatsz a kérdések között.
             Ilyenkor is működik az előbb említett funkció. Az indexek, amit kiír a bal felső sarokban:
             aktuális kérdés száma / aktuális találat száma.</li>
 
-            <li><b>Nem jelenik meg semmi, vagy nem működik a script:</b> Megesik az ilyesmi. Ha
+                <li><b>Nem jelenik meg semmi, vagy nem működik a script:</b> Megesik az ilyesmi. Ha
             a webszerver még elérhető akkor ott meg bírod nézni a kérdéseket, és ott lehet
             keresgélni Ctrl + F -el Ha az sincs, akkor lehet hogy jól jön ha van egy
             lementett kérdés gyűjteményed.</li>
-          </ul>
+              </ul>
 
-          <p /> Egyéb funkciók:
-          <ul>
-            <li>
+              <p /> Egyéb funkciók:
+              <ul>
+                <li>
                 Ha esetleg videókat nézel, akkor spaceval lehet play/pausolni, és jobbra/balra
                 gombbal ugrani a videóban.
-            </li>
-            <li>
+                </li>
+                <li>
                 Ha bármikor nem kell a script, akkor a menü gomb alatt bekapcsolhatod a passzív
                 módot, ami nem piszkálja a szervert. Vagy kikapcsolhatod magát a scriptet
                 tampermonkey-ban. Ha bármiért is el akarod tüntetni a következő oldalig az éppen
                 megjelenő script ablakot, akkor középső egér gombbal kattintva rajta ezt
                 megteheted.
-            </li>
-          </ul>
+                </li>
+              </ul>
 
-          <p /> <b>Ha 2.0 előttről jöttél, és rettenetesen össze vagy zavarodva:</b>
-          <p />
+              <p /> <b>Ha 2.0 előttről jöttél, és rettenetesen össze vagy zavarodva:</b>
+              <p />
         2.0 előtt a script az egész adatbázist leszedte, beolvasta, és onnan keresett. Ez a
         keresés most szerver oldalon van megvalósítva, és a script csak a kérdést, hozzá tartózó
         egyéb infót (pl kép nevek) és a tárgy nevét küldi el szervernek. Ezután az visszaküldi a
         helyes válaszokat.
 
-        </td>
-        <td width='20%'>
-          <img style={{ maxWidth: '100%', maxHeight: '100%' }} src='img/rtfm.jpg' alt='img' />
-        </td>
+            </td>
+            <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,65 +1,58 @@
-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)
       })
-  }
+  }, [loaded])
 
-  render () {
-    const { loaded } = this.state
-
-    if (loaded) {
-      let questions = Object.keys(this.qa).map((key, i) => {
-        let q = this.qa[key]
-        return (
-          <div key={key} className='uquestioncontainer'>
-            <div >
-              <div className='uquestionnumber'>
-                {key}:
-              </div>
-              <div className='uquestion'>
-                {q.q}
-              </div>
+  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='uanswer'>
-              {q.a}
+            <div className='uquestion'>
+              {q.q}
             </div>
           </div>
-        )
-      }).reverse()
+          <div className='uanswer'>
+            {q.a}
+          </div>
+        </div>
+      )
+    }).reverse()
 
-      return (
+    return (
+      <Layout currPageName='UserQuestions' >
         <div className='uquestionscontainer'>
           {questions}
         </div>
-      )
-    } else {
-      return (
+      </Layout>
+    )
+  } else {
+    return (
+      <Layout currPageName='UserQuestions' >
         <LoadingIndicator />
-      )
-    }
+      </Layout>
+    )
   }
 }
-
-export default UserQuestions