Subject view displaying subj/question count, subj selector height change

src/components/SubjectSelector.js

@@ -4,7 +4,7 @@ export default function SubjectSelector (props) {
   const { activeSubjName, searchTerm, data, onSubjSelect } = props
 
   return (
-    <div className='subjectSelector'>
+    <div className={styles.subjectSelector}>
       {data.Subjects.map((subj, i) => {
         if (!subj.Name.toLowerCase().includes(searchTerm.toLowerCase())) {
           return null

src/components/SubjectSelector.module.css

@@ -6,3 +6,10 @@
 .subjName {
   word-wrap: break-word;
 }
+
+.subjectSelector {
+  overflow: scroll;
+  height: 350px;
+  margin: 10px;
+}
+

src/components/subjectView.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 
 import LoadingIndicator from '../components/LoadingIndicator.js'
 import Subject from '../components/Subject.js'
@@ -11,6 +11,16 @@ export default function SubjectView (props) {
   const [activeSubjName, setActiveSubjName] = useState('')
   const [searchTerm, setSearchTerm] = useState('')
 
+  const [sCount, setSCount] = useState(0)
+  const [qCount, setQCount] = useState(0)
+
+  useEffect(() => {
+    setSCount(data.Subjects.length)
+    setQCount(data.Subjects.reduce((acc, subj) => {
+      return acc + subj.Questions.length
+    }, 0))
+  }, [])
+
   if (data) {
     let currSubj = data.Subjects.find((subj) => {
       return subj.Name === activeSubjName
@@ -43,6 +53,9 @@ export default function SubjectView (props) {
           onSubjSelect={(subjName) => { setActiveSubjName(subjName) }}
         />
         <hr />
+        <div>
+          {qCount} kérdés, {sCount} tárgy
+        </div>
         <div>
           <Subject
             onChange={onChange}

src/defaultStyles.css

@@ -140,12 +140,6 @@ a {
   margin: 10px;
 }
 
-.subjectSelector {
-  overflow: scroll;
-  height: 200px;
-  margin: 10px;
-}
-
 .subjItem {
   font-size: 18px;
   padding: 3px;

src/pages/index.js

@@ -163,6 +163,8 @@ export default function Index (props) {
         <div className={styles.welcome}>
           Kérdés szerkesztő
           <br />
+          {initialCount.questionCount} kérdés, {initialCount.subjectCount} tárgy
+          <p />
           Itt az éles adatbázis kérdései jelennek meg, amiket tudsz szerkeszteni. A kérdésekhez
           tartozó '.data' prop-ot még nem tudod rendesen szerkeszteni, az később lesz implementálva.
           A Tárgy / Kérdés nézet között tudsz válogatni.