fixed a bug in ElementToggle and added statte for notifications and ElementList overhaul

front/components/GtkUI/ElementTypes.tsx

@@ -62,7 +62,7 @@ export const getElementToggleNode = (
 ) => {
 	return (
 		<Switch
-			onToggle={() => onToggle()}
+            // the callback is called by the Pressable component wrapping the entire row
 			isChecked={value ?? false}
 			defaultIsChecked={defaultValue}
 			disabled={disabled}

front/views/settings/NotificationView.tsx

@@ -5,62 +5,101 @@ import { translate, Translate } from "../../i18n/i18n";
 import { useDispatch } from "react-redux";
 import { RootState, useSelector } from "../../state/Store";
 import { useLanguage } from "../../state/LanguageSlice";
-import { SettingsState, updateSettings } from '../../state/SettingsSlice';
+import { SettingsState, updateSettings } from "../../state/SettingsSlice";
+import ElementList from "../../components/GtkUI/ElementList";
 
 const NotificationsView = ({ navigation }) => {
 	const dispatch = useDispatch();
-	const settings: SettingsState = useSelector(
+	let settings: SettingsState = useSelector(
 		(state: RootState) => state.settings
 	);
+	const [pushNotifications, setPushNotifications] = React.useState(
+		settings.enablePushNotifications
+	);
+	const [emailNotifications, setEmailNotifications] = React.useState(
+		settings.enableMailNotifications
+	);
+	const [trainingReminder, setTrainingReminder] = React.useState(
+		settings.enableLessongsReminders
+	);
+	const [releaseAlert, setReleaseAlert] = React.useState(
+		settings.enableReleaseAlerts
+	);
+
 	return (
 		<Center style={{ flex: 1, justifyContent: "center" }}>
 			<Heading style={{ textAlign: "center" }}>
 				<Translate translationKey="notifBtn" />
 			</Heading>
-			<View style={{ margin: 20 }}>
-				<Text style={{ textAlign: "center" }}>Push notifications</Text>
-				<Switch
-					value={settings.enablePushNotifications}
-					style={{ alignSelf: "center", margin: 10 }}
-					colorScheme="primary"
-					onValueChange={(value) => {
-						dispatch(updateSettings({ enablePushNotifications: value }));
-					}}
-				/>
-			</View>
-			<View style={{ margin: 20 }}>
-				<Text style={{ textAlign: "center" }}>Email notifications</Text>
-				<Switch
-					value={settings.enableMailNotifications}
-					style={{ alignSelf: "center", margin: 10 }}
-					colorScheme="primary"
-					onValueChange={(value) => {
-						dispatch(updateSettings({ enableMailNotifications: value }));
-					}}
-				/>
-			</View>
-			<View style={{ margin: 20 }}>
-				<Text style={{ textAlign: "center" }}>Training reminder</Text>
-				<Switch
-					value={settings.enableLessongsReminders}
-					style={{ alignSelf: "center", margin: 10 }}
-					colorScheme="primary"
-					onValueChange={(value) => {
-						dispatch(updateSettings({ enableLessongsReminders: value }));
-					}}
-				/>
-			</View>
-			<View style={{ margin: 20 }}>
-				<Text style={{ textAlign: "center" }}>New songs</Text>
-				<Switch
-					value={settings.enableReleaseAlerts}
-					style={{ alignSelf: "center", margin: 10 }}
-					colorScheme="primary"
-					onValueChange={(value) => {
-						dispatch(updateSettings({ enableReleaseAlerts: value }));
-					}}
-				/>
-			</View>
+			<ElementList
+				style={{
+					marginTop: 20,
+					width: "100%",
+					maxWidth: 850,
+				}}
+				elements={[
+					{
+						type: "toggle",
+						title: "Push notifications",
+						data: {
+							value: pushNotifications,
+							onToggle: () => {
+								dispatch(
+									updateSettings({
+										enablePushNotifications: !settings.enablePushNotifications,
+									})
+								);
+								setPushNotifications(!pushNotifications);
+							},
+						},
+					},
+					{
+						type: "toggle",
+						title: "Email notifications",
+						data: {
+							value: emailNotifications,
+							onToggle: () => {
+								dispatch(
+									updateSettings({
+										enableMailNotifications: !settings.enableMailNotifications,
+									})
+								);
+								setEmailNotifications(!emailNotifications);
+							},
+						},
+					},
+					{
+						type: "toggle",
+						title: "Training reminder",
+						data: {
+							value: trainingReminder,
+							onToggle: () => {
+								dispatch(
+									updateSettings({
+										enableLessongsReminders: !settings.enableLessongsReminders,
+									})
+								);
+								setTrainingReminder(!trainingReminder);
+							},
+						},
+					},
+					{
+						type: "toggle",
+						title: "New songs",
+						data: {
+							value: releaseAlert,
+							onToggle: () => {
+								dispatch(
+									updateSettings({
+										enableReleaseAlerts: !settings.enableReleaseAlerts,
+									})
+								);
+								setReleaseAlert(!releaseAlert);
+							},
+						},
+					},
+				]}
+			/>
 		</Center>
 	);
 };