Data.json new structure fix

src/components/QuestionSearchResult.js

@@ -5,7 +5,7 @@ import Questions from './Questions.js'
 import constants from '../constants.json'
 
 class QuestionSearchResult extends PureComponent {
-  render () {
+  render() {
     const { data, searchTerm, onChange, deleteQuestion } = this.props
 
     let subjs = []
@@ -16,14 +16,17 @@ class QuestionSearchResult extends PureComponent {
     }
 
     if (searchTerm) {
-      subjs = data.Subjects.reduce((acc, subj) => {
+      subjs = data.reduce((acc, subj) => {
         const resultQuestions = subj.Questions.reduce((qacc, question) => {
-          const keys = [ 'Q', 'A', 'data' ]
+          const keys = ['Q', 'A', 'data']
           keys.some((key) => {
             if (typeof question[key] !== 'string') {
               return false
             }
-            if (question[key] && question[key].toLowerCase().includes(searchTerm.toLowerCase())) {
+            if (
+              question[key] &&
+              question[key].toLowerCase().includes(searchTerm.toLowerCase())
+            ) {
               qacc.push(question)
               return true
             }
@@ -34,20 +37,22 @@ class QuestionSearchResult extends PureComponent {
           acc.push({
             Name: subj.Name,
             Questions: resultQuestions,
-            ind: subj.ind
+            ind: subj.ind,
           })
         }
         return acc
       }, [])
       results = subjs.reduce(countReducer, 0)
     } else {
-      results = data.Subjects.reduce(countReducer, 0)
+      results = data.reduce(countReducer, 0)
     }
 
     const renderCount = () => {
       return (
         <div>
-          {searchTerm ? '' : 'Kezdj el írni kereséshez!'} {results} {searchTerm ? 'találat' : 'kérdés' } {searchTerm ? subjs.length : data.Subjects.length} tárgy
+          {searchTerm ? '' : 'Kezdj el írni kereséshez!'} {results}{' '}
+          {searchTerm ? 'találat' : 'kérdés'}{' '}
+          {searchTerm ? subjs.length : data.length} tárgy
         </div>
       )
     }
@@ -56,10 +61,8 @@ class QuestionSearchResult extends PureComponent {
       return renderCount()
     } else {
       return (
-        <div >
         <div>
-            {renderCount()}
+          <div>{renderCount()}</div>
-          </div>
           <div>
             <Questions
               deleteQuestion={deleteQuestion}

src/components/SubjectSelector.js

@@ -1,27 +1,26 @@
 import styles from './SubjectSelector.module.css'
 
-export default function SubjectSelector (props) {
+export default function SubjectSelector(props) {
   const { activeSubjName, searchTerm, data, onSubjSelect } = props
 
   return (
     <div className={styles.subjectSelector}>
-      {data.Subjects.map((subj, i) => {
+      {data.map((subj, i) => {
         if (!subj.Name.toLowerCase().includes(searchTerm.toLowerCase())) {
           return null
         }
 
         return (
           <div
-            className={activeSubjName === subj.Name
+            className={
+              activeSubjName === subj.Name
                 ? 'subjItem activeSubjItem'
                 : 'subjItem'
             }
             key={i}
             onClick={() => onSubjSelect(subj.Name)}
           >
-            <span className={styles.subjName}>
+            <span className={styles.subjName}>{subj.Name}</span>
-              {subj.Name}
-            </span>
             <span className={styles.questionCount}>
               [ {subj.Questions.length} ]
             </span>

src/components/subjectView.js

@@ -6,7 +6,7 @@ import SubjectSelector from '../components/SubjectSelector.js'
 
 import styles from './subjectView.module.css'
 
-export default function SubjectView (props) {
+export default function SubjectView(props) {
   const { data, onChange, deleteQuestion } = props
   const [activeSubjName, setActiveSubjName] = useState('')
   const [searchTerm, setSearchTerm] = useState('')
@@ -15,14 +15,16 @@ export default function SubjectView (props) {
   const [qCount, setQCount] = useState(0)
 
   useEffect(() => {
-    setSCount(data.Subjects.length)
+    setSCount(data.length)
-    setQCount(data.Subjects.reduce((acc, subj) => {
+    setQCount(
+      data.reduce((acc, subj) => {
         return acc + subj.Questions.length
-    }, 0))
+      }, 0)
+    )
   }, [])
 
   if (data) {
-    let currSubj = data.Subjects.find((subj) => {
+    let currSubj = data.find((subj) => {
       return subj.Name === activeSubjName
     })
 
@@ -30,11 +32,13 @@ export default function SubjectView (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={() => {
@@ -50,7 +54,9 @@ export default function SubjectView (props) {
           data={data}
           activeSubjName={activeSubjName}
           searchTerm={searchTerm}
-          onSubjSelect={(subjName) => { setActiveSubjName(subjName) }}
+          onSubjSelect={(subjName) => {
+            setActiveSubjName(subjName)
+          }}
         />
         <hr />
         <div>
@@ -66,8 +72,6 @@ export default function SubjectView (props) {
       </div>
     )
   } else {
-    return (
+    return <LoadingIndicator />
-      <LoadingIndicator />
-    )
   }
 }

src/pages/index.js

@@ -11,7 +11,7 @@ import constants from '../constants.json'
 const views = {
   subject: 'SUBJECT',
   question: 'QUESTION',
-  welcome: 'WELCOME'
+  welcome: 'WELCOME',
 }
 
 // TODO: Add question on subjects view
@@ -19,7 +19,7 @@ const views = {
 // TODO: question.data editor
 // TODO: edit \n-s in questions / answers
 
-export default function Index (props) {
+export default function Index(props) {
   const [data, setData] = useState(null)
   const [view, setView] = useState(views.welcome)
   const [sending, setSending] = useState(false)
@@ -31,16 +31,16 @@ export default function Index (props) {
 
   const getCount = (d) => {
     return {
-      subjectCount: d.Subjects.length,
+      subjectCount: d.length,
-      questionCount: d.Subjects.reduce((acc, subj) => {
+      questionCount: d.reduce((acc, subj) => {
         acc += subj.Questions.length
         return acc
-      }, 0)
+      }, 0),
     }
   }
 
   const setIndexes = (d) => {
-    d.Subjects.forEach((subj, i) => {
+    d.forEach((subj, i) => {
       subj.ind = i
       subj.Questions.forEach((question, j) => {
         question.ind = j
@@ -54,7 +54,7 @@ export default function Index (props) {
     const toFetch = `${constants.apiUrl}data.json`
     console.info('Fetching', toFetch)
     fetch(toFetch, {
-      credentials: 'include'
+      credentials: 'include',
     })
       .then((resp) => {
         if (resp && resp.ok) {
@@ -81,31 +81,25 @@ export default function Index (props) {
   }, [])
 
   if (error) {
-    return (
+    return <div>{error}</div>
-      <div>
-        {error}
-      </div>
-    )
   }
 
   const deleteQuestion = (subjInd, questionInd) => {
-    data.Subjects[subjInd].Questions.splice(questionInd, 1)
+    data[subjInd].Questions.splice(questionInd, 1)
 
-    setData({
+    setData([...setIndexes(data)])
-      ...setIndexes(data)
-    })
   }
 
   const onChange = (subjInd, questionInd, newVal) => {
     const key = subjInd + '/' + questionInd
     setEditedQuestions({
       ...editedQuestions,
-      [key]: editedQuestions[key] ? editedQuestions[key] + 1 : 1
+      [key]: editedQuestions[key] ? editedQuestions[key] + 1 : 1,
     })
 
-    data.Subjects[subjInd].Questions[questionInd] = newVal
+    data[subjInd].Questions[questionInd] = newVal
     setData({
-      ...data
+      ...data,
     })
   }
 
@@ -119,8 +113,8 @@ export default function Index (props) {
       const rawResponse = await fetch(constants.apiUrl + 'uploaddata', {
         method: 'POST',
         headers: {
-          'Accept': 'application/json',
+          Accept: 'application/json',
-          'Content-Type': 'application/json'
+          'Content-Type': 'application/json',
         },
         credentials: 'include',
         body: JSON.stringify({
@@ -128,10 +122,11 @@ export default function Index (props) {
           count: getCount(data),
           initialCount: initialCount,
           password: password,
-          editedQuestions: editedQuestions
+          editedQuestions: editedQuestions,
+        }),
       })
-      })
+      rawResponse
-      rawResponse.json()
+        .json()
         .then((resp) => {
           setSending(false)
           if (resp.status === 'ok') {
@@ -141,7 +136,9 @@ export default function Index (props) {
             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
+            alert(
+              'Hiba feltöltés közben! (szerver oldalon)! Több adat konzolban'
+            ) // eslint-disable-line
             console.error('RESPONSE', resp)
             console.error(resp.message)
           }
@@ -182,29 +179,25 @@ export default function Index (props) {
           <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
+          Itt az éles adatbázis kérdései jelennek meg, amiket tudsz
-          tartozó '.data' prop-ot még nem tudod rendesen szerkeszteni, az később lesz implementálva.
+          szerkeszteni. A kérdésekhez tartozó '.data' prop-ot még nem tudod
-          A Tárgy / Kérdés nézet között tudsz válogatni.
+          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á.
+          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
+          Kérdés nézet: Kereső sávba írd be a kérdést / választ, a találatok ha
-          megjelennek, és ott tudod szerkeszteni
+          kevesebb mint 250 megjelennek, és ott tudod szerkeszteni
         </div>
       )
     } else {
-      return (
+      return <div>No view!</div>
-        <div>
-          No view!
-        </div>
-      )
     }
   }
 
   if (!data) {
-    return (
+    return <LoadingIndicator />
-      <LoadingIndicator />
-    )
   }
 
   return (
@@ -219,10 +212,12 @@ export default function Index (props) {
         </span>
         <span>
           <input
-            placeholder='Jelszó feltöltéshez'
+            placeholder="Jelszó feltöltéshez"
-            type='text'
+            type="text"
             value={password}
-            onChange={(e) => { setPassword(e.target.value) }}
+            onChange={(e) => {
+              setPassword(e.target.value)
+            }}
           />
         </span>
         <span
@@ -239,11 +234,17 @@ export default function Index (props) {
       </div>
       <div className={styles.viewButtonContainer}>
         <span
-          onClick={() => { setView(views.question) }}>
+          onClick={() => {
+            setView(views.question)
+          }}
+        >
           Kérdés nézet
         </span>
         <span
-          onClick={() => { setView(views.subject) }}>
+          onClick={() => {
+            setView(views.subject)
+          }}
+        >
           Tárgy nézet
         </span>
       </div>