Initial commit, with fully working project :p

src/components/LoadingIndicator.js

@@ -0,0 +1,13 @@
+import React, { PureComponent } from 'react'
+
+class LoadingIndicator extends PureComponent {
+  render () {
+    return (
+      <div className='loadingindicator'>
+        Loading...
+      </div>
+    )
+  }
+}
+
+export default LoadingIndicator

src/components/Question.js

@@ -0,0 +1,79 @@
+import React, { PureComponent } from 'react'
+
+import styles from './question.module.css'
+
+class Question extends PureComponent {
+  render () {
+    const { subjInd, question, onChange, deleteQuestion } = this.props
+
+    let qdata = question.data
+    if (typeof qdata === 'object' && qdata.type === 'simple') {
+      qdata = ''
+    }
+    if (qdata) {
+      try {
+        qdata = JSON.stringify(qdata)
+      } catch (e) {}
+    }
+
+    const qChange = (e) => {
+      onChange(subjInd, question.ind, {
+        ...question,
+        [e.target.name]: e.target.value
+      })
+    }
+
+    // TODO
+    const qDataChange = (e) => {
+      try {
+        let newData = JSON.parse(e.target.value)
+        onChange(subjInd, question.ind, {
+          ...question,
+          data: newData
+        })
+      } catch (e) {
+        console.log('invalid JSON')
+      }
+    }
+
+    return (
+      <div className={styles.questionContainer}>
+        <div className={styles.inputContainer}>
+          <input
+            className={styles.questionInput}
+            type='text'
+            value={question.Q}
+            onChange={qChange}
+            name='Q'
+          />
+        </div>
+        <div className={styles.inputContainer}>
+          <input
+            className={styles.questionInput}
+            type='text'
+            value={question.A}
+            onChange={qChange}
+            name='A'
+          />
+        </div>
+        <div className={styles.inputContainer}>
+          <input
+            className={styles.questionInput}
+            type='text'
+            value={JSON.stringify(question.data)}
+            onChange={qDataChange}
+            name='data'
+          />
+          <span
+            className={styles.deleteButton}
+            onClick={() => { deleteQuestion(subjInd, question.ind) }}
+          >
+            Delete question
+          </span>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default Question

src/components/QuestionSearchResult.js

@@ -0,0 +1,76 @@
+import React, { PureComponent } from 'react'
+
+import Questions from './Questions.js'
+
+import constants from '../constants.json'
+
+class QuestionSearchResult extends PureComponent {
+  render () {
+    const { data, searchTerm, onChange, deleteQuestion } = 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,
+            ind: subj.ind
+          })
+        }
+        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
+              deleteQuestion={deleteQuestion}
+              subjs={subjs}
+              onChange={onChange}
+            />
+          </div>
+        </div>
+      )
+    }
+  }
+}
+
+export default QuestionSearchResult

src/components/Questions.js

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

src/components/Questions.module.css

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

src/components/Subject.js

@@ -0,0 +1,33 @@
+import React, { PureComponent } from 'react'
+
+import Question from './Question.js'
+
+class Subject extends PureComponent {
+  render () {
+    const { subj, onChange, deleteQuestion } = this.props
+
+    if (subj) {
+      return (
+        <div >
+          {subj.Questions.map((question, i) => {
+            return (
+              <Question
+                deleteQuestion={deleteQuestion}
+                onChange={onChange}
+                key={i}
+                subjInd={subj.ind}
+                question={question}
+              />
+            )
+          })}
+        </div>
+      )
+    } else {
+      return (
+        <div />
+      )
+    }
+  }
+}
+
+export default Subject

src/components/SubjectSelector.js

@@ -0,0 +1,33 @@
+import styles from './SubjectSelector.module.css'
+
+export default function SubjectSelector (props) {
+  const { activeSubjName, searchTerm, data, onSubjSelect } = props
+
+  return (
+    <div className='subjectSelector'>
+      {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={() => onSubjSelect(subj.Name)}
+          >
+            <span className={styles.subjName}>
+              {subj.Name}
+            </span>
+            <span className={styles.questionCount}>
+              [ {subj.Questions.length} ]
+            </span>
+          </div>
+        )
+      })}
+    </div>
+  )
+}

src/components/SubjectSelector.module.css

@@ -0,0 +1,8 @@
+.questionCount {
+  justify-content: flex-end;
+  white-space: nowrap;
+}
+
+.subjName {
+  word-wrap: break-word;
+}

src/components/question.module.css

@@ -0,0 +1,33 @@
+.questionInput {
+  flex-grow: 1;
+  font-size: 22px;
+  background-color: var(--background-color);
+  color: white;
+  border: none;
+  padding: 8px;
+}
+
+.questionContainer {
+  margin-top: 30px;
+  margin-bottom: 30px;
+  margin-right: 10px;
+  margin-left: 10px;
+}
+.inputContainer {
+  width: 100%;
+  display: flex;
+}
+
+.deleteButton {
+  padding: 6px;
+  font-size: 22px;
+  background-color: var(--background-color);
+  color: white;
+  cursor: pointer;
+  border: 1px solid;
+  border-color: var(--background-color);
+}
+
+.deleteButton:hover {
+  border: 1px solid;
+}

src/components/questionView.js

@@ -0,0 +1,48 @@
+import React, { useState } from 'react'
+
+import LoadingIndicator from '../components/LoadingIndicator.js'
+import QuestionSearchResult from '../components/QuestionSearchResult.js'
+
+import styles from './questionView.module.css'
+
+export default function questionView (props) {
+  const { data, onChange, deleteQuestion } = props
+  const [searchTerm, setSearchTerm] = useState('')
+
+  if (data) {
+    return (
+      <div>
+        <div className={styles.searchContainer}>
+          <input
+            placeholder='Keresés...'
+            className={styles.searchBar}
+            type='text'
+            value={searchTerm}
+            onChange={(e) => { setSearchTerm(e.target.value) }}
+          />
+          <button
+            onClick={() => {
+              setSearchTerm('')
+            }}
+            className={styles.clearButton}
+          >
+             X
+          </button>
+        </div>
+        <hr />
+        <div>
+          <QuestionSearchResult
+            onChange={onChange}
+            data={data}
+            searchTerm={searchTerm}
+            deleteQuestion={deleteQuestion}
+          />
+        </div>
+      </div>
+    )
+  } else {
+    return (
+      <LoadingIndicator />
+    )
+  }
+}

src/components/questionView.module.css

@@ -0,0 +1,23 @@
+.searchBar {
+  margin: 10px;
+  padding: 10px;
+  color: white;
+  background-color: #212127;
+  border: none;
+  font-size: 18px;
+  flex-grow: 1;
+}
+
+.searchContainer {
+  width: 100%;
+  display: flex;
+}
+
+.clearButton {
+  width: 80px;
+  background-color: var(--background-color);
+  color: white;
+  font-size: 23px;
+  cursor: pointer;
+  border: none;
+}

src/components/subjectView.js

@@ -0,0 +1,60 @@
+import React, { useState } from 'react'
+
+import LoadingIndicator from '../components/LoadingIndicator.js'
+import Subject from '../components/Subject.js'
+import SubjectSelector from '../components/SubjectSelector.js'
+
+import styles from './subjectView.module.css'
+
+export default function SubjectView (props) {
+  const { data, onChange, deleteQuestion } = props
+  const [activeSubjName, setActiveSubjName] = useState('')
+  const [searchTerm, setSearchTerm] = useState('')
+
+  if (data) {
+    let currSubj = data.Subjects.find((subj) => {
+      return subj.Name === activeSubjName
+    })
+
+    return (
+      <div>
+        <div className={styles.searchContainer}>
+          <input
+            placeholder='Keresés...'
+            className={styles.searchBar}
+            type='text'
+            value={searchTerm}
+            onChange={(e) => { setSearchTerm(e.target.value) }}
+          />
+          <button
+            onClick={() => {
+              setSearchTerm('')
+            }}
+            className={styles.clearButton}
+          >
+             X
+          </button>
+        </div>
+        <hr />
+        <SubjectSelector
+          data={data}
+          activeSubjName={activeSubjName}
+          searchTerm={searchTerm}
+          onSubjSelect={(subjName) => { setActiveSubjName(subjName) }}
+        />
+        <hr />
+        <div>
+          <Subject
+            onChange={onChange}
+            subj={currSubj}
+            deleteQuestion={deleteQuestion}
+          />
+        </div>
+      </div>
+    )
+  } else {
+    return (
+      <LoadingIndicator />
+    )
+  }
+}

src/components/subjectView.module.css

@@ -0,0 +1,24 @@
+.searchBar {
+  margin: 10px;
+  padding: 10px;
+  color: white;
+  background-color: #212127;
+  border: none;
+  font-size: 18px;
+  flex-grow: 1;
+}
+
+
+.searchContainer {
+  width: 100%;
+  display: flex;
+}
+
+.clearButton {
+  width: 80px;
+  background-color: var(--background-color);
+  color: white;
+  font-size: 23px;
+  cursor: pointer;
+  border: none;
+}