Redo HomeScreen with DataTable. Add Remove in Dialog. Add remove reducer

components/Timetable.js

@@ -10,7 +10,7 @@ import AddEntry from "./timetable/AddEntry";
 
 const Stack = createStackNavigator();
 
-export default function Timetable({ addTimetableEntry, timetable, subjects }) {
+export default function Timetable({ addTimetableEntry, removeTimetableEntry, timetable, subjects }) {
 	const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
 	return (
 		<Portal.Host><Stack.Navigator headerMode="none">
@@ -21,6 +21,7 @@ export default function Timetable({ addTimetableEntry, timetable, subjects }) {
 						timetable={timetable}
 						subjects={subjects}
 						days={days}
+						removeTimetableEntry={removeTimetableEntry}
 					/>
 				)}
 			</Stack.Screen>

components/timetable/HomeScreen.js

@@ -1,15 +1,17 @@
-import React from "react";
+import React, { useState } from "react";
 import PropTypes from "prop-types";
 
 import {
+	Button,
 	IconButton,
 	Card,
-	Text,
+	DataTable,
+	Dialog,
+	Portal,
 	withTheme,
 } from "react-native-paper";
 
 import {
-	View,
 	StyleSheet,
 	ScrollView
 } from "react-native";
@@ -27,8 +29,9 @@ function sortTimes(t1, t2) {
 	return 0;
 }
 
-function HomeScreen({ theme, timetable, subjects, navigation, days }) {
+function HomeScreen({ days, navigation, removeTimetableEntry, subjects, theme, timetable }) {
-	return (<ScrollView>
+	const [ dialog, setDialog ] = useState({ show: false, id: null });
+	return (<Portal.Host><ScrollView>
 		{timetable.map((day, dayIdx) => (
 			<Card
 				key={dayIdx}
@@ -41,14 +44,60 @@ function HomeScreen({ theme, timetable, subjects, navigation, days }) {
 			>
 				<Card.Title title={days[dayIdx]} />
 				<Card.Content>
+					<DataTable>
+						<DataTable.Header>
+							<DataTable.Title
+								style={{ flexGrow: 2 }}
+							>
+								Course
+							</DataTable.Title>
+							<DataTable.Title
+								style={{ flexGrow: 1 }}
+							>
+								From
+							</DataTable.Title>
+							<DataTable.Title
+								style={{ flexGrow: 1 }}
+							>
+								To
+							</DataTable.Title>
+							<DataTable.Title
+								style={{ flexGrow: 1 }}
+							>
+								Count
+							</DataTable.Title>
+						</DataTable.Header>
 						{[...day].sort((i, j) => sortTimes(i.start, j.start)).map((cls, idx) => {
 							const subject = subjects.find(i => i.id === cls.sub_id);
-						return (<View key={idx} style={style.class}>
+							return (
-							<Text>{format(cls.start, "HH:mm")} to {format(cls.end, "HH:mm")}</Text>
+								<DataTable.Row
-							<Text>{subject.name}</Text>
+									key={idx}
-							<Text>{cls.count}</Text>
+									onPress={() => setDialog({ show: true, id: cls.id })}
-						</View>);
+								>
+									<DataTable.Cell
+										style={{ flexGrow: 2 }}
+									>
+										{subject.name}
+									</DataTable.Cell>
+									<DataTable.Cell
+										style={{ flexGrow: 1 }}
+									>
+										{format(cls.start, "HH:mm")}
+									</DataTable.Cell>
+									<DataTable.Cell
+										style={{ flexGrow: 1 }}
+									>
+										{format(cls.end, "HH:mm")}
+									</DataTable.Cell>
+									<DataTable.Cell
+										style={{ flexGrow: 1 }}
+									>
+										{cls.count}
+									</DataTable.Cell>
+								</DataTable.Row>
+							);
 						})}
+					</DataTable>
 				</Card.Content>
 				<Card.Actions style={{justifyContent: "flex-end"}}>
 					<IconButton
@@ -59,7 +108,25 @@ function HomeScreen({ theme, timetable, subjects, navigation, days }) {
 				</Card.Actions>
 			</Card>
 		))}
-	</ScrollView>);
+		<Portal>
+			<Dialog
+				visible={dialog.show}
+				onDismiss={() => setDialog({ show: false, id: null })}>
+				<Dialog.Title>Remove Entry?</Dialog.Title>
+				<Dialog.Actions>
+					<Button onPress={() => setDialog({ show: false, id: null })}>Cancel</Button>
+					<Button
+						onPress={() => {
+							setDialog({ show: false, id: null });
+							removeTimetableEntry(dialog.id);
+						}}
+					>
+						Remove
+					</Button>
+				</Dialog.Actions>
+			</Dialog>
+		</Portal>
+	</ScrollView></Portal.Host>);
 }
 
 HomeScreen.propTypes = {
@@ -68,6 +135,7 @@ HomeScreen.propTypes = {
 	navigation: PropTypes.object,
 	days: PropTypes.array,
 	theme: PropTypes.object,
+	removeTimetableEntry: PropTypes.func,
 };
 
 const style = StyleSheet.create({

reducers/timetable.js

@@ -22,6 +22,8 @@ export default function timetable(state, action) {
 			}],
 			...(state.slice(action.day + 1))
 		];
+	case "REMOVE_TIMETABLE_ENTRY":
+		return state.map(i => i.filter(j => j.id !== action.id));
 	default:
 		return state;
 	}