// 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> ) }