Update AddEntry to contain week days. Remove + from HomeScreen.

Fix typo getMinute -> getMinutes. Remove withTheme from HomeScreen
(since IconButton for + was removed).

.gitlab-ci.yml

@@ -0,0 +1,34 @@
+stages:
+    - build
+    - deploy
+
+build:
+    image: reactnativecommunity/react-native-android
+    stage: build
+    script:
+        - yarn install
+        - cd android && chmod +x gradlew
+        - ./gradlew assembleRelease
+    artifacts:
+        paths:
+            - android/app/build/outputs/
+
+
+deploy_tg:
+    image: curlimages/curl
+    stage: deploy
+    script:
+        - >-
+            curl
+            -F chat_id=$TG_CHAT_ID
+            -F document=@android/app/build/outputs/apk/release/app-release.apk
+            -F caption=" <b>Branch</b>: <code>$CI_COMMIT_BRANCH</code>
+
+            <b>Commit</b>: <code>$CI_COMMIT_SHORT_SHA</code>
+
+            <b>Tag(if any)</b>: <code>$CI_COMMIT_TAG</code>
+
+
+            <code>$CI_COMMIT_MESSAGE</code>"
+            -F parse_mode=html
+            https://api.telegram.org/bot${TG_BOT_TOKEN}/sendDocument

App.js

@@ -1,8 +1,8 @@
 import React, { useState } from "react";
+import Color from "color";
 import PropTypes from "prop-types";
 import {
 	Appbar,
-	BottomNavigation,
 	Text,
 	Card,
 	Dialog,
@@ -10,11 +10,14 @@ import {
 	Button,
 	Provider,
 	RadioButton,
-	TouchableRipple
+	TouchableRipple,
+	overlay,
 } from "react-native-paper";
 
-import { View, StatusBar, StyleSheet } from "react-native";
+import { View, StatusBar, StyleSheet, Text as RNText } from "react-native";
 import { NavigationContainer } from "@react-navigation/native";
+import { TabView, SceneMap, TabBar } from "react-native-tab-view";
+import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 
 import SubjectsContainer from "./containers/SubjectsContainer";
 import TimetableContainer from "./containers/TimetableContainer";
@@ -59,6 +62,27 @@ ThemePicker.propTypes = {
 };
 
 const App = ({ theme, setTheme }) => {
+
+	function renderLabel({ route, focused, color }) {
+		return <RNText style={{color: focused ? color : backgroundColor}}>{route.title}</RNText>;
+	}
+
+	renderLabel.propTypes = {
+		route: PropTypes.object,
+		focused: PropTypes.bool,
+		color: PropTypes.string,
+	};
+
+	function renderIcon({ route, color }) {
+		return (
+			<View>
+				<Icon name={route.icon} color={color} size={20}/>
+			</View>
+		);
+	}
+
+	renderIcon.propTypes = renderLabel.propTypes;
+
 	const [ pane, setPane ] = useState({
 		index: 0,
 		routes: [
@@ -72,13 +96,19 @@ const App = ({ theme, setTheme }) => {
 	const [ newTheme, setNewTheme ] = useState(themes.findIndex(
 		i => JSON.stringify(i.theme) === JSON.stringify(theme)
 	));
-	const renderScene = BottomNavigation.SceneMap({
+	const renderScene = SceneMap({
 		add: Dummy,
 		statistics: Dummy,
 		timetable: TimetableContainer,
 		subjects: SubjectsContainer,
 	});
 
+	const backgroundColor = theme.dark && theme.mode === "adaptive" ?
+		overlay(4, theme.colors.surface):
+		theme.colors.primary;
+
+	const activeColor = Color(backgroundColor).isLight() ? "#000" : "#FFF";
+	const inactiveColor = Color(backgroundColor).isLight() ? "#222" : "#AAA";
 	function dialogSelection(theme, idx) {
 		setNewTheme(idx);
 		setTheme(theme.theme);
@@ -86,11 +116,7 @@ const App = ({ theme, setTheme }) => {
 	return (
 		<NavigationContainer theme={theme}>
 			<StatusBar
-				backgroundColor={
-					theme.dark && theme.mode === "adaptive" ?
-						theme.colors.surface :
-						theme.colors.primary
-				}
+				backgroundColor={backgroundColor}
 			/>
 			<Provider theme={theme}>
 				<Appbar.Header>
@@ -102,7 +128,7 @@ const App = ({ theme, setTheme }) => {
 						onPress={() => setShowDialog(true)}
 					/>
 				</Appbar.Header>
-				<BottomNavigation
+				<TabView
 					navigationState={pane}
 					onIndexChange={(index) => setPane({
 						index,
@@ -110,6 +136,23 @@ const App = ({ theme, setTheme }) => {
 					})}
 					renderScene={renderScene}
 					shifting={true}
+					tabBarPosition="bottom"
+					renderTabBar={props => (
+						<TabBar
+							{...props}
+							style={{
+								backgroundColor: backgroundColor,
+							}}
+							activeColor={activeColor}
+							inactiveColor={inactiveColor}
+							renderLabel={renderLabel}
+							renderIcon={renderIcon}
+							renderIndicator={() => null}
+						/>)
+					}
+					sceneContainerStyle={{
+						backgroundColor: theme.colors.background
+					}}
 				/>
 				<Portal>
 					<Dialog

components/InputDialog.js

@@ -9,6 +9,26 @@ import {
 
 export default function InputDialog({ visible, onOK, onDismiss, title, label, placeholder }) {
 	const [ text, setText ] = useState("");
+	const [ error, setError ] = useState(false);
+
+	function onChangeText(text) {
+		setText(text);
+		setError(text === "");
+	}
+
+	function onCancel() {
+		onDismiss();
+		setText("");
+	}
+
+	function onDone() {
+		if (text === "") {
+			setError(true);
+			return;
+		}
+		onOK(text);
+		setText("");
+	}
 	return (
 		<Portal>
 			<Dialog
@@ -20,13 +40,14 @@ export default function InputDialog({ visible, onOK, onDismiss, title, label, pl
 						label={label}
 						placeholder={placeholder}
 						value={text}
-						onChangeText={text => setText(text)}
+						onChangeText={onChangeText}
 						mode="outlined"
+						error={error}
 					/>
 				</Dialog.Content>
 				<Dialog.Actions>
-					<Button onPress={() => {onDismiss(); setText("");}}>Cancel</Button>
-					<Button onPress={() => {onOK(text); setText("");}}>OK</Button>
+					<Button onPress={onCancel}>Cancel</Button>
+					<Button onPress={onDone}>Done</Button>
 				</Dialog.Actions>
 			</Dialog>
 		</Portal>

components/Subjects.js

@@ -5,6 +5,7 @@ import {
 	Card,
 	FAB,
 	Portal,
+	Snackbar,
 	Text,
 	withTheme
 } from "react-native-paper";
@@ -16,14 +17,23 @@ import {
 
 import InputDialog from "./InputDialog";
 
-function Subjects({ theme, subjects, addSubject, removeSubject }) {
+function Subjects({ theme, subjects, timetable, addSubject, removeSubject }) {
 	const [ showDialog, setShowDialog ] = useState(false);
+	const [ snackbar, setSnackbar ] = useState(false);
 	function onInput(text) {
 		addSubject(text);
 		setShowDialog(false);
 	}
+	function deleteSubject(id) {
+		if (timetable.reduce((acc, val) => acc.concat(val), []).filter(i => i.sub_id === id).length){
+			setSnackbar(true);
+			setTimeout(() => setSnackbar(false), 2000);
+			return;
+		}
+		removeSubject(id);
+	}
 	return (
-		<Portal.Host><ScrollView>
+		<Portal.Host><ScrollView style={{ backgroundColor: theme.colors.background }}>
 			{subjects.length === 0 ?
 				<Text style={style.text}>
 					No Subjects added. Press + to add a subject.
@@ -43,7 +53,7 @@ function Subjects({ theme, subjects, addSubject, removeSubject }) {
 					<Card.Title title={subject.name} />
 					<Card.Actions style={{justifyContent: "flex-end"}}>
 						<IconButton
-							onPress={() => removeSubject(subject.id)}
+							onPress={() => deleteSubject(subject.id)}
 							icon="delete"
 							color={theme.colors.primary}
 						/>
@@ -63,6 +73,7 @@ function Subjects({ theme, subjects, addSubject, removeSubject }) {
 					large
 					icon="plus"
 					onPress={() => setShowDialog(true)}
+					visible={!snackbar}
 					style={{
 						position: "absolute",
 						margin: 16,
@@ -70,6 +81,16 @@ function Subjects({ theme, subjects, addSubject, removeSubject }) {
 						bottom: 0,
 					}}
 				/>
+				<Snackbar
+					visible={snackbar}
+					onDismiss={() => setSnackbar(false)}
+					action={{
+						label: "Dismiss",
+						onPress: () => setSnackbar(false),
+					}}
+				>
+					Subject is in use in TimeTable.
+				</Snackbar>
 			</Portal>
 		</ScrollView></Portal.Host>
 	);
@@ -77,6 +98,7 @@ function Subjects({ theme, subjects, addSubject, removeSubject }) {
 
 Subjects.propTypes = {
 	subjects: PropTypes.array,
+	timetable: PropTypes.array,
 	addSubject: PropTypes.func,
 	removeSubject: PropTypes.func,
 	theme: PropTypes.object,

components/Timetable.js

@@ -2,6 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import {
 	Portal,
+	Text,
 } from "react-native-paper";
 import { createStackNavigator } from "@react-navigation/stack";
 
@@ -12,6 +13,17 @@ const Stack = createStackNavigator();
 
 export default function Timetable({ addTimetableEntry, removeTimetableEntry, timetable, subjects }) {
 	const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+	if (subjects.length === 0) {
+		return (
+			<Text
+				style={{
+					textAlign: "center",
+					marginTop: 12,
+				}}
+			>
+				No Subjects added. Add Subjects first.
+			</Text>);
+	}
 	return (
 		<Portal.Host><Stack.Navigator headerMode="none">
 			<Stack.Screen name="Timetable">
@@ -25,19 +37,16 @@ export default function Timetable({ addTimetableEntry, removeTimetableEntry, tim
 					/>
 				)}
 			</Stack.Screen>
-			{days.map((day, idx) => (
-				<Stack.Screen name={`New Entry ${day}`} key={idx}>
-					{(props) => (
-						<AddEntry
-							{...props}
-							subjects={subjects}
-							day={idx}
-							days={days}
-							addTimetableEntry={addTimetableEntry}
-						/>
-					)}
-				</Stack.Screen>
-			))}
+			<Stack.Screen name="New Entry">
+				{(props) => (
+					<AddEntry
+						{...props}
+						subjects={subjects}
+						days={days}
+						addTimetableEntry={addTimetableEntry}
+					/>
+				)}
+			</Stack.Screen>
 		</Stack.Navigator></Portal.Host>
 	);
 }

components/timetable/AddEntry.js

@@ -1,20 +1,24 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
 import {
-	IconButton,
 	Card,
 	FAB,
+	IconButton,
 	List,
 	Menu,
 	Portal,
 	Snackbar,
 	TextInput,
+	ToggleButton,
 } from "react-native-paper";
-import {StyleSheet} from "react-native";
+import {
+	StyleSheet,
+	View
+} from "react-native";
 import DateTimePicker from "@react-native-community/datetimepicker";
 import { format } from "date-fns";
 
-function AddEntry({addTimetableEntry, days, day, subjects, navigation }) {
+function AddEntry({addTimetableEntry, days, subjects, navigation }) {
 	const [ subject, setSubject ] = useState({ id: null, name: null });
 	const [ showSubjectMenu, setShowSubjectMenu ] = useState(false);
 	const [ showTimePicker, setShowTimePicker ] = useState(false);
@@ -24,6 +28,7 @@ function AddEntry({addTimetableEntry, days, day, subjects, navigation }) {
 	const [ end, setEnd ] = useState(null);
 	const [ count, setCount ] = useState(0);
 	const [ snackbar, setSnackbar ] = useState({ visible: false, message: "" });
+	const [ dayStates, setDayStates ] = useState([ true, false, false, false, false, false, false ]);
 	function parseCount(text) {
 		const num = parseInt(text);
 		if (isNaN(num))
@@ -47,24 +52,34 @@ function AddEntry({addTimetableEntry, days, day, subjects, navigation }) {
 	}
 
 	function submit() {
-		if (subject.id === null) {
-			setSnackbar({ visible: true, message: "Missing subject." });
-			return;
-		} else if (start === null) {
-			setSnackbar({ visible: true, message: "Missing start time." });
-			return;
-		} else if (end === null) {
-			setSnackbar({ visible: true, message: "Missing end time." });
-			return;
-		} else if (count === 0) {
-			setSnackbar({ visible: true, message: "Missing count." });
+		let message = "";
+		if (subject.id === null)
+			message = "Missing Subject";
+		else if (start === null)
+			message =  "Missing start time.";
+		else if (end === null)
+			message =  "Missing end time.";
+		else if (count === 0)
+			message =  "Missing count.";
+		if (! dayStates.filter(i => i).length)
+			message = "No day selected.";
+
+		if (message !== "") {
+			setSnackbar({visible: true, message: message});
+			setTimeout(() => setSnackbar({ visible: false, message: null }), 2000);
 			return;
 		}
-		addTimetableEntry(day, {
-			sub_id: subject.id,
-			count,
-			start,
-			end
+
+
+		dayStates.forEach((i, idx) => {
+			if (i) {
+				addTimetableEntry(idx, {
+					sub_id: subject.id,
+					count,
+					start,
+					end
+				});
+			}
 		});
 		navigation.pop();
 	}
@@ -73,7 +88,7 @@ function AddEntry({addTimetableEntry, days, day, subjects, navigation }) {
 	return (<>
 		<IconButton icon="arrow-left" onPress={() => navigation.pop()}/>
 		<Card style={style.card}>
-			<Card.Title title={`Add Class on ${days[day]}`} />
+			<Card.Title title="Add Class" />
 			<Card.Content>
 				<List.Section>
 					<Menu
@@ -124,6 +139,26 @@ function AddEntry({addTimetableEntry, days, day, subjects, navigation }) {
 						value={count === 0 ? "" : count.toString()}
 						onChangeText={parseCount}
 					/>
+					<View
+						style={style.daysContainer}
+					>
+						{dayStates.map( (i, idx) => (
+							<ToggleButton
+								key={idx}
+								icon={`alpha-${days[idx][0].toLowerCase()}`}
+								status={i ? "checked": "unchecked"}
+								onPress={
+									() =>
+										setDayStates([
+											...dayStates.slice(0, idx),
+											!i,
+											...dayStates.slice(idx + 1)
+										])
+								}
+							/>
+						)
+						)}
+					</View>
 				</List.Section>
 			</Card.Content>
 		</Card>
@@ -168,9 +203,8 @@ function AddEntry({addTimetableEntry, days, day, subjects, navigation }) {
 AddEntry.propTypes = {
 	addTimetableEntry: PropTypes.func,
 	subjects: PropTypes.array,
-	navigation: PropTypes.object,
 	days: PropTypes.array,
-	day: PropTypes.number,
+	navigation: PropTypes.object,
 };
 
 const style = StyleSheet.create({
@@ -187,6 +221,11 @@ const style = StyleSheet.create({
 		flexDirection: "row",
 		justifyContent: "space-between"
 	},
+	daysContainer: {
+		flexDirection: "row",
+		justifyContent: "space-evenly",
+		marginTop: 10
+	},
 });
 
 export default AddEntry;

components/timetable/HomeScreen.js

@@ -3,12 +3,11 @@ import PropTypes from "prop-types";
 
 import {
 	Button,
-	IconButton,
 	Card,
 	DataTable,
 	Dialog,
+	FAB,
 	Portal,
-	withTheme,
 } from "react-native-paper";
 
 import {
@@ -22,14 +21,14 @@ function sortTimes(t1, t2) {
 		return 1;
 	if (t1.getHours() < t2.getHours())
 		return -1;
-	if (t1.getMinute() > t2.getMinute())
+	if (t1.getMinutes() > t2.getMinutes())
 		return 1;
-	if (t1.getMinute() < t2.getMinute())
+	if (t1.getMinutes() < t2.getMinutes())
 		return -1;
 	return 0;
 }
 
-function HomeScreen({ days, navigation, removeTimetableEntry, subjects, theme, timetable }) {
+function HomeScreen({ days, navigation, removeTimetableEntry, subjects, timetable }) {
 	const [ dialog, setDialog ] = useState({ show: false, id: null });
 	return (<Portal.Host><ScrollView>
 		{timetable.map((day, dayIdx) => (
@@ -99,13 +98,6 @@ function HomeScreen({ days, navigation, removeTimetableEntry, subjects, theme, t
 						})}
 					</DataTable>
 				</Card.Content>
-				<Card.Actions style={{justifyContent: "flex-end"}}>
-					<IconButton
-						onPress={() => navigation.navigate(`New Entry ${days[dayIdx]}`)}
-						icon="plus"
-						color={theme.colors.primary}
-					/>
-				</Card.Actions>
 			</Card>
 		))}
 		<Portal>
@@ -125,6 +117,17 @@ function HomeScreen({ days, navigation, removeTimetableEntry, subjects, theme, t
 					</Button>
 				</Dialog.Actions>
 			</Dialog>
+			<FAB
+				loarge
+				icon="plus"
+				onPress={() => navigation.navigate("New Entry")}
+				style={{
+					position: "absolute",
+					margin: 16,
+					right: 0,
+					bottom: 0,
+				}}
+			/>
 		</Portal>
 	</ScrollView></Portal.Host>);
 }
@@ -134,7 +137,6 @@ HomeScreen.propTypes = {
 	subjects: PropTypes.array,
 	navigation: PropTypes.object,
 	days: PropTypes.array,
-	theme: PropTypes.object,
 	removeTimetableEntry: PropTypes.func,
 };
 
@@ -154,4 +156,4 @@ const style = StyleSheet.create({
 	},
 });
 
-export default withTheme(HomeScreen);
+export default HomeScreen;

containers/SubjectsContainer.js

@@ -5,6 +5,7 @@ import { addSubject, removeSubject } from "../actions";
 const mapStateToProps = state => {
 	return {
 		subjects: state.subjects,
+		timetable: state.timetable,
 	};
 };
 

package.json

@@ -16,7 +16,9 @@
     "@react-navigation/native": "^5.1.0",
     "@react-navigation/stack": "^5.2.1",
     "buffer": "^5.5.0",
+    "color": "^3.1.2",
     "date-fns": "^2.11.0",
+    "jsan": "^3.1.13",
     "react": "16.9.0",
     "react-native": "0.61.5",
     "react-native-gesture-handler": "^1.6.0",
@@ -24,10 +26,12 @@
     "react-native-reanimated": "^1.7.0",
     "react-native-safe-area-context": "^0.7.3",
     "react-native-screens": "^2.3.0",
+    "react-native-tab-view": "^2.13.0",
     "react-native-uuid": "^1.4.9",
     "react-native-vector-icons": "^6.6.0",
     "react-redux": "^7.2.0",
     "redux": "^4.0.5",
+    "redux-devtools-extension": "^2.13.8",
     "redux-persist": "^6.0.0"
   },
   "devDependencies": {

themes.js

@@ -1,13 +1,13 @@
 import { DefaultTheme, DarkTheme } from "react-native-paper";
 export default [
 	{
-		"name": "Dark: Pink and Gray",
+		"name": "Dark: Pink and Blue",
 		"theme": {
 			...DarkTheme,
 			mode: "exact",
 			colors: {
 				primary: "#ff1744",
-				accent: "#e0e0e0",
+				accent: "#3949ab",
 				backdrop: "rgba(0, 0, 0, 0.5)",
 				background: "#000000",
 				disabled: "rgba(255, 255, 255, 0.38)",
@@ -63,17 +63,6 @@ export default [
 			}
 		}
 	},
-	{
-		"name": "Absolute Dark: Pink and Gray",
-		"theme": {
-			...DarkTheme,
-			colors: {
-				...DarkTheme.colors,
-				primary: "#ff1744",
-				accent: "#e0e0e0",
-			}
-		}
-	},
 	{
 		"name": "Absolute Dark: Purple and Gray",
 		"theme": DarkTheme
@@ -101,17 +90,6 @@ export default [
 			}
 		}
 	},
-	{
-		"name": "Light: Pastel Colors 2",
-		"theme": {
-			...DefaultTheme,
-			colors: {
-				...DefaultTheme.colors,
-				primary: "#ffcccb",
-				accent: "#fce4ec",
-			}
-		}
-	},
 	{
 		"name": "Light: Purple and Green",
 		"theme": DefaultTheme

yarn.lock

@@ -3885,6 +3885,11 @@ js-yaml@^3.13.1:
     argparse "^1.0.7"
     esprima "^4.0.0"
 
+jsan@^3.1.13:
+  version "3.1.13"
+  resolved "https://registry.npmjs.org/jsan/-/jsan-3.1.13.tgz#4de8c7bf8d1cfcd020c313d438f930cec4b91d86"
+  integrity sha512-9kGpCsGHifmw6oJet+y8HaCl14y7qgAsxVdV3pCHDySNR3BfDC30zgkssd7x5LRVAT22dnpbe9JdzzmXZnq9/g==
+
 jsbn@~0.1.0:
   version "0.1.1"
   resolved "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
@@ -5270,6 +5275,11 @@ react-native-screens@^2.3.0:
   dependencies:
     debounce "^1.2.0"
 
+react-native-tab-view@^2.13.0:
+  version "2.13.0"
+  resolved "https://registry.npmjs.org/react-native-tab-view/-/react-native-tab-view-2.13.0.tgz#23037aa43b0f8f682ddc20415a4baaaf6f82ae8f"
+  integrity sha512-AeYbp/u91+D/C9+PmVEPBmFb3ixv8IkLMC3Sc5MajJ/fg0Zl3Of+BcEknBvTnKoe7Fj2y8+Qf9zorBbh5xzh4A==
+
 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"
@@ -5410,6 +5420,11 @@ realpath-native@^1.1.0:
   dependencies:
     util.promisify "^1.0.0"
 
+redux-devtools-extension@^2.13.8:
+  version "2.13.8"
+  resolved "https://registry.npmjs.org/redux-devtools-extension/-/redux-devtools-extension-2.13.8.tgz#37b982688626e5e4993ff87220c9bbb7cd2d96e1"
+  integrity sha512-8qlpooP2QqPtZHQZRhx3x3OP5skEV1py/zUdMY28WNAocbafxdG2tRD1MWE7sp8obGMNYuLWanhhQ7EQvT1FBg==
+
 redux-persist@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/redux-persist/-/redux-persist-6.0.0.tgz#b4d2972f9859597c130d40d4b146fecdab51b3a8"