diff --git a/src/components/QuestionSearchResult.js b/src/components/QuestionSearchResult.js
new file mode 100644
index 0000000..065fd1b
--- /dev/null
+++ b/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 (
+
+ {searchTerm ? '' : 'Kezdj el írni kereséshez!'} {results} {searchTerm ? 'találat' : 'kérdés' } {searchTerm ? subjs.length : data.Subjects.length} tárgy
+
+ )
+ }
+
+ if (results > constants.maxQuestionsToRender) {
+ return renderCount()
+ } else {
+ return (
+
+
+ {renderCount()}
+
+
+
+
+
+ )
+ }
+ }
+}
+
+export default QuestionSearchResult
diff --git a/src/components/Questions.js b/src/components/Questions.js
new file mode 100644
index 0000000..1a93f4c
--- /dev/null
+++ b/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 (
+
+ {subjs.map((subj) => {
+ return (
+
+
+ {subj.Name}
+
+ { subj.Questions.map((question) => {
+ return (
+
+ )
+ })}
+
+ )
+ })}
+
+ )
+ }
+}
+
+export default Questions
diff --git a/src/components/Questions.module.css b/src/components/Questions.module.css
new file mode 100644
index 0000000..906c458
--- /dev/null
+++ b/src/components/Questions.module.css
@@ -0,0 +1,6 @@
+.subjName {
+ font-size: 24px;
+ background-color: #9999ff;
+ color: black;
+ padding: 10px;
+}
diff --git a/src/components/SubjectSelector.module.css b/src/components/SubjectSelector.module.css
new file mode 100644
index 0000000..6c444a1
--- /dev/null
+++ b/src/components/SubjectSelector.module.css
@@ -0,0 +1,3 @@
+.questionCount {
+ justify-content: flex-end;
+}
diff --git a/src/pages/allQuestions.js b/src/pages/allQuestions.js
index ad86b98..93820b2 100644
--- a/src/pages/allQuestions.js
+++ b/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) {
-
diff --git a/src/pages/subjectBrowser.js b/src/pages/subjectBrowser.js
new file mode 100644
index 0000000..59d7351
--- /dev/null
+++ b/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 (
+
+
+ { setSearchTerm(e.target.value) }}
+ />
+
+
{ setActiveSubjName(subjName) }}
+ />
+
+
+
+
+
+ )
+ } else {
+ return (
+
+ )
+ }
+}