mirror of
https://gitlab.com/MrFry/qmining-page
synced 2025-04-01 20:23:44 +02:00
169 lines
4 KiB
JavaScript
169 lines
4 KiB
JavaScript
import React, { useState, useEffect } from 'react'
|
|
import fetch from 'unfetch'
|
|
import Head from 'next/head'
|
|
import Link from 'next/link'
|
|
|
|
import LoadingIndicator from '../components/LoadingIndicator'
|
|
import Sleep from '../components/sleep'
|
|
|
|
import styles from './index.module.css'
|
|
import links from '../data/links.json'
|
|
import constants from '../constants.json'
|
|
|
|
export default function Index() {
|
|
const [motd, setMotd] = useState('loading...')
|
|
const [userSpecificMotd, setUserSpecificMotd] = useState('loading...')
|
|
const [news, setNews] = useState(null)
|
|
|
|
useEffect(() => {
|
|
console.info('Fetching news.json')
|
|
fetch(`${constants.apiUrl}news.json`, {
|
|
credentials: 'include',
|
|
})
|
|
.then((resp) => {
|
|
return resp.json()
|
|
})
|
|
.then((data) => {
|
|
setNews(data)
|
|
})
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
console.info('Fetching data')
|
|
fetch(`${constants.apiUrl}infos?motd=true`, {
|
|
credentials: 'include',
|
|
Accept: 'application/json',
|
|
'Content-Type': 'application/json',
|
|
})
|
|
.then((resp) => {
|
|
return resp.json()
|
|
})
|
|
.then((data) => {
|
|
setMotd(data.motd)
|
|
setUserSpecificMotd(data.userSpecificMotd)
|
|
})
|
|
}, [])
|
|
|
|
const renderQAItem = (n, key) => {
|
|
return (
|
|
<div key={key} className={styles.itemContainer}>
|
|
<div className={styles.itemNumber}>{key} :</div>
|
|
<div
|
|
className={styles.question}
|
|
dangerouslySetInnerHTML={{ __html: n.q }}
|
|
/>
|
|
<div
|
|
className={styles.answer}
|
|
dangerouslySetInnerHTML={{ __html: n.a }}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const renderNewsItem = (n, key) => {
|
|
return (
|
|
<div key={key} className={styles.itemContainer}>
|
|
<div className={styles.itemNumber}>{key} :</div>
|
|
<div
|
|
className={styles.newsTitle}
|
|
dangerouslySetInnerHTML={{ __html: n.title }}
|
|
/>
|
|
<div
|
|
className={styles.newsBody}
|
|
dangerouslySetInnerHTML={{ __html: n.body }}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const renderNews = () => {
|
|
if (news) {
|
|
let questions = Object.keys(news)
|
|
.map((key, i) => {
|
|
let n = news[key]
|
|
if (n.q) {
|
|
return (
|
|
<div key={key}>
|
|
{renderQAItem(n, key)}
|
|
<hr />
|
|
</div>
|
|
)
|
|
} else {
|
|
return (
|
|
<div key={key}>
|
|
{renderNewsItem(n, key)}
|
|
<hr />
|
|
</div>
|
|
)
|
|
}
|
|
})
|
|
.reverse()
|
|
|
|
return (
|
|
<div>
|
|
<div className={styles.title}>News</div>
|
|
<hr />
|
|
<hr />
|
|
<div className={styles.questionscontainer}>{questions}</div>
|
|
</div>
|
|
)
|
|
} else {
|
|
return <LoadingIndicator />
|
|
}
|
|
}
|
|
|
|
const renderMotd = () => {
|
|
return (
|
|
<div>
|
|
<div className={styles.title}>MOTD</div>
|
|
<hr />
|
|
<hr />
|
|
<div
|
|
className={styles.motd}
|
|
dangerouslySetInnerHTML={{ __html: motd }}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const renderUserSpecificMotd = () => {
|
|
return (
|
|
<div>
|
|
<div className={styles.motdHeader}>
|
|
Felhasználó MOTD (ezt csak te látod):
|
|
</div>
|
|
<div
|
|
className={styles.motd}
|
|
dangerouslySetInnerHTML={{ __html: userSpecificMotd }}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<Head>
|
|
<title>Qmining | Frylabs.net</title>
|
|
</Head>
|
|
<div className={styles.buttonContainer}>
|
|
{Object.keys(links).map((key) => {
|
|
let link = links[key]
|
|
return (
|
|
<Link key={key} href={link.href}>
|
|
<a className={styles.button} target="_blank">
|
|
{link.text}
|
|
</a>
|
|
</Link>
|
|
)
|
|
})}
|
|
</div>
|
|
<hr />
|
|
{renderMotd()}
|
|
{userSpecificMotd && renderUserSpecificMotd()}
|
|
<hr />
|
|
<hr />
|
|
<Sleep />
|
|
{renderNews()}
|
|
</div>
|
|
)
|
|
}
|