Add display state to switch states and respective files.

Import models and pass them to mainapp. Store quests and sideQuests in
state. Slight changes to css.

src/components/mainapp.js

@@ -2,32 +2,69 @@ import React from "react";
 import { useState } from "react";
 import PropTypes from "prop-types";
 import Stats from "./stats";
+import Quests from "./quests";
+import Quest from "./quest";
+import AddQuest from "./addquest";
 
-export default (player) => {
+export default (player, quest, sideQuest) => {
 	function MainApp(props) {
 		const [ playerStats, setPlayerStats ] = useState(null);
-		// Possible values of display
+		const [ quests, setQuests ] = useState(null);
+		const [ sideQuests, setSideQuests ] = useState(null);
+
+		// Possible values of display.type
 		// main: The main display with stats, buttons for list/add
-		const [ display ] = useState("main");
+		// quests: Shows all quests
+		// sideQuests: Shows all side quests
+		// quest: Shows a specific quest
+		// sideQuest: Shows a specific side quest
+		// addQuest: Add quest screen
+		// addSideQuest: Add side quest screen
+		const [ display, setDisplay ] = useState({ type: "main"});
+
 		const token = localStorage.getItem("token");
 		if (playerStats === null)
 			player.player(token).then((res) => setPlayerStats(res));
 
+		if (quests === null)
+			quest.getQuests(token).then((res) => setQuests(res));
+
+		if (sideQuests === null)
+			sideQuest.getSideQuests(token).then((res) => setSideQuests(res));
+
 		let body;
-		if (display === "main")
+		if (display.type === "main")
 			body = (<>
 				<Stats playerStats={playerStats} />
 				<div className="stats lists nes-container with-title is-dark">
 					<p className="title">Quests</p>
-					<button className="nes-btn is-primary">Add Quests</button>
-					<button className="nes-btn is-primary">List Quests</button>
+					<button
+						onClick={() => setDisplay({ type: "addQuest"})}
+						className="nes-btn is-primary"
+					>Add Quests</button>
+					<button
+						onClick={() => setDisplay({type: "quests"})}
+						className="nes-btn is-primary"
+					>List Quests</button>
 				</div>
 				<div className="stats lists nes-container with-title is-dark">
 					<p className="title">Side Quests</p>
-					<button className="nes-btn is-primary">Add Side Quests</button>
-					<button className="nes-btn is-primary">List Side Quests</button>
+					<button
+						onClick={() => setDisplay({type: "addSideQuest"})}
+						className="nes-btn is-primary"
+					>Add Side Quests</button>
+					<button
+						onClick={() => setDisplay({type: "sideQuests"})}
+						className="nes-btn is-primary"
+					>List Side Quests</button>
 				</div>
 			</>);
+		else if (display.type === "quests" || display.type === "sideQuests")
+			body = <Quests display={display} />;
+		else if (display.type === "quest" || display.type === "sideQuest")
+			body = <Quest display={display} />;
+		else if (display.type === "addQuest" || display.type === "addSideQuest")
+			body = <AddQuest display={display} />;
 		return (
 			<div className="main">
 				<header>

src/index.js

@@ -9,10 +9,10 @@ import mainapp from "./components/mainapp";
 import models from "./models";
 import swal from "sweetalert";
 
-const { player } = models(config, axios);
+const { player, quest, sideQuest } = models(config, axios);
 
 const Login = login(player, swal);
-const MainApp = mainapp(player);
+const MainApp = mainapp(player, quest, sideQuest);
 
 function App(){
 	const [loggedIn, setLoggedIn] = useState(false);

src/scss/index.scss

@@ -29,14 +29,16 @@ body {
 }
 
 .main {
+	margin: 0 5%;
 	header {
 		width: 100%;
+		margin-top: 1em;
 		padding: 1em 3em;
 		display: flex;
 		justify-content: space-between;
 	}
 	.body {
-		padding: 1em;
+		padding: 0 1em;
 		div {
 			margin: 1em 0;
 			box-sizing: border-box;