Update README.md

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

README.md

@@ -0,0 +1,19 @@
+# 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/Timetable.js

@@ -37,19 +37,16 @@ export default function Timetable({ addTimetableEntry, removeTimetableEntry, tim
 					/>
 				)}
 			</Stack.Screen>
-			{days.map((day, idx) => (
-				<Stack.Screen name={`New Entry ${day}`} key={idx}>
+			<Stack.Screen name="New Entry">
 				{(props) => (
 					<AddEntry
 						{...props}
 						subjects={subjects}
-							day={idx}
 						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))
@@ -56,6 +61,8 @@ function AddEntry({addTimetableEntry, days, day, subjects, navigation }) {
 			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});
@@ -63,12 +70,17 @@ function AddEntry({addTimetableEntry, days, day, subjects, navigation }) {
 			return;
 		}
 
-		addTimetableEntry(day, {
+
+		dayStates.forEach((i, idx) => {
+			if (i) {
+				addTimetableEntry(idx, {
 					sub_id: subject.id,
 					count,
 					start,
 					end
 				});
+			}
+		});
 		navigation.pop();
 	}
 
@@ -76,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
@@ -127,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>
@@ -171,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({
@@ -190,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,12 @@ import PropTypes from "prop-types";
 
 import {
 	Button,
-	IconButton,
 	Card,
 	DataTable,
 	Dialog,
+	FAB,
 	Portal,
-	withTheme,
+	Modal,
 } from "react-native-paper";
 
 import {
@@ -17,20 +17,48 @@ 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.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 });
+	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
@@ -72,7 +100,10 @@ function HomeScreen({ days, navigation, removeTimetableEntry, subjects, theme, t
 							return (
 								<DataTable.Row
 									key={idx}
-									onPress={() => setDialog({ show: true, id: cls.id })}
+									onPress={() => {
+										setCurrentBottomSheet(cls);
+										openBottomSheet();
+									}}
 								>
 									<DataTable.Cell
 										style={{ flexGrow: 2 }}
@@ -99,13 +130,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 +149,33 @@ function HomeScreen({ days, navigation, removeTimetableEntry, subjects, theme, t
 					</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>);
 }
@@ -134,7 +185,6 @@ HomeScreen.propTypes = {
 	subjects: PropTypes.array,
 	navigation: PropTypes.object,
 	days: PropTypes.array,
-	theme: PropTypes.object,
 	removeTimetableEntry: PropTypes.func,
 };
 
@@ -152,6 +202,11 @@ const style = StyleSheet.create({
 		flexDirection: "row",
 		justifyContent: "space-between"
 	},
+	bottomNavigation: {
+		height: 250,
+		flexDirection: "column",
+		justifyContent: "space-evenly",
+	},
 });
 
-export default withTheme(HomeScreen);
+export default HomeScreen;

package.json

@@ -30,6 +30,7 @@
     "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 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

@@ -5420,6 +5420,11 @@ 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"