mirror of
https://gitlab.com/MrFry/qmining-page
synced 2025-04-01 20:23:44 +02:00
209 lines
5.2 KiB
JavaScript
209 lines
5.2 KiB
JavaScript
import React, { useState, useEffect } from 'react'
|
|
import fetch from 'unfetch'
|
|
import Head from 'next/head'
|
|
|
|
import LoadingIndicator from '../components/LoadingIndicator'
|
|
import Sleep from '../components/sleep'
|
|
|
|
import styles from './ranklist.module.css'
|
|
import constants from '../constants.json'
|
|
|
|
const selectOptions = {
|
|
newQuestions: { name: 'Beküldött új kérdések' },
|
|
allQuestions: { name: 'Megoldott kérdések' },
|
|
count: { name: 'Megoldott tesztek' },
|
|
}
|
|
|
|
const sinceOptions = {
|
|
all: {
|
|
name: 'All time',
|
|
},
|
|
monthly: { name: 'Havi' },
|
|
weekly: { name: 'Heti' },
|
|
daily: { name: 'Napi' },
|
|
}
|
|
|
|
function getTimeString(date) {
|
|
return (
|
|
date.getFullYear() +
|
|
'-' +
|
|
('0' + (date.getMonth() + 1)).slice(-2) +
|
|
'-' +
|
|
('0' + date.getDate()).slice(-2)
|
|
)
|
|
}
|
|
|
|
function getSinceDate(keyword) {
|
|
if (keyword === 'all') {
|
|
return null
|
|
}
|
|
|
|
const date = new Date()
|
|
if (keyword === 'daily') {
|
|
date.setDate(date.getDate() - 1)
|
|
} else if (keyword === 'weekly') {
|
|
date.setDate(date.getDate() - 7)
|
|
} else if (keyword === 'monthly') {
|
|
date.setDate(date.getDate() - 30)
|
|
}
|
|
return date
|
|
}
|
|
|
|
async function getListFromServer(since) {
|
|
return new Promise((resolve, reject) => {
|
|
console.info('Fetching data')
|
|
let query = ''
|
|
if (since && since !== 'all') {
|
|
query = `?since=${getTimeString(getSinceDate(since))}`
|
|
}
|
|
fetch(`${constants.apiUrl}ranklist${query}`, {
|
|
credentials: 'include',
|
|
Accept: 'application/json',
|
|
'Content-Type': 'application/json',
|
|
})
|
|
.then((resp) => {
|
|
return resp.json()
|
|
})
|
|
.then((data) => {
|
|
resolve(data)
|
|
})
|
|
.catch((error) => {
|
|
reject(error)
|
|
})
|
|
})
|
|
}
|
|
|
|
function sortDataBy(data, key) {
|
|
return data.sort((a, b) => {
|
|
if (a[key] < b[key]) {
|
|
return 1
|
|
} else if (a[key] > b[key]) {
|
|
return -1
|
|
} else {
|
|
return 0
|
|
}
|
|
})
|
|
}
|
|
|
|
export default function RankList() {
|
|
const [ranklist, setRanklist] = useState(null)
|
|
const [selfUserId, setSelfUserId] = useState('...')
|
|
const [key, setKey] = useState('newQuestions')
|
|
const [since, setSince] = useState('all')
|
|
const [sum, setSum] = useState({})
|
|
|
|
const getList = () => {
|
|
setSum({})
|
|
setRanklist(null)
|
|
getListFromServer(since)
|
|
.then((data) => {
|
|
setRanklist(data.list || [])
|
|
setSum(data.sum || {})
|
|
if (data.selfuserId) {
|
|
setSelfUserId(data.selfuserId)
|
|
}
|
|
})
|
|
.catch(() => {
|
|
setRanklist(null)
|
|
})
|
|
}
|
|
|
|
useEffect(() => {
|
|
getList()
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
getList()
|
|
}, [since])
|
|
|
|
const list = ranklist && sortDataBy(ranklist, key)
|
|
|
|
const updateSince = (keyword) => {
|
|
setSince(keyword)
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<Head>
|
|
<title>Qmining - Ranklista | Frylabs.net</title>
|
|
</Head>
|
|
<div>
|
|
<div
|
|
className={styles.infoText}
|
|
>{`A felhasználó ID-d: #${selfUserId}`}</div>
|
|
<div className={styles.text}>
|
|
Az adatok kb 2020. április eleje óta vannak gyűjtve, és azonnal
|
|
frissülnek.
|
|
</div>
|
|
<Sleep />
|
|
<div className={styles.sinceTable}>
|
|
<div className={styles.sinceHeaderRow}>
|
|
{Object.keys(sinceOptions).map((key) => {
|
|
const val = sinceOptions[key]
|
|
return (
|
|
<div
|
|
key={key}
|
|
className={`${styles.clickable} ${key === since &&
|
|
styles.selected}`}
|
|
onClick={() => {
|
|
updateSince(key)
|
|
}}
|
|
>
|
|
{val.name}
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
<div className={styles.table}>
|
|
<div className={styles.headerRow}>
|
|
<div>{'Rank'}</div>
|
|
<div>{'Felhasználó ID'}</div>
|
|
{Object.keys(selectOptions).map((listKey) => {
|
|
const val = selectOptions[listKey]
|
|
return (
|
|
<div
|
|
className={`${styles.clickable} ${listKey === key &&
|
|
styles.selected}`}
|
|
key={listKey}
|
|
onClick={() => {
|
|
setKey(listKey)
|
|
}}
|
|
>
|
|
{val.name}
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
<div className={`${styles.row} ${styles.sumrow}`}>
|
|
<div />
|
|
<div>{'Összesen'}</div>
|
|
<div>{sum.newQuestions}</div>
|
|
<div>{sum.allQuestions}</div>
|
|
<div>{sum.count}</div>
|
|
</div>
|
|
{list ? (
|
|
list.map((listItem, i) => {
|
|
return (
|
|
<div
|
|
className={`${styles.row} ${listItem.userId === selfUserId &&
|
|
styles.selfRow}`}
|
|
key={i}
|
|
>
|
|
<div>{i + 1}</div>
|
|
<div>{'#' + listItem.userId}</div>
|
|
{Object.keys(selectOptions).map((listKey) => {
|
|
const val = listItem[listKey]
|
|
return <div key={listKey}>{val}</div>
|
|
})}
|
|
</div>
|
|
)
|
|
})
|
|
) : (
|
|
<LoadingIndicator />
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|