Question searcher / subject browser improving

src/components/QuestionSearchResult.js

@@ -0,0 +1,73 @@
+import React, { PureComponent } from 'react'
+
+import Questions from './Questions.js'
+
+import constants from '../constants.json'
+
+class QuestionSearchResult extends PureComponent {
+  render () {
+    const { data, searchTerm } = this.props
+
+    let subjs = []
+    let results = -1
+
+    const countReducer = (acc, subj) => {
+      return acc + subj.Questions.length
+    }
+
+    if (searchTerm) {
+      subjs = data.Subjects.reduce((acc, subj) => {
+        const resultQuestions = subj.Questions.reduce((qacc, question) => {
+          const keys = [ 'Q', 'A', 'data' ]
+          keys.some((key) => {
+            if (typeof question[key] !== 'string') {
+              return false
+            }
+            if (question[key] && question[key].toLowerCase().includes(searchTerm.toLowerCase())) {
+              qacc.push(question)
+              return true
+            }
+          })
+          return qacc
+        }, [])
+        if (resultQuestions.length > 0) {
+          acc.push({
+            Name: subj.Name,
+            Questions: resultQuestions
+          })
+        }
+        return acc
+      }, [])
+      results = subjs.reduce(countReducer, 0)
+    } else {
+      results = data.Subjects.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
+        </div>
+      )
+    }
+
+    if (results > constants.maxQuestionsToRender) {
+      return renderCount()
+    } else {
+      return (
+        <div >
+          <div>
+            {renderCount()}
+          </div>
+          <div>
+            <Questions
+              subjs={subjs}
+            />
+          </div>
+        </div>
+      )
+    }
+  }
+}
+
+export default QuestionSearchResult

src/components/Questions.js

@@ -0,0 +1,34 @@
+import React, { PureComponent } from 'react'
+
+import Question from './Question.js'
+
+import styles from './Questions.module.css'
+
+class Questions extends PureComponent {
+  render () {
+    const { subjs } = this.props
+
+    return (
+      <div>
+        {subjs.map((subj) => {
+          return (
+            <div>
+              <div className={styles.subjName}>
+                {subj.Name}
+              </div>
+              { subj.Questions.map((question) => {
+                return (
+                  <Question
+                    question={question}
+                  />
+                )
+              })}
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+}
+
+export default Questions

src/components/Questions.module.css

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

src/components/SubjectSelector.module.css

@@ -0,0 +1,3 @@
+.questionCount {
+  justify-content: flex-end;
+}

src/pages/allQuestions.js

@@ -2,12 +2,11 @@ import React, { useState, useEffect } from 'react'
 import fetch from 'unfetch'
 
 import LoadingIndicator from '../components/LoadingIndicator.js'
-import Questions from '../components/Questions.js'
+import QuestionSearchResult from '../components/QuestionSearchResult.js'
 
 import constants from '../constants.json'
 
 export default function AllQuestions (props) {
-  console.log('AllQuestions module render')
   const [data, setData] = useState(null)
   const [searchTerm, setSearchTerm] = useState('')
 
@@ -35,7 +34,7 @@ export default function AllQuestions (props) {
         </div>
         <hr />
         <div>
-          <Questions
+          <QuestionSearchResult
             data={data}
             searchTerm={searchTerm}
           />

src/pages/subjectBrowser.js

@@ -0,0 +1,61 @@
+import React, { useState, useEffect } from 'react'
+import fetch from 'unfetch'
+
+import LoadingIndicator from '../components/LoadingIndicator.js'
+import Subject from '../components/Subject.js'
+import SubjectSelector from '../components/SubjectSelector.js'
+
+import constants from '../constants.json'
+
+export default function AllQuestions (props) {
+  const [data, setData] = useState(null)
+  const [activeSubjName, setActiveSubjName] = useState('')
+  const [searchTerm, setSearchTerm] = useState('')
+
+  useEffect(() => {
+    console.info('Fetching data')
+    fetch(`${constants.apiUrl}data.json`)
+      .then((resp) => {
+        return resp.json()
+      })
+      .then((data) => {
+        setData(data)
+      })
+  }, [])
+
+  if (data) {
+    let currSubj = data.Subjects.find((subj) => {
+      return subj.Name === activeSubjName
+    })
+
+    return (
+      <div>
+        <div>
+          <input
+            placeholder='Keresés...'
+            className='searchBar'
+            type='text'
+            value={searchTerm}
+            onChange={(e) => { setSearchTerm(e.target.value) }}
+          />
+        </div>
+        <SubjectSelector
+          data={data}
+          activeSubjName={activeSubjName}
+          searchTerm={searchTerm}
+          onSubjSelect={(subjName) => { setActiveSubjName(subjName) }}
+        />
+        <hr />
+        <div>
+          <Subject
+            subj={currSubj}
+          />
+        </div>
+      </div>
+    )
+  } else {
+    return (
+      <LoadingIndicator />
+    )
+  }
+}