me/parandum
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Put mistakes in drop downs

Browse Source
This commit is contained in:
Matthew Grove
2021-10-09 11:48:17 +01:00
parent bc48f5b5c5
commit a432633b90
5 changed files with 107 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
package-lock.json generated
View File

@@ -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",

1
package.json
View File

@@ -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",

74
src/GroupStats.js
View File

@@ -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 &&
<div>
vocabItem.switchedCount > 0
?
<Collapsible transitionTime={300} trigger={<><b>{vocabItem.switchedCount} mistake{vocabItem.switchedCount !== 1 && "s"}</b><ArrowDropDownRoundedIcon /></>}>
{
vocabItem.answers.sort((a, b) => {
if (a.answer < b.answer) {
return -1;
vocabItem.switchedCount > 0 &&
<div>
{
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) {
return 1;
}
return 0;
}).map((answerItem, index) => answerItem.switchLanguage && (
<p key={index}>{answerItem.answer === "" ? <i>skipped</i> : answerItem.answer}</p>
))
</div>
}
</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 &&
<div>
vocabItem.count > 0
?
<Collapsible transitionTime={300} trigger={<><b>{vocabItem.count} mistake{vocabItem.count !== 1 && "s"}</b><ArrowDropDownRoundedIcon /></>}>
{
vocabItem.answers.sort((a, b) => {
if (a.answer < b.answer) {
return -1;
vocabItem.count > 0 &&
<div>
{
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) {
return 1;
}
return 0;
}).map((answerItem, index) => !answerItem.switchLanguage && (
<p key={index}>{answerItem.answer === "" ? <i>skipped</i> : answerItem.answer}</p>
))
</div>
}
</div>
</Collapsible>
:
<b>{vocabItem.switchedCount} mistake{vocabItem.switchedCount !== 1 && "s"}</b>
}
</div>
</React.Fragment>

74
src/MistakesHistory.js
View File

@@ -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 &&
<div>
vocabItem.switchedCount > 0
?
<Collapsible transitionTime={300} trigger={<><b>{vocabItem.switchedCount} mistake{vocabItem.switchedCount !== 1 && "s"}</b><ArrowDropDownRoundedIcon /></>}>
{
vocabItem.answers.sort((a, b) => {
if (a.answer < b.answer) {
return -1;
vocabItem.switchedCount > 0 &&
<div>
{
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) {
return 1;
}
return 0;
}).map((answerItem, index) => answerItem.switchLanguage && (
<p key={index}>{answerItem.answer === "" ? <i>skipped</i> : answerItem.answer}</p>
))
</div>
}
</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 &&
<div>
vocabItem.count > 0
?
<Collapsible transitionTime={300} trigger={<><b>{vocabItem.count} mistake{vocabItem.count !== 1 && "s"}</b><ArrowDropDownRoundedIcon /></>}>
{
vocabItem.answers.sort((a,b) => {
if (a.answer < b.answer) {
return -1;
vocabItem.count > 0 &&
<div>
{
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) {
return 1;
}
return 0;
}).map((answerItem, index) => !answerItem.switchLanguage && (
<p key={index}>{answerItem.answer === "" ? <i>skipped</i> : answerItem.answer}</p>
))
</div>
}
</div>
</Collapsible>
:
<b>{vocabItem.switchedCount} mistake{vocabItem.switchedCount !== 1 && "s"}</b>
}
</div>
</React.Fragment>

10
src/css/MistakesHistory.css
View File

@@ -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;
}