Complete project redo, got carried away, and forgot to commit during rewriting

src/pages/index.js

@@ -1,37 +1,118 @@
 import React, { useState, useEffect } from 'react'
-import fetch from 'unfetch'
+import Head from 'next/head'
 
 import SubjectView from '../components/subjectView'
 import QuestionView from '../components/questionView'
 import QuestionAdder from '../components/questionAdder.js'
+import PossibleAnswers from '../components/possibleAnswers.js'
+
+import DbSelector from '../components/dbSelector.js'
 import LoadingIndicator from '../components/LoadingIndicator'
 
 import styles from './index.module.css'
+import commonStyles from '../commonStyles.module.css'
 import constants from '../constants.json'
 
-const views = {
-  welcome: 'WELCOME',
-  subject: 'SUBJECT',
-  question: 'QUESTION',
-  questionAdder: 'QADDER',
+const Infos = ({ onClick, renderOKButton }) => {
+  return (
+    <div className={commonStyles.infoContainer}>
+      <div className={commonStyles.infoHeader}>Kérdés szerkesztő</div>
+      <div>
+        Ezen az oldalon az éles adatbázisban levő kérdéseket tudod szerkeszteni,
+        vagy azokhoz tudsz adni.{' '}
+        <b>
+          A törléshez és módosításokhoz nem kér megerősítést, ezek azonnal
+          megtörténnek, és nem visszavonhatóak.
+        </b>
+      </div>
+      <div>
+        <i>Néhány dolog, amit kérlek tarts be szerkesztés közben:</i>
+        <div style={{ textAlign: 'left', width: '700px' }}>
+          <ul>
+            <li>
+              Ne rontsd el a kérdéseket sok törléssel / rossz válasz
+              megadásával. Sok más felhasználónak lesz rossz, és visszakereshető
+              / tiltható a módosító
+            </li>
+            <li>
+              Arra is vigyázz, hogy véletlen se történjen ilyesmi, vagy ha mégis
+              valami baj történt, akkor azt{' '}
+              <a href={`${constants.siteUrl}irc`}>jelezd</a>. Van sok biztonsági
+              mentés
+            </li>
+            <li>
+              Ahhoz, hogy a script megtalálja a helyes választ a kérdés
+              szövegének <b>pontosan</b> olyannak kell lennie, mint a teszt
+              közben (elírásokkal, .... -okkal, meg mindennel)
+            </li>
+          </ul>
+        </div>
+        <div>
+          Ha akármi kérdés van,{' '}
+          <a href={`${constants.siteUrl}irc`}>
+            itt lehet chatszobában kérdezni
+          </a>
+          , vagy{' '}
+          <a href={`${constants.siteUrl}feedback`}>
+            itt lehet üzenetet küldeni
+          </a>
+          .
+        </div>
+      </div>
+      {renderOKButton && (
+        <div className={commonStyles.infoReadButton} onClick={onClick}>
+          OK
+        </div>
+      )}
+    </div>
+  )
 }
 
-// TODO: Add question on subjects view
-// TODO: Add subject on subjects view
-// TODO: question.data editor
-// TODO: edit \n-s in questions / answers
+const fetchDbs = () => {
+  return new Promise((resolve) => {
+    fetch(`${constants.apiUrl}getdbs`, {
+      credentials: 'include',
+    })
+      .then((resp) => {
+        return resp.json()
+      })
+      .then((resp) => {
+        resolve(resp)
+      })
+  })
+}
 
-export default function Index() {
+const fetchData = (selectedDb) => {
+  return new Promise((resolve) => {
+    const toFetch = `${constants.apiUrl}${selectedDb.path}`
+    fetch(toFetch, {
+      credentials: 'include',
+    })
+      .then((resp) => {
+        return resp.json()
+      })
+      .then((resp) => {
+        resolve(resp)
+      })
+  })
+}
+
+const views = {
+  welcome: 'w',
+  subject: 's',
+  question: 'q',
+  questionAdder: 'qa',
+  possibleAnswers: 'pa',
+}
+
+export default function Index({ router }) {
+  const [infoRead, setInfoRead] = useState(false)
   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)
-  const [password, setPassword] = useState('')
-  const [editedQuestions, setEditedQuestions] = useState({})
 
-  const [initialCount, setInitialCount] = useState({})
+  const [error, setError] = useState(null)
 
   useEffect(() => {
     if (selectedDb) {
@@ -39,25 +120,16 @@ export default function Index() {
     }
   }, [selectedDb])
 
-  const getCount = (data) => {
-    return {
-      subjectCount: data.length,
-      questionCount: data.reduce((acc, subj) => {
-        acc += subj.Questions.length
-        return acc
-      }, 0),
-    }
-  }
+  useEffect(() => {
+    fetchDbs().then((resp) => {
+      setQdbs(resp)
 
-  const setIndexes = (data) => {
-    data.forEach((subj, i) => {
-      subj.ind = i
-      subj.Questions.forEach((question, j) => {
-        question.ind = j
-      })
+      const view = router.query.v
+        ? decodeURIComponent(router.query.v)
+        : views.welcome
+      setView(view)
     })
-    return data
-  }
+  }, [])
 
   const loadData = () => {
     setData(null)
@@ -66,18 +138,9 @@ export default function Index() {
       return
     }
 
-    const toFetch = `${constants.apiUrl}${selectedDb.path}`
-    console.info('Fetching', toFetch)
-    fetch(toFetch, {
-      credentials: 'include',
-    })
+    fetchData(selectedDb)
       .then((resp) => {
-        return resp.json()
-      })
-      .then((resp) => {
-        setData(setIndexes(resp))
-        const count = getCount(resp)
-        setInitialCount(count)
+        setData(resp)
       })
       .catch((error) => {
         console.error(error)
@@ -86,240 +149,162 @@ export default function Index() {
       })
   }
 
-  useEffect(() => {
-    fetch(`${constants.apiUrl}getdbs`, {
-      credentials: 'include',
-    })
-      .then((resp) => {
-        return resp.json()
+  const refetchDbs = () => {
+    if (selectedDb) {
+      fetchData(selectedDb).then((resp) => {
+        setData(resp)
       })
-      .then((resp) => {
-        setQdbs(resp)
-      })
-  }, [])
-
-  if (error) {
-    return <div>{error}</div>
-  }
-
-  const deleteQuestion = (subjInd, questionInd) => {
-    data[subjInd].Questions.splice(questionInd, 1)
-
-    setData([...setIndexes(data)])
-  }
-
-  const onChange = (subjInd, questionInd, newVal) => {
-    const key = subjInd + '/' + questionInd
-    setEditedQuestions({
-      ...editedQuestions,
-      [key]: editedQuestions[key] ? editedQuestions[key] + 1 : 1,
-    })
-
-    data[subjInd].Questions[questionInd] = newVal
-    setData([...data])
-  }
-
-  const SendDataToServer = async () => {
-    if (sending) {
-      alert('Adatok már feltöltés alatt, várd meg míg feltölti') // eslint-disable-line
-      return
     }
-
-    data.forEach((subj) => {
-      delete subj.ind
-      subj.Questions.forEach((question) => {
-        delete question.ind
-      })
+    fetchDbs().then((resp) => {
+      setQdbs(resp)
     })
+  }
 
-    setSending(true)
-    try {
-      const rawResponse = await fetch(constants.apiUrl + 'uploaddata', {
-        method: 'POST',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json',
-        },
-        credentials: 'include',
-        body: JSON.stringify({
-          newData: data,
-          count: getCount(data),
-          initialCount: initialCount,
-          password: password,
-          editedQuestions: editedQuestions,
-        }),
-      })
-      rawResponse
-        .json()
-        .then((resp) => {
-          setSending(false)
-          if (resp.status === 'ok') {
-            alert(`Sikeres feltöltés! thankx ${resp.user}!`) // eslint-disable-line
-            console.log('OK')
-            loadData()
-          } else if (resp.status === 'invalidPass') {
-            alert('Hibás jelszó!') // eslint-disable-line
-            console.log('invalidPass')
-          } else {
-            alert(
-              'Hiba feltöltés közben! (szerver oldalon)! Több adat konzolban'
-            ) // eslint-disable-line
-            console.error('RESPONSE', resp)
-            console.error(resp.message)
-          }
-        })
-        .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', error)
-        })
-    } 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', error)
-    }
+  const onQuestionDelete = (deletedQuestions) => {
+    console.log(deletedQuestions)
+  }
+
+  const onQuestionChange = (newVal, subjName, questionIndex) => {
+    console.log(newVal, subjName, questionIndex)
   }
 
   const renderView = () => {
     if (view === views.subject) {
       return (
-        <SubjectView
-          onChange={onChange}
-          data={data}
-          deleteQuestion={deleteQuestion}
-        />
+        <>
+          <Head>
+            <title>Tárgyak - Data Editor | Frylabs.net</title>
+          </Head>
+          <DbSelector qdbs={qdbs} onChange={setSelectedDb} />
+          {data && <SubjectView selectedDb={selectedDb} data={data} />}
+        </>
       )
     } else if (view === views.question) {
       return (
-        <QuestionView
-          onChange={onChange}
-          data={data}
-          deleteQuestion={deleteQuestion}
-        />
+        <>
+          <Head>
+            <title>Kérdések - Data Editor | Frylabs.net</title>
+          </Head>
+          <DbSelector qdbs={qdbs} onChange={setSelectedDb} />
+          {data && (
+            <QuestionView
+              selectedDb={selectedDb}
+              onChange={onQuestionChange}
+              onDelete={onQuestionDelete}
+              data={data}
+            />
+          )}
+        </>
       )
     } else if (view === views.questionAdder) {
-      return <QuestionAdder />
-    } else if (view === views.welcome) {
       return (
-        <div className={styles.welcome}>
-          Kérdés szerkesztő
-          <br />
-          {initialCount.questionCount || '...'} kérdés,{' '}
-          {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
-          rendesen szerkeszteni, az később lesz implementálva. A Tárgy / Kérdés
-          nézet között tudsz válogatni.
-          <br />
-          Tárgy nézet: a tárgyak dobozban kattints egy tárgyra, minden kérdés
-          ott lessz hozzá.
-          <br />
-          Kérdés nézet: Kereső sávba írd be a kérdést / választ, a találatok ha
-          kevesebb mint 250 megjelennek, és ott tudod szerkeszteni
-        </div>
+        <>
+          <Head>
+            <title>Kérdés beküldés - Data Editor | Frylabs.net</title>
+          </Head>
+          <DbSelector qdbs={qdbs} onChange={setSelectedDb} />
+          <QuestionAdder
+            data={data}
+            selectedDb={selectedDb}
+            refetchDbs={refetchDbs}
+          />
+        </>
       )
+    } else if (view === views.possibleAnswers) {
+      return (
+        <>
+          <Head>
+            <title>Kitöltetlen tesztek - Data Editor | Frylabs.net</title>
+          </Head>
+          <PossibleAnswers refetchDbs={refetchDbs} router={router} />
+        </>
+      )
+    } else if (view === views.welcome) {
+      return <Infos renderOKButton={false} />
     } else {
       return <div>No view!</div>
     }
   }
 
-  const renderDbSelector = () => {
+  function renderViewSelector() {
     return (
-      <>
-        <select
-          style={{ margin: '10px 0px' }}
-          defaultValue={-1}
-          onChange={(event) => {
-            setSelectedDb(qdbs[event.target.value])
+      <div className={styles.viewButtonContainer}>
+        <div
+          className={view === views.question ? styles.activeView : undefined}
+          onClick={() => {
+            router.replace(
+              `${router.pathname}?v=${views.question}`,
+              undefined,
+              { shallow: true }
+            )
+            setView(views.question)
           }}
         >
-          <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>
+          Kérdések
+        </div>
+        <div
+          title={
+            'Választott adatbázisban lévő tárgyak megjelenítése, és tárgyakon belüli kérdések szerkesztése'
+          }
+          className={view === views.subject ? styles.activeView : undefined}
+          onClick={() => {
+            router.replace(`${router.pathname}?v=${views.subject}`, undefined, {
+              shallow: true,
+            })
+            setView(views.subject)
+          }}
+        >
+          Tárgyak
+        </div>
+        <div
+          className={
+            view === views.questionAdder ? styles.activeView : undefined
+          }
+          onClick={() => {
+            router.replace(
+              `${router.pathname}?v=${views.questionAdder}`,
+              undefined,
+              { shallow: true }
             )
-          })}
-        </select>
-      </>
+            setView(views.questionAdder)
+          }}
+        >
+          Kérdés beküldés
+        </div>
+        <div
+          className={
+            view === views.possibleAnswers ? styles.activeView : undefined
+          }
+          onClick={() => {
+            router.replace(
+              `${router.pathname}?v=${views.possibleAnswers}`,
+              undefined,
+              { shallow: true }
+            )
+            setView(views.possibleAnswers)
+          }}
+        >
+          Kitöltetlen tesztek
+        </div>
+      </div>
     )
   }
 
+  if (error) {
+    return <div>{error}</div>
+  }
+
+  if (!infoRead) {
+    return <Infos onClick={() => setInfoRead(true)} renderOKButton />
+  }
+
   if (!qdbs) {
     return <LoadingIndicator />
   }
 
   return (
     <div>
-      {renderDbSelector()}
-      <div className={styles.optionsButtonContainer}>
-        <span
-          onClick={() => {
-            loadData()
-          }}
-        >
-          Újratöltés
-        </span>
-        <span>
-          <input
-            placeholder="Jelszó kérdések módosításhoz"
-            type="text"
-            value={password}
-            onChange={(event) => {
-              setPassword(event.target.value)
-            }}
-          />
-        </span>
-        <span
-          onClick={() => {
-            if (password && selectedDb) {
-              SendDataToServer()
-            } else {
-              alert('Nincs jelszó, vagy nem választottál ki adatbázist!') // eslint-disable-line
-            }
-          }}
-        >
-          {sending ? 'Feltöltés ...' : 'Mentés'}
-        </span>
-      </div>
-      <div className={styles.viewButtonContainer}>
-        <span
-          onClick={() => {
-            if (selectedDb) {
-              setView(views.question)
-            } else {
-              alert('Válassz egy adatbázist!')
-            }
-          }}
-        >
-          Kérdés nézet
-        </span>
-        <span
-          title={
-            'Választott adatbázisban lévő tárgyak megjelenítése, és tárgyakon belüli kérdések szerkesztése'
-          }
-          onClick={() => {
-            if (selectedDb) {
-              setView(views.subject)
-            } else {
-              alert('Válassz egy adatbázist!')
-            }
-          }}
-        >
-          Tárgy nézet
-        </span>
-        <span
-          onClick={() => {
-            setView(views.questionAdder)
-          }}
-        >
-          Kérdés beküldés
-        </span>
-      </div>
+      {renderViewSelector()}
       {renderView()}
     </div>
   )