albert/qmining-page
1
0
Fork 0
mirror of https://gitlab.com/MrFry/qmining-page synced 2025-04-01 20:23:44 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added support for user specific motd

Browse source
This commit is contained in:
mrfry 2020-10-21 16:27:40 +02:00
parent ada93f0bb9
commit 806f32cac5
1 changed files with 54 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

105
src/pages/index.js
View file

@ -11,14 +11,15 @@ import styles from './index.module.css'
import links from '../data/links.json' import links from '../data/links.json'
import constants from '../constants.json' import constants from '../constants.json'
export default function Index (props) { export default function Index(props) {
const [motd, setMotd] = useState('loading...') const [motd, setMotd] = useState('loading...')
const [userSpecificMotd, setUserSpecificMotd] = useState('loading...')
const [news, setNews] = useState(null) const [news, setNews] = useState(null)
useEffect(() => { useEffect(() => {
console.info('Fetching news.json') console.info('Fetching news.json')
fetch(`${constants.apiUrl}news.json`, { fetch(`${constants.apiUrl}news.json`, {
credentials: 'include' credentials: 'include',
}) })
.then((resp) => { .then((resp) => {
return resp.json() return resp.json()
@ -30,23 +31,25 @@ export default function Index (props) {
useEffect(() => { useEffect(() => {
console.info('Fetching data') console.info('Fetching data')
fetch(`${constants.apiUrl}motd`, { fetch(`${constants.apiUrl}infos?motd=true`, {
credentials: 'include' credentials: 'include',
Accept: 'application/json',
'Content-Type': 'application/json',
}) })
.then((resp) => { .then((resp) => {
return resp.text() return resp.json()
}) })
.then((data) => { .then((data) => {
setMotd(data) console.log(data)
setMotd(data.motd)
setUserSpecificMotd(data.userSpecificMotd)
}) })
}, []) }, [])
const renderQAItem = (n, key) => { const renderQAItem = (n, key) => {
return ( return (
<div key={key} className={styles.itemContainer}> <div key={key} className={styles.itemContainer}>
<div className={styles.itemNumber}> <div className={styles.itemNumber}>{key} :</div>
{key} :
</div>
<div <div
className={styles.question} className={styles.question}
dangerouslySetInnerHTML={{ __html: n.q }} dangerouslySetInnerHTML={{ __html: n.q }}
@ -62,9 +65,7 @@ export default function Index (props) {
const renderNewsItem = (n, key) => { const renderNewsItem = (n, key) => {
return ( return (
<div key={key} className={styles.itemContainer}> <div key={key} className={styles.itemContainer}>
<div className={styles.itemNumber}> <div className={styles.itemNumber}>{key} :</div>
{key} :
</div>
<div <div
className={styles.newsTitle} className={styles.newsTitle}
dangerouslySetInnerHTML={{ __html: n.title }} dangerouslySetInnerHTML={{ __html: n.title }}
@ -79,43 +80,37 @@ export default function Index (props) {
const renderNews = () => { const renderNews = () => {
if (news) { if (news) {
let questions = Object.keys(news).map((key, i) => { let questions = Object.keys(news)
let n = news[key] .map((key, i) => {
if (n.q) { let n = news[key]
return ( if (n.q) {
<div key={key}> return (
{renderQAItem(n, key)} <div key={key}>
<hr /> {renderQAItem(n, key)}
</div> <hr />
) </div>
} else { )
return ( } else {
<div key={key}> return (
{renderNewsItem(n, key)} <div key={key}>
<hr /> {renderNewsItem(n, key)}
</div> <hr />
) </div>
} )
}).reverse() }
})
.reverse()
return ( return <div className={styles.questionscontainer}>{questions}</div>
<div className={styles.questionscontainer}>
{questions}
</div>
)
} else { } else {
return ( return <LoadingIndicator />
<LoadingIndicator />
)
} }
} }
const renderMotd = () => { const renderMotd = () => {
return ( return (
<div> <div>
<div className={styles.motdHeader}> <div className={styles.motdHeader}>MOTD:</div>
MOTD:
</div>
<div <div
className={styles.motd} className={styles.motd}
dangerouslySetInnerHTML={{ __html: motd }} dangerouslySetInnerHTML={{ __html: motd }}
@ -124,23 +119,31 @@ export default function Index (props) {
) )
} }
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 ( return (
<div> <div>
{renderMotd()} {renderMotd()}
{userSpecificMotd && renderUserSpecificMotd()}
<center> <center>
{Object.keys(links).map((key) => { {Object.keys(links).map((key) => {
let link = links[key] let link = links[key]
return ( return (
<span <span className="link" key={key}>
className='link' <a href={link.href}>
key={key} <div className={styles.button}>{link.text}</div>
>
<a
href={link.href}
>
<div className={styles.button}>
{link.text}
</div>
</a> </a>
</span> </span>
) )