diff --git a/package-lock.json b/package-lock.json index 4b8dbc1..c44f5f4 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 9c1e3ae..bf3aaed 100644 --- a/package.json +++ b/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", diff --git a/src/GroupStats.js b/src/GroupStats.js index 3fe9b75..2cf0738 100644 --- a/src/GroupStats.js +++ b/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 {

{vocabItem.term}

-

{vocabItem.switchedCount} mistake{vocabItem.switchedCount !== 1 && "s"}{vocabItem.switchedCount > 0 && ":"}

{ - vocabItem.switchedCount > 0 && -
+ vocabItem.switchedCount > 0 + ? + {vocabItem.switchedCount} mistake{vocabItem.switchedCount !== 1 && "s"}}> { - vocabItem.answers.sort((a, b) => { - if (a.answer < b.answer) { - return -1; + vocabItem.switchedCount > 0 && +
+ { + 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 && ( +

{answerItem.answer === "" ? skipped : answerItem.answer}

+ )) } - if (a.answer > b.answer) { - return 1; - } - return 0; - }).map((answerItem, index) => answerItem.switchLanguage && ( -

{answerItem.answer === "" ? skipped : answerItem.answer}

- )) +
} -
+ + : + {vocabItem.switchedCount} mistake{vocabItem.switchedCount !== 1 && "s"} }

{vocabItem.definition}

-

{vocabItem.count} mistake{vocabItem.count !== 1 && "s"}{vocabItem.count > 0 && ":"}

{ - vocabItem.count > 0 && -
+ vocabItem.count > 0 + ? + {vocabItem.count} mistake{vocabItem.count !== 1 && "s"}}> { - vocabItem.answers.sort((a, b) => { - if (a.answer < b.answer) { - return -1; + vocabItem.count > 0 && +
+ { + 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 && ( +

{answerItem.answer === "" ? skipped : answerItem.answer}

+ )) } - if (a.answer > b.answer) { - return 1; - } - return 0; - }).map((answerItem, index) => !answerItem.switchLanguage && ( -

{answerItem.answer === "" ? skipped : answerItem.answer}

- )) +
} -
+ + : + {vocabItem.switchedCount} mistake{vocabItem.switchedCount !== 1 && "s"} }
diff --git a/src/MistakesHistory.js b/src/MistakesHistory.js index 2700c99..fef5492 100644 --- a/src/MistakesHistory.js +++ b/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 {

{vocabItem.term}

-

{vocabItem.switchedCount} mistake{vocabItem.switchedCount !== 1 && "s"}{vocabItem.switchedCount > 0 && ":"}

{ - vocabItem.switchedCount > 0 && -
+ vocabItem.switchedCount > 0 + ? + {vocabItem.switchedCount} mistake{vocabItem.switchedCount !== 1 && "s"}}> { - vocabItem.answers.sort((a, b) => { - if (a.answer < b.answer) { - return -1; + vocabItem.switchedCount > 0 && +
+ { + 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 && ( +

{answerItem.answer === "" ? skipped : answerItem.answer}

+ )) } - if (a.answer > b.answer) { - return 1; - } - return 0; - }).map((answerItem, index) => answerItem.switchLanguage && ( -

{answerItem.answer === "" ? skipped : answerItem.answer}

- )) +
} -
+ + : + {vocabItem.switchedCount} mistake{vocabItem.switchedCount !== 1 && "s"} }

{vocabItem.definition}

-

{vocabItem.count} mistake{vocabItem.count !== 1 && "s"}{vocabItem.count > 0 && ":"}

{ - vocabItem.count > 0 && -
+ vocabItem.count > 0 + ? + {vocabItem.count} mistake{vocabItem.count !== 1 && "s"}}> { - vocabItem.answers.sort((a,b) => { - if (a.answer < b.answer) { - return -1; + vocabItem.count > 0 && +
+ { + 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 && ( +

{answerItem.answer === "" ? skipped : answerItem.answer}

+ )) } - if (a.answer > b.answer) { - return 1; - } - return 0; - }).map((answerItem, index) => !answerItem.switchLanguage && ( -

{answerItem.answer === "" ? skipped : answerItem.answer}

- )) +
} -
+ + : + {vocabItem.switchedCount} mistake{vocabItem.switchedCount !== 1 && "s"} }
diff --git a/src/css/MistakesHistory.css b/src/css/MistakesHistory.css index 280c388..0ab23f7 100644 --- a/src/css/MistakesHistory.css +++ b/src/css/MistakesHistory.css @@ -14,4 +14,14 @@ .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; } \ No newline at end of file