diff --git a/App.js b/App.js
index b0c8144..faeda8a 100644
--- a/App.js
+++ b/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 (
<>
diff --git a/components/InputDialog.js b/components/InputDialog.js
new file mode 100644
index 0000000..1900fca
--- /dev/null
+++ b/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 (
+
+
+
+ );
+}
+
+InputDialog.propTypes = {
+ visible: PropTypes.bool,
+ onOK: PropTypes.func,
+ onDismiss: PropTypes.func,
+ title: PropTypes.string,
+ label: PropTypes.string,
+ placeholder: PropTypes.string,
+};
diff --git a/components/Subjects.js b/components/Subjects.js
new file mode 100644
index 0000000..0194d1a
--- /dev/null
+++ b/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 => (
+
+
+
+
+
+
+ ))}
+ setShowDialog(false)}
+ title="Enter Name of New Subject"
+ placeholder="Subject Name"
+ label="Subject Name"
+ onOK={onInput}
+ />
+ 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,
+ }
+});
diff --git a/containers/SubjectsContainer.js b/containers/SubjectsContainer.js
new file mode 100644
index 0000000..a57f45d
--- /dev/null
+++ b/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;