Add pages

2021-09-01 17:29:15 +01:00
parent 68a7dbabca
commit f07ab92cfc
12 changed files with 3423 additions and 0 deletions
--- a/src/History.js
+++ b/src/History.js
@@ -0,0 +1,199 @@
+import React, { Component } from 'react';
+import { HomeRounded as HomeRoundedIcon, QuestionAnswerRounded as QuestionAnswerRoundedIcon, PeopleRounded as PeopleRoundedIcon, SwapHorizRounded as SwapHorizRoundedIcon, DeleteRounded as DeleteRoundedIcon } from "@material-ui/icons";
+import NavBar from "./NavBar";
+import Button from "./Button";
+import Footer from "./Footer";
+import { Link } from 'react-router-dom';
+import "./css/History.css";
+
+export default class History extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			user: props.user,
+			db: props.db,
+			navbarItems: [
+				{
+					type: "link",
+					link: "/",
+					icon: <HomeRoundedIcon />,
+					hideTextMobile: true,
+				}
+			],
+			progressHistoryComplete: [],
+			progressHistoryIncomplete: [],
+		};
+
+		let isMounted = true;
+		Object.defineProperty(this, "isMounted", {
+			get: () => isMounted,
+			set: (value) => isMounted = value,
+		});
+	}
+
+	setState = (state, callback = null) => {
+		if (this.isMounted) super.setState(state, callback);
+	}
+
+	componentDidMount() {
+		document.title = "History | Parandum";
+		
+		this.state.db.collection("progress")
+			.where("uid", "==", this.state.user.uid)
+			.orderBy("start_time", "desc")
+			.get()
+			.then((querySnapshot) => {
+				let complete = [];
+				let incomplete = [];
+
+				querySnapshot.docs.map((doc) => {
+					const data = doc.data();
+
+					if (data.duration !== null) {
+						return complete.push({
+							id: doc.id,
+							setTitle: data.set_title,
+							switchLanguage: data.switch_language,
+							progress: (data.progress / data.questions.length * 100).toFixed(2),
+							mark: (data.progress > 0 ? data.correct.length / data.progress * 100 : 0).toFixed(2),
+							mode: data.mode,
+						});
+					} else {
+						return incomplete.push({
+							id: doc.id,
+							setTitle: data.set_title,
+							switchLanguage: data.switch_language,
+							progress: (data.progress / data.questions.length * 100).toFixed(2),
+							mark: (data.progress > 0 ? data.correct.length / data.progress * 100 : 0).toFixed(2),
+							mode: data.mode,
+						});
+					}
+				});
+
+				this.setState({
+					progressHistoryComplete: complete,
+					progressHistoryIncomplete: incomplete,
+				});
+			}).catch((error) => {
+				console.log(`Couldn't retrieve progress history: ${error}`);
+			});
+	}
+
+	componentWillUnmount() {
+		this.isMounted = false;
+	}
+
+	deleteProgress = (progressId) => {
+		this.state.db.collection("progress")
+			.doc(progressId)
+			.delete()
+			.then(() => {
+				const progressIndex = this.state.progressHistoryIncomplete.map((obj) => obj.id).indexOf(progressId);
+				let newState = {
+					progressHistoryIncomplete: this.state.progressHistoryIncomplete,
+				};
+				delete newState.progressHistoryIncomplete[progressIndex];
+				this.setState(newState);
+			});
+	}
+
+	render() {
+		return (
+			<div>
+				<NavBar items={this.state.navbarItems} />
+				<main>
+					<h1>History</h1>
+
+					{
+						this.state.progressHistoryComplete.length > 0 || this.state.progressHistoryIncomplete.length > 0
+						?
+						<>
+						{
+							this.state.progressHistoryIncomplete.length > 0 &&
+							<div className="progress-history-container">
+								<h2>Incomplete</h2>
+								<div>
+									<h3>Set</h3>
+									<h3>Progress</h3>
+									<h3>Mark</h3>
+									<h3>Mode</h3>
+								</div>
+								{
+									this.state.progressHistoryIncomplete.map((progressItem) =>
+										<div key={progressItem.id}>
+											<Link
+												to={`/progress/${progressItem.id}`}
+											>
+												{progressItem.setTitle}
+												{
+													progressItem.switchLanguage &&
+													<SwapHorizRoundedIcon />
+												}
+											</Link>
+											<p>{progressItem.progress}%</p>
+											<p>{progressItem.mark}%</p>
+											<p>
+												{
+													progressItem.mode === "questions"
+													?
+													<QuestionAnswerRoundedIcon />
+													:
+													<PeopleRoundedIcon />
+												}
+											</p>
+											<Button
+												className="button--no-background"
+												onClick={() => this.deleteProgress(progressItem.id)}
+												icon={<DeleteRoundedIcon />}
+											></Button>
+										</div>
+									)
+								}
+							</div>
+						}
+						{
+							this.state.progressHistoryComplete.length > 0 &&
+							<div className="progress-history-container">
+								<h2>Completed</h2>
+								<div>
+									<h3>Set</h3>
+									<h3>Progress</h3>
+									<h3>Mark</h3>
+									<h3>Mode</h3>
+								</div>
+								{
+									this.state.progressHistoryComplete.map((progressItem) =>
+										<div key={progressItem.id}>
+											<Link
+												to={`/progress/${progressItem.id}`}
+											>
+												{progressItem.setTitle}
+												{
+													progressItem.switchLanguage &&
+													<SwapHorizRoundedIcon />
+												}
+											</Link>
+											<p>{progressItem.progress}%</p>
+											<p>{progressItem.mark}%</p>
+											{
+												progressItem.mode === "questions"
+												?
+												<QuestionAnswerRoundedIcon />
+												:
+												<PeopleRoundedIcon />
+											}
+										</div>
+									)	
+								}
+							</div>
+						}
+						</>
+						:
+						<p>You haven't done any tests yet.</p>
+					}
+				</main>
+				<Footer />
+			</div>
+		)
+	}
+}