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

src/components/possibleAnswers.js

@@ -0,0 +1,256 @@
+import React, { useEffect, useState } from 'react'
+
+import LoadingIndicator from '../components/LoadingIndicator'
+import SearchBar from '../components/searchBar'
+import TestView from '../components/testView'
+
+import constants from '../constants.json'
+import styles from './possibleAnswers.module.css'
+
+const Infos = () => {
+  return (
+    <div className={styles.infoContainer}>
+      <div>
+        Itt azok a tesztek találhatók, amiknek a kitöltése után nem volt
+        ellenőrző oldal. A script így nem tudja, hogy melyik a helyes megoldás.
+        De ha ti igen, akkor jelöljétek be / írjátok be, és mentsétek el. Így
+        mikor legközelebb találkoztok a kérdéssel a script tudni fogja a helyes
+        választ. Ezzel másoknak is nagyon sokat segítetek.
+      </div>
+    </div>
+  )
+}
+
+const fetchPossibleAnswers = () => {
+  return new Promise((resolve) => {
+    fetch(`${constants.apiUrl}possibleAnswers`, {
+      credentials: 'include',
+    })
+      .then((resp) => {
+        return resp.json()
+      })
+      .then((res) => {
+        resolve(res)
+      })
+  })
+}
+
+const fetchSubject = (subj, savedQuestionsFileName) => {
+  return new Promise((resolve) => {
+    fetch(
+      `${constants.apiUrl}/savedQuestions/${subj}/${savedQuestionsFileName}`,
+      {
+        credentials: 'include',
+      }
+    )
+      .then((resp) => {
+        return resp.json()
+      })
+      .then((resp) => {
+        resolve(resp)
+      })
+  })
+}
+
+const fetchTest = (subj, test) => {
+  return new Promise((resolve) => {
+    fetch(`${constants.apiUrl}/savedQuestions/${subj}/${test}`, {
+      credentials: 'include',
+    })
+      .then((resp) => {
+        return resp.json()
+      })
+      .then((resp) => {
+        resolve(resp)
+      })
+  })
+}
+
+export default function PossibleAnswers({ router, refetchDbs }) {
+  const [currSubjName, setCurrSubjName] = useState(null)
+  const [currTestName, setCurrTestName] = useState(null)
+
+  const [subjects, setSubjects] = useState([])
+  const [currSubj, setCurrSubj] = useState(null)
+  const [currTest, setCurrTest] = useState(null)
+
+  const [savedQuestionsFileName, setSavedQuestionsFileName] = useState(null)
+  const [searchTerm, setSearchTerm] = useState('')
+
+  useEffect(() => {
+    fetchPossibleAnswers().then((resp) => {
+      setSubjects(resp.subjects)
+      setSavedQuestionsFileName(resp.savedQuestionsFileName)
+
+      const subj = router.query.subj
+        ? decodeURIComponent(router.query.subj)
+        : ''
+      const test = router.query.test
+        ? decodeURIComponent(router.query.test)
+        : ''
+
+      if (subj) {
+        fetchSubject(subj, resp.savedQuestionsFileName).then((resp) => {
+          setCurrSubj(resp)
+          setCurrSubjName(subj)
+          router.push(
+            `${router.pathname}?v=pa&subj=${encodeURIComponent(subj)}`,
+            undefined,
+            { shallow: true }
+          )
+          if (subj && test) {
+            fetchTest(subj, test).then((resp) => {
+              setCurrTest(resp)
+              setCurrTestName(test)
+              router.push(
+                `${router.pathname}?v=pa&subj=${encodeURIComponent(
+                  subj
+                )}&test=${encodeURIComponent(test)}`,
+                undefined,
+                { shallow: true }
+              )
+            })
+          }
+        })
+      }
+    })
+  }, [])
+
+  const renderStuff = () => {
+    if (subjects && currSubj && currTest) {
+      return (
+        <>
+          <div
+            className={styles.backButton}
+            onClick={() => {
+              setCurrTest(null)
+              router.back()
+            }}
+          >
+            Vissza
+          </div>
+          <div>
+            {currTest && (
+              <TestView
+                subjName={currSubjName}
+                testName={currTestName}
+                test={currTest}
+                router={router}
+                onDelete={() => {
+                  refetchDbs()
+                  setCurrTest(null)
+                  fetchSubject(currSubjName, savedQuestionsFileName).then(
+                    (resp) => {
+                      setCurrSubj(resp)
+                    }
+                  )
+                }}
+              />
+            )}
+          </div>
+        </>
+      )
+    } else if (subjects && currSubj) {
+      return (
+        <>
+          <div className={styles.headerContainer}>
+            <div
+              className={styles.backButton}
+              onClick={() => {
+                setCurrSubj(null)
+                router.back()
+              }}
+            >
+              Vissza
+            </div>
+            <div className={styles.subjName}>{currSubjName}</div>
+          </div>
+          <div className={styles.tableContainer}>
+            <>
+              <div>
+                <div>Dátum</div>
+                <div>Felhasználó ID</div>
+                <div>Tárgy</div>
+                <div>Teszt URL</div>
+              </div>
+              {currSubj &&
+                currSubj.map((test, i) => {
+                  return (
+                    <div
+                      className={styles.testContainer}
+                      key={i}
+                      onClick={() => {
+                        setCurrTestName(test.fname)
+                        router.push(
+                          `${router.pathname}?v=pa&subj=${encodeURIComponent(
+                            currSubjName
+                          )}&test=${encodeURIComponent(test.fname)}`,
+                          undefined,
+                          { shallow: true }
+                        )
+
+                        fetchTest(currSubjName, test.fname).then((resp) => {
+                          setCurrTest(resp)
+                        })
+                      }}
+                    >
+                      <div>{new Date(test.date).toLocaleString()}</div>
+                      <div>{test.userid}</div>
+                      <div>{test.subj}</div>
+                      <div>{test.testUrl}</div>
+                    </div>
+                  )
+                })}
+            </>
+          </div>
+        </>
+      )
+    } else if (subjects) {
+      return (
+        <>
+          <Infos />
+          <SearchBar value={searchTerm} onChange={(e) => setSearchTerm(e)} />
+          <div className={styles.tableContainer}>
+            <>
+              <div>Tárgy neve</div>
+              {subjects.map((subj, i) => {
+                if (
+                  !subj.name.toLowerCase().includes(searchTerm.toLowerCase())
+                ) {
+                  return null
+                }
+                return (
+                  <div
+                    key={i}
+                    onClick={() => {
+                      setCurrSubjName(subj.name)
+                      router.push(
+                        `${router.pathname}?v=pa&subj=${encodeURIComponent(
+                          subj.name
+                        )}`,
+                        undefined,
+                        { shallow: true }
+                      )
+
+                      fetchSubject(subj.name, savedQuestionsFileName).then(
+                        (resp) => {
+                          setCurrSubj(resp)
+                        }
+                      )
+                    }}
+                  >
+                    {subj.name}
+                  </div>
+                )
+              })}
+            </>
+          </div>
+        </>
+      )
+    } else {
+      return <LoadingIndicator />
+    }
+  }
+
+  return renderStuff()
+}