Initial commit

src/components/AllQuestions/AllQuestions.js

@@ -0,0 +1,100 @@
+import React, { PureComponent } from 'react'
+
+import LoadingIndicator from '../LoadingIndicator'
+import Subject from '../../components/Subject'
+
+import constants from '../../constants.json'
+import './AllQuestions.css'
+
+class AllQuestions extends PureComponent {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      loaded: false,
+      activeSubjName: '',
+      searchTerm: ''
+    }
+
+    console.info('Fetching data')
+    fetch(`${constants.serverUrl}data.json`) // eslint-disable-line
+      .then((resp) => {
+        return resp.json()
+      })
+      .then((data) => {
+        this.data = data
+        this.setState({
+          loaded: true
+        })
+      })
+  }
+
+  onSubjSelect (name) {
+    this.setState({
+      activeSubjName: name
+    })
+  }
+
+  searchBarOnChange (e) {
+    let text = e.target.value
+    this.setState({
+      searchTerm: text
+    })
+  }
+
+  render () {
+    const { loaded, activeSubjName, searchTerm } = this.state
+
+    if (loaded) {
+      let currSubj = this.data.Subjects.find((subj) => {
+        return subj.Name === activeSubjName
+      })
+
+      return (
+        <div>
+          <div>
+            <input
+              placeholder='Keresés...'
+              className='searchBar'
+              type='text'
+              value={searchTerm}
+              onChange={this.searchBarOnChange.bind(this)}
+            />
+          </div>
+          <div className='subjectSelector'>
+            {this.data.Subjects.map((subj, i) => {
+              if (!subj.Name.toLowerCase().includes(searchTerm.toLowerCase())) {
+                return null
+              }
+
+              return (
+                <div
+                  className={activeSubjName === subj.Name
+                    ? 'subjItem activeSubjItem'
+                    : 'subjItem'
+                  }
+                  key={i}
+                  onClick={() => this.onSubjSelect(subj.Name)}
+                >
+                  {subj.Name}
+                </div>
+              )
+            })}
+          </div>
+          <hr />
+          <div>
+            <Subject
+              subj={currSubj}
+            />
+          </div>
+        </div>
+      )
+    } else {
+      return (
+        <LoadingIndicator />
+      )
+    }
+  }
+}
+
+export default AllQuestions