Multiple db handling, font size changes

package.json

@@ -13,6 +13,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "eslint-plugin-react": "^7.22.0",
     "next": "^9.3.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",

src/components/Questions.module.css

@@ -1,5 +1,5 @@
 .subjName {
-  font-size: 24px;
+  font-size: 18px;
   background-color: #9999ff;
   color: black;
   padding: 10px;

src/components/question.module.css

@@ -1,6 +1,5 @@
 .questionInput {
   flex-grow: 1;
-  font-size: 22px;
   background-color: var(--background-color);
   color: white;
   border: none;
@@ -20,7 +19,6 @@
 
 .deleteButton {
   padding: 6px;
-  font-size: 22px;
   background-color: var(--background-color);
   color: white;
   cursor: pointer;

src/components/questionView.module.css

@@ -4,7 +4,6 @@
   color: white;
   background-color: #212127;
   border: none;
-  font-size: 18px;
   flex-grow: 1;
 }
 
@@ -17,7 +16,6 @@
   width: 80px;
   background-color: var(--background-color);
   color: white;
-  font-size: 23px;
   cursor: pointer;
   border: none;
 }

src/constants.json

@@ -1,4 +1,4 @@
 {
-  "apiUrl": "https://api.frylabs.net/",
+  "apiUrl": "http://localhost:8080/",
   "maxQuestionsToRender": 250
 }

src/defaultStyles.css

@@ -16,7 +16,7 @@ a {
 
 .link {
   margin: 20px;
-  font-size: 20px;
+  font-size: 16px;
 }
 
 .sidebarLink {
@@ -66,7 +66,7 @@ a {
 }
 
 .sidebarheader {
-  font-size: 40px;
+  font-size: 30px;
   color: var(--bright-color);
   display: flex;
   text-align: center;
@@ -84,7 +84,7 @@ a {
 .question {
   word-wrap: break-word;
   font-weight: bold;
-  font-size: 17px;
+  font-size: 15px;
   color: #ffffff;
 }
 
@@ -104,7 +104,7 @@ a {
   vertical-align: middle;
 
   color: #fff;
-  font-size: 30px;
+  font-size: 25px;
 }
 
 .uquestioncontainer {
@@ -121,7 +121,7 @@ a {
 
 .uquestion {
   font-weight: 'bold';
-  font-size: 16px;
+  font-size: 14px;
   color: #fff;
   margin: 5px;
 }
@@ -133,7 +133,7 @@ a {
 .uquestionnumber {
   color: #fff;
   margin: 5px;
-  font-size: 20px;
+  font-size: 16px;
 }
 
 .link {
@@ -141,7 +141,7 @@ a {
 }
 
 .subjItem {
-  font-size: 18px;
+  font-size: 16px;
   padding: 3px;
   cursor: pointer;
   float: 1;
@@ -158,3 +158,26 @@ a {
   background-color: #555;
   color: white;
 }
+
+select {
+  cursor: pointer;
+  width: 100%;
+  max-width: 100%;
+  appearance: none;
+  border: 1px solid var(--background-color);
+  box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.04);
+  line-height: 35px;
+  border-radius: 3px;
+
+  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
+    linear-gradient(to bottom, #222426 0%, #222426 100%);
+  background-repeat: no-repeat, repeat;
+  background-position: right 0.7em top 50%, 0 0;
+  background-size: 0.65em auto, 100%;
+
+  color: white;
+}
+
+select:hover {
+  border: 1px solid #99f;
+}

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

src/pages/index.module.css

@@ -2,9 +2,8 @@
   cursor: pointer;
   display: inline-block;
   margin: 5px;
-  padding: 5px;
-  height: 45px;
-  font-size: 30px;
+  padding: 10px;
+  font-size: 18px;
   width: 25%;
   text-align: center;
   border-color: var(--background-color);
@@ -53,6 +52,6 @@
 
 .welcome {
   text-align: center;
-  font-size: 20px;
+  font-size: 18px;
   color: white;
 }