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;
+}