Handling multiple data files in subjectBrowser and allQuestions

src/constants.json

@@ -1,6 +1,6 @@
 {
   "siteUrl": "https://qmining.frylabs.net/",
-  "apiUrl": "https://api.frylabs.net/",
+  "apiUrl": "http://localhost:8080/",
   "mobileWindowWidth": 700,
   "maxQuestionsToRender": 250
 }

src/pages/_app.js

@@ -2,11 +2,64 @@
 
 import '../defaultStyles.css'
 import Layout from '../components/layout'
+import constants from '../constants.json'
+
+var data = null
+
+function fetchData() {
+  return new Promise((resolve) => {
+    if (data) {
+      resolve(data)
+      return
+    }
+
+    console.info('Fetching data')
+    fetch(`${constants.apiUrl}getDbs`, {
+      credentials: 'include',
+    })
+      .then((resp) => {
+        return resp.json()
+      })
+      .then((data) => {
+        const promises = data.map((db) => {
+          return fetch(`${constants.apiUrl}${db.path}`, {
+            credentials: 'include',
+          }).then((resp) => {
+            return new Promise((resolve) => {
+              resp.json().then((jsonRes) => {
+                resolve({
+                  dbName: db.name,
+                  data: jsonRes,
+                })
+              })
+            })
+          })
+        })
+
+        Promise.all(promises).then((data) => {
+          const mergedData = data.reduce((acc, db) => {
+            return [
+              ...acc,
+              ...db.data.map((subj) => {
+                return {
+                  ...subj,
+                  Name: `${subj.Name} (${db.dbName})`,
+                }
+              }),
+            ]
+          }, [])
+
+          data = mergedData
+          resolve(mergedData)
+        })
+      })
+  })
+}
 
 function MyApp({ Component, pageProps, router }) {
   return (
     <Layout route={router.route}>
-      <Component {...pageProps} router={router} />
+      <Component {...pageProps} router={router} getData={fetchData} />
     </Layout>
   )
 }

src/pages/allQuestions.js

@@ -1,35 +1,26 @@
 import React, { useState, useEffect } from 'react'
-import Link from 'next/link'
-import fetch from 'unfetch'
 
 import LoadingIndicator from '../components/LoadingIndicator.js'
 import QuestionSearchResult from '../components/QuestionSearchResult.js'
 
 import styles from './allQuestions.module.css'
-import constants from '../constants.json'
 
-export default function AllQuestions({ router }) {
+export default function AllQuestions({ router, getData }) {
   const [data, setData] = useState(null)
   const [searchTerm, setSearchTerm] = useState('')
 
   useEffect(() => {
-    fetch(`${constants.apiUrl}data.json`, {
+    getData().then((result) => {
-      credentials: 'include',
+      setData(result)
-    })
-      .then((resp) => {
-        return resp.json()
-      })
-      .then((data) => {
-        setData(data)
 
-        router.replace(`${router.asPath.replace('.html', '')}`, undefined, {
+      router.replace(`${router.asPath.replace('.html', '')}`, undefined, {
-          shallow: true,
+        shallow: true,
-        })
-        const querySearch = router.query.question
-          ? decodeURIComponent(router.query.question)
-          : ''
-        setSearchTerm(querySearch)
       })
+      const querySearch = router.query.question
+        ? decodeURIComponent(router.query.question)
+        : ''
+      setSearchTerm(querySearch)
+    })
   }, [])
 
   if (data) {

src/pages/subjectBrowser.js

@@ -7,9 +7,8 @@ import SubjectSelector from '../components/SubjectSelector.js'
 import Sleep from '../components/sleep'
 
 import styles from './subjectBrowser.module.css'
-import constants from '../constants.json'
 
-export default function SubjectBrowser (props) {
+export default function SubjectBrowser({ getData }) {
   const [data, setData] = useState(null)
   const [activeSubjName, setActiveSubjName] = useState('')
   const [searchTerm, setSearchTerm] = useState('')
@@ -18,20 +17,15 @@ export default function SubjectBrowser (props) {
   const [qCount, setQCount] = useState(0)
 
   useEffect(() => {
-    console.info('Fetching data')
+    getData().then((result) => {
-    fetch(`${constants.apiUrl}data.json`, {
+      setData(result)
-      credentials: 'include'
+      setSCount(result.length)
-    })
+      setQCount(
-      .then((resp) => {
+        result.reduce((acc, subj) => {
-        return resp.json()
-      })
-      .then((data) => {
-        setData(data)
-        setSCount(data.length)
-        setQCount(data.reduce((acc, subj) => {
           return acc + subj.Questions.length
-        }, 0))
+        }, 0)
-      })
+      )
+    })
   }, [])
 
   if (data) {
@@ -43,11 +37,13 @@ export default function SubjectBrowser (props) {
       <div>
         <div className={styles.searchContainer}>
           <input
-            placeholder='Keresés...'
+            placeholder="Keresés..."
             className={styles.searchBar}
-            type='text'
+            type="text"
             value={searchTerm}
-            onChange={(e) => { setSearchTerm(e.target.value) }}
+            onChange={(e) => {
+              setSearchTerm(e.target.value)
+            }}
           />
           <button
             onClick={() => {
@@ -55,14 +51,16 @@ export default function SubjectBrowser (props) {
             }}
             className={styles.clearButton}
           >
-             X
+            X
           </button>
         </div>
         <SubjectSelector
           data={data}
           activeSubjName={activeSubjName}
           searchTerm={searchTerm}
-          onSubjSelect={(subjName) => { setActiveSubjName(subjName) }}
+          onSubjSelect={(subjName) => {
+            setActiveSubjName(subjName)
+          }}
         />
         <hr />
         <div>
@@ -70,15 +68,11 @@ export default function SubjectBrowser (props) {
         </div>
         <Sleep />
         <div>
-          <Subject
+          <Subject subj={currSubj} />
-            subj={currSubj}
-          />
         </div>
       </div>
     )
   } else {
-    return (
+    return <LoadingIndicator />
-      <LoadingIndicator />
-    )
   }
 }