qmining-page/src/pages/index.js

// TODO: css remove unnecesarry stuff
// TODO: fetch only once

import React, { useState, useEffect } from 'react'
import fetch from 'unfetch'

import LoadingIndicator from '../components/LoadingIndicator'

import styles from './index.module.css'
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')
    fetch(`${constants.apiUrl}motd`)
      .then((resp) => {
        return resp.text()
      })
      .then((data) => {
        setMotd(data)
      })
  }, [])

  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.split('\n').map((x, i) => {
                  return (
                    <div key={i}>
                      {x}
                    </div>
                  )
                })}
              </div>
            </div>
            <div className='uanswer'>
              {q.a}
            </div>
          </div>
        )
      }).reverse()

      return (
        <div className='uquestionscontainer'>
          {questions}
        </div>
      )
    } else {
      return (
        <LoadingIndicator />
      )
    }
  }

  const renderMotd = () => {
    return (
      <div>
        <div className={styles.motdHeader}>
          MOTD:
        </div>
        <div
          className={styles.motd}
          dangerouslySetInnerHTML={{ __html: motd }}
        />
      </div>
    )
  }

  return (
    <div>
      {renderMotd()}
      <center>

        {Object.keys(links).map((key) => {
          let link = links[key]
          return (
            <span
              className='link'
              key={key}
            >
              <a
                href={link.href}
              >
                <div className={styles.button}>
                  {link.text}
                </div>
              </a>
            </span>
          )
        })}
      </center>
      {renderNews()}
    </div>
  )
}