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

Subject and question browser merge, handling multiple dbs

Browse source
This commit is contained in:
mrfry 2020-12-26 14:50:39 +01:00
parent 57f0730f3e
commit fb3bf29fc4
11 changed files with 232 additions and 178 deletions
Download patch file Download diff file Expand all files Collapse all files

219
src/pages/allQuestions.js
View file

@ -3,6 +3,9 @@ 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'
@ -28,17 +31,25 @@ function fetchData(db) {
credentials: 'include',
})
.then((resp) => {
resp.json()
return resp.json()
})
.then((data) => {
.then((resp) => {
resolve({
dbName: db.name,
data: data,
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')
@ -49,53 +60,63 @@ function fetchDbs() {
return resp.json()
})
.then((data) => {
console.log(data)
resolve(data)
})
})
}
export default function AllQuestions({ router }) {
const [asd, setAsd] = useState(false)
const [data, setData] = useState(null)
const [dbs, setDbs] = useState(null)
const [searchTerm, setSearchTerm] = useState('')
const [activeSubjName, setActiveSubjName] = useState('')
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)
console.log(res)
})
// fetchData().then((result) => {
// setData(result)
// setSearchTerm(querySearch)
// })
}, [])
return (
<div>
<Head>
<title>Qmining - Kérdés keresés | Frylabs.net</title>
</Head>
{dbs ? (
const renderDbSelector = () => {
if (dbs) {
return (
<>
<select
onChange={(e) => {
console.log(e.target.value)
className={styles.select}
defaultValue={-1}
onChange={(event) => {
const key = event.target.value
if (key === 'none') {
console.log(key)
} else if (key === 'all') {
fetchAllData(dbs).then((res) => {
setData(mergeData(res))
console.log(res)
})
} else {
fetchData(dbs[key]).then((res) => {
setData(res.data)
})
}
}}
>
<option value={'none'} key={'none'}>
{'...'}
<option disabled value={-1}>
{' -- Válassz egy kérdés adatbázist -- '}
</option>
{dbs.map((db) => {
{dbs.map((db, i) => {
return (
<option value={db.path} key={db.path}>
<option value={i} key={db.path}>
{db.name}
</option>
)
@ -105,40 +126,132 @@ export default function AllQuestions({ router }) {
</option>
</select>
</>
) : null}
{data ? (
<>
<div className={styles.searchContainer}>
<input
autoFocus
placeholder="Keresés..."
className={styles.searchBar}
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 }
)
)
} else {
return null
}
}
const renderSubjectBrowser = () => {
let currSubj = data
? data.find((subj) => {
return subj.Name === activeSubjName
})
: {}
return (
<div>
<Head>
<title>Qmining - Tárgyak | Frylabs.net</title>
</Head>
{data ? (
<>
<div className={styles.searchContainer}>
<input
autoFocus
placeholder="Keresés..."
className={styles.searchBar}
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)
}}
/>
<button
onClick={() => {
setSearchTerm('')
}}
className={styles.clearButton}
>
X
</button>
</div>
<hr />
<div>
<QuestionSearchResult data={data} searchTerm={searchTerm} />
</div>
</>
<hr />
<div>{/*{qCount} kérdés, {sCount} tárgy */}</div>
<Sleep />
<div>
<Subject subj={currSubj} />
</div>
</>
) : (
<LoadingIndicator />
)}
</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..."
className={styles.searchBar}
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()}
<div className={styles.typeSelector}>
<div
className={!asd ? styles.activeTypeSelector : ''}
onClick={() => setAsd(false)}
>
Kérdések
</div>
<div
className={asd ? styles.activeTypeSelector : ''}
onClick={() => setAsd(true)}
>
Tárgyak
</div>
</div>
{dbs ? (
<div>{asd ? renderSubjectBrowser() : renderQuestionBrowser()}</div>
) : (
<LoadingIndicator />
)}