Put mistakes in drop downs

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "parandum",
-  "version": "0.4.0",
+  "version": "1.1.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -17218,6 +17218,11 @@
         }
       }
     },
+    "react-collapsible": {
+      "version": "2.8.4",
+      "resolved": "https://registry.npmjs.org/react-collapsible/-/react-collapsible-2.8.4.tgz",
+      "integrity": "sha512-oG4yOk6AGKswe0OD/8t3/nf4Rgj4UhlZUUvqL5jop0/ez02B3dBDmNvs3sQz0PcTpJvt0ai8zF7Atd1SzN/UNw=="
+    },
     "react-dev-utils": {
       "version": "11.0.4",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",

package.json

@@ -18,6 +18,7 @@
     "rc-slider": "^9.7.2",
     "react": "^17.0.2",
     "react-apexcharts": "^1.3.9",
+    "react-collapsible": "^2.8.4",
     "react-dom": "^17.0.2",
     "react-firebaseui": "^5.0.2",
     "react-router-dom": "^5.3.0",

src/GroupStats.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { GroupRounded as GroupRoundedIcon, HomeRounded as HomeRoundedIcon } from "@material-ui/icons";
+import { ArrowDropDownRounded as ArrowDropDownRoundedIcon, GroupRounded as GroupRoundedIcon, HomeRounded as HomeRoundedIcon } from "@material-ui/icons";
 import { withRouter } from 'react-router-dom';
 import NavBar from "./NavBar";
 import Footer from "./Footer";
@@ -7,6 +7,8 @@ import Error404 from "./Error404";
 import "./css/History.css";
 import "./css/MistakesHistory.css";
 
+import Collapsible from "react-collapsible";
+
 export default withRouter(class GroupStats extends Component {
 	constructor(props) {
 		super(props);
@@ -178,46 +180,60 @@ export default withRouter(class GroupStats extends Component {
 									<React.Fragment key={index}>
 										<div>
 											<h2>{vocabItem.term}</h2>
-											<p><b>{vocabItem.switchedCount} mistake{vocabItem.switchedCount !== 1 && "s"}{vocabItem.switchedCount > 0 && ":"}</b></p>
 											{
-												vocabItem.switchedCount > 0 &&
+												vocabItem.switchedCount > 0
-												<div>
+												?
+												<Collapsible transitionTime={300} trigger={<><b>{vocabItem.switchedCount} mistake{vocabItem.switchedCount !== 1 && "s"}</b><ArrowDropDownRoundedIcon /></>}>
 													{
-														vocabItem.answers.sort((a, b) => {
+														vocabItem.switchedCount > 0 &&
-															if (a.answer < b.answer) {
+														<div>
-																return -1;
+															{
+																vocabItem.answers.sort((a, b) => {
+																	if (a.answer < b.answer) {
+																		return -1;
+																	}
+																	if (a.answer > b.answer) {
+																		return 1;
+																	}
+																	return 0;
+																}).map((answerItem, index) => answerItem.switchLanguage && (
+																	<p key={index}>{answerItem.answer === "" ? <i>skipped</i> : answerItem.answer}</p>
+																))
 															}
-															if (a.answer > b.answer) {
+														</div>
-																return 1;
-															}
-															return 0;
-														}).map((answerItem, index) => answerItem.switchLanguage && (
-															<p key={index}>{answerItem.answer === "" ? <i>skipped</i> : answerItem.answer}</p>
-														))
 													}
-												</div>
+												</Collapsible>
+												:
+												<b>{vocabItem.switchedCount} mistake{vocabItem.switchedCount !== 1 && "s"}</b>
 											}
 										</div>
 										<div>
 											<h2>{vocabItem.definition}</h2>
-											<p><b>{vocabItem.count} mistake{vocabItem.count !== 1 && "s"}{vocabItem.count > 0 && ":"}</b></p>
 											{
-												vocabItem.count > 0 &&
+												vocabItem.count > 0
-												<div>
+												?
+												<Collapsible transitionTime={300} trigger={<><b>{vocabItem.count} mistake{vocabItem.count !== 1 && "s"}</b><ArrowDropDownRoundedIcon /></>}>
 													{
-														vocabItem.answers.sort((a, b) => {
+														vocabItem.count > 0 &&
-															if (a.answer < b.answer) {
+														<div>
-																return -1;
+															{
+																vocabItem.answers.sort((a, b) => {
+																	if (a.answer < b.answer) {
+																		return -1;
+																	}
+																	if (a.answer > b.answer) {
+																		return 1;
+																	}
+																	return 0;
+																}).map((answerItem, index) => !answerItem.switchLanguage && (
+																	<p key={index}>{answerItem.answer === "" ? <i>skipped</i> : answerItem.answer}</p>
+																))
 															}
-															if (a.answer > b.answer) {
+														</div>
-																return 1;
-															}
-															return 0;
-														}).map((answerItem, index) => !answerItem.switchLanguage && (
-															<p key={index}>{answerItem.answer === "" ? <i>skipped</i> : answerItem.answer}</p>
-														))
 													}
-												</div>
+												</Collapsible>
+												:
+												<b>{vocabItem.switchedCount} mistake{vocabItem.switchedCount !== 1 && "s"}</b>
 											}
 										</div>
 									</React.Fragment>

src/MistakesHistory.js

@@ -1,10 +1,12 @@
 import React, { Component } from 'react';
-import { HistoryRounded as HistoryRoundedIcon, HomeRounded as HomeRoundedIcon } from "@material-ui/icons";
+import { ArrowDropDownRounded as ArrowDropDownRoundedIcon, HistoryRounded as HistoryRoundedIcon, HomeRounded as HomeRoundedIcon } from "@material-ui/icons";
 import NavBar from "./NavBar";
 import Footer from "./Footer";
 import "./css/History.css";
 import "./css/MistakesHistory.css";
 
+import Collapsible from "react-collapsible";
+
 export default class IncorrectHistory extends Component {
 	constructor(props) {
 		super(props);
@@ -148,46 +150,60 @@ export default class IncorrectHistory extends Component {
 									<React.Fragment key={index}>
 										<div>
 											<h2>{vocabItem.term}</h2>
-											<p><b>{vocabItem.switchedCount} mistake{vocabItem.switchedCount !== 1 && "s"}{vocabItem.switchedCount > 0 && ":"}</b></p>
 											{
-												vocabItem.switchedCount > 0 &&
+												vocabItem.switchedCount > 0
-												<div>
+												?
+												<Collapsible transitionTime={300} trigger={<><b>{vocabItem.switchedCount} mistake{vocabItem.switchedCount !== 1 && "s"}</b><ArrowDropDownRoundedIcon /></>}>
 													{
-														vocabItem.answers.sort((a, b) => {
+														vocabItem.switchedCount > 0 &&
-															if (a.answer < b.answer) {
+														<div>
-																return -1;
+															{
+																vocabItem.answers.sort((a, b) => {
+																	if (a.answer < b.answer) {
+																		return -1;
+																	}
+																	if (a.answer > b.answer) {
+																		return 1;
+																	}
+																	return 0;
+																}).map((answerItem, index) => answerItem.switchLanguage && (
+																	<p key={index}>{answerItem.answer === "" ? <i>skipped</i> : answerItem.answer}</p>
+																))
 															}
-															if (a.answer > b.answer) {
+														</div>
-																return 1;
-															}
-															return 0;
-														}).map((answerItem, index) => answerItem.switchLanguage && (
-															<p key={index}>{answerItem.answer === "" ? <i>skipped</i> : answerItem.answer}</p>
-														))
 													}
-												</div>
+												</Collapsible>
+												:
+												<b>{vocabItem.switchedCount} mistake{vocabItem.switchedCount !== 1 && "s"}</b>
 											}
 										</div>
 										<div>
 											<h2>{vocabItem.definition}</h2>
-											<p><b>{vocabItem.count} mistake{vocabItem.count !== 1 && "s"}{vocabItem.count > 0 && ":"}</b></p>
 											{
-												vocabItem.count > 0 &&
+												vocabItem.count > 0
-												<div>
+												?
+												<Collapsible transitionTime={300} trigger={<><b>{vocabItem.count} mistake{vocabItem.count !== 1 && "s"}</b><ArrowDropDownRoundedIcon /></>}>
 													{
-														vocabItem.answers.sort((a,b) => {
+														vocabItem.count > 0 &&
-															if (a.answer < b.answer) {
+														<div>
-																return -1;
+															{
+																vocabItem.answers.sort((a, b) => {
+																	if (a.answer < b.answer) {
+																		return -1;
+																	}
+																	if (a.answer > b.answer) {
+																		return 1;
+																	}
+																	return 0;
+																}).map((answerItem, index) => !answerItem.switchLanguage && (
+																	<p key={index}>{answerItem.answer === "" ? <i>skipped</i> : answerItem.answer}</p>
+																))
 															}
-															if (a.answer > b.answer) {
+														</div>
-																return 1;
-															}
-															return 0;
-														}).map((answerItem, index) => !answerItem.switchLanguage && (
-															<p key={index}>{answerItem.answer === "" ? <i>skipped</i> : answerItem.answer}</p>
-														))
 													}
-												</div>
+												</Collapsible>
+												:
+												<b>{vocabItem.switchedCount} mistake{vocabItem.switchedCount !== 1 && "s"}</b>
 											}
 										</div>
 									</React.Fragment>

src/css/MistakesHistory.css

@@ -15,3 +15,13 @@
 .mistakes-history-container > div:last-child {
 	margin-bottom: 0;
 }
+
+.mistakes-history-container .Collapsible__trigger {
+	cursor: pointer;
+	display: flex;
+	margin: 0;
+	flex-direction: row;
+	align-items: center;
+	justify-content: flex-start;
+	flex-wrap: wrap;
+}