Add list (side) quests.

src/components/mainapp.js

@@ -33,7 +33,8 @@ export default (player, quest, sideQuest) => {
 			sideQuest.getSideQuests(token).then((res) => setSideQuests(res));
 
 		let body;
-		if (display.type === "main")
+		switch(display.type) {
+		case "main":
 			body = (<>
 				<Stats playerStats={playerStats} />
 				<div className="stats lists nes-container with-title is-dark">
@@ -58,13 +59,22 @@ export default (player, quest, sideQuest) => {
 						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} />;
+				</>);
+			break;
+		case "quests":
+			body = <Quests display={display} quests={quests} setDisplay={setDisplay} />;
+			break;
+		case "sideQuests":
+			body = <Quests display={display} quests={sideQuests} setDisplay={setDisplay} />;
+			break;
+		case "quest":
+		case "sideQuest":
+			body = <Quest display={display} setDisplay={setDisplay} />;
+			break;
+		case "addQuest":
+		case "addSideQuest":
+			body = <AddQuest display={display} setDisplay={setDisplay} />;
+		}
 		return (
 			<div className="main">
 				<header>

src/components/quests.js

@@ -0,0 +1,48 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+function QuestTile(props) {
+	return (<div className="quest_tile nes-container is-dark">
+		<h3>{props.quest.name}</h3>
+		<p>Difficulty: {["Low", "Medium", "High"][props.quest.difficulty - 1]}</p>
+		<p>Priority: {["Low", "Medium", "High"][props.quest.priority - 1]}</p>
+		<p>State: {props.quest.state ? "Complete": "Incomplete"}</p>
+		<button className="nes-btn is-primary">Modify</button>
+	</div>
+	);
+}
+
+QuestTile.propTypes = {
+	quest: PropTypes.object,
+	setDisplay: PropTypes.func,
+};
+
+function Quests(props) {
+	const name = {
+		quests: "Quests",
+		sideQuests: "Side Quests"
+	}[props.display.type];
+	return (
+		<div className="quests">
+			<div className="quests_head">
+				<h2>{name}</h2>
+				<button
+					className="back"
+					onClick={() => props.setDisplay({type: "main"})
+					}>&lt;</button>
+			</div>
+			{props.quests.map((cur) => <QuestTile
+				key={cur.id}
+				quest={cur}
+				setDisplay={props.setDisplay}/>)}
+		</div>
+	);
+}
+
+Quests.propTypes = {
+	quests: PropTypes.array,
+	display: PropTypes.object,
+	setDisplay: PropTypes.func,
+};
+
+export default Quests;

src/scss/index.scss

@@ -48,6 +48,35 @@ body {
 				box-sizing: border-box;
 			}
 		}
+		.quests {
+			width: 100%;
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: center;
+			.quests_head {
+				margin: 0 2.5%;
+				width: 100%;
+				display: flex;
+				justify-content: space-between;
+				h2 {
+					text-align: left;
+				}
+				.back {
+					border: none;
+					color: #FFF;
+					background-color: rgba(0,0,0,0);
+					text-align: right;
+					width: 30px;
+					margin: 0;
+					padding: 0;
+				}
+			}
+			.quest_tile {
+				width: 45%;
+				text-align: center;
+				margin: 2.5%;
+			}
+		}
 	}
 }
 
@@ -78,6 +107,13 @@ body {
 					margin: 0.25em 1%;
 				}
 			}
+			.quests {
+				.quests_head {
+				}
+				.quest_tile {
+					width: 95%;
+				}
+			}
 		}
 	}
 }