Add Subjects pane.

SubjectsContainer as Redux Container. Subjects is the component.

App.js

@@ -14,6 +14,8 @@ import {
 	Card,
 } from "react-native-paper";
 
+import SubjectsContainer from "./containers/SubjectsContainer";
+
 
 function Dummy() {
 	return (
@@ -30,15 +32,17 @@ const App = () => {
 	const [ pane, setPane ] = useState({
 		index: 0,
 		routes: [
-			{ key: "update", title: "Update", icon: "plus-circle" },
+			{ key: "add", title: "Add Classes", icon: "pencil-plus" },
 			{ key: "statistics", title: "Statistics", icon: "file-chart" },
 			{ key: "timetable", title: "Time Table", icon: "calendar-clock" },
+			{ key: "subjects", title: "Subjects", icon: "book-open" },
 		],
 	});
 	const renderScene = BottomNavigation.SceneMap({
-		update: Dummy,
+		add: Dummy,
 		statistics: Dummy,
 		timetable: Dummy,
+		subjects: SubjectsContainer,
 	});
 	return (
 		<>

components/InputDialog.js

@@ -0,0 +1,43 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import {
+	Portal,
+	Dialog,
+	Button,
+	TextInput,
+} from "react-native-paper";
+
+export default function InputDialog({ visible, onOK, onDismiss, title, label, placeholder }) {
+	const [ text, setText ] = useState("");
+	return (
+		<Portal>
+			<Dialog
+				visible={visible}
+				onDismiss={() => {onDismiss(); setText("");}}>
+				<Dialog.Title>{title}</Dialog.Title>
+				<Dialog.Content>
+					<TextInput
+						label={label}
+						placeholder={placeholder}
+						value={text}
+						onChangeText={text => setText(text)}
+						mode="outlined"
+					/>
+				</Dialog.Content>
+				<Dialog.Actions>
+					<Button onPress={() => {onDismiss(); setText("");}}>Cancel</Button>
+					<Button onPress={() => {onOK(text); setText("");}}>OK</Button>
+				</Dialog.Actions>
+			</Dialog>
+		</Portal>
+	);
+}
+
+InputDialog.propTypes = {
+	visible: PropTypes.bool,
+	onOK: PropTypes.func,
+	onDismiss: PropTypes.func,
+	title: PropTypes.string,
+	label: PropTypes.string,
+	placeholder: PropTypes.string,
+};

components/Subjects.js

@@ -0,0 +1,66 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import {
+	Button,
+	Card,
+	FAB,
+} from "react-native-paper";
+
+import {
+	StyleSheet
+} from "react-native";
+
+import InputDialog from "./InputDialog";
+
+export default function Subjects({ subjects, addSubject, removeSubject }) {
+	const [ showDialog, setShowDialog ] = useState(false);
+	function onInput(text) {
+		addSubject(text);
+		setShowDialog(false);
+	}
+	return (
+		<>
+			{subjects.map(subject => (
+				<Card key={subject.id} style={style.card}>
+					<Card.Title title={subject.name} />
+					<Card.Actions>
+						<Button onPress={() => removeSubject(subject.id)}>
+							Remove
+						</Button>
+					</Card.Actions>
+				</Card>
+			))}
+			<InputDialog
+				visible={showDialog}
+				onDismiss={() => setShowDialog(false)}
+				title="Enter Name of New Subject"
+				placeholder="Subject Name"
+				label="Subject Name"
+				onOK={onInput}
+			/>
+			<FAB
+				large
+				icon="plus"
+				onPress={() => setShowDialog(true)}
+				style={{
+					position: "absolute",
+					margin: 16,
+					right: 0,
+					bottom: 0,
+				}}
+			/>
+		</>
+	);
+}
+
+Subjects.propTypes = {
+	subjects: PropTypes.array,
+	addSubject: PropTypes.func,
+	removeSubject: PropTypes.func,
+};
+
+const style = StyleSheet.create({
+	card: {
+		marginTop: 12,
+	}
+});

containers/SubjectsContainer.js

@@ -0,0 +1,20 @@
+import { connect } from "react-redux";
+import Subjects from "../components/Subjects";
+import { addSubject, removeSubject } from "../actions";
+
+const mapStateToProps = state => {
+	return {
+		subjects: state.subjects,
+	};
+};
+
+const mapDispatchToProps = dispatch => {
+	return {
+		addSubject: subject => dispatch(addSubject(subject)),
+		removeSubject: id => dispatch(removeSubject(id))
+	};
+};
+
+const SubjectsContainer = connect(mapStateToProps, mapDispatchToProps)(Subjects);
+
+export default SubjectsContainer;