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 ( + + ) + } +}