Handling multiple data files in subjectBrowser and allQuestions

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')
-    fetch(`${constants.apiUrl}data.json`, {
-      credentials: 'include'
-    })
-      .then((resp) => {
-        return resp.json()
-      })
-      .then((data) => {
-        setData(data)
-        setSCount(data.length)
-        setQCount(data.reduce((acc, subj) => {
+    getData().then((result) => {
+      setData(result)
+      setSCount(result.length)
+      setQCount(
+        result.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
-            subj={currSubj}
-          />
+          <Subject subj={currSubj} />
         </div>
       </div>
     )
   } else {
-    return (
-      <LoadingIndicator />
-    )
+    return <LoadingIndicator />
   }
 }