Added user questions

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