493 lines
15 KiB
JavaScript
493 lines
15 KiB
JavaScript
import React, { Component } from 'react';
|
|
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";
|
|
import Checkbox from '@material-ui/core/Checkbox';
|
|
import Select from "react-select";
|
|
|
|
export default class IncorrectHistory extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
user: props.user,
|
|
db: props.db,
|
|
navbarItems: [
|
|
{
|
|
type: "link",
|
|
name: "History",
|
|
link: "/history",
|
|
icon: <HistoryRoundedIcon />,
|
|
hideTextMobile: true,
|
|
},
|
|
{
|
|
type: "link",
|
|
link: "/",
|
|
icon: <HomeRoundedIcon />,
|
|
hideTextMobile: true,
|
|
}
|
|
],
|
|
totalIncorrect: 0,
|
|
totalTests: 0,
|
|
sets: {},
|
|
selectedSet: {
|
|
value: "all_sets",
|
|
label: "All sets",
|
|
},
|
|
includeCompoundTests: true,
|
|
incorrectAnswers: [],
|
|
filteredIncorrectAnswers: [],
|
|
setsWithHistory: {},
|
|
};
|
|
|
|
let isMounted = true;
|
|
Object.defineProperty(this, "isMounted", {
|
|
get: () => isMounted,
|
|
set: (value) => isMounted = value,
|
|
});
|
|
}
|
|
|
|
setState = (state, callback = null) => {
|
|
if (this.isMounted) super.setState(state, callback);
|
|
}
|
|
|
|
async componentDidMount() {
|
|
document.title = "Incorrect | History | Parandum";
|
|
|
|
let promises = [];
|
|
let newState = {
|
|
sets: {},
|
|
setsWithHistory: {},
|
|
};
|
|
|
|
promises.push(
|
|
this.state.db.collection("incorrect_answers")
|
|
.where("uid", "==", this.state.user.uid)
|
|
.orderBy("term", "asc")
|
|
.orderBy("definition", "asc")
|
|
.get()
|
|
.then(async (querySnapshot) => {
|
|
let incorrectAnswers = [];
|
|
let subPromises = [];
|
|
querySnapshot.docs.map((doc, index, array) => {
|
|
// if (index === 0 || doc.data().term !== array[array.length - 1].data().term || doc.data().definition !== array[array.length - 1].data().definition) {
|
|
// incorrectAnswers.push({
|
|
// term: doc.data().term,
|
|
// definition: doc.data().definition,
|
|
// switchedAnswers: {},
|
|
// notSwitchedAnswers: {},
|
|
// switchedCount: 0,
|
|
// notSwitchedCount: 0,
|
|
// });
|
|
// }
|
|
|
|
// if (doc.data().switch_language) {
|
|
// if (Object.keys(incorrectAnswers[incorrectAnswers.length - 1].switchedAnswers).includes(doc.data().answer)) {
|
|
// incorrectAnswers[incorrectAnswers.length - 1].switchedAnswers[doc.data().answer]++;
|
|
// } else {
|
|
// incorrectAnswers[incorrectAnswers.length - 1].switchedAnswers[doc.data().answer] = 1;
|
|
// }
|
|
// incorrectAnswers[incorrectAnswers.length - 1].switchedCount++;
|
|
// } else {
|
|
// if (Object.keys(incorrectAnswers[incorrectAnswers.length - 1].notSwitchedAnswers).includes(doc.data().answer)) {
|
|
// incorrectAnswers[incorrectAnswers.length - 1].notSwitchedAnswers[doc.data().answer]++;
|
|
// } else {
|
|
// incorrectAnswers[incorrectAnswers.length - 1].notSwitchedAnswers[doc.data().answer] = 1;
|
|
// }
|
|
// incorrectAnswers[incorrectAnswers.length - 1].notSwitchedCount++;
|
|
// }
|
|
|
|
|
|
|
|
if (index === 0 || doc.data().term !== array[index - 1].data().term || doc.data().definition !== array[index - 1].data().definition) {
|
|
incorrectAnswers.push({
|
|
term: doc.data().term,
|
|
definition: doc.data().definition,
|
|
answers: [{
|
|
answer: doc.data().answer,
|
|
switchLanguage: doc.data().switch_language,
|
|
setIds: doc.data().setIds,
|
|
}],
|
|
count: doc.data().switch_language ? 0 : 1,
|
|
switchedCount: doc.data().switch_language ? 1 : 0,
|
|
setIds: doc.data().setIds,
|
|
});
|
|
} else {
|
|
incorrectAnswers[incorrectAnswers.length - 1].answers.push({
|
|
answer: doc.data().answer,
|
|
switchLanguage: doc.data().switch_language,
|
|
setIds: doc.data().setIds,
|
|
});
|
|
doc.data().setIds.map((setId) => {
|
|
if (!incorrectAnswers[incorrectAnswers.length - 1].setIds.includes(setId))
|
|
return incorrectAnswers[incorrectAnswers.length - 1].setIds.push(setId);
|
|
return true;
|
|
});
|
|
if (doc.data().switch_language) {
|
|
incorrectAnswers[incorrectAnswers.length - 1].switchedCount++;
|
|
} else {
|
|
incorrectAnswers[incorrectAnswers.length - 1].count++;
|
|
}
|
|
}
|
|
|
|
// doc.data().setIds.map((setId) => subPromises.push(
|
|
// this.state.db.collection("sets")
|
|
// .doc(setId)
|
|
// .get()
|
|
// .then((doc) =>
|
|
// newState.setsWithHistory[setId] = doc.data().title
|
|
// )
|
|
// ));
|
|
doc.data().setIds.map((setId, setIndex) =>
|
|
newState.setsWithHistory[setId] = doc.data().set_titles[setIndex]
|
|
);
|
|
|
|
return true;
|
|
});
|
|
newState.incorrectAnswers = incorrectAnswers.sort((a,b) => b.count + b.switchedCount - a.count - a.switchedCount);
|
|
newState.filteredIncorrectAnswers = newState.incorrectAnswers;
|
|
newState.totalIncorrect = querySnapshot.docs.length;
|
|
await Promise.all(subPromises);
|
|
})
|
|
.catch((error) => {
|
|
newState.incorrectAnswers = [];
|
|
newState.totalIncorrect = 0;
|
|
console.log(`Couldn't get mistakes history: ${error}`);
|
|
})
|
|
);
|
|
|
|
promises.push(
|
|
this.state.db.collection("progress")
|
|
.where("uid", "==", this.state.user.uid)
|
|
.get()
|
|
// .then((querySnapshot) => newState.totalTests = querySnapshot.docs.length)
|
|
.then((querySnapshot) => {
|
|
newState.progressHistory = querySnapshot.docs.map((doc) =>
|
|
({
|
|
setIds: doc.data().setIds,
|
|
})
|
|
);
|
|
newState.totalTests = newState.progressHistory.length;
|
|
})
|
|
);
|
|
|
|
await Promise.all(promises);
|
|
|
|
this.setState(newState);
|
|
|
|
this.props.page.load();
|
|
|
|
this.props.logEvent("page_view");
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
this.isMounted = false;
|
|
this.props.page.unload();
|
|
}
|
|
|
|
arraysHaveSameMembers = (arr1, arr2) => {
|
|
const set1 = new Set(arr1);
|
|
const set2 = new Set(arr2);
|
|
return arr1.every(item => set2.has(item)) &&
|
|
arr2.every(item => set1.has(item));
|
|
}
|
|
|
|
handleSetSelectionChange = (selectedSet = this.state.selectedSet) => {
|
|
let totalIncorrect = 0;
|
|
const filteredIncorrectAnswers = (selectedSet.value === "all_sets" ?
|
|
JSON.parse(JSON.stringify(this.state.incorrectAnswers))
|
|
:
|
|
JSON.parse(JSON.stringify(this.state.incorrectAnswers))
|
|
.filter((vocabItem) =>
|
|
vocabItem.setIds.includes(selectedSet.value)
|
|
)
|
|
)
|
|
.map((vocabItem) => {
|
|
let newVocabItem = vocabItem;
|
|
if (selectedSet.value === "all_sets") {
|
|
if (this.state.includeCompoundTests) {
|
|
newVocabItem.answers = vocabItem.answers;
|
|
} else {
|
|
newVocabItem.answers = vocabItem.answers
|
|
.filter((answer) =>
|
|
answer.setIds.length === 1
|
|
)
|
|
}
|
|
} else {
|
|
newVocabItem.answers = vocabItem.answers
|
|
.filter((answer) =>
|
|
this.arraysHaveSameMembers(answer.setIds, [selectedSet.value]) ||
|
|
(
|
|
this.state.includeCompoundTests &&
|
|
answer.setIds.includes(selectedSet.value)
|
|
)
|
|
)
|
|
}
|
|
newVocabItem.switchedCount = newVocabItem.answers.filter((answer) => answer.switchLanguage === true).length;
|
|
newVocabItem.count = newVocabItem.answers.length - newVocabItem.switchedCount;
|
|
|
|
totalIncorrect += newVocabItem.answers.length;
|
|
|
|
return newVocabItem;
|
|
});
|
|
this.setState({
|
|
filteredIncorrectAnswers: filteredIncorrectAnswers,
|
|
selectedSet: selectedSet,
|
|
totalIncorrect: totalIncorrect,
|
|
totalTests: selectedSet.value === "all_sets" ?
|
|
this.state.progressHistory.length
|
|
:
|
|
this.state.progressHistory
|
|
.filter((progressItem) =>
|
|
this.arraysHaveSameMembers(progressItem.setIds, [selectedSet.value]) ||
|
|
(
|
|
this.state.includeCompoundTests &&
|
|
progressItem.setIds.includes(selectedSet.value)
|
|
)
|
|
)
|
|
.length,
|
|
});
|
|
}
|
|
|
|
handleIncludeCompoundTestsChange = (event) => {
|
|
this.setState({
|
|
includeCompoundTests: event.target.checked,
|
|
}, () => this.handleSetSelectionChange());
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div>
|
|
<NavBar items={this.state.navbarItems} />
|
|
<main>
|
|
<h1>Mistakes</h1>
|
|
|
|
<div className="history-sections">
|
|
<Select
|
|
className="set-select-container"
|
|
value={this.state.selectedSet}
|
|
onChange={this.handleSetSelectionChange}
|
|
defaultValue={"all_sets"}
|
|
options={
|
|
[
|
|
{
|
|
value: "all_sets",
|
|
label: "All sets",
|
|
}
|
|
].concat(Object.keys(this.state.setsWithHistory)
|
|
.sort((a, b) => {
|
|
if (this.state.setsWithHistory[a] < this.state.setsWithHistory[b]) {
|
|
return -1;
|
|
}
|
|
if (this.state.setsWithHistory[a] > this.state.setsWithHistory[b]) {
|
|
return 1;
|
|
}
|
|
return 0;
|
|
})
|
|
.map((setId) => {
|
|
return {
|
|
value: setId,
|
|
label: this.state.setsWithHistory[setId]
|
|
}
|
|
})
|
|
)
|
|
}
|
|
theme={theme => {
|
|
const overlayColor = getComputedStyle(
|
|
document.querySelector("#root > div")
|
|
).getPropertyValue("--background-color-light")
|
|
.trim();
|
|
const textColor = getComputedStyle(
|
|
document.querySelector("#root > div")
|
|
).getPropertyValue("--text-color")
|
|
.trim();
|
|
const textColorTinted = getComputedStyle(
|
|
document.querySelector("#root > div")
|
|
).getPropertyValue("--text-color-tinted")
|
|
.trim();
|
|
const primaryColor = getComputedStyle(
|
|
document.querySelector("#root > div")
|
|
).getPropertyValue("--primary-color")
|
|
.trim();
|
|
const primaryColorDark = getComputedStyle(
|
|
document.querySelector("#root > div")
|
|
).getPropertyValue("--primary-color-dark")
|
|
.trim();
|
|
|
|
return {
|
|
...theme,
|
|
borderRadius: 6,
|
|
colors: {
|
|
...theme.colors,
|
|
primary: primaryColor,
|
|
primary25: primaryColorDark,
|
|
neutral0: overlayColor,
|
|
neutral5: overlayColor,
|
|
neutral10: overlayColor,
|
|
neutral20: textColorTinted,
|
|
neutral30: textColor,
|
|
neutral40: textColor,
|
|
neutral50: textColor,
|
|
neutral60: textColorTinted,
|
|
neutral70: textColor,
|
|
neutral80: textColor,
|
|
neutral90: textColor,
|
|
},
|
|
}
|
|
}}
|
|
/>
|
|
<label>
|
|
<Checkbox
|
|
checked={this.state.includeCompoundTests}
|
|
onChange={this.handleIncludeCompoundTestsChange}
|
|
inputProps={{ 'aria-label': 'checkbox' }}
|
|
/>
|
|
<span>Include compound tests</span>
|
|
</label>
|
|
|
|
<div className="historical-user-stats-container">
|
|
<div className="stat-row stat-row--inline">
|
|
<h1>{this.state.totalIncorrect}</h1>
|
|
<p>mistakes</p>
|
|
</div>
|
|
{
|
|
this.state.totalTests > 0 &&
|
|
<div className="stat-row stat-row--inline">
|
|
<p>average</p>
|
|
<h1>{(this.state.totalIncorrect / this.state.totalTests).toFixed(2)}</h1>
|
|
<p>per test</p>
|
|
</div>
|
|
}
|
|
{
|
|
this.state.incorrectAnswers.length > 0 &&
|
|
<div className="stat-row stat-row--inline">
|
|
<h1>{this.state.incorrectAnswers[0].term}</h1>
|
|
<p>meaning</p>
|
|
<h1>{this.state.incorrectAnswers[0].definition}</h1>
|
|
<p>is the most common</p>
|
|
</div>
|
|
}
|
|
</div>
|
|
<div className="mistakes-history-container">
|
|
{
|
|
this.state.filteredIncorrectAnswers
|
|
.filter((vocabItem) => vocabItem.answers && vocabItem.answers.length > 0)
|
|
.map((vocabItem, index) => {
|
|
let [switchedAnswersDict, notSwitchedAnswersDict] = [{}, {}];
|
|
|
|
vocabItem.answers
|
|
.map((answerItem) => {
|
|
if (answerItem.switchLanguage) {
|
|
if (switchedAnswersDict.hasOwnProperty(answerItem.answer)) {
|
|
switchedAnswersDict[answerItem.answer].count++;
|
|
return false;
|
|
} else {
|
|
switchedAnswersDict[answerItem.answer] = {
|
|
...answerItem,
|
|
count: 1,
|
|
};
|
|
return true;
|
|
}
|
|
} else {
|
|
if (notSwitchedAnswersDict.hasOwnProperty(answerItem.answer)) {
|
|
notSwitchedAnswersDict[answerItem.answer].count++;
|
|
return false;
|
|
} else {
|
|
notSwitchedAnswersDict[answerItem.answer] = {
|
|
...answerItem,
|
|
count: 1,
|
|
};
|
|
return true;
|
|
}
|
|
}
|
|
});
|
|
|
|
const switchedAnswers = Object.keys(switchedAnswersDict)
|
|
.map((answerItem) => switchedAnswersDict[answerItem])
|
|
.sort((a, b) => {
|
|
const countDifference = b.count - a.count;
|
|
if (countDifference !== 0) return countDifference;
|
|
if (a.answer < b.answer) {
|
|
return -1;
|
|
}
|
|
if (a.answer > b.answer) {
|
|
return 1;
|
|
}
|
|
return 0;
|
|
});
|
|
const notSwitchedAnswers = Object.keys(notSwitchedAnswersDict)
|
|
.map((answerItem) => notSwitchedAnswersDict[answerItem])
|
|
.sort((a, b) => {
|
|
const countDifference = b.count - a.count;
|
|
if (countDifference !== 0) return countDifference;
|
|
if (a.answer < b.answer) {
|
|
return -1;
|
|
}
|
|
if (a.answer > b.answer) {
|
|
return 1;
|
|
}
|
|
return 0;
|
|
});
|
|
|
|
return (
|
|
<React.Fragment key={index}>
|
|
<div>
|
|
<h2>{vocabItem.term}</h2>
|
|
{
|
|
vocabItem.switchedCount > 0
|
|
?
|
|
<Collapsible transitionTime={300} trigger={<><b>{vocabItem.switchedCount} mistake{vocabItem.switchedCount !== 1 && "s"}</b><ArrowDropDownRoundedIcon /></>}>
|
|
{
|
|
vocabItem.switchedCount > 0 &&
|
|
<div>
|
|
{
|
|
switchedAnswers
|
|
.map((answerItem, index) =>
|
|
<p key={index}>{answerItem.answer === "" ? <i>skipped</i> : answerItem.answer}{answerItem.count > 1 && <i> (x{answerItem.count})</i>}</p>
|
|
)
|
|
}
|
|
</div>
|
|
}
|
|
</Collapsible>
|
|
:
|
|
<b>0 mistakes</b>
|
|
}
|
|
</div>
|
|
<div>
|
|
<h2>{vocabItem.definition}</h2>
|
|
{
|
|
vocabItem.count > 0
|
|
?
|
|
<Collapsible transitionTime={300} trigger={<><b>{vocabItem.count} mistake{vocabItem.count !== 1 && "s"}</b><ArrowDropDownRoundedIcon /></>}>
|
|
{
|
|
vocabItem.count > 0 &&
|
|
<div>
|
|
{
|
|
notSwitchedAnswers
|
|
.map((answerItem, index) =>
|
|
<p key={index}>{answerItem.answer === "" ? <i>skipped</i> : answerItem.answer}{answerItem.count > 1 && <i> (x{answerItem.count})</i>}</p>
|
|
)
|
|
}
|
|
</div>
|
|
}
|
|
</Collapsible>
|
|
:
|
|
<b>0 mistakes</b>
|
|
}
|
|
</div>
|
|
</React.Fragment>
|
|
)
|
|
})
|
|
}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<Footer />
|
|
</div>
|
|
)
|
|
}
|
|
}
|