Add pages

src/Settings.js

@@ -0,0 +1,97 @@
+import React, { Component } from 'react';
+import { HomeRounded as HomeRoundedIcon } from "@material-ui/icons";
+import NavBar from "./NavBar";
+import Button from "./Button";
+import { withRouter } from "react-router-dom";
+import SettingsContent from "./SettingsContent";
+import Footer from "./Footer";
+
+export default withRouter(class Settings extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			user: props.user,
+			db: props.db,
+			navbarItems: [
+				{
+					type: "link",
+					link: "/",
+					icon: <HomeRoundedIcon />,
+					hideTextMobile: true,
+				}
+			],
+			soundInput: this.props.sound,
+			themeInput: this.props.theme,
+		};
+
+		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 = "Settings | Parandum";
+	}
+
+	componentWillUnmount() {
+		this.isMounted = false;
+	}
+
+	handleSoundInputChange = (event) => {
+		this.setState({
+			soundInput: event.target.checked,
+		});
+	}
+
+	handleThemeInputChange = (newTheme) => {
+		if (this.state.themeInput !== newTheme) this.setState({
+			themeInput: newTheme,
+		});
+	}
+
+	saveSettings = (globalChange) => {
+		this.props.handleSoundChange(this.state.soundInput, globalChange);
+		this.props.handleThemeChange(this.state.themeInput, globalChange);
+		this.props.history.push("/");
+	}
+
+	render() {
+		return (
+			<div>
+				<NavBar items={this.state.navbarItems} />
+				<main>
+					<SettingsContent
+						sound={this.props.sound}
+						theme={this.props.theme}
+						saveSettings={this.saveSettings}
+						handleSoundInputChange={this.handleSoundInputChange}
+						handleThemeInputChange={this.handleThemeInputChange}
+						themes={this.props.themes}
+						soundInput={this.state.soundInput}
+						themeInput={this.state.themeInput}
+					/>
+
+					<div className="settings-save-container">
+						<Button
+							onClick={() => this.saveSettings(true)}
+						>
+							Save
+						</Button>
+						<Button
+							onClick={() => this.saveSettings(false)}
+						>
+							Save for this session
+						</Button>
+					</div>
+				</main>
+				<Footer />
+			</div>
+		)
+	}
+})