Add Timetable Pane. Add TimetableContainer. Integrate ReactNavigation.

This commit is contained in:
Ceda EI 2020-03-20 15:45:54 +05:30
parent 883c44a01b
commit a9820e5e9e
6 changed files with 266 additions and 5 deletions

11
App.js
View File

@ -14,8 +14,10 @@ import {
} from "react-native-paper";
import { View, StatusBar, StyleSheet } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import SubjectsContainer from "./containers/SubjectsContainer";
import TimetableContainer from "./containers/TimetableContainer";
import themes from "./themes";
@ -41,6 +43,7 @@ function ThemePicker({ onPress, selectionIdx }) {
<View style={styles.radio}>
<RadioButton
status={selectionIdx === idx ? "checked": "unchecked"}
onPress={() => onPress(t, idx)}
/>
<Text>{t.name}</Text>
</View>
@ -61,7 +64,7 @@ const App = ({ theme, setTheme }) => {
routes: [
{ key: "add", title: "Add Classes", icon: "pencil-plus" },
{ key: "statistics", title: "Statistics", icon: "file-chart" },
{ key: "timetable", title: "Time Table", icon: "calendar-clock" },
{ key: "timetable", title: "Timetable", icon: "timetable" },
{ key: "subjects", title: "Subjects", icon: "book-open" },
],
});
@ -72,7 +75,7 @@ const App = ({ theme, setTheme }) => {
const renderScene = BottomNavigation.SceneMap({
add: Dummy,
statistics: Dummy,
timetable: Dummy,
timetable: TimetableContainer,
subjects: SubjectsContainer,
});
@ -81,7 +84,7 @@ const App = ({ theme, setTheme }) => {
setTheme(theme.theme);
}
return (
<>
<NavigationContainer theme={theme}>
<StatusBar
backgroundColor={
theme.dark && theme.mode === "adaptive" ?
@ -125,7 +128,7 @@ const App = ({ theme, setTheme }) => {
</Dialog>
</Portal>
</Provider>
</>
</NavigationContainer>
);
};

98
components/Timetable.js Normal file
View File

@ -0,0 +1,98 @@
import React from "react";
import PropTypes from "prop-types";
import {
Button,
Card,
Text
} from "react-native-paper";
import {
View,
StyleSheet
} from "react-native";
import { createStackNavigator } from "@react-navigation/stack";
function HomeScreen({ timetable, subjects, navigation, days }) {
return (<>
{timetable.map((day, dayIdx) => (
<Card key={dayIdx} style={style.card}>
<Card.Title title={days[dayIdx]} />
<Card.Content>
{day.map((cls, idx) => {
const subject = subjects.find(i => i.id === cls.sub_id);
return (<View key={idx} style={style.class}>
<Text>{subject.name}</Text>
<Text>{cls.start} to {cls.end}</Text>
<Text>{cls.count}</Text>
</View>);
})}
</Card.Content>
<Card.Actions>
<Button
onPress={() => navigation.navigate(`New Entry ${days[dayIdx]}`)}
>Add</Button>
</Card.Actions>
</Card>
))}
</>);
}
HomeScreen.propTypes = {
timetable: PropTypes.array,
subjects: PropTypes.array,
navigation: PropTypes.object,
days: PropTypes.array,
};
const Stack = createStackNavigator();
export default function Timetable({ timetable, subjects }) {
const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
return (
<Stack.Navigator>
<Stack.Screen name="Timetable">
{(props) => (
<HomeScreen
{...props}
timetable={timetable}
subjects={subjects}
days={days}
/>
)}
</Stack.Screen>
{days.map((day, idx) => (
<Stack.Screen name={`New Entry ${day}`} key={idx}>
{(props) => (
<Text
{...props}
>{idx}</Text>
)}
</Stack.Screen>
))}
</Stack.Navigator>
);
}
Timetable.propTypes = {
timetable: PropTypes.array,
subjects: PropTypes.array,
addTimetableEntry: PropTypes.func,
removeTimetableEntry: PropTypes.func,
};
const style = StyleSheet.create({
card: {
marginTop: 12,
marginLeft: 10,
marginRight: 10,
},
text: {
marginTop: 12,
textAlign: "center",
},
class: {
flexDirection: "row",
justifyContent: "space-between"
}
});

View File

@ -0,0 +1,21 @@
import { connect } from "react-redux";
import Timetable from "../components/Timetable";
import { addTimetableEntry, removeTimetableEntry } from "../actions";
const mapStateToProps = state => {
return {
subjects: state.subjects,
timetable: state.timetable,
};
};
const mapDispatchToProps = dispatch => {
return {
addTimetableEntry: (day, entry) => dispatch(addTimetableEntry(day, entry)),
removeTimetableEntry: id => dispatch(removeTimetableEntry(id))
};
};
const TimetableContainer = connect(mapStateToProps, mapDispatchToProps)(Timetable);
export default TimetableContainer;

View File

@ -1,3 +1,4 @@
import "react-native-gesture-handler";
import React from "react";
import {AppRegistry} from "react-native";
import AppContainer from "./AppContainer";

View File

@ -11,10 +11,17 @@
},
"dependencies": {
"@react-native-community/async-storage": "^1.8.1",
"@react-native-community/masked-view": "^0.1.7",
"@react-navigation/native": "^5.1.0",
"@react-navigation/stack": "^5.2.1",
"buffer": "^5.5.0",
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-gesture-handler": "^1.6.0",
"react-native-paper": "^3.6.0",
"react-native-reanimated": "^1.7.0",
"react-native-safe-area-context": "^0.7.3",
"react-native-screens": "^2.3.0",
"react-native-uuid": "^1.4.9",
"react-native-vector-icons": "^6.6.0",
"react-redux": "^7.2.0",

133
yarn.lock
View File

@ -673,6 +673,13 @@
exec-sh "^0.3.2"
minimist "^1.2.0"
"@egjs/hammerjs@^2.0.17":
version "2.0.17"
resolved "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz#5dc02af75a6a06e4c2db0202cae38c9263895124"
integrity sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==
dependencies:
"@types/hammerjs" "^2.0.36"
"@hapi/address@2.x.x":
version "2.1.4"
resolved "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
@ -976,6 +983,45 @@
eslint-plugin-react-native "3.6.0"
prettier "1.16.4"
"@react-native-community/masked-view@^0.1.7":
version "0.1.7"
resolved "https://registry.npmjs.org/@react-native-community/masked-view/-/masked-view-0.1.7.tgz#a65ce0702f55cb67fd777995de6fc7b3e5781903"
integrity sha512-9KbP7LTLFz9dx1heURJbO6nuVMdSjDez8znlrUzaB1nUwKVsTTwlKRuHxGUYIIkReLWrJQeCv9tidy+84z2eCw==
"@react-navigation/core@^5.2.2":
version "5.2.2"
resolved "https://registry.npmjs.org/@react-navigation/core/-/core-5.2.2.tgz#3f32b964bcea7682c8d742e6923decd6c68d0704"
integrity sha512-/Ov9RTPpfWOq3Ot7jAz92RShWQyQT6duK7LKajkHbRsQ6q9+kagHWpzm1HTLEf1EHQBYlRk8GkS9kMDHtvjywQ==
dependencies:
"@react-navigation/routers" "^5.1.1"
escape-string-regexp "^2.0.0"
query-string "^6.11.1"
react-is "^16.13.0"
shortid "^2.2.15"
use-subscription "^1.4.0"
"@react-navigation/native@^5.1.0":
version "5.1.0"
resolved "https://registry.npmjs.org/@react-navigation/native/-/native-5.1.0.tgz#60aba3efe1cacaaba77a455f9cefd9a6bf4bf658"
integrity sha512-GW1HCEUOg+IBHoLQfQ73N6HMUtqPFp+9PIdH/479P1AWzD2DSZB4u9qs5WlXlbad3Z1Lw8l3Zo8Ct9sZfjh2Ug==
dependencies:
"@react-navigation/core" "^5.2.2"
"@react-navigation/routers@^5.1.1":
version "5.1.1"
resolved "https://registry.npmjs.org/@react-navigation/routers/-/routers-5.1.1.tgz#574d957dd9cea9c181af2b0a0347ba0b7cb9a255"
integrity sha512-gqZA2LSqxTvsaGEY6HG8/oy+YEoOfG0xMtj0xoJlwdwL5UcOBX8cew93UzamRxWeGW05dM7og1z+j6XRQzdPGw==
dependencies:
shortid "^2.2.15"
"@react-navigation/stack@^5.2.1":
version "5.2.1"
resolved "https://registry.npmjs.org/@react-navigation/stack/-/stack-5.2.1.tgz#47339ecc8e96a7565b636b9115956f4aae9eae34"
integrity sha512-iEP3QnSPcvKju8jRYa4c/GrtIYVAcsRScSqHl/M/Vh+73HgbhbJNMomiZNW0CZa9FZfYgpo8fBs29Q8rhn4q6A==
dependencies:
color "^3.1.2"
react-native-iphone-x-helper "^1.2.1"
"@types/babel__core@^7.1.0":
version "7.1.6"
resolved "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.6.tgz#16ff42a5ae203c9af1c6e190ed1f30f83207b610"
@ -1019,6 +1065,11 @@
resolved "https://registry.npmjs.org/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"
integrity sha512-OCutwjDZ4aFS6PB1UZ988C4YgwlBHJd6wCeQqaLdmadZ/7e+w79+hbMUFC1QXDNCmdyoRfAFdm0RypzwR+Qpag==
"@types/hammerjs@^2.0.36":
version "2.0.36"
resolved "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.36.tgz#17ce0a235e9ffbcdcdf5095646b374c2bf615a4c"
integrity sha512-7TUK/k2/QGpEAv/BCwSHlYu3NXZhQ9ZwBYpzr9tjlPIL2C5BeGhH3DmVavRx3ZNyELX5TLC91JTz/cen6AAtIQ==
"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
version "2.0.1"
resolved "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz#42995b446db9a48a11a07ec083499a860e9138ff"
@ -2036,6 +2087,11 @@ dayjs@^1.8.15:
resolved "https://registry.npmjs.org/dayjs/-/dayjs-1.8.21.tgz#98299185b72b9b679f31c7ed987b63923c961552"
integrity sha512-1kbWK0hziklUHkGgiKr7xm59KwAg/K3Tp7H/8X+f58DnNCwY3pKYjOCJpIlVs125FRBukGVZdKZojC073D0IeQ==
debounce@^1.2.0:
version "1.2.0"
resolved "https://registry.npmjs.org/debounce/-/debounce-1.2.0.tgz#44a540abc0ea9943018dc0eaa95cce87f65cd131"
integrity sha512-mYtLl1xfZLi1m4RtQYlZgJUNQjl4ZxVnHzIR8nLLgi4q1YT8o/WM+MK/f8yfcc9s5Ir5zRaPZyZU6xs1Syoocg==
debug@2.6.9, debug@^2.2.0, debug@^2.3.3:
version "2.6.9"
resolved "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@ -2260,6 +2316,11 @@ escape-string-regexp@^1.0.5:
resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
escape-string-regexp@^2.0.0:
version "2.0.0"
resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz#a30304e99daa32e23b2fd20f51babd07cffca344"
integrity sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==
escodegen@^1.9.1:
version "1.14.1"
resolved "https://registry.npmjs.org/escodegen/-/escodegen-1.14.1.tgz#ba01d0c8278b5e95a9a45350142026659027a457"
@ -4523,6 +4584,11 @@ nan@^2.12.1:
resolved "https://registry.npmjs.org/nan/-/nan-2.14.0.tgz#7818f722027b2459a86f0295d434d1fc2336c52c"
integrity sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==
nanoid@^2.1.0:
version "2.1.11"
resolved "https://registry.npmjs.org/nanoid/-/nanoid-2.1.11.tgz#ec24b8a758d591561531b4176a01e3ab4f0f0280"
integrity sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA==
nanomatch@^1.2.9:
version "1.2.13"
resolved "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@ -5110,6 +5176,15 @@ qs@~6.5.2:
resolved "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==
query-string@^6.11.1:
version "6.11.1"
resolved "https://registry.npmjs.org/query-string/-/query-string-6.11.1.tgz#ab021f275d463ce1b61e88f0ce6988b3e8fe7c2c"
integrity sha512-1ZvJOUl8ifkkBxu2ByVM/8GijMIPx+cef7u3yroO3Ogm4DOdZcF5dcrWTIlSHe3Pg/mtlt6/eFjObDfJureZZA==
dependencies:
decode-uri-component "^0.2.0"
split-on-first "^1.0.0"
strict-uri-encode "^2.0.0"
randombytes@^2.0.3:
version "2.1.0"
resolved "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
@ -5130,11 +5205,26 @@ react-devtools-core@^3.6.3:
shell-quote "^1.6.1"
ws "^3.3.1"
react-is@^16.12.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.9.0:
react-is@^16.12.0, react-is@^16.13.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.9.0:
version "16.13.0"
resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.0.tgz#0f37c3613c34fe6b37cd7f763a0d6293ab15c527"
integrity sha512-GFMtL0vHkiBv9HluwNZTggSn/sCyEt9n02aM0dSAjGGyqyNlAyftYm4phPxdvCigG15JreC5biwxCgTAJZ7yAA==
react-native-gesture-handler@^1.6.0:
version "1.6.0"
resolved "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-1.6.0.tgz#e9a4e1d0c7ac21eb0d6b6ec013e73f9c0c33a629"
integrity sha512-KulGCWKTxa6xBpPP4LWEPmmLqBqOe2jbtdlILOVF/dR4EgImiaBVrKdOHeRMyMzJOYAWxs5uDZsyA8hgSsm+lw==
dependencies:
"@egjs/hammerjs" "^2.0.17"
hoist-non-react-statics "^2.3.1"
invariant "^2.2.4"
prop-types "^15.7.2"
react-native-iphone-x-helper@^1.2.1:
version "1.2.1"
resolved "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.2.1.tgz#645e2ffbbb49e80844bb4cbbe34a126fda1e6772"
integrity sha512-/VbpIEp8tSNNHIvstuA3Swx610whci1Zpc9mqNkqn14DkMbw+ORviln2u0XyHG1kPvvwTNGZY6QpeFwxYaSdbQ==
react-native-paper@^3.6.0:
version "3.6.0"
resolved "https://registry.npmjs.org/react-native-paper/-/react-native-paper-3.6.0.tgz#9f8452387bc6e6dae84db90c9c4715af5c7bd142"
@ -5144,6 +5234,16 @@ react-native-paper@^3.6.0:
color "^3.1.2"
react-native-safe-area-view "^0.14.6"
react-native-reanimated@^1.7.0:
version "1.7.0"
resolved "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-1.7.0.tgz#896db2576552ac59d288a1f6c7f00afc171f240c"
integrity sha512-FQWSqP605eQVJumuK2HpR+7heF0ZI+qfy4jNguv3Xv8nPFHeIgZaRTXHCEQL2AcuSIj50zy8jGJf5l134QMQWQ==
react-native-safe-area-context@^0.7.3:
version "0.7.3"
resolved "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-0.7.3.tgz#ad6bd4abbabe195332c53810e4ce5851eb21aa2a"
integrity sha512-9Uqu1vlXPi+2cKW/CW6OnHxA76mWC4kF3wvlqzq4DY8hn37AeiXtLFs2WkxH4yXQRrnJdP6ivc65Lz+MqwRZAA==
react-native-safe-area-view@^0.14.6:
version "0.14.8"
resolved "https://registry.npmjs.org/react-native-safe-area-view/-/react-native-safe-area-view-0.14.8.tgz#ef33c46ff8164ae77acad48c3039ec9c34873e5b"
@ -5151,6 +5251,13 @@ react-native-safe-area-view@^0.14.6:
dependencies:
hoist-non-react-statics "^2.3.1"
react-native-screens@^2.3.0:
version "2.3.0"
resolved "https://registry.npmjs.org/react-native-screens/-/react-native-screens-2.3.0.tgz#fd2b0c841f4fdebb2937c0e84acccc62bf9ebb22"
integrity sha512-b+zazYedHPZoDzeKOE4RF/rPpJX8AAITazZCsVFUtw5Qn2QNHvAi0xbzWvQFNgqfvET0TLuu8F2HfBDh1WSqdQ==
dependencies:
debounce "^1.2.0"
react-native-uuid@^1.4.9:
version "1.4.9"
resolved "https://registry.npmjs.org/react-native-uuid/-/react-native-uuid-1.4.9.tgz#a526742f8fddfe6414500655212ca8d109c40229"
@ -5711,6 +5818,13 @@ shellwords@^0.1.1:
resolved "https://registry.npmjs.org/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==
shortid@^2.2.15:
version "2.2.15"
resolved "https://registry.npmjs.org/shortid/-/shortid-2.2.15.tgz#2b902eaa93a69b11120373cd42a1f1fe4437c122"
integrity sha512-5EaCy2mx2Jgc/Fdn9uuDuNIIfWBpzY4XIlhoqtXF6qsf+/+SGZ+FxDdX/ZsMZiWupIWNqAEmiNY4RC+LSmCeOw==
dependencies:
nanoid "^2.1.0"
signal-exit@^3.0.0, signal-exit@^3.0.2:
version "3.0.2"
resolved "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
@ -5851,6 +5965,11 @@ spdx-license-ids@^3.0.0:
resolved "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.5.tgz#3694b5804567a458d3c8045842a6358632f62654"
integrity sha512-J+FWzZoynJEXGphVIS+XEh3kFSjZX/1i9gFBaWQcB+/tmpe2qUsSBABpcxqxnAxFdiUFEgAX1bjYGQvIZmoz9Q==
split-on-first@^1.0.0:
version "1.1.0"
resolved "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz#f610afeee3b12bce1d0c30425e76398b78249a5f"
integrity sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==
split-string@^3.0.1, split-string@^3.0.2:
version "3.1.0"
resolved "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
@ -5913,6 +6032,11 @@ stream-buffers@~2.2.0:
resolved "https://registry.npmjs.org/stream-buffers/-/stream-buffers-2.2.0.tgz#91d5f5130d1cef96dcfa7f726945188741d09ee4"
integrity sha1-kdX1Ew0c75bc+n9yaUUYh0HQnuQ=
strict-uri-encode@^2.0.0:
version "2.0.0"
resolved "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
integrity sha1-ucczDHBChi9rFC3CdLvMWGbONUY=
string-length@^2.0.0:
version "2.0.0"
resolved "https://registry.npmjs.org/string-length/-/string-length-2.0.0.tgz#d40dbb686a3ace960c1cffca562bf2c45f8363ed"
@ -6318,6 +6442,13 @@ urix@^0.1.0:
resolved "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
integrity sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=
use-subscription@^1.4.0:
version "1.4.0"
resolved "https://registry.npmjs.org/use-subscription/-/use-subscription-1.4.0.tgz#c4e808cfed6fe6e1ac875df1369c63f3ddae9522"
integrity sha512-R7P7JWpeHp+dtEYsgDzIIgOmVqRfJjRjLOO0YIYk6twctUkUYe6Tz0pcabyTDGcMMRt9uMbFMfwBfxKHg9gCSw==
dependencies:
object-assign "^4.1.1"
use@^3.1.0:
version "3.1.1"
resolved "https://registry.npmjs.org/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"