Add Subjects pane.

SubjectsContainer as Redux Container. Subjects is the component.

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,
+	}
+});