Style tab navigation.

.gitlab-ci.yml

@@ -1,34 +0,0 @@
-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

README.md

@@ -1,19 +0,0 @@
-# Sonzai
-
-Attendance Management App.
-
-## Installation
-
-### Pre-built APKs
-
-+ TG: [Sonzai Staging Builds](https://t.me/sonzai_builds)
-
-Currently, the APKs are being published to a telegram channel via GitLab CI/CD.
-Once the app reaches v1.0, it will be published on Google Play and F-Droid.
-
-### Manual Builds
-
-+ Setup react native dev environment by following React Native CLI Quickstart
-  Guide [here](https://reactnative.dev/docs/environment-setup)
-+ `yarn install`
-+ `cd android; ./gradlew assembleRelease`

components/InputDialog.js

@@ -9,26 +9,6 @@ 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
@@ -40,14 +20,13 @@ export default function InputDialog({ visible, onOK, onDismiss, title, label, pl
 						label={label}
 						placeholder={placeholder}
 						value={text}
-						onChangeText={onChangeText}
+						onChangeText={text => setText(text)}
 						mode="outlined"
-						error={error}
 					/>
 				</Dialog.Content>
 				<Dialog.Actions>
-					<Button onPress={onCancel}>Cancel</Button>
+					<Button onPress={() => {onDismiss(); setText("");}}>Cancel</Button>
-					<Button onPress={onDone}>Done</Button>
+					<Button onPress={() => {onOK(text); setText("");}}>OK</Button>
 				</Dialog.Actions>
 			</Dialog>
 		</Portal>

components/Subjects.js

@@ -5,7 +5,6 @@ import {
 	Card,
 	FAB,
 	Portal,
-	Snackbar,
 	Text,
 	withTheme
 } from "react-native-paper";
@@ -17,21 +16,12 @@ import {
 
 import InputDialog from "./InputDialog";
 
-function Subjects({ theme, subjects, timetable, addSubject, removeSubject }) {
+function Subjects({ theme, subjects, 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 style={{ backgroundColor: theme.colors.background }}>
 			{subjects.length === 0 ?
@@ -53,7 +43,7 @@ function Subjects({ theme, subjects, timetable, addSubject, removeSubject }) {
 					<Card.Title title={subject.name} />
 					<Card.Actions style={{justifyContent: "flex-end"}}>
 						<IconButton
-							onPress={() => deleteSubject(subject.id)}
+							onPress={() => removeSubject(subject.id)}
 							icon="delete"
 							color={theme.colors.primary}
 						/>
@@ -73,7 +63,6 @@ function Subjects({ theme, subjects, timetable, addSubject, removeSubject }) {
 					large
 					icon="plus"
 					onPress={() => setShowDialog(true)}
-					visible={!snackbar}
 					style={{
 						position: "absolute",
 						margin: 16,
@@ -81,16 +70,6 @@ function Subjects({ theme, subjects, timetable, 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>
 	);
@@ -98,7 +77,6 @@ function Subjects({ theme, subjects, timetable, addSubject, removeSubject }) {
 
 Subjects.propTypes = {
 	subjects: PropTypes.array,
-	timetable: PropTypes.array,
 	addSubject: PropTypes.func,
 	removeSubject: PropTypes.func,
 	theme: PropTypes.object,

components/Timetable.js

@@ -2,7 +2,6 @@ import React from "react";
 import PropTypes from "prop-types";
 import {
 	Portal,
-	Text,
 } from "react-native-paper";
 import { createStackNavigator } from "@react-navigation/stack";
 
@@ -13,17 +12,6 @@ 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">
@@ -37,16 +25,19 @@ export default function Timetable({ addTimetableEntry, removeTimetableEntry, tim
 					/>
 				)}
 			</Stack.Screen>
-			<Stack.Screen name="New Entry">
+			{days.map((day, idx) => (
-				{(props) => (
+				<Stack.Screen name={`New Entry ${day}`} key={idx}>
-					<AddEntry
+					{(props) => (
-						{...props}
+						<AddEntry
-						subjects={subjects}
+							{...props}
-						days={days}
+							subjects={subjects}
-						addTimetableEntry={addTimetableEntry}
+							day={idx}
-					/>
+							days={days}
-				)}
+							addTimetableEntry={addTimetableEntry}
-			</Stack.Screen>
+						/>
+					)}
+				</Stack.Screen>
+			))}
 		</Stack.Navigator></Portal.Host>
 	);
 }

components/timetable/AddEntry.js

@@ -1,24 +1,20 @@
 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 {
+import {StyleSheet} from "react-native";
-	StyleSheet,
-	View
-} from "react-native";
 import DateTimePicker from "@react-native-community/datetimepicker";
 import { format } from "date-fns";
 
-function AddEntry({addTimetableEntry, days, subjects, navigation }) {
+function AddEntry({addTimetableEntry, days, day, subjects, navigation }) {
 	const [ subject, setSubject ] = useState({ id: null, name: null });
 	const [ showSubjectMenu, setShowSubjectMenu ] = useState(false);
 	const [ showTimePicker, setShowTimePicker ] = useState(false);
@@ -28,7 +24,6 @@ function AddEntry({addTimetableEntry, days, 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))
@@ -52,34 +47,24 @@ function AddEntry({addTimetableEntry, days, subjects, navigation }) {
 	}
 
 	function submit() {
-		let message = "";
+		if (subject.id === null) {
-		if (subject.id === null)
+			setSnackbar({ visible: true, message: "Missing subject." });
-			message = "Missing Subject";
+			return;
-		else if (start === null)
+		} else if (start === null) {
-			message =  "Missing start time.";
+			setSnackbar({ visible: true, message: "Missing start time." });
-		else if (end === null)
+			return;
-			message =  "Missing end time.";
+		} else if (end === null) {
-		else if (count === 0)
+			setSnackbar({ visible: true, message: "Missing end time." });
-			message =  "Missing count.";
+			return;
-		if (! dayStates.filter(i => i).length)
+		} else if (count === 0) {
-			message = "No day selected.";
+			setSnackbar({ visible: true, message: "Missing count." });
-
-		if (message !== "") {
-			setSnackbar({visible: true, message: message});
-			setTimeout(() => setSnackbar({ visible: false, message: null }), 2000);
 			return;
 		}
-
+		addTimetableEntry(day, {
-
+			sub_id: subject.id,
-		dayStates.forEach((i, idx) => {
+			count,
-			if (i) {
+			start,
-				addTimetableEntry(idx, {
+			end
-					sub_id: subject.id,
-					count,
-					start,
-					end
-				});
-			}
 		});
 		navigation.pop();
 	}
@@ -88,7 +73,7 @@ function AddEntry({addTimetableEntry, days, subjects, navigation }) {
 	return (<>
 		<IconButton icon="arrow-left" onPress={() => navigation.pop()}/>
 		<Card style={style.card}>
-			<Card.Title title="Add Class" />
+			<Card.Title title={`Add Class on ${days[day]}`} />
 			<Card.Content>
 				<List.Section>
 					<Menu
@@ -139,26 +124,6 @@ function AddEntry({addTimetableEntry, days, 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>
@@ -203,8 +168,9 @@ function AddEntry({addTimetableEntry, days, subjects, navigation }) {
 AddEntry.propTypes = {
 	addTimetableEntry: PropTypes.func,
 	subjects: PropTypes.array,
-	days: PropTypes.array,
 	navigation: PropTypes.object,
+	days: PropTypes.array,
+	day: PropTypes.number,
 };
 
 const style = StyleSheet.create({
@@ -221,11 +187,6 @@ 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,12 @@ import PropTypes from "prop-types";
 
 import {
 	Button,
+	IconButton,
 	Card,
 	DataTable,
 	Dialog,
-	FAB,
 	Portal,
-	Modal,
+	withTheme,
 } from "react-native-paper";
 
 import {
@@ -17,48 +17,20 @@ import {
 } from "react-native";
 import { format } from "date-fns";
 
-import BottomSheet from "reanimated-bottom-sheet";
-
 function sortTimes(t1, t2) {
 	if (t1.getHours() > t2.getHours())
 		return 1;
 	if (t1.getHours() < t2.getHours())
 		return -1;
-	if (t1.getMinutes() > t2.getMinutes())
+	if (t1.getMinute() > t2.getMinute())
 		return 1;
-	if (t1.getMinutes() < t2.getMinutes())
+	if (t1.getMinute() < t2.getMinute())
 		return -1;
 	return 0;
 }
 
-function HomeScreen({ days, navigation, removeTimetableEntry, subjects, timetable }) {
+function HomeScreen({ days, navigation, removeTimetableEntry, subjects, theme, timetable }) {
 	const [ dialog, setDialog ] = useState({ show: false, id: null });
-	const [ currentBottomSheet, setCurrentBottomSheet ] = useState(null);
-
-	this.bs = React.createRef();
-	const openBottomSheet = () => {this.bs.current.snapTo(0);this.bs.current.snapTo(0);};
-	const closeBottomSheet = () => {this.bs.current.snapTo(2);this.bs.current.snapTo(2);};
-
-	function CardContents() {
-		if (!currentBottomSheet) {
-			return <></>;
-		}
-		const subject = subjects.find(i => i.id === currentBottomSheet.sub_id);
-		return (
-			<Card>
-				<Card.Title title={subject.name} />
-				<Card.Content style={style.bottomNavigation}>
-					<Button mode="contained">Change Subject</Button>
-					<Button mode="contained">Change Start Time</Button>
-					<Button mode="contained">Change End Time</Button>
-					<Button mode="contained" onPress={() => {
-						closeBottomSheet();
-						setDialog({ show: true, id: currentBottomSheet.name });
-					}}>Remove</Button>
-				</Card.Content>
-			</Card>
-		);
-	}
 	return (<Portal.Host><ScrollView>
 		{timetable.map((day, dayIdx) => (
 			<Card
@@ -100,10 +72,7 @@ function HomeScreen({ days, navigation, removeTimetableEntry, subjects, timetabl
 							return (
 								<DataTable.Row
 									key={idx}
-									onPress={() => {
+									onPress={() => setDialog({ show: true, id: cls.id })}
-										setCurrentBottomSheet(cls);
-										openBottomSheet();
-									}}
 								>
 									<DataTable.Cell
 										style={{ flexGrow: 2 }}
@@ -130,6 +99,13 @@ function HomeScreen({ days, navigation, removeTimetableEntry, subjects, timetabl
 						})}
 					</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>
@@ -149,33 +125,6 @@ function HomeScreen({ days, navigation, removeTimetableEntry, subjects, timetabl
 					</Button>
 				</Dialog.Actions>
 			</Dialog>
-			<FAB
-				visible={currentBottomSheet == null}
-				large
-				icon="plus"
-				onPress={() => navigation.navigate("New Entry")}
-				style={{
-					position: "absolute",
-					margin: 16,
-					right: 0,
-					bottom: 0,
-				}}
-			/>
-			<Modal
-				visible={currentBottomSheet != null}
-				onDismiss={closeBottomSheet}
-				dismissable={false}
-			>
-			</Modal>
-			<BottomSheet
-				ref={this.bs}
-				snapPoints={[300, 150, 0]}
-				initialSnap={1}
-				renderContent={CardContents}
-				enabledInnerScrolling={false}
-				onCloseStart={() => setCurrentBottomSheet(null)}
-				onCloseEnd={() => {}}
-			/>
 		</Portal>
 	</ScrollView></Portal.Host>);
 }
@@ -185,6 +134,7 @@ HomeScreen.propTypes = {
 	subjects: PropTypes.array,
 	navigation: PropTypes.object,
 	days: PropTypes.array,
+	theme: PropTypes.object,
 	removeTimetableEntry: PropTypes.func,
 };
 
@@ -202,11 +152,6 @@ const style = StyleSheet.create({
 		flexDirection: "row",
 		justifyContent: "space-between"
 	},
-	bottomNavigation: {
-		height: 250,
-		flexDirection: "column",
-		justifyContent: "space-evenly",
-	},
 });
 
-export default HomeScreen;
+export default withTheme(HomeScreen);

containers/SubjectsContainer.js

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

package.json

@@ -30,7 +30,6 @@
     "react-native-uuid": "^1.4.9",
     "react-native-vector-icons": "^6.6.0",
     "react-redux": "^7.2.0",
-    "reanimated-bottom-sheet": "^1.0.0-alpha.19",
     "redux": "^4.0.5",
     "redux-devtools-extension": "^2.13.8",
     "redux-persist": "^6.0.0"

themes.js

@@ -1,13 +1,13 @@
 import { DefaultTheme, DarkTheme } from "react-native-paper";
 export default [
 	{
-		"name": "Dark: Pink and Blue",
+		"name": "Dark: Pink and Gray",
 		"theme": {
 			...DarkTheme,
 			mode: "exact",
 			colors: {
 				primary: "#ff1744",
-				accent: "#3949ab",
+				accent: "#e0e0e0",
 				backdrop: "rgba(0, 0, 0, 0.5)",
 				background: "#000000",
 				disabled: "rgba(255, 255, 255, 0.38)",
@@ -63,6 +63,17 @@ 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
@@ -90,6 +101,17 @@ 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

@@ -5420,11 +5420,6 @@ realpath-native@^1.1.0:
   dependencies:
     util.promisify "^1.0.0"
 
-reanimated-bottom-sheet@^1.0.0-alpha.19:
-  version "1.0.0-alpha.19"
-  resolved "https://registry.npmjs.org/reanimated-bottom-sheet/-/reanimated-bottom-sheet-1.0.0-alpha.19.tgz#94ea79e7b2896b8f489547415d15d15c99ac44ba"
-  integrity sha512-Q0sGUHYdr5h2n/AY7pKQty35zcUAxxYM1nCl+luSQAyqiY6a5Kf8IBQRsOVvs60sDzqXxtbwxHgM5mkwaiQC4Q==
-
 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"