From 69fbbd5e00c4421c70680d539ab2e2d7c31c56d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Le=20Bihan?= <clement.lebihan773@gmail.com>
Date: Sun, 9 Apr 2023 23:19:40 +0200
Subject: [PATCH] implemented the toggle element

---
 front/components/GtkUI/ElementList.tsx       | 57 +++++++++++++++-----
 front/views/settings/SettingsProfileView.tsx | 25 +++++++++
 2 files changed, 70 insertions(+), 12 deletions(-)

diff --git a/front/components/GtkUI/ElementList.tsx b/front/components/GtkUI/ElementList.tsx
index 5a3a42f..d94aa57 100644
--- a/front/components/GtkUI/ElementList.tsx
+++ b/front/components/GtkUI/ElementList.tsx
@@ -1,23 +1,43 @@
 import React from "react";
 import { StyleProp, ViewStyle } from "react-native";
 
-import { Box, Center, Column, Row, Text, Divider } from "native-base";
+import { Box, Center, Column, Row, Text, Divider, Switch } from "native-base";
 
 type ElementType = "custom" | "default" | "text" | "toggle" | "dropdown";
 
+type DropdownOption = {
+	label: string;
+	value: string;
+};
+
 const getElementTypeNode = (
 	type: ElementType,
 	text?: string,
-	dropdownItems?: string[],
-	onToggle?: (value: boolean) => void
+	options?: DropdownOption[],
+	onToggle?: (value: boolean) => void,
+	toggleValue?: boolean,
+	defaultToggleValue?: boolean,
+	onSelect?: (value: string) => void
 ): React.ReactNode => {
 	switch (type) {
 		case "text":
-			return <Text style={{
-				opacity: 0.6,
-			}}>{text}</Text>;
+			return (
+				<Text
+					style={{
+						opacity: 0.6,
+					}}
+				>
+					{text}
+				</Text>
+			);
 		case "toggle":
-			return <Text>Toggle</Text>;
+			return (
+				<Switch
+					onToggle={onToggle}
+					isChecked={toggleValue ?? false}
+					defaultIsChecked={defaultToggleValue}
+				/>
+			);
 		case "dropdown":
 			return <Text>Dropdown</Text>;
 		default:
@@ -35,7 +55,11 @@ type ElementProps = {
 	// node is only used if type is "custom"
 	node?: React.ReactNode;
 	onToggle?: (value: boolean) => void;
+	toggleValue?: boolean;
+	defaultToggleValue?: boolean;
 	text?: string;
+	options?: DropdownOption[];
+	onSelect?: (value: string) => void;
 };
 
 const Element = ({
@@ -47,7 +71,11 @@ const Element = ({
 	onPress,
 	node,
 	onToggle,
+	toggleValue,
+	defaultToggleValue,
 	text,
+	options,
+	onSelect,
 }: ElementProps) => {
 	return (
 		<Row
@@ -66,7 +94,15 @@ const Element = ({
 			<Box>
 				{type === "custom"
 					? node
-					: getElementTypeNode(type ?? "default", text, undefined, onToggle)}
+					: getElementTypeNode(
+							type ?? "default",
+							text,
+							options,
+							onToggle,
+							toggleValue,
+							defaultToggleValue,
+							onSelect
+					  )}
 			</Box>
 		</Row>
 	);
@@ -78,16 +114,13 @@ type ElementListProps = {
 };
 
 const ElementList = ({ elements, style }: ElementListProps) => {
-
 	const elementStyle = {
 		borderRadius: 10,
 		boxShadow: "0px 0px 3px 0px rgba(0,0,0,0.4)",
 	};
 
 	return (
-		<Column
-			style={[style, elementStyle]}
-		>
+		<Column style={[style, elementStyle]}>
 			{(() => {
 				const elementsWithDividers = [];
 				for (let i = 0; i < elements.length; i++) {
diff --git a/front/views/settings/SettingsProfileView.tsx b/front/views/settings/SettingsProfileView.tsx
index 7ca48ab..a1b3a8e 100644
--- a/front/views/settings/SettingsProfileView.tsx
+++ b/front/views/settings/SettingsProfileView.tsx
@@ -35,6 +35,7 @@ const getInitials = (name: string) => {
 const ProfileSettings = ({ navigation }: { navigation: any }) => {
 	const [user, setUser] = useState<User | null>(null);
 	const dispatch = useDispatch();
+	const [toggle, setToggle] = useState(false);
 
 	useEffect(() => {
 		API.getUserInfo().then((user) => {
@@ -110,6 +111,30 @@ const ProfileSettings = ({ navigation }: { navigation: any }) => {
 							title: "Date de création",
 							text: user.data.createdAt,
 						},
+						{
+							type: "toggle",
+							title: "Notifications",
+							onToggle: (value) => {
+								console.log(value);
+								setToggle(value);
+							},
+							toggleValue: toggle,
+						},
+						{
+							type: "dropdown",
+							title: "Langue",
+							options: [
+								{
+									label: "Français",
+									value: "fr",
+								},
+								{
+									label: "English",
+									value: "en",
+								},
+							],
+							onSelect: (value) => console.log(value),
+						}
 					]}
 				/>
 			</Column>