Initial commit, with fully working project :p

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