Add pages

src/UserSets.js

@@ -0,0 +1,95 @@
+import React, { Component } from 'react';
+import { withRouter, Link } from 'react-router-dom';
+import { HomeRounded as HomeRoundedIcon, EditRounded as EditRoundedIcon } from "@material-ui/icons";
+import NavBar from "./NavBar";
+import Footer from "./Footer";
+
+import "./css/UserSets.css";
+
+export default withRouter(class UserSets extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			user: props.user,
+			db: props.db,
+			functions: {
+				createProgress: props.functions.httpsCallable("createProgress"),
+			},
+			canStartTest: false,
+			loading: false,
+			selections: {},
+			navbarItems: [
+				{
+					type: "link",
+					link: "/",
+					icon: <HomeRoundedIcon />,
+					hideTextMobile: true,
+				}
+			],
+		};
+
+		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 = "Sets | Parandum";
+
+		const userSetsRef = this.state.db.collection("sets")
+			.where("owner", "==", this.state.user.uid)
+			.orderBy("title");
+
+		userSetsRef.get().then((querySnapshot) => {
+			this.setState({
+				userSets: querySnapshot.docs,
+			})
+		});
+	}
+
+	componentWillUnmount() {
+		this.isMounted = false;
+	}
+
+	render() {
+		return (
+			<div>
+				<NavBar items={this.state.navbarItems} />
+
+				<main>
+					<h1>My Sets</h1>
+					<div className="user-sets-list">
+						{
+							this.state.userSets && this.state.userSets.length > 0
+							?
+							this.state.userSets
+								.map((set, index) =>
+									<div className="user-sets-row" key={index}>
+										<Link
+											to={`/sets/${set.id}`}
+										>
+											{set.data().title}
+										</Link>
+										<Link
+											to={`/sets/${set.id}/edit`}
+										>
+											<EditRoundedIcon />
+										</Link>
+									</div>
+								)
+							:
+							<p>You haven't made any sets yet!</p>
+						}
+					</div>
+				</main>
+				<Footer />
+			</div>
+		)
+	}
+})