Changed uesr question-answer stuff to "news"

src/pages/index.js

@@ -1,16 +1,29 @@
 // TODO: css remove unnecesarry stuff
-// TODO: resizing
-// TODO: motd
 // TODO: aludni
 // TODO: fetch only once
 
 import React, { useState, useEffect } from 'react'
 import fetch from 'unfetch'
+
+import LoadingIndicator from '../components/LoadingIndicator'
+
 import links from '../data/links.json'
 import constants from '../constants.json'
 
 export default function Index (props) {
   const [motd, setMotd] = useState('loading...')
+  const [news, setNews] = useState(null)
+
+  useEffect(() => {
+    console.info('Fetching news.json')
+    fetch(`${constants.apiUrl}news.json`) // eslint-disable-line
+      .then((resp) => {
+        return resp.json()
+      })
+      .then((data) => {
+        setNews(data)
+      })
+  }, [])
 
   useEffect(() => {
     console.info('Fetching data')
@@ -23,6 +36,39 @@ export default function Index (props) {
       })
   }, [])
 
+  const renderNews = () => {
+    if (news) {
+      let questions = Object.keys(news).map((key, i) => {
+        let q = news[key]
+        return (
+          <div key={key} className='uquestioncontainer'>
+            <div >
+              <div className='uquestionnumber'>
+                {key}:
+              </div>
+              <div className='uquestion'>
+                {q.q}
+              </div>
+            </div>
+            <div className='uanswer'>
+              {q.a}
+            </div>
+          </div>
+        )
+      }).reverse()
+
+      return (
+        <div className='uquestionscontainer'>
+          {questions}
+        </div>
+      )
+    } else {
+      return (
+        <LoadingIndicator />
+      )
+    }
+  }
+
   const renderMotd = () => {
     return (
       <div>
@@ -43,7 +89,7 @@ export default function Index (props) {
       {Object.keys(links).map((key) => {
         let link = links[key]
         return (
-          <div
+          <span
             className='link'
             key={key}
           >
@@ -52,9 +98,10 @@ export default function Index (props) {
             >
               {link.text}
             </a>
-          </div>
+          </span>
         )
       })}
+      {renderNews()}
     </div>
   )
 }