From 70b506c6c25ad4806d94f9d38fbd5b1703af6ab6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Le=20Bihan?= <clement.lebihan773@gmail.com>
Date: Mon, 10 Apr 2023 23:33:57 +0200
Subject: [PATCH] Moved Settings Preference View into its dedicated file and
 started to implement ElementRange

---
 front/components/GtkUI/ElementList.tsx   |  24 ++--
 front/components/GtkUI/ElementTypes.tsx  |  37 +++++-
 front/components/GtkUI/RawElement.tsx    |   8 ++
 front/views/settings/PreferencesView.tsx | 155 ++++++++++++-----------
 front/views/settings/SettingsView.tsx    |  85 +------------
 5 files changed, 134 insertions(+), 175 deletions(-)

diff --git a/front/components/GtkUI/ElementList.tsx b/front/components/GtkUI/ElementList.tsx
index 319ec3e..990a636 100644
--- a/front/components/GtkUI/ElementList.tsx
+++ b/front/components/GtkUI/ElementList.tsx
@@ -1,30 +1,25 @@
 import React from "react";
 import { StyleProp, ViewStyle } from "react-native";
-import IconButton from "../IconButton";
-import { Ionicons } from "@expo/vector-icons";
-import { RawElement } from "./RawElement";
 import { Element } from "./Element";
 
+import {
+	ElementTextProps,
+	ElementToggleProps,
+	ElementDropdownProps,
+	ElementRangeProps,
+	ElementType,
+} from "./ElementTypes";
+
 import {
 	Box,
-	Center,
-	Button,
 	Column,
-	Row,
-	Icon,
-	Text,
 	Divider,
-	Switch,
-	Popover,
-	Pressable,
-	useBreakpointValue,
-	Select,
 } from "native-base";
 
 export type ElementProps = {
 	title: string;
 	icon?: React.ReactNode;
-	type?: ElementType | "custom";
+	type?: ElementType;
 	helperText?: string;
 	description?: string;
 	disabled?: boolean;
@@ -32,6 +27,7 @@ export type ElementProps = {
 		| ElementTextProps
 		| ElementToggleProps
 		| ElementDropdownProps
+		| ElementRangeProps
 		| React.ReactNode;
 };
 
diff --git a/front/components/GtkUI/ElementTypes.tsx b/front/components/GtkUI/ElementTypes.tsx
index 61fad59..eeac1c2 100644
--- a/front/components/GtkUI/ElementTypes.tsx
+++ b/front/components/GtkUI/ElementTypes.tsx
@@ -1,6 +1,6 @@
-import { Select, Switch, Text, Icon, Row } from "native-base";
+import { Select, Switch, Text, Icon, Row, Slider } from "native-base";
 import { MaterialIcons } from "@expo/vector-icons";
-export type ElementType = "custom" | "default" | "text" | "toggle" | "dropdown";
+export type ElementType = "custom" | "default" | "text" | "toggle" | "dropdown" | "range";
 
 export type DropdownOption = {
 	label: string;
@@ -25,6 +25,15 @@ export type ElementDropdownProps = {
 	defaultValue?: string;
 };
 
+export type ElementRangeProps = {
+    onValueChange: (value: number) => void;
+    value: number;
+    defaultValue?: number;
+    min: number;
+    max: number;
+    step?: number;
+}
+
 export const getElementTextNode = (
 	{ text, onPress }: ElementTextProps,
 	disabled: boolean
@@ -92,3 +101,27 @@ export const getElementDropdownNode = (
 		</Select>
 	);
 };
+
+export const getElementRangeNode = (
+    { onValueChange, value, defaultValue, min, max, step }: ElementRangeProps,
+    disabled: boolean,
+    title: string,
+) => {
+    return (
+        <Slider
+            value={value}
+            defaultValue={defaultValue}
+            minValue={min}
+            maxValue={max}
+            step={step}
+            isDisabled={disabled}
+            onChangeEnd={onValueChange}
+            accessibilityLabel={`Slider for ${title}`}
+        >
+            <Slider.Track>
+                <Slider.FilledTrack />
+            </Slider.Track>
+            <Slider.Thumb />
+        </Slider>
+    )
+}
\ No newline at end of file
diff --git a/front/components/GtkUI/RawElement.tsx b/front/components/GtkUI/RawElement.tsx
index cb92801..d4072b4 100644
--- a/front/components/GtkUI/RawElement.tsx
+++ b/front/components/GtkUI/RawElement.tsx
@@ -16,9 +16,11 @@ import {
 	getElementDropdownNode,
 	getElementTextNode,
 	getElementToggleNode,
+	getElementRangeNode,
 	ElementDropdownProps,
 	ElementTextProps,
 	ElementToggleProps,
+	ElementRangeProps
 } from "./ElementTypes";
 
 type RawElementProps = {
@@ -118,6 +120,12 @@ export const RawElement = ({ element, isHovered }: RawElementProps) => {
 									data as ElementDropdownProps,
 									disabled ?? false
 								);
+							case "range":
+								return getElementRangeNode(
+									data as ElementRangeProps,
+									disabled ?? false,
+									title
+								);
 							case "custom":
 								return data as React.ReactNode;
 							default:
diff --git a/front/views/settings/PreferencesView.tsx b/front/views/settings/PreferencesView.tsx
index 6bcd8dc..a942a3c 100644
--- a/front/views/settings/PreferencesView.tsx
+++ b/front/views/settings/PreferencesView.tsx
@@ -1,89 +1,94 @@
 import React from 'react';
 import { View } from 'react-native';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { Center, Button, Text, Switch, Slider, Select, Heading } from "native-base";
 import { useLanguage } from "../../state/LanguageSlice";
-import i18n, { AvailableLanguages, DefaultLanguage, translate } from "../../i18n/i18n";
+import i18n, { AvailableLanguages, DefaultLanguage, translate, Translate } from "../../i18n/i18n";
+import { RootState, useSelector } from "../../state/Store";
+import { SettingsState, updateSettings } from "../../state/SettingsSlice";
 
 const PreferencesView = ({navigation}) => {
-    const dispatch = useDispatch();
-    const language: AvailableLanguages = useSelector((state) => state.language.value);
+	const dispatch = useDispatch();
+	const language: AvailableLanguages = useSelector((state: RootState) => state.language.value);
+	const settings = useSelector((state: RootState) => (state.settings.settings as SettingsState));
+	return (
+		<Center style={{ flex: 1}}>
+			<Heading style={{ textAlign: "center" }}>
+				<Translate translationKey='prefBtn'/>
+			</Heading>
+			<View style={{margin: 20, maxHeight: 100, maxWidth: 500, width: '80%'}}>
+				<Select selectedValue={settings.colorScheme}
+					placeholder={'Theme'}
+					style={{ alignSelf: 'center'}}
+					onValueChange={(newColorScheme) => {
+						dispatch(updateSettings({ colorScheme: newColorScheme as any }))
+					}}
+				>
+					<Select.Item label={ translate('dark') } value='dark'/>
+					<Select.Item label={ translate('light') } value='light'/>
+					<Select.Item label={ translate('system') } value='system'/>
+				</Select>
+			</View>
 
-    return (
-        <Center style={{ flex: 1}}>
-            <Heading style={{ textAlign: "center" }}>{ translate('prefBtn')}</Heading>
+			<View style={{margin: 20, maxHeight: 100, maxWidth: 500, width: '80%'}}>
+				<Select selectedValue={language}
+					placeholder={translate('langBtn')} 
+					style={{ alignSelf: 'center'}}
+					onValueChange={(itemValue) => {
+						dispatch(useLanguage(itemValue as AvailableLanguages));
+					}}>
+					<Select.Item label='Français' value='fr'/>
+					<Select.Item label='English' value='en'/>
+					<Select.Item label='Italiano' value='it'/>
+					<Select.Item label='Espanol' value='sp'/>
+				</Select>
+			</View>
 
-            <Button variant='outline' onPress={() => navigation.navigate('Settings')} style={{ margin: 10}}>{ translate('backBtn') }</Button>
+			<View style={{margin: 20, maxHeight: 100, maxWidth: 500, width: '80%'}}>
+				<Select selectedValue={settings.preferedLevel}
+					placeholder={ translate('diffBtn') }
+					style={{ height: 50, width: 150, alignSelf: 'center'}}
+					onValueChange={(itemValue) => {
+						dispatch(updateSettings({ preferedLevel: itemValue as any }));
+					}}>
+					<Select.Item label={ translate('easy') } value='easy'/>
+					<Select.Item label={ translate('medium') } value='medium'/>
+					<Select.Item label={ translate('hard') } value='hard'/>
+				</Select>
+			</View>
 
-            <View style={{margin: 20, maxHeight: 100, maxWidth: 500, width: '80%'}}>
-                <Select selectedValue={undefined}
-                placeholder={'Theme'}
-                    style={{ alignSelf: 'center'}}
-                    // onValueChange={(itemValue, itemIndex) => switch themes}
-                    >
-                    <Select.Item label={ translate('dark') } value='dark'/>
-                    <Select.Item label={ translate('light') } value='light'/>
-                    <Select.Item label={ translate('system') } value='system'/>
-                </Select>
-            </View>
+			<View style={{margin: 20}}>
+				<Text style={{ textAlign: 'center' }}>Color blind mode</Text>
+				<Switch style={{ alignSelf: 'center'}} value={settings.colorBlind} colorScheme="primary"
+					onValueChange={(enabled) => { dispatch(updateSettings({ colorBlind: enabled })) }}
+				/>
+			</View>
 
-            <View style={{margin: 20, maxHeight: 100, maxWidth: 500, width: '80%'}}>
-                <Select selectedValue={language}
-                    placeholder={translate('langBtn')} 
-                    style={{ alignSelf: 'center'}}
-                    onValueChange={(itemValue: AvailableLanguages, itemIndex) => {
-                        let newLanguage = DefaultLanguage;
-                        newLanguage = itemValue;Heading
-                        dispatch(useLanguage(newLanguage));
-                    }}>
-                    <Select.Item label='Français' value='fr'/>
-                    <Select.Item label='English' value='en'/>
-                    <Select.Item label='Italiano' value='it'/>
-                    <Select.Item label='Espanol' value='sp'/>
-                </Select>
-            </View>
+			<View style={{margin: 20, maxHeight: 100, maxWidth: 500, width: '80%'}}>
+				<Text style={{ textAlign: "center" }}>Mic volume</Text>
+				<Slider defaultValue={settings.micLevel} minValue={0} maxValue={1000} accessibilityLabel="hello world" step={10}
+					onChangeEnd={(value) => { dispatch(updateSettings({ micLevel: value })) }}
+				>
+					<Slider.Track>
+						<Slider.FilledTrack/>
+					</Slider.Track>
+					<Slider.Thumb/>
+				</Slider>
+			</View>
 
-            <View style={{margin: 20, maxHeight: 100, maxWidth: 500, width: '80%'}}>
-                <Select selectedValue={undefined}
-                    placeholder={ translate('diffBtn') }
-                    style={{ height: 50, width: 150, alignSelf: 'center'}}
-                    // onValueChange={(itemValue, itemIndex) => change level}
-                    >
-
-                    <Select.Item label={ translate('easy') } value='easy'/>
-                    <Select.Item label={ translate('medium') } value='medium'/>
-                    <Select.Item label={ translate('hard') } value='hard'/>
-                </Select>
-            </View>
-
-            <View style={{margin: 20}}>
-                <Text style={{ textAlign: "center" }}>Color blind mode</Text>
-                <Switch style={{ alignSelf: 'center'}} colorScheme="primary"/>
-            </View>
-
-            <View style={{margin: 20, maxHeight: 100, maxWidth: 500, width: '80%'}}>
-                <Text style={{ textAlign: "center" }}>Mic volume</Text>
-                <Slider defaultValue={50} minValue={0} maxValue={1000} accessibilityLabel="hello world" step={10}>
-                    <Slider.Track>
-                        <Slider.FilledTrack/>
-                    </Slider.Track>
-                    <Slider.Thumb/>
-                </Slider>
-            </View>
-
-            <View style={{margin: 20, maxHeight: 100, maxWidth: 500, width: '80%'}}>
-                <Select selectedValue={undefined}
-                    placeholder={'Device'}
-                    style={{ height: 50, width: 150, alignSelf: 'center'}}
-                    // onValueChange={(itemValue, itemIndex) => change device}
-                    >
-                    <Select.Item label='Mic_0' value='0'/>
-                    <Select.Item label='Mic_1' value='1'/>
-                    <Select.Item label='Mic_2' value='2'/>
-                </Select>
-            </View>
-        </Center>
-    )
+			<View style={{margin: 20, maxHeight: 100, maxWidth: 500, width: '80%'}}>
+				<Select selectedValue={settings.preferedInputName}
+					placeholder={'Device'}
+					style={{ height: 50, width: 150, alignSelf: 'center'}}
+					onValueChange={(itemValue: string) => { dispatch(updateSettings({ preferedInputName: itemValue })) }}
+				>
+					<Select.Item label='Mic_0' value='0'/>
+					<Select.Item label='Mic_1' value='1'/>
+					<Select.Item label='Mic_2' value='2'/>
+				</Select>
+			</View>
+		</Center>
+	)
 }
 
 export default PreferencesView;
\ No newline at end of file
diff --git a/front/views/settings/SettingsView.tsx b/front/views/settings/SettingsView.tsx
index 25fb676..0421b4d 100644
--- a/front/views/settings/SettingsView.tsx
+++ b/front/views/settings/SettingsView.tsx
@@ -16,6 +16,7 @@ import ChangeEmailForm from '../../components/forms/changeEmailForm';
 import ProfileSettings from './SettingsProfileView';
 import NotificationsView from './NotificationView';
 import PrivacyView from './PrivacyView';
+import PreferencesView from './PreferencesView';
 
 import API, { APIError } from '../../API';
 
@@ -76,90 +77,6 @@ const MainView = ({navigation}) => {
 	)
 }
 
-export const PreferencesView = ({navigation}) => {
-	const dispatch = useDispatch();
-	const language: AvailableLanguages = useSelector((state: RootState) => state.language.value);
-	const settings = useSelector((state: RootState) => (state.settings.settings as SettingsState));
-	return (
-		<Center style={{ flex: 1}}>
-			<Heading style={{ textAlign: "center" }}>
-				<Translate translationKey='prefBtn'/>
-			</Heading>
-			<View style={{margin: 20, maxHeight: 100, maxWidth: 500, width: '80%'}}>
-				<Select selectedValue={settings.colorScheme}
-					placeholder={'Theme'}
-					style={{ alignSelf: 'center'}}
-					onValueChange={(newColorScheme) => {
-						dispatch(updateSettings({ colorScheme: newColorScheme as any }))
-					}}
-				>
-					<Select.Item label={ translate('dark') } value='dark'/>
-					<Select.Item label={ translate('light') } value='light'/>
-					<Select.Item label={ translate('system') } value='system'/>
-				</Select>
-			</View>
-
-			<View style={{margin: 20, maxHeight: 100, maxWidth: 500, width: '80%'}}>
-				<Select selectedValue={language}
-					placeholder={translate('langBtn')} 
-					style={{ alignSelf: 'center'}}
-					onValueChange={(itemValue) => {
-						dispatch(useLanguage(itemValue as AvailableLanguages));
-					}}>
-					<Select.Item label='Français' value='fr'/>
-					<Select.Item label='English' value='en'/>
-					<Select.Item label='Italiano' value='it'/>
-					<Select.Item label='Espanol' value='sp'/>
-				</Select>
-			</View>
-
-			<View style={{margin: 20, maxHeight: 100, maxWidth: 500, width: '80%'}}>
-				<Select selectedValue={settings.preferedLevel}
-					placeholder={ translate('diffBtn') }
-					style={{ height: 50, width: 150, alignSelf: 'center'}}
-					onValueChange={(itemValue) => {
-						dispatch(updateSettings({ preferedLevel: itemValue as any }));
-					}}>
-					<Select.Item label={ translate('easy') } value='easy'/>
-					<Select.Item label={ translate('medium') } value='medium'/>
-					<Select.Item label={ translate('hard') } value='hard'/>
-				</Select>
-			</View>
-
-			<View style={{margin: 20}}>
-				<Text style={{ textAlign: 'center' }}>Color blind mode</Text>
-				<Switch style={{ alignSelf: 'center'}} value={settings.colorBlind} colorScheme="primary"
-					onValueChange={(enabled) => { dispatch(updateSettings({ colorBlind: enabled })) }}
-				/>
-			</View>
-
-			<View style={{margin: 20, maxHeight: 100, maxWidth: 500, width: '80%'}}>
-				<Text style={{ textAlign: "center" }}>Mic volume</Text>
-				<Slider defaultValue={settings.micLevel} minValue={0} maxValue={1000} accessibilityLabel="hello world" step={10}
-					onChangeEnd={(value) => { dispatch(updateSettings({ micLevel: value })) }}
-				>
-					<Slider.Track>
-						<Slider.FilledTrack/>
-					</Slider.Track>
-					<Slider.Thumb/>
-				</Slider>
-			</View>
-
-			<View style={{margin: 20, maxHeight: 100, maxWidth: 500, width: '80%'}}>
-				<Select selectedValue={settings.preferedInputName}
-					placeholder={'Device'}
-					style={{ height: 50, width: 150, alignSelf: 'center'}}
-					onValueChange={(itemValue: string) => { dispatch(updateSettings({ preferedInputName: itemValue })) }}
-				>
-					<Select.Item label='Mic_0' value='0'/>
-					<Select.Item label='Mic_1' value='1'/>
-					<Select.Item label='Mic_2' value='2'/>
-				</Select>
-			</View>
-		</Center>
-	)
-}
-
 export const ChangePasswordView = ({navigation}) => {
 	return (
 		<Center style={{ flex: 1}}>