From cf1e98f9e6011d2a97d96e1859209ad971c84b63 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 20:08:29 +0200
Subject: [PATCH] added createdAt info in user data and added types of elements
 to render in the list in order to have a more coherent look and a simpler api
 for the ElementList user

---
 front/API.ts                                 |  1 +
 front/components/GtkUI/ElementList.tsx       | 44 +++++++++++++++++++-
 front/models/UserData.ts                     |  1 +
 front/views/settings/SettingsProfileView.tsx | 34 ++++++++-------
 4 files changed, 62 insertions(+), 18 deletions(-)

diff --git a/front/API.ts b/front/API.ts
index 6d468ee..3fa2696 100644
--- a/front/API.ts
+++ b/front/API.ts
@@ -163,6 +163,7 @@ export default class API {
 			data: {
 				partyPlayed: user.partyPlayed as number,
 				xp: 0,
+				createdAt: "9 avril 2023",
 				avatar:
 					"https://imgs.search.brave.com/RnQpFhmAFvuQsN_xTw7V-CN61VeHDBg2tkEXnKRYHAE/rs:fit:768:512:1/g:ce/aHR0cHM6Ly96b29h/c3Ryby5jb20vd3At/Y29udGVudC91cGxv/YWRzLzIwMjEvMDIv/Q2FzdG9yLTc2OHg1/MTIuanBn",
 			},
diff --git a/front/components/GtkUI/ElementList.tsx b/front/components/GtkUI/ElementList.tsx
index 4a66ab0..6eea376 100644
--- a/front/components/GtkUI/ElementList.tsx
+++ b/front/components/GtkUI/ElementList.tsx
@@ -3,16 +3,52 @@ import { StyleProp, ViewStyle } from "react-native";
 
 import { Box, Center, Column, Row, Text, Divider } from "native-base";
 
+type ElementType = "custom" | "default" | "text" | "toggle" | "dropdown";
+
+const getElementTypeNode = (
+	type: ElementType,
+	text?: string,
+	dropdownItems?: string[],
+	onToggle?: (value: boolean) => void
+): React.ReactNode => {
+	switch (type) {
+		case "text":
+			return <Text style={{
+				color: "rgba(0, 0, 0, 0.6)",
+			}}>{text}</Text>;
+		case "toggle":
+			return <Text>Toggle</Text>;
+		case "dropdown":
+			return <Text>Dropdown</Text>;
+		default:
+			return <Text>Default</Text>;
+	}
+};
+
 type ElementProps = {
 	title: string;
 	icon?: React.ReactNode;
+	type?: ElementType | "custom";
+	helperText?: string;
 	disabled?: boolean;
 	onPress?: () => void;
 	// node is only used if type is "custom"
 	node?: React.ReactNode;
+	onToggle?: (value: boolean) => void;
+	text?: string;
 };
 
-const Element = ({ title, icon, disabled, onPress, node }: ElementProps) => {
+const Element = ({
+	title,
+	icon,
+	type,
+	helperText,
+	disabled,
+	onPress,
+	node,
+	onToggle,
+	text,
+}: ElementProps) => {
 	return (
 		<Row
 			style={{
@@ -27,7 +63,11 @@ const Element = ({ title, icon, disabled, onPress, node }: ElementProps) => {
 				{icon}
 				<Text>{title}</Text>
 			</Box>
-			<Box>{node}</Box>
+			<Box>
+				{type === "custom"
+					? node
+					: getElementTypeNode(type ?? "default", text, undefined, onToggle)}
+			</Box>
 		</Row>
 	);
 };
diff --git a/front/models/UserData.ts b/front/models/UserData.ts
index 5378c15..ed8c377 100644
--- a/front/models/UserData.ts
+++ b/front/models/UserData.ts
@@ -2,6 +2,7 @@ interface UserData {
     partyPlayed: number;
     xp: number;
     avatar: string | undefined;
+    createdAt: string;
 }
 
 export default UserData;
\ No newline at end of file
diff --git a/front/views/settings/SettingsProfileView.tsx b/front/views/settings/SettingsProfileView.tsx
index 22db381..c3d0d91 100644
--- a/front/views/settings/SettingsProfileView.tsx
+++ b/front/views/settings/SettingsProfileView.tsx
@@ -88,36 +88,38 @@ const ProfileSettings = ({ navigation }: { navigation: any }) => {
 						}}
 					></Button>
 				</Row>
-
-				<Text>Username: {user.name}</Text>
-				<Text>ID: {user.id}</Text>
-				<Text>Email: {user.email}</Text>
-				<Text>Party played: {user.data.partyPlayed}</Text>
-
-				<Text>XP: {user.data.xp}</Text>
-
 				<ElementList
 					elements={[
 						{
+							type: "text",
 							title: "Username",
-							node: <Text>{user.name}</Text>,
-						},
-						{
-							title: "ID",
-							node: <Text>{user.id}</Text>,
+							text: user.name,
 						},
 						{
+							type: "text",
 							title: "Email",
-							node: <Text>{user.email}</Text>,
+							text: user.email,
 						},
 						{
+							type: "text",
+							title: "ID",
+							text: user.id,
+						},
+						{
+							type: "text",
 							title: "Party played",
-							node: <Text>{user.data.partyPlayed}</Text>,
+							text: user.data.partyPlayed,
 						},
 						{
+							type: "text",
 							title: "XP",
-							node: <Text>{user.data.xp}</Text>,
+							text: user.data.xp,
 						},
+						{
+							type: "text",
+							title: "Date de création",
+							text: user.data.createdAt,
+						}
 					]}
 				/>
 			</Column>