Multiple db handling, font size changes

src/pages/index.js

@@ -19,8 +19,10 @@ const views = {
 // TODO: question.data editor
 // TODO: edit \n-s in questions / answers
 
-export default function Index(props) {
+export default function Index() {
   const [data, setData] = useState(null)
+  const [qdbs, setQdbs] = useState(null)
+  const [selectedDb, setSelectedDb] = useState()
   const [view, setView] = useState(views.welcome)
   const [sending, setSending] = useState(false)
   const [error, setError] = useState(null)
@@ -29,55 +31,69 @@ export default function Index(props) {
 
   const [initialCount, setInitialCount] = useState({})
 
-  const getCount = (d) => {
+  useEffect(() => {
+    if (selectedDb) {
+      loadData()
+    }
+  }, [selectedDb])
+
+  const getCount = (data) => {
     return {
-      subjectCount: d.length,
-      questionCount: d.reduce((acc, subj) => {
+      subjectCount: data.length,
+      questionCount: data.reduce((acc, subj) => {
         acc += subj.Questions.length
         return acc
       }, 0),
     }
   }
 
-  const setIndexes = (d) => {
-    d.forEach((subj, i) => {
+  const setIndexes = (data) => {
+    data.forEach((subj, i) => {
       subj.ind = i
       subj.Questions.forEach((question, j) => {
         question.ind = j
       })
     })
-    return d
+    return data
   }
 
-  const LoadData = () => {
+  const loadData = () => {
     setData(null)
-    const toFetch = `${constants.apiUrl}data.json`
+    if (!selectedDb) {
+      alert('Válassz egy adatbázist!')
+      return
+    }
+
+    const toFetch = `${constants.apiUrl}${selectedDb.path}`
     console.info('Fetching', toFetch)
     fetch(toFetch, {
       credentials: 'include',
     })
       .then((resp) => {
-        if (resp && resp.ok) {
-          return resp.json()
-        } else {
-          console.error('Error while fetching data')
-          setError('Error while fetching data')
-        }
+        return resp.json()
       })
       .then((resp) => {
         setData(setIndexes(resp))
         const count = getCount(resp)
         setInitialCount(count)
       })
-      .catch((e) => {
-        console.error(e)
+      .catch((error) => {
+        console.error(error)
         console.error('Error while fetching data')
         setError('Error while fetching data')
       })
   }
 
   useEffect(() => {
-    LoadData()
+    fetch(`${constants.apiUrl}getdbs`, {
+      credentials: 'include',
+    })
+      .then((resp) => {
+        return resp.json()
+      })
+      .then((resp) => {
+        setQdbs(resp)
+      })
   }, [])
 
   if (error) {
@@ -138,7 +154,7 @@ export default function Index(props) {
           if (resp.status === 'ok') {
             alert(`Sikeres feltöltés! thankx ${resp.user}!`) // eslint-disable-line
             console.log('OK')
-            LoadData()
+            loadData()
           } else if (resp.status === 'invalidPass') {
             alert('Hibás jelszó!') // eslint-disable-line
             console.log('invalidPass')
@@ -150,15 +166,15 @@ export default function Index(props) {
             console.error(resp.message)
           }
         })
-        .catch((e) => {
+        .catch((error) => {
           setSending(false)
           alert('Hiba feltöltés közben! (kliens oldalon)! Több adat konzolban') // eslint-disable-line
-          console.error('Error posting data', e)
+          console.error('Error posting data', error)
         })
-    } catch (e) {
+    } catch (error) {
       setSending(false)
       alert('Hiba feltöltés közben! (kliens oldalon)! Több adat konzolban') // eslint-disable-line
-      console.error('Error posting data', e)
+      console.error('Error posting data', error)
     }
   }
 
@@ -188,7 +204,7 @@ export default function Index(props) {
           {initialCount.subjectCount || '...'} tárgy
           <p />
           Itt az éles adatbázis kérdései jelennek meg, amiket tudsz
-          szerkeszteni. A kérdésekhez tartozó '.data' prop-ot még nem tudod
+          szerkeszteni. A kérdésekhez tartozó .data prop-ot még nem tudod
           rendesen szerkeszteni, az később lesz implementálva. A Tárgy / Kérdés
           nézet között tudsz válogatni.
           <br />
@@ -204,12 +220,42 @@ export default function Index(props) {
     }
   }
 
+  const renderDbSelector = () => {
+    return (
+      <>
+        <select
+          style={{ margin: '10px 0px' }}
+          defaultValue={-1}
+          onChange={(event) => {
+            setSelectedDb(qdbs[event.target.value])
+          }}
+        >
+          <option disabled value={-1}>
+            {' -- Válassz egy kérdés adatbázist -- '}
+          </option>
+          {qdbs.map((qdb, i) => {
+            return (
+              <option value={i} key={qdb.name}>
+                {qdb.name}
+              </option>
+            )
+          })}
+        </select>
+      </>
+    )
+  }
+
+  if (!qdbs) {
+    return <LoadingIndicator />
+  }
+
   return (
     <div>
+      {renderDbSelector()}
       <div className={styles.optionsButtonContainer}>
         <span
           onClick={() => {
-            LoadData()
+            loadData()
           }}
         >
           Újratöltés
@@ -219,8 +265,8 @@ export default function Index(props) {
             placeholder="Jelszó feltöltéshez"
             type="text"
             value={password}
-            onChange={(e) => {
-              setPassword(e.target.value)
+            onChange={(event) => {
+              setPassword(event.target.value)
             }}
           />
         </span>
@@ -239,14 +285,22 @@ export default function Index(props) {
       <div className={styles.viewButtonContainer}>
         <span
           onClick={() => {
-            setView(views.question)
+            if (selectedDb) {
+              setView(views.question)
+            } else {
+              alert('Válassz egy adatbázist!')
+            }
           }}
         >
           Kérdés nézet
         </span>
         <span
           onClick={() => {
-            setView(views.subject)
+            if (selectedDb) {
+              setView(views.subject)
+            } else {
+              alert('Válassz egy adatbázist!')
+            }
           }}
         >
           Tárgy nézet