mirror of
https://gitlab.com/MrFry/qmining-page
synced 2025-04-01 20:23:44 +02:00
274 lines
6.9 KiB
JavaScript
274 lines
6.9 KiB
JavaScript
import React, { useState, useEffect } from 'react'
|
|
import Head from 'next/head'
|
|
|
|
import LoadingIndicator from '../components/LoadingIndicator.js'
|
|
import QuestionSearchResult from '../components/QuestionSearchResult.js'
|
|
import Subject from '../components/Subject.js'
|
|
import SubjectSelector from '../components/SubjectSelector.js'
|
|
import Sleep from '../components/sleep'
|
|
|
|
import styles from './allQuestions.module.css'
|
|
|
|
import constants from '../constants.json'
|
|
|
|
const countReducer = (acc, subj) => {
|
|
return acc + subj.Questions.length
|
|
}
|
|
|
|
function mergeData(data) {
|
|
return data.reduce((acc, db) => {
|
|
return [
|
|
...acc,
|
|
...db.data.map((subj) => {
|
|
return {
|
|
...subj,
|
|
Name: `${subj.Name} [ DB: ${db.dbName} ]`,
|
|
}
|
|
}),
|
|
]
|
|
}, [])
|
|
}
|
|
|
|
function fetchData(db) {
|
|
return new Promise((resolve) => {
|
|
fetch(`${constants.apiUrl}${db.path}`, {
|
|
credentials: 'include',
|
|
})
|
|
.then((resp) => {
|
|
return resp.json()
|
|
})
|
|
.then((resp) => {
|
|
resolve({
|
|
dbName: db.name,
|
|
data: resp,
|
|
})
|
|
})
|
|
})
|
|
}
|
|
|
|
function fetchAllData(dbs) {
|
|
const promises = dbs.map((db) => {
|
|
return fetchData(db)
|
|
})
|
|
|
|
return Promise.all(promises)
|
|
}
|
|
|
|
function fetchDbs() {
|
|
return new Promise((resolve) => {
|
|
console.info('Fetching data')
|
|
fetch(`${constants.apiUrl}getDbs`, {
|
|
credentials: 'include',
|
|
})
|
|
.then((resp) => {
|
|
return resp.json()
|
|
})
|
|
.then((data) => {
|
|
resolve(data)
|
|
})
|
|
})
|
|
}
|
|
|
|
export default function AllQuestions({ router }) {
|
|
const [subjectsShowing, setSubjectsShowing] = useState(false)
|
|
const [searchTerm, setSearchTerm] = useState('')
|
|
const [activeSubjName, setActiveSubjName] = useState('')
|
|
const [dbs, setDbs] = useState(null)
|
|
const [data, setData] = useState(null)
|
|
const [fetchingData, setFetchingData] = useState(false)
|
|
const subjectCount = data ? data.length : 0
|
|
const questionCount = data ? data.reduce(countReducer, 0) : 0
|
|
|
|
useEffect(() => {
|
|
router.replace(`${router.asPath.replace('.html', '')}`, undefined, {
|
|
shallow: true,
|
|
})
|
|
// TODO: fix dis
|
|
const querySearch = router.query.question
|
|
? decodeURIComponent(router.query.question)
|
|
: ''
|
|
console.log(querySearch)
|
|
|
|
fetchDbs().then((res) => {
|
|
setDbs(res)
|
|
})
|
|
}, [])
|
|
|
|
const renderDbSelector = () => {
|
|
if (dbs) {
|
|
return (
|
|
<>
|
|
<select
|
|
className={styles.select}
|
|
defaultValue={-1}
|
|
onChange={(event) => {
|
|
const key = event.target.value
|
|
setData(null)
|
|
setFetchingData(true)
|
|
if (key === 'all') {
|
|
fetchAllData(dbs).then((res) => {
|
|
setData(mergeData(res))
|
|
setFetchingData(false)
|
|
})
|
|
} else {
|
|
fetchData(dbs[key]).then((res) => {
|
|
setData(res.data)
|
|
setFetchingData(false)
|
|
})
|
|
}
|
|
}}
|
|
>
|
|
<option disabled value={-1}>
|
|
{' -- Válassz egy kérdés adatbázist -- '}
|
|
</option>
|
|
{dbs.map((db, i) => {
|
|
return (
|
|
<option value={i} key={db.path}>
|
|
{db.name}
|
|
</option>
|
|
)
|
|
})}
|
|
<option value={'all'} key={'all'}>
|
|
{'All'}
|
|
</option>
|
|
</select>
|
|
</>
|
|
)
|
|
} else {
|
|
return null
|
|
}
|
|
}
|
|
|
|
const renderSubjectBrowser = () => {
|
|
let currSubj = data
|
|
? data.find((subj) => {
|
|
return subj.Name === activeSubjName
|
|
})
|
|
: {}
|
|
|
|
return (
|
|
<div>
|
|
<Head>
|
|
<title>Tárgyak - Qmining | Frylabs.net</title>
|
|
</Head>
|
|
{data ? (
|
|
<>
|
|
<div className={styles.searchContainer}>
|
|
<input
|
|
autoFocus
|
|
placeholder="Keresés..."
|
|
type="text"
|
|
value={searchTerm}
|
|
onChange={(event) => {
|
|
setSearchTerm(event.target.value)
|
|
}}
|
|
/>
|
|
<button
|
|
onClick={() => {
|
|
setSearchTerm('')
|
|
}}
|
|
className={styles.clearButton}
|
|
>
|
|
X
|
|
</button>
|
|
</div>
|
|
<hr />
|
|
<SubjectSelector
|
|
data={data}
|
|
activeSubjName={activeSubjName}
|
|
searchTerm={searchTerm}
|
|
onSubjSelect={(subjName) => {
|
|
setActiveSubjName(subjName)
|
|
}}
|
|
/>
|
|
<hr />
|
|
<div>{/*{qCount} kérdés, {sCount} tárgy */}</div>
|
|
<Sleep />
|
|
<div>
|
|
<Subject subj={currSubj} />
|
|
</div>
|
|
</>
|
|
) : null}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const renderQuestionBrowser = () => {
|
|
return (
|
|
<div>
|
|
<Head>
|
|
<title>Qmining - Kérdés keresés | Frylabs.net</title>
|
|
</Head>
|
|
{data ? (
|
|
<>
|
|
<div className={styles.searchContainer}>
|
|
<input
|
|
autoFocus
|
|
placeholder="Keresés..."
|
|
type="text"
|
|
value={searchTerm}
|
|
onChange={(event) => {
|
|
setSearchTerm(event.target.value)
|
|
router.replace(
|
|
`${router.pathname}${event.target.value &&
|
|
'?question='}${encodeURIComponent(event.target.value)}`,
|
|
undefined,
|
|
{ shallow: true }
|
|
)
|
|
}}
|
|
/>
|
|
<button
|
|
onClick={() => {
|
|
setSearchTerm('')
|
|
}}
|
|
className={styles.clearButton}
|
|
>
|
|
X
|
|
</button>
|
|
</div>
|
|
<hr />
|
|
<div>
|
|
<QuestionSearchResult data={data} searchTerm={searchTerm} />
|
|
</div>
|
|
</>
|
|
) : null}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
{dbs ? (
|
|
<>
|
|
{renderDbSelector()}
|
|
{data && `${questionCount} kérdés, ${subjectCount} tárgy`}
|
|
<div className={styles.typeSelector}>
|
|
<div
|
|
className={!subjectsShowing ? styles.activeTypeSelector : ''}
|
|
onClick={() => setSubjectsShowing(false)}
|
|
>
|
|
Kérdések
|
|
</div>
|
|
<div
|
|
className={subjectsShowing ? styles.activeTypeSelector : ''}
|
|
onClick={() => setSubjectsShowing(true)}
|
|
>
|
|
Tárgyak
|
|
</div>
|
|
</div>
|
|
{fetchingData ? (
|
|
<LoadingIndicator />
|
|
) : (
|
|
<div>
|
|
{subjectsShowing
|
|
? renderSubjectBrowser()
|
|
: renderQuestionBrowser()}
|
|
</div>
|
|
)}
|
|
</>
|
|
) : (
|
|
<LoadingIndicator />
|
|
)}
|
|
</div>
|
|
)
|
|
}
|