fixed useQuery some code style and unused hooks

front/API.ts

@@ -172,7 +172,7 @@ export default class API {
 			data: {
 				gamesPlayed: user.partyPlayed as number,
 				xp: 0,
-				createdAt: "9 avril 2023",
+				createdAt: new Date("2023-04-09T00:00:00.000Z"),
 				avatar:
 					"https://imgs.search.brave.com/RnQpFhmAFvuQsN_xTw7V-CN61VeHDBg2tkEXnKRYHAE/rs:fit:768:512:1/g:ce/aHR0cHM6Ly96b29h/c3Ryby5jb20vd3At/Y29udGVudC91cGxv/YWRzLzIwMjEvMDIv/Q2FzdG9yLTc2OHg1/MTIuanBn",
 			},

front/components/GtkUI/ElementList.tsx

@@ -48,22 +48,14 @@ const ElementList = ({ elements, style }: ElementListProps) => {
 
 	return (
 		<Column style={[style, elementStyle]}>
-			{(() => {
-				const elementsWithDividers = [];
-				for (let i = 0; i < elements.length; i++) {
-					elementsWithDividers.push(
-						<Box key={elements[i]?.title}>
-							<Element {...elements[i]} />
-						</Box>
-					);
-					if (i < elements.length - 1) {
-						elementsWithDividers.push(
-							<Divider key={elements[i]?.title + "Divider"} />
-						);
+			{elements.map((element, index, __) => (
+				<Box key={element.title}>
+					<Element {...element} />
+					{ index < elements.length - 1 &&
+						<Divider />
 					}
-				}
-				return elementsWithDividers;
-			})()}
+				</Box>
+			))}
 		</Column>
 	);
 };

front/components/GtkUI/ElementTypes.tsx

@@ -1,6 +1,12 @@
 import { Select, Switch, Text, Icon, Row, Slider } from "native-base";
 import { MaterialIcons } from "@expo/vector-icons";
-export type ElementType = "custom" | "default" | "text" | "toggle" | "dropdown" | "range";
+export type ElementType =
+	| "custom"
+	| "default"
+	| "text"
+	| "toggle"
+	| "dropdown"
+	| "range";
 
 export type DropdownOption = {
 	label: string;
@@ -26,13 +32,13 @@ export type ElementDropdownProps = {
 };
 
 export type ElementRangeProps = {
-    onChange: (value: number) => void;
-    value: number;
-    defaultValue?: number;
-    min: number;
-    max: number;
-    step?: number;
-}
+	onChange: (value: number) => void;
+	value: number;
+	defaultValue?: number;
+	min: number;
+	max: number;
+	step?: number;
+};
 
 export const getElementTextNode = (
 	{ text, onPress }: ElementTextProps,
@@ -71,7 +77,7 @@ export const getElementToggleNode = (
 ) => {
 	return (
 		<Switch
-            // the callback is called by the Pressable component wrapping the entire row
+			// the callback is called by the Pressable component wrapping the entire row
 			isChecked={value ?? false}
 			defaultIsChecked={defaultValue}
 			disabled={disabled}
@@ -103,29 +109,29 @@ export const getElementDropdownNode = (
 };
 
 export const getElementRangeNode = (
-    { onChange, value, defaultValue, min, max, step }: ElementRangeProps,
-    disabled: boolean,
-    title: string,
+	{ onChange, value, defaultValue, min, max, step }: ElementRangeProps,
+	disabled: boolean,
+	title: string
 ) => {
-    return (
-        <Slider
-            // this is a hot fix for now but ideally this input should be managed
-            // by the value prop and not the defaultValue prop but it requires the
-            // caller to manage the state of the continuous value which is not ideal
-            defaultValue={value}
-            // defaultValue={defaultValue}
-            minValue={min}
-            maxValue={max}
-            step={step}
-            isDisabled={disabled}
-            onChangeEnd={onChange}
-            accessibilityLabel={`Slider for ${title}`}
-            width="200"
-        >
-            <Slider.Track>
-                <Slider.FilledTrack />
-            </Slider.Track>
-            <Slider.Thumb />
-        </Slider>
-    )
-}
+	return (
+		<Slider
+			// this is a hot fix for now but ideally this input should be managed
+			// by the value prop and not the defaultValue prop but it requires the
+			// caller to manage the state of the continuous value which is not ideal
+			defaultValue={value}
+			// defaultValue={defaultValue}
+			minValue={min}
+			maxValue={max}
+			step={step}
+			isDisabled={disabled}
+			onChangeEnd={onChange}
+			accessibilityLabel={`Slider for ${title}`}
+			width="200"
+		>
+			<Slider.Track>
+				<Slider.FilledTrack />
+			</Slider.Track>
+			<Slider.Thumb />
+		</Slider>
+	);
+};

front/models/UserData.ts

@@ -2,7 +2,7 @@ interface UserData {
     gamesPlayed: number;
     xp: number;
     avatar: string | undefined;
-    createdAt: string;
+    createdAt: Date;
 }
 
 export default UserData;

front/views/AuthenticationView.tsx

@@ -35,7 +35,7 @@ const handleSignup = async (username: string, password: string, email: string, a
 const AuthenticationView = ({ route, navigation }: any) => {
 	const dispatch = useDispatch();
 	const isSignup = route.params?.isSignup ?? false;
-	const [mode, setMode] = React.useState((isSignup ? "signup" : "signin") as "signin" | "signup");
+	const [mode, setMode] = React.useState<"signin" | "signup">(isSignup ? "signup" : "signin");
 
 	return (
 		<Center style={{ flex: 1 }}>

front/views/settings/SettingsProfileView.tsx

@@ -23,30 +23,26 @@ import TextButton from "../../components/TextButton";
 import LoadingComponent from "../../components/Loading";
 import ElementList from "../../components/GtkUI/ElementList";
 import { translate } from "../../i18n/i18n";
+import { useQuery } from "react-query";
 
 const getInitials = (name: string) => {
-	const names = name.split(" ");
-	if (names.length === 1) return names[0]?.charAt(0);
-	let initials = [];
-	for (let i = 0; i < names.length; i++) {
-		initials.push(names[i]?.charAt(0));
-	}
-	return initials.join("");
+	return name.split(" ").map((n) => n[0]).join("");
 };
 
 const ProfileSettings = ({ navigation }: { navigation: any }) => {
-	const [user, setUser] = useState<User | null>(null);
+	const userQuery = useQuery(["appSettings", "user"], API.getUserInfo);
 	const dispatch = useDispatch();
-	const [toggle, setToggle] = useState(true);
-	const [selectValue, setSelectValue] = useState("fr");
+	const user = userQuery.data;
 
-	useEffect(() => {
-		API.getUserInfo().then((user) => {
-			setUser(user);
-		});
-	}, []);
+	if (userQuery.isError) {
+		return (
+			<Center style={{ flex: 1 }}>
+				<Text>{translate("errorLoadingUser")}</Text>
+			</Center>
+		);
+	}
 
-	if (!user) {
+	if (!userQuery || userQuery.isLoading || !userQuery.data) {
 		return (
 			<Center style={{ flex: 1 }}>
 				<LoadingComponent />
@@ -136,7 +132,7 @@ const ProfileSettings = ({ navigation }: { navigation: any }) => {
 							helperText:
 								"La date de création est actuellement arbitraire car le serveur ne retourne pas cette information",
 							data: {
-								text: user.data.createdAt,
+								text: user.data.createdAt.toLocaleDateString(),
 							},
 						},
 						{

front/views/settings/SettingsView.tsx

@@ -18,6 +18,7 @@ import NotificationsView from './NotificationView';
 import PrivacyView from './PrivacyView';
 import PreferencesView from './PreferencesView';
 import GuestToUserView from './GuestToUserView';
+import { useQuery } from 'react-query';
 
 import API, { APIError } from '../../API';
 import User from '../../models/User';
@@ -116,13 +117,20 @@ export const PianoSettingsView = ({navigation}) => {
 const TabRow = createTabRowNavigator(); 
 
 const SetttingsNavigator = () => {
-	const [user, setUser] = React.useState<null | User>(null);
+	const userQuery = useQuery(["appSettings", 'user'], API.getUserInfo);
+	const user = userQuery.data;
 
-	React.useEffect(() => {
-		API.getUserInfo().then((user) => {
-			setUser(user);
-		});
-	}, []);
+	if (userQuery.isError) {
+		user.isGuest = false;
+	}
+
+	if (userQuery.isLoading) {
+		return (
+			<Center style={{ flex: 1}}>
+				<Text>Loading...</Text>
+			</Center>
+		)
+	}
 
 	return (
 		<TabRow.Navigator initialRouteName='InternalDefault'>