From 4ecd556918bdb1ee16545e6f3dd83f4e64cc1303 Mon Sep 17 00:00:00 2001
From: Arthi-chaud <arthur.jamet@gmail.com>
Date: Fri, 4 Nov 2022 09:18:48 +0000
Subject: [PATCH 01/11] User Slice: Use API Instance instead of access token

---
 front/state/UserSlice.ts | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/front/state/UserSlice.ts b/front/state/UserSlice.ts
index a7904f7..fdac788 100644
--- a/front/state/UserSlice.ts
+++ b/front/state/UserSlice.ts
@@ -1,19 +1,19 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import AuthToken from '../models/AuthToken';
+import API from '../API';
 
 export const userSlice = createSlice({
   name: 'user',
   initialState: {
-	token: undefined as AuthToken | undefined
+	  apiAccess: undefined as API | undefined
   },
   reducers: {
-    setUserToken: (state, action: PayloadAction<AuthToken>) => {
-      state.token = action.payload;
+    setAPIAccess: (state, action: PayloadAction<API>) => {
+      state.apiAccess = action.payload;
     },
-    unsetUserToken: (state) => {
-      state.token = undefined;
+    unsetAPIAccess: (state) => {
+      state.apiAccess = undefined;
     },
   },
 });
-export const { setUserToken, unsetUserToken } = userSlice.actions;
+export const { setAPIAccess, unsetAPIAccess } = userSlice.actions;
 export default userSlice.reducer;
\ No newline at end of file

From 889d07cfe5a1b28408587734fbb623eb6ec90a57 Mon Sep 17 00:00:00 2001
From: Arthi-chaud <arthur.jamet@gmail.com>
Date: Sun, 13 Nov 2022 15:48:52 +0000
Subject: [PATCH 02/11] Front: Fix API calls with JWT Token

---
 .env.example                              |   1 +
 back/src/main.ts                          |   1 +
 docker-compose.yml                        |   4 +-
 front/API.ts                              | 222 ++++++++++++++--------
 front/Navigation.tsx                      |   2 +-
 front/app.config.ts                       |  40 ++++
 front/app.json                            |  41 ----
 front/components/SearchBar.tsx            |   2 +-
 front/components/SearchBarSuggestions.tsx |   4 +-
 front/components/SongCard.tsx             |   2 +-
 front/components/forms/signinform.tsx     |   1 -
 front/components/forms/signupform.tsx     |   2 +-
 front/models/Song.ts                      |   8 +-
 front/package.json                        |   3 +
 front/state/UserSlice.ts                  |  14 +-
 front/tsconfig.json                       |   2 +-
 front/views/AuthenticationView.tsx        |  30 ++-
 front/views/HomeView.tsx                  |  68 +++----
 front/views/SearchView.tsx                |  75 +++-----
 front/views/SettingsView.tsx              |   7 +-
 front/views/SongLobbyView.tsx             |  10 +-
 front/yarn.lock                           |  77 ++++++++
 22 files changed, 368 insertions(+), 248 deletions(-)
 create mode 100644 front/app.config.ts
 delete mode 100644 front/app.json

diff --git a/.env.example b/.env.example
index 7f48820..c3123a6 100644
--- a/.env.example
+++ b/.env.example
@@ -4,3 +4,4 @@ POSTGRES_NAME=
 POSTGRES_HOST=
 DATABASE_URL=
 JWT_SECRET=
+API_URL=
\ No newline at end of file
diff --git a/back/src/main.ts b/back/src/main.ts
index f9d8c18..354fbed 100644
--- a/back/src/main.ts
+++ b/back/src/main.ts
@@ -18,6 +18,7 @@ async function bootstrap() {
 	SwaggerModule.setup('api', app, document);
 
 	app.useGlobalPipes(new ValidationPipe());
+	app.enableCors();
 	await app.listen(3000);
 }
 bootstrap();
diff --git a/docker-compose.yml b/docker-compose.yml
index 461d3e5..b69c965 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -21,6 +21,8 @@ services:
   front:
     build: ./front
     ports:
-      - "8080:80"
+      - "80:80"
     depends_on:
       - "back"
+    env_file:
+      - .env
diff --git a/front/API.ts b/front/API.ts
index edc4c18..f7c28f0 100644
--- a/front/API.ts
+++ b/front/API.ts
@@ -1,3 +1,4 @@
+import Artist from "./models/Artist";
 import AuthToken from "./models/AuthToken";
 import Chapter from "./models/Chapter";
 import Lesson from "./models/Lesson";
@@ -5,51 +6,88 @@ import LessonHistory from "./models/LessonHistory";
 import Song from "./models/Song";
 import SongHistory from "./models/SongHistory";
 import User from "./models/User";
-import { translate } from "./i18n/i18n";
+import Constants from 'expo-constants';
+import store from "./state/Store";
 
-const delay = (seconds: number) => new Promise(resolve => setTimeout(resolve, seconds * 1000));
+type AuthenticationInput = { username: string, password: string };
+type RegistrationInput = AuthenticationInput & { email: string };
+export type AccessToken = string;
 
-declare type AuthenticationInput = { email: string, password: string };
+type FetchParams = {
+	route: string;
+	body?: Object;
+	method?: 'GET' | 'POST' | 'DELETE'
+}
+
+const dummyIllustration = "https://i.discogs.com/syRCX8NaLwK2SMk8X6TVU_DWc8RRqE4b-tebAQ6kVH4/rs:fit/g:sm/q:90/h:600/w:600/czM6Ly9kaXNjb2dz/LWRhdGFiYXNlLWlt/YWdlcy9SLTgyNTQz/OC0xNjE3ODE0NDI2/LTU1MjUuanBlZw.jpeg";
 
 export default class API {
 
+	private static async fetch(params: FetchParams) {
+		const jwtToken = store.getState().user.accessToken;
+		const header = {
+			'Content-Type': 'application/json'
+		}
+		const response = await fetch(`${Constants.manifest?.extra?.apiUrl}${params.route}`, {
+			headers: jwtToken && { ...header, 'Authorization': `Bearer ${jwtToken}` } || header,
+			body: JSON.stringify(params.body),
+			method: params.method ?? 'GET' 
+		});
+		const jsonResponse = await response.json().catch(() => {
+			throw new Error("Error while parsing Server's response");
+		});
+		if (!response.ok) {
+			throw new Error(jsonResponse.error ?? response.statusText)
+		}
+		return jsonResponse;
+	}
+
+	public static async authenticate(authenticationInput: AuthenticationInput): Promise<AccessToken> {
+		return API.fetch({
+			route: '/auth/login',
+			body: authenticationInput,
+			method: 'POST'
+		}).then((responseBody) => responseBody.access_token)
+	}
+	/**
+	 * Create a new user profile, with an email and a password
+	 * @param registrationInput the credentials to create a new profile
+	 * @returns A Promise. On success, will be resolved into an instance of the API wrapper
+	 */
+	public static async createAccount(registrationInput: RegistrationInput): Promise<AccessToken> {
+		await API.fetch({
+			route: '/auth/register',
+			body: registrationInput,
+			method: 'POST'
+		});
+		return API.authenticate(registrationInput);
+	}
+
 	/***
 	 * Retrieve information of the currently authentified user
 	 */
-	static async getUserInfo(): Promise<User> {
+	public static async getUserInfo(): Promise<User> {
+		return API.fetch({
+			route: '/auth/me'
+		});
+	}
+
+	public static async getUserSkills() {
 		return {
-			name: "User",
-			email: "user@chromacase.com",
-			xp: 2345,
-			premium: false,
-			metrics: {},
-			settings: {},
-			id: 1
+			pedalsCompetency: Math.random() * 100,
+			rightHandCompetency: Math.random() * 100,
+			leftHandCompetency:	Math.random() * 100,
+			accuracyCompetency:	Math.random() * 100,
+			arpegeCompetency: Math.random() * 100,
+			chordsCompetency: Math.random() * 100,
 		}
 	}
 
-	/**
-	 * Logs the user in, with an email and a password
-	 * @param _credentials the credentials to get an authentication token
-	 * @returns an authentication token, that must be used for authentified requests
-	 */
-	static async login(_credentials: AuthenticationInput): Promise<AuthToken> {
-		return "12345";
-	}
-
-	/**
-	 * Create a new user profile, with an email and a password
-	 * @param _credentials the credentials to create a new profile
-	 * @returns an empty promise. On error, the promise will not be resolved
-	 */
-	static async register(_credentials: AuthenticationInput): Promise<void> {
-		return;
-	}
-
 	/**
 	 * Authentify a new user through Google
 	 */
-	static async authWithGoogle(): Promise<AuthToken> {
+	public static async authWithGoogle(): Promise<AuthToken> {
+		//TODO
 		return "11111";
 	}
 
@@ -57,22 +95,27 @@ export default class API {
 	 * Retrive a song
 	 * @param songId the id to find the song
 	 */
-	static async getSong(songId: number): Promise<Song> {
-		return delay(1).then(() => ({
-			title: "Song",
-			description: "A very very very very very very very very very very very very very very very very very very very very very very very very good song",
-			album: "Album",
-			metrics: {},
-			id: songId
-		}));
-		
+	public static async getSong(songId: number): Promise<Song> {
+		return API.fetch({
+			route: `/song/${songId}`
+		});
 	}
 
+	/**
+	 * Retrive an artist
+	 */
+	public static async getArtist(artistId: number): Promise<Artist> {
+		return API.fetch({
+			route: `/artist/${artistId}`
+		});
+	}
+
+
 	/**
 	 * Retrive a song's chapters
 	 * @param songId the id to find the song
 	 */
-	 static async getSongChapters(songId: number): Promise<Chapter[]> {
+	public static async getSongChapters(songId: number): Promise<Chapter[]> {
 		return [1, 2, 3, 4, 5].map((value) => ({
 			start: 100 * (value - 1),
 			end: 100 * value,
@@ -89,7 +132,7 @@ export default class API {
 	 * Retrieve a song's play history
 	 * @param songId the id to find the song
 	 */
-	 static async getSongHistory(songId: number): Promise<SongHistory[]> {
+	public static async getSongHistory(songId: number): Promise<SongHistory[]> {
 		return [6, 1, 2, 3, 4, 5].map((value) => ({
 			songId: songId,
 			userId: 1,
@@ -101,21 +144,23 @@ export default class API {
 	 * Search a song by its name
 	 * @param query the string used to find the songs
 	 */
-	 static async searchSongs(query: string): Promise<Song[]> {
-		return [{
-			title: "Song",
-			description: "A song",
-			album: "Album",
-			metrics: {},
-			id: 1
-		}];
+	 public static async searchSongs(query: string): Promise<Song[]> {
+		return Array.of(4).map((i) => ({
+			id: i,
+			name: `Searched Song ${i}`,
+			artistId: i,
+			genreId: i,
+			albumId: i,
+			cover: dummyIllustration,
+			metrics: {}
+		}));
 	}
 
 	/**
 	 * Retrieve a lesson
 	 * @param lessonId the id to find the lesson
 	 */
-	 static async getLesson(lessonId: number): Promise<Lesson> {
+	public static async getLesson(lessonId: number): Promise<Lesson> {
 		return {
 			title: "Song",
 			description: "A song",
@@ -125,43 +170,60 @@ export default class API {
 		};
 	}
 
+	/**
+	 * Retrieve the authenticated user's search history
+	 * @param lessonId the id to find the lesson
+	 */
+	public static async getSearchHistory(): Promise<Song[]> {
+		return Array.of(4).map((i) => ({
+			id: i,
+			name: `Song in history ${i}`,
+			artistId: i,
+			genreId: i,
+			albumId: i,
+			cover: dummyIllustration,
+			metrics: {}
+		}));
+	}
+
+	/**
+	 * Retrieve the authenticated user's recommendations
+	 */
+	public static async getUserRecommendations(): Promise<Song[]> {
+		return Array.of(4).map((i) => ({
+			id: i,
+			name: `Recommended Song ${i}`,
+			artistId: i,
+			genreId: i,
+			albumId: i,
+			cover: dummyIllustration,
+			metrics: {}
+		}));
+	}
+
+	/**
+	 * Retrieve the authenticated user's play history
+	 */
+	public static async getUserPlayHistory(): Promise<Song[]> {
+		return Array.of(4).map((i) => ({
+			id: i,
+			name: `played Song ${i}`,
+			artistId: i,
+			genreId: i,
+			albumId: i,
+			cover: dummyIllustration,
+			metrics: {}
+		}));
+	}
+
 	/**
 	 * Retrieve a lesson's history
 	 * @param lessonId the id to find the lesson
 	 */
-	 static async getLessonHistory(lessonId: number): Promise<LessonHistory[]> {
+	public static async getLessonHistory(lessonId: number): Promise<LessonHistory[]> {
 		return [{
 			lessonId,
 			userId: 1
 		}];
 	}
-
-	/**
-	 * Get the login information status
-	 * 
-	 */
-	static async checkSigninCredentials(username: string, password: string): Promise<string> {
-		return new Promise<string>((resolve, reject) => {
-			setTimeout(() => {
-				if (username === "katerina" && password === "1234") {
-					return resolve("token signin");
-				}
-				return reject(translate("invalidCredentials"));
-			}, 1000);
-		});
-	};
-
-	/**
-	 * Get the register information status
-	 */
-	static async checkSignupCredentials(username: string, password: string, email: string): Promise<string> {
-		return new Promise<string>((resolve, reject) => {
-			setTimeout(() => {
-				if (username === "bluub") {
-					return reject(translate("usernameTaken"));
-				}
-				return resolve("token signup");
-			}, 1000);
-		});
-	}
 }
\ No newline at end of file
diff --git a/front/Navigation.tsx b/front/Navigation.tsx
index 3292f76..76a924b 100644
--- a/front/Navigation.tsx
+++ b/front/Navigation.tsx
@@ -23,7 +23,7 @@ export const publicRoutes = <React.Fragment>
 </React.Fragment>;
 
 export const Router = () => {
-	const isAuthentified = useSelector((state) => state.user.token !== undefined)
+	const isAuthentified = useSelector((state) => state.user.accessToken !== undefined)
 	return (
 		<NavigationContainer>
 			<Stack.Navigator>
diff --git a/front/app.config.ts b/front/app.config.ts
new file mode 100644
index 0000000..eb231cb
--- /dev/null
+++ b/front/app.config.ts
@@ -0,0 +1,40 @@
+module.exports = {
+  "name": "Chromacase",
+  "slug": "Chromacase",
+  "version": "1.0.0",
+  "orientation": "portrait",
+  "icon": "./assets/icon.png",
+  "userInterfaceStyle": "light",
+  "splash": {
+    "image": "./assets/cover.png",
+    "resizeMode": "contain",
+    "backgroundColor": "#ffffff"
+  },
+  "updates": {
+    "fallbackToCacheTimeout": 0
+  },
+  "assetBundlePatterns": [
+    "**/*"
+  ],
+  "ios": {
+    "supportsTablet": true
+  },
+  "android": {
+    "adaptiveIcon": {
+      "foregroundImage": "./assets/adaptive-icon.png",
+      "backgroundColor": "#FFFFFF",
+      "package": "com.chromacase.chromacase",
+      "versionCode": 1
+    },
+    "package": "build.apk"
+  },
+  "web": {
+    "favicon": "./assets/favicon.png"
+  },
+  "extra": {
+    apiUrl: process.env.API_URL,
+    "eas": {
+      "projectId": "dade8e5e-3e2c-49f7-98c5-cf8834c7ebb2"
+    }
+  }
+}
diff --git a/front/app.json b/front/app.json
deleted file mode 100644
index 53f6efb..0000000
--- a/front/app.json
+++ /dev/null
@@ -1,41 +0,0 @@
-{
-  "expo": {
-    "name": "Chromacase",
-    "slug": "Chromacase",
-    "version": "1.0.0",
-    "orientation": "portrait",
-    "icon": "./assets/icon.png",
-    "userInterfaceStyle": "light",
-    "splash": {
-      "image": "./assets/splash.png",
-      "resizeMode": "contain",
-      "backgroundColor": "#ffffff"
-    },
-    "updates": {
-      "fallbackToCacheTimeout": 0
-    },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
-    "ios": {
-      "supportsTablet": true
-    },
-    "android": {
-      "adaptiveIcon": {
-        "foregroundImage": "./assets/adaptive-icon.png",
-        "backgroundColor": "#FFFFFF",
-        "package": "com.chromacase.chromacase",
-        "versionCode": 1
-      },
-      "package": "build.apk"
-    },
-    "web": {
-      "favicon": "./assets/favicon.png"
-    },
-    "extra": {
-      "eas": {
-        "projectId": "dade8e5e-3e2c-49f7-98c5-cf8834c7ebb2"
-      }
-    }
-  }
-}
diff --git a/front/components/SearchBar.tsx b/front/components/SearchBar.tsx
index 2429814..cdf7159 100644
--- a/front/components/SearchBar.tsx
+++ b/front/components/SearchBar.tsx
@@ -11,7 +11,7 @@ import {
 	Square,
 } from "native-base";
 import React from "react";
-import { Ionicons, FontAwesome } from "@expo/vector-icons";
+import { Ionicons } from "@expo/vector-icons";
 
 export enum SuggestionType {
 	TEXT,
diff --git a/front/components/SearchBarSuggestions.tsx b/front/components/SearchBarSuggestions.tsx
index 3772a95..9818dd8 100644
--- a/front/components/SearchBarSuggestions.tsx
+++ b/front/components/SearchBarSuggestions.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import SearchBar from "../components/SearchBar";
+import SearchBar, { IllustratedSuggestionProps } from "../components/SearchBar";
 import { SuggestionList, SuggestionType } from "../components/SearchBar";
 interface SearchBarSuggestionsProps {
 	onTextSubmit: (text: string) => void;
@@ -15,7 +15,7 @@ const filterSuggestions = (text: string, suggestions: SuggestionList) => {
 			case SuggestionType.ILLUSTRATED:
 				return (
 					suggestion.data.text.toLowerCase().includes(text.toLowerCase()) ||
-					suggestion.data.subtext.toLowerCase().includes(text.toLowerCase())
+					(suggestion.data as IllustratedSuggestionProps).subtext.toLowerCase().includes(text.toLowerCase())
 				);
 		}
 	});
diff --git a/front/components/SongCard.tsx b/front/components/SongCard.tsx
index 3216fa0..c128b52 100644
--- a/front/components/SongCard.tsx
+++ b/front/components/SongCard.tsx
@@ -22,7 +22,7 @@ const SongCard = (props: SongCardProps) => {
 		>
 			<Image
 				style={{ zIndex: 0, aspectRatio: 1, margin: 5, borderRadius: CardBorderRadius}}
-				source={{ uri: "https://i.discogs.com/yHqu3pnLgJq-cVpYNVYu6mE-fbzIrmIRxc6vES5Oi48/rs:fit/g:sm/q:90/h:556/w:600/czM6Ly9kaXNjb2dz/LWRhdGFiYXNlLWlt/YWdlcy9SLTE2NjQ2/ODUwLTE2MDkwNDU5/NzQtNTkxOS5qcGVn.jpeg" }}
+				source={{ uri: albumCover }}
 				alt={[props.songTitle, props.artistName].join('-')}
 			/>
 			<VStack padding={3}>
diff --git a/front/components/forms/signinform.tsx b/front/components/forms/signinform.tsx
index 88d3db5..2574f26 100644
--- a/front/components/forms/signinform.tsx
+++ b/front/components/forms/signinform.tsx
@@ -112,7 +112,6 @@ const LoginForm = ({ onSubmit }: SigninFormProps) => {
 									toast.show({ description: resp, colorScheme: 'secondary' })
 								} catch (e) {
 									toast.show({ description: e as string, colorScheme: 'red', avoidKeyboard: true })
-								} finally {
 									setSubmittingForm(false);
 								}
 							}}
diff --git a/front/components/forms/signupform.tsx b/front/components/forms/signupform.tsx
index 146e23a..327b56b 100644
--- a/front/components/forms/signupform.tsx
+++ b/front/components/forms/signupform.tsx
@@ -52,7 +52,7 @@ const LoginForm = ({ onSubmit }: SignupFormProps) => {
 			.min(4, translate("passwordTooShort"))
 			.max(100, translate("passwordTooLong"))
 			.matches(
-				/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})/,
+				/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$-_%\^&\*])(?=.{8,})/,
 				translate(
 					"Must Contain 8 Characters, One Uppercase, One Lowercase, One Number and One Special Case Character"
 				)
diff --git a/front/models/Song.ts b/front/models/Song.ts
index 009eedf..11b30d7 100644
--- a/front/models/Song.ts
+++ b/front/models/Song.ts
@@ -2,9 +2,11 @@ import Metrics from "./Metrics";
 import Model from "./Model";
 
 interface Song extends Model {
-	title: string;
-	description: string;
-	album: string;
+	name: string
+	artistId: number | null
+	albumId: number | null
+	genreId: number | null;
+	cover: string;
 	metrics: Metrics;
 }
 
diff --git a/front/package.json b/front/package.json
index cbfe5fa..0d06935 100644
--- a/front/package.json
+++ b/front/package.json
@@ -48,8 +48,11 @@
   "devDependencies": {
     "@babel/core": "^7.12.9",
     "@testing-library/react-native": "^11.0.0",
+    "@types/node": "^18.11.8",
     "@types/react": "^18.0.18",
     "@types/react-native": "^0.69.6",
+    "@types/react-navigation": "^3.4.0",
+    "babel-plugin-transform-inline-environment-variables": "^0.4.4",
     "react-test-renderer": "17.0.2",
     "typescript": "~4.3.5"
   },
diff --git a/front/state/UserSlice.ts b/front/state/UserSlice.ts
index fdac788..44cbc25 100644
--- a/front/state/UserSlice.ts
+++ b/front/state/UserSlice.ts
@@ -1,19 +1,19 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import API from '../API';
+import { AccessToken } from '../API';
 
 export const userSlice = createSlice({
   name: 'user',
   initialState: {
-	  apiAccess: undefined as API | undefined
+	  accessToken: undefined as AccessToken | undefined
   },
   reducers: {
-    setAPIAccess: (state, action: PayloadAction<API>) => {
-      state.apiAccess = action.payload;
+    setAccessToken: (state, action: PayloadAction<AccessToken>) => {
+      state.accessToken = action.payload;
     },
-    unsetAPIAccess: (state) => {
-      state.apiAccess = undefined;
+    unsetAccessToken: (state) => {
+      state.accessToken = undefined;
     },
   },
 });
-export const { setAPIAccess, unsetAPIAccess } = userSlice.actions;
+export const { setAccessToken, unsetAccessToken } = userSlice.actions;
 export default userSlice.reducer;
\ No newline at end of file
diff --git a/front/tsconfig.json b/front/tsconfig.json
index ed7f7e9..db05a4e 100644
--- a/front/tsconfig.json
+++ b/front/tsconfig.json
@@ -32,7 +32,7 @@
     // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
     // "typeRoots": [],                                  /* Specify multiple folders that act like `./node_modules/@types`. */
-    "types": ["react-native", "jest"],                   /* Specify type package names to be included without being referenced in a source file. */
+    "types": ["react-native", "jest", "node"],                   /* Specify type package names to be included without being referenced in a source file. */
     // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
     "resolveJsonModule": true,                           /* Enable importing .json files */
     // "noResolve": true,                                /* Disallow `import`s, `require`s or `<reference>`s from expanding the number of files TypeScript should add to a project. */
diff --git a/front/views/AuthenticationView.tsx b/front/views/AuthenticationView.tsx
index 21cea9a..ffd78bb 100644
--- a/front/views/AuthenticationView.tsx
+++ b/front/views/AuthenticationView.tsx
@@ -2,28 +2,28 @@ import React from "react";
 import { useDispatch } from '../state/Store';
 import { translate } from "../i18n/i18n";
 import API from "../API";
-import { setUserToken } from "../state/UserSlice";
+import { setAccessToken } from "../state/UserSlice";
 import { Center, Button, Text } from 'native-base';
 import SigninForm from "../components/forms/signinform";
 import SignupForm from "../components/forms/signupform";
 
-const hanldeSignin = async (username: string, password: string, tokenSetter: (token: string) => void): Promise<string> => {
+const hanldeSignin = async (username: string, password: string, apiSetter: (accessToken: string) => void): Promise<string> => {
 	try {
-		const response = await API.checkSigninCredentials(username, password);
-		tokenSetter(response);
+		const apiAccess = await API.authenticate({ username, password });
+		apiSetter(apiAccess);
 		return translate("loggedIn");
 	} catch (error) {
-		return error as string;
+		return "Username of password incorrect";
 	}
 };
 
-const handleSignup = async (username: string, password: string, email: string, tokenSetter: (t: string) => void): Promise<string> => {
+const handleSignup = async (username: string, password: string, email: string, apiSetter: (accessToken: string) => void): Promise<string> => {
 	try {
-		const response = await API.checkSignupCredentials(username, password, email);
-		tokenSetter(response);
+		const apiAccess = await API.createAccount({ username, password, email });
+		apiSetter(apiAccess);
 		return translate("loggedIn");
 	} catch (error) {
-		return error as string;
+		return "User already exists";
 	}
 };
 
@@ -33,14 +33,10 @@ const AuthenticationView = () => {
 
 	return (
 		<Center style={{ flex: 1 }}>
-			<Text>{translate('welcome')}</Text>
-			{mode === "signin" ? (<>
-				<Text fontWeight='thin'>username, password:</Text>
-				<Text fontWeight='thin'>katerina, 1234</Text>
-				<SigninForm onSubmit={(username, password) => hanldeSignin(username, password, (token) => dispatch(setUserToken(token)))} />
-			</>) : (
-				<SignupForm onSubmit={(username, password, email) => handleSignup(username, password, email, (token) => dispatch(setUserToken(token)))} />
-			)}
+			{mode === "signin" 
+				? <SigninForm onSubmit={(username, password) => hanldeSignin(username, password, (accessToken) => dispatch(setAccessToken(accessToken)))} />
+			  	: <SignupForm onSubmit={(username, password, email) => handleSignup(username, password, email, (accessToken) => dispatch(setAccessToken(accessToken)))} />
+			}
 			{ mode ==="signin" && <Button variant="outline" marginTop={5} colorScheme="error" >{translate("forgottenPassword")}</Button> }
 			<Button variant='outline' marginTop={5} colorScheme='primary' onPress={() => setMode(mode === "signin" ? "signup" : "signin")}>
 				<Text>{translate(mode === "signin" ? "signUp" : "signIn")}</Text>
diff --git a/front/views/HomeView.tsx b/front/views/HomeView.tsx
index 9aa5bb8..f621af5 100644
--- a/front/views/HomeView.tsx
+++ b/front/views/HomeView.tsx
@@ -1,8 +1,8 @@
-import React from "react";
-import { useQuery } from "react-query";
+import React, { useEffect, useState } from "react";
+import { useQueries, useQuery } from "react-query";
 import API from "../API";
 import LoadingComponent from "../components/Loading";
-import { Box, ScrollView, Flex, useBreakpointValue, Text, VStack, Progress, Button, useTheme, Heading, Divider } from 'native-base';
+import { Box, ScrollView, Flex, useBreakpointValue, Text, VStack, Progress, Button, useTheme, Heading } from 'native-base';
 import { useNavigation } from "@react-navigation/native";
 import SongCardGrid from '../components/SongCardGrid';
 import CompetenciesTable from '../components/CompetenciesTable'
@@ -31,15 +31,20 @@ const HomeView = () => {
 	const screenSize = useBreakpointValue({ base: 'small', md: "big"});
 	const flexDirection = useBreakpointValue({ base: 'column', xl: "row"});
 	const userQuery = useQuery(['user'], () => API.getUserInfo());
-
-	if (!userQuery.data) {
+	const playHistoryQuery = useQuery(['history', 'play'], () => API.getUserPlayHistory());
+	const searchHistoryQuery = useQuery(['history', 'search'], () => API.getSearchHistory());
+	const skillsQuery = useQuery(['skills'], () => API.getUserSkills());
+	const nextStepQuery = useQuery(['user', 'recommendations'], () => API.getUserRecommendations());
+	const artistsQueries = useQueries((playHistoryQuery.data?.concat(searchHistoryQuery.data ?? []).concat(nextStepQuery.data ?? []) ?? []).map((song) => (
+		{ queryKey: ['artist', song.id], queryFn: () => API.getArtist(song.id) }
+	)));
+	if (!userQuery.data || !skillsQuery.data || !searchHistoryQuery.data || !playHistoryQuery.data) {
 		return <Box style={{ flexGrow: 1, justifyContent: 'center' }}>
 			<LoadingComponent/>
 		</Box>
 	}
 	return <ScrollView>
 		<Box style={{ display: 'flex', padding: 30 }}>
-
 			<Box textAlign={ screenSize == 'small' ? 'center' : undefined } style={{ flexDirection, justifyContent: 'center', display: 'flex' }}>
 				<Text fontSize="xl" flex={screenSize == 'small' ? 1 : 2}>{`${translate('welcome')} ${userQuery.data.name}!`} </Text>
 				<Box flex={1}>
@@ -51,26 +56,21 @@ const HomeView = () => {
 				<Box flex={2}>
 					<SongCardGrid
 						heading={translate('goNextStep')}
-						songs={[ ...Array(4).keys() ].map(() => ({
-							albumCover: "",
-							songTitle: "Song",
-							artistName: "Artist",
-							songId: 1
-						}))}
+						songs={nextStepQuery.data?.filter((song) => artistsQueries.find((artistQuery) => artistQuery.data?.id === song.artistId))
+							.map((song) => ({
+								albumCover: song.cover,
+								songTitle: song.name,
+								songId: song.id,
+								artistName: artistsQueries.find((artistQuery) => artistQuery.data?.id === song.artistId)!.data!.name
+							})) ?? []
+						}
 					/>
 
 					<Flex style={{ flexDirection }}>
 						<Box flex={1} paddingY={5}>
 							<Heading>{translate('mySkillsToImprove')}</Heading>
 							<Box padding={5}>
-								<CompetenciesTable
-									pedalsCompetency=	{Math.random() * 100}
-									rightHandCompetency={Math.random() * 100}
-									leftHandCompetency=	{Math.random() * 100}
-									accuracyCompetency=	{Math.random() * 100}
-									arpegeCompetency=	{Math.random() * 100}
-									chordsCompetency=	{Math.random() * 100}
-								/>
+								<CompetenciesTable {...skillsQuery.data}/>
 							</Box>
 						</Box>
 
@@ -78,12 +78,14 @@ const HomeView = () => {
 							<SongCardGrid
 								heading={translate('recentlyPlayed')}
 								maxItemPerRow={2}
-								songs={[ ...Array(4).keys() ].map(() => ({
-									albumCover: "",
-									songTitle: "Song",
-									artistName: "Artist",
-									songId: 1
-								}))}
+								songs={playHistoryQuery.data?.filter((song) => artistsQueries.find((artistQuery) => artistQuery.data?.id === song.artistId))
+									.map((song) => ({
+										albumCover: song.cover,
+										songTitle: song.name,
+										songId: song.id,
+										artistName: artistsQueries.find((artistQuery) => artistQuery.data?.id === song.artistId)!.data!.name
+									})) ?? []
+								}
 							/>
 						</Box>						
 					</Flex>
@@ -99,12 +101,14 @@ const HomeView = () => {
 								<SongCardGrid
 									maxItemPerRow={2}
 									heading={translate('lastSearched')}
-									songs={[ ...Array(4).keys() ].map(() => ({
-										albumCover: "",
-										songTitle: "Song",
-										artistName: "Artist",
-										songId: 1
-									}))}
+									songs={searchHistoryQuery.data?.filter((song) => artistsQueries.find((artistQuery) => artistQuery.data?.id === song.artistId))
+										.map((song) => ({
+											albumCover: song.cover,
+											songTitle: song.name,
+											songId: song.id,
+											artistName: artistsQueries.find((artistQuery) => artistQuery.data?.id === song.artistId)!.data!.name
+										})) ?? []
+									}
 								/>
 							</Box>
 						</Box>
diff --git a/front/views/SearchView.tsx b/front/views/SearchView.tsx
index 9bfd986..73591fa 100644
--- a/front/views/SearchView.tsx
+++ b/front/views/SearchView.tsx
@@ -1,63 +1,36 @@
-import React from "react";
-import { useDispatch } from "../state/Store";
-import { translate } from "../i18n/i18n";
-import { Box, Button } from "native-base";
+import React, { useEffect, useState } from "react";
+import { Box } from "native-base";
 import { useNavigation } from "@react-navigation/native";
 import SearchBarSuggestions from "../components/SearchBarSuggestions";
-import {
-	SuggestionList,
-	SuggestionType,
-	IllustratedSuggestionProps,
-} from "../components/SearchBar";
-
-const onTextSubmit = (text: string) => {
-	console.log(text);
-};
+import { useQueries, useQuery } from "react-query";
+import { SuggestionType } from "../components/SearchBar";
+import API from "../API";
 
 const SearchView = () => {
+	const [query, setQuery] = useState<string>();
 	const navigation = useNavigation();
-
-	const IllustratedSuggestion: IllustratedSuggestionProps = {
-		text: "Love Story",
-		subtext: "Taylor Swift",
-		imageSrc:
-			"https://i.discogs.com/yHqu3pnLgJq-cVpYNVYu6mE-fbzIrmIRxc6vES5Oi48/rs:fit/g:sm/q:90/h:556/w:600/czM6Ly9kaXNjb2dz/LWRhdGFiYXNlLWlt/YWdlcy9SLTE2NjQ2/ODUwLTE2MDkwNDU5/NzQtNTkxOS5qcGVn.jpeg",
-		onPress: () => navigation.navigate("Song", { songId: 1 }),
-	};
-	// fill the suggestions with the data from the backend
-	const suggestions: SuggestionList = [
-		{
-			type: SuggestionType.ILLUSTRATED,
-			data: IllustratedSuggestion,
-		},
-		{
-			type: SuggestionType.ILLUSTRATED,
-			data: IllustratedSuggestion,
-		},
-		{
-			type: SuggestionType.ILLUSTRATED,
-			data: {
-				text: "Shed a Light",
-				subtext: "Robin Schulz & David Guetta",
-				imageSrc:
-					"https://imgs.search.brave.com/O9j2Z-oWiniq3lj7d-dAOgXLWCIqnHaFegmaSeIkWOY/rs:fit:560:320:1/g:ce/aHR0cHM6Ly91cGxv/YWQud2lraW1lZGlh/Lm9yZy93aWtpcGVk/aWEvZW4vdGh1bWIv/OC84ZS9TaGVkX2Ff/TGlnaHRfUm9iaW5f/U2NodWx6LmpwZy81/MTJweC1TaGVkX2Ff/TGlnaHRfUm9iaW5f/U2NodWx6LmpwZw",
-				onPress: () => navigation.navigate("Song", { songId: 1 }),
-			},
-		},
-		{
-			type: SuggestionType.TEXT,
-			data: {
-				text: "Lady Gaga",
-				onPress: () => navigation.navigate("Song", { songId: 1 }),
-			},
-		},
-	];
+	const searchQuery = useQuery(
+		['search', query],
+		() => API.searchSongs(query!),
+		{ enabled: query != undefined }
+	);
+	const artistsQueries = useQueries(searchQuery.data?.map((song) => (
+		{ queryKey: ['artist', song.id], queryFn: () => API.getArtist(song.id) }
+	)) ??[]);
 
 	return (
 		<Box style={{ padding: 10 }}>
 			<SearchBarSuggestions
-				onTextSubmit={onTextSubmit}
-				suggestions={suggestions}
+				onTextSubmit={setQuery}
+				suggestions={searchQuery.data?.map((searchResult) => ({
+					type: SuggestionType.ILLUSTRATED,
+					data: {
+						text: searchResult.name,
+						subtext: artistsQueries.find((artistQuery) => artistQuery.data?.id == searchResult.artistId)?.data?.name ?? "",
+						imageSrc: searchResult.cover,
+						onPress: () => navigation.navigate("Song", { songId: searchResult.id })
+					}
+				})) ?? []}
 			/>
 		</Box>
 	);
diff --git a/front/views/SettingsView.tsx b/front/views/SettingsView.tsx
index 57fd0eb..b0c6da9 100644
--- a/front/views/SettingsView.tsx
+++ b/front/views/SettingsView.tsx
@@ -2,8 +2,9 @@ import React from 'react';
 import { View } from 'react-native';
 import { Center, Button, Text, Switch, Slider, Select, Heading } from "native-base";
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import { unsetUserToken } from '../state/UserSlice';
-import { useDispatch, useSelector } from "react-redux";
+import { unsetAPIAccess } from '../state/UserSlice';
+import { useDispatch } from "react-redux";
+import { useSelector } from '../state/Store';
 import { useLanguage } from "../state/LanguageSlice";
 import i18n, { AvailableLanguages, DefaultLanguage, translate } from "../i18n/i18n";
 
@@ -38,7 +39,7 @@ const MainView = ({navigation}) => {
             { translate('googleacctBtn')}
             </Button>
 
-            <Button variant='ghost' onPress={() => dispatch(unsetUserToken())} >
+            <Button variant='ghost' onPress={() => dispatch(unsetAPIAccess())} >
                 { translate('signoutBtn')}
             </Button>
         </Center>
diff --git a/front/views/SongLobbyView.tsx b/front/views/SongLobbyView.tsx
index 4bad7aa..5906aa6 100644
--- a/front/views/SongLobbyView.tsx
+++ b/front/views/SongLobbyView.tsx
@@ -1,13 +1,13 @@
 import { useRoute } from "@react-navigation/native";
 import { Button, Divider, Box, Center, Image, Text, VStack, PresenceTransition, Icon } from "native-base";
-import API from "../API";
 import { useQuery } from 'react-query';
 import LoadingComponent from "../components/Loading";
 import React, { useEffect, useState } from "react";
-import logo from '../assets/cover.png';
 import { translate } from "../i18n/i18n";
 import formatDuration from "format-duration";
 import { Ionicons } from '@expo/vector-icons';
+import { useSelector } from "../state/Store";
+import API from "../API";
 
 interface SongLobbyProps {
 	// The unique identifier to find a song
@@ -34,12 +34,12 @@ const SongLobbyView = () => {
 		<Box style={{ padding: 30, flexDirection: 'column' }}>
 			<Box style={{ flexDirection: 'row', height: '30%'}}>
 				<Box style={{ flex: 3 }}>
-					<Image source={logo} style={{ height: '100%', width: undefined, resizeMode: 'contain' }}/>
+					<Image source={{ uri: songQuery.data!.cover }} style={{ height: '100%', width: undefined, resizeMode: 'contain' }}/>
 				</Box>
 				<Box style={{ flex: 0.5 }}/>
 				<Box style={{ flex: 3, padding: 10, flexDirection: 'column', justifyContent: 'space-between' }}>
 					<Box flex={1}>
-						<Text bold fontSize='lg'>{songQuery.data!.title}</Text>
+						<Text bold fontSize='lg'>{songQuery.data!.name}</Text>
 						<Text>{'3:20'} - {translate('level')} { chaptersQuery.data!.reduce((a, b) => a + b.difficulty, 0) / chaptersQuery.data!.length }</Text>
 						<Button width='auto'  rightIcon={<Icon as={Ionicons} name="play-outline"/>}>{ translate('playBtn') }</Button>
 					</Box>
@@ -55,7 +55,7 @@ const SongLobbyView = () => {
 					<Text>{scoresQuery.data!.slice(-1)[0]!.score}</Text>
 				</Box>
 			</Box>
-			<Text style={{ paddingBottom: 10 }}>{songQuery.data!.description}</Text>
+			{/* <Text style={{ paddingBottom: 10 }}>{songQuery.data!.description}</Text> */}
 			<Box flexDirection='row'>
 				<Button
 					variant='ghost'
diff --git a/front/yarn.lock b/front/yarn.lock
index eab0c20..7f4562e 100644
--- a/front/yarn.lock
+++ b/front/yarn.lock
@@ -2405,6 +2405,16 @@
   resolved "https://registry.yarnpkg.com/@react-native/polyfills/-/polyfills-2.0.0.tgz#4c40b74655c83982c8cf47530ee7dc13d957b6aa"
   integrity sha512-K0aGNn1TjalKj+65D7ycc1//H9roAQ51GJVk5ZJQFb2teECGmzd86bYDC0aYdbRf7gtovescq4Zt6FR0tgXiHQ==
 
+"@react-navigation/core@^3.7.9":
+  version "3.7.9"
+  resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-3.7.9.tgz#3f7ba0fcb6c8d74a77a057382af198d84c7c4e3b"
+  integrity sha512-EknbzM8OI9A5alRxXtQRV5Awle68B+z1QAxNty5DxmlS3BNfmduWNGnim159ROyqxkuDffK9L/U/Tbd45mx+Jg==
+  dependencies:
+    hoist-non-react-statics "^3.3.2"
+    path-to-regexp "^1.8.0"
+    query-string "^6.13.6"
+    react-is "^16.13.0"
+
 "@react-navigation/core@^6.4.0":
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-6.4.0.tgz#c44d33a8d8ef010a102c7f831fc8add772678509"
@@ -2430,6 +2440,14 @@
     "@react-navigation/elements" "^1.3.6"
     warn-once "^0.1.0"
 
+"@react-navigation/native@^3.8.4":
+  version "3.8.4"
+  resolved "https://registry.yarnpkg.com/@react-navigation/native/-/native-3.8.4.tgz#4d77f86506364ecf18b33c7f8740afb6763d0b37"
+  integrity sha512-gXSVcL7bfFDyVkvyg1FiAqTCIgZub5K1X/TZqURBs2CPqDpfX1OsCtB9D33eTF14SpbfgHW866btqrrxoCACfg==
+  dependencies:
+    hoist-non-react-statics "^3.3.2"
+    react-native-safe-area-view "^0.14.9"
+
 "@react-navigation/native@^6.0.11":
   version "6.0.13"
   resolved "https://registry.yarnpkg.com/@react-navigation/native/-/native-6.0.13.tgz#ec504120e193ea6a7f24ffa765a1338be5a3160a"
@@ -2976,6 +2994,11 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-18.8.2.tgz#17d42c6322d917764dd3d2d3a10d7884925de067"
   integrity sha512-cRMwIgdDN43GO4xMWAfJAecYn8wV4JbsOGHNfNUIDiuYkUYAR5ec4Rj7IO2SAhFPEfpPtLtUTbbny/TCT7aDwA==
 
+"@types/node@^18.11.8":
+  version "18.11.8"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.11.8.tgz#16d222a58d4363a2a359656dd20b28414de5d265"
+  integrity sha512-uGwPWlE0Hj972KkHtCDVwZ8O39GmyjfMane1Z3GUBGGnkZ2USDq7SxLpVIiIHpweY9DS0QTDH0Nw7RNBsAAZ5A==
+
 "@types/normalize-package-data@^2.4.0":
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301"
@@ -3005,6 +3028,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-navigation@^3.4.0":
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/@types/react-navigation/-/react-navigation-3.4.0.tgz#d610d13c9162312079a8ca102660143f07432cbf"
+  integrity sha512-Y7F5zU8BTBK8tEOvUqgvwvPZ7+9vnc2UI1vHwJ/9ZJG98TntNv04GWa6lrn4MA4149pqw6cyNw/V49Yd2osAFQ==
+  dependencies:
+    react-navigation "*"
+
 "@types/react-query@^1.2.9":
   version "1.2.9"
   resolved "https://registry.yarnpkg.com/@types/react-query/-/react-query-1.2.9.tgz#61df5a0594ea4b90234f9c0fdd8f12a06e331fed"
@@ -3440,6 +3470,11 @@ babel-plugin-syntax-trailing-function-commas@^7.0.0-beta.0:
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-7.0.0-beta.0.tgz#aa213c1435e2bffeb6fca842287ef534ad05d5cf"
   integrity sha512-Xj9XuRuz3nTSbaTXWv3itLOcxyF4oPD8douBBmj7U9BBC6nEBYfyOJYQMf/8PJAFotC62UY5dFfIGEPr7WswzQ==
 
+babel-plugin-transform-inline-environment-variables@^0.4.4:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-inline-environment-variables/-/babel-plugin-transform-inline-environment-variables-0.4.4.tgz#974245008b3cbbd646bd81707af147aea3acca43"
+  integrity sha512-bJILBtn5a11SmtR2j/3mBOjX4K3weC6cq+NNZ7hG22wCAqpc3qtj/iN7dSe9HDiS46lgp1nHsQgeYrea/RUe+g==
+
 babel-preset-current-node-syntax@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz#b4399239b89b2a011f9ddbe3e4f401fc40cff73b"
@@ -5358,6 +5393,11 @@ hermes-profile-transformer@^0.0.6:
   dependencies:
     source-map "^0.7.3"
 
+hoist-non-react-statics@^2.3.1:
+  version "2.5.5"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
+  integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==
+
 hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
@@ -5811,6 +5851,11 @@ is-wsl@^2.2.0:
   dependencies:
     is-docker "^2.0.0"
 
+isarray@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
+  integrity sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==
+
 isarray@1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
@@ -7859,6 +7904,13 @@ path-parse@^1.0.5, path-parse@^1.0.7:
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
   integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
 
+path-to-regexp@^1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.8.0.tgz#887b3ba9d84393e87a0a0b9f4cb756198b53548a"
+  integrity sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==
+  dependencies:
+    isarray "0.0.1"
+
 path-type@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
@@ -8050,6 +8102,16 @@ qs@6.7.0:
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
   integrity sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==
 
+query-string@^6.13.6:
+  version "6.14.1"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.14.1.tgz#7ac2dca46da7f309449ba0f86b1fd28255b0c86a"
+  integrity sha512-XDxAeVmpfu1/6IjyT/gXHOl+S0vQ9owggJ30hhWKdHAsNPOcasn5o9BW0eejZqL2e4vMjhAxoW3jVHcD6mbcYw==
+  dependencies:
+    decode-uri-component "^0.2.0"
+    filter-obj "^1.1.0"
+    split-on-first "^1.0.0"
+    strict-uri-encode "^2.0.0"
+
 query-string@^7.0.0:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/query-string/-/query-string-7.1.1.tgz#754620669db978625a90f635f12617c271a088e1"
@@ -8182,6 +8244,13 @@ react-native-safe-area-context@4.2.4:
   resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.2.4.tgz#4df42819759c4d3c74252c8678c2772cfa2271a6"
   integrity sha512-OOX+W2G4YYufvryonn6Kw6YnyT8ZThkxPHZBD04NLHaZmicUaaDVII/PZ3M5fD1o5N62+T+8K4bCS5Un2ggvkA==
 
+react-native-safe-area-view@^0.14.9:
+  version "0.14.9"
+  resolved "https://registry.yarnpkg.com/react-native-safe-area-view/-/react-native-safe-area-view-0.14.9.tgz#90ee8383037010d9a5055a97cf97e4c1da1f0c3d"
+  integrity sha512-WII/ulhpVyL/qbYb7vydq7dJAfZRBcEhg4/UWt6F6nAKpLa3gAceMOxBxI914ppwSP/TdUsandFy6lkJQE0z4A==
+  dependencies:
+    hoist-non-react-statics "^2.3.1"
+
 react-native-screens@~3.11.1:
   version "3.11.1"
   resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-3.11.1.tgz#9bca9968986ca9195cb1e7e6fca37543bde64ecb"
@@ -8263,6 +8332,14 @@ react-native@0.68.2:
     whatwg-fetch "^3.0.0"
     ws "^6.1.4"
 
+react-navigation@*:
+  version "4.4.4"
+  resolved "https://registry.yarnpkg.com/react-navigation/-/react-navigation-4.4.4.tgz#8cda2219196311db440e54998bc724523359949f"
+  integrity sha512-08Nzy1aKEd73496CsuzN49vLFmxPKYF5WpKGgGvkQ10clB79IRM2BtAfVl6NgPKuUM8FXq1wCsrjo/c5ftl5og==
+  dependencies:
+    "@react-navigation/core" "^3.7.9"
+    "@react-navigation/native" "^3.8.4"
+
 react-query@*:
   version "3.39.2"
   resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.39.2.tgz#9224140f0296f01e9664b78ed6e4f69a0cc9216f"

From a458d072521e965859871560549c22ae6237f18f Mon Sep 17 00:00:00 2001
From: Arthi-chaud <arthur.jamet@gmail.com>
Date: Mon, 14 Nov 2022 09:35:16 +0000
Subject: [PATCH 03/11] Front: Handle Empty Server response

---
 front/API.ts                          | 19 ++++++++++++-------
 front/components/forms/signinform.tsx |  2 +-
 front/components/forms/signupform.tsx |  2 +-
 front/views/AuthenticationView.tsx    |  1 +
 front/views/SettingsView.tsx          |  4 ++--
 5 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/front/API.ts b/front/API.ts
index f7c28f0..29b88a6 100644
--- a/front/API.ts
+++ b/front/API.ts
@@ -33,13 +33,18 @@ export default class API {
 			body: JSON.stringify(params.body),
 			method: params.method ?? 'GET' 
 		});
-		const jsonResponse = await response.json().catch(() => {
-			throw new Error("Error while parsing Server's response");
-		});
-		if (!response.ok) {
-			throw new Error(jsonResponse.error ?? response.statusText)
+		const body = await response.text();
+		try {
+			const jsonResponse = body.length != 0 ? JSON.parse(body) : {};
+			if (!response.ok) {
+				throw new Error(jsonResponse.error ?? response.statusText)
+			}
+			return jsonResponse;
+		} catch (e) {
+			if (e instanceof SyntaxError)
+				throw new Error("Error while parsing Server's response");
+			throw e;
 		}
-		return jsonResponse;
 	}
 
 	public static async authenticate(authenticationInput: AuthenticationInput): Promise<AccessToken> {
@@ -60,7 +65,7 @@ export default class API {
 			body: registrationInput,
 			method: 'POST'
 		});
-		return API.authenticate(registrationInput);
+		return API.authenticate({ username: registrationInput.username, password: registrationInput.password });
 	}
 
 	/***
diff --git a/front/components/forms/signinform.tsx b/front/components/forms/signinform.tsx
index 2574f26..7f7d985 100644
--- a/front/components/forms/signinform.tsx
+++ b/front/components/forms/signinform.tsx
@@ -109,7 +109,7 @@ const LoginForm = ({ onSubmit }: SigninFormProps) => {
 										formData.username.value,
 										formData.password.value
 									);
-									toast.show({ description: resp, colorScheme: 'secondary' })
+									toast.show({ description: resp, colorScheme: 'secondary' });
 								} catch (e) {
 									toast.show({ description: e as string, colorScheme: 'red', avoidKeyboard: true })
 									setSubmittingForm(false);
diff --git a/front/components/forms/signupform.tsx b/front/components/forms/signupform.tsx
index 327b56b..f04f6c9 100644
--- a/front/components/forms/signupform.tsx
+++ b/front/components/forms/signupform.tsx
@@ -186,9 +186,9 @@ const LoginForm = ({ onSubmit }: SignupFormProps) => {
 										formData.email.value
 									);
 									toast.show({ description: resp });
+									setSubmittingForm(false);
 								} catch (e) {
 									toast.show({ description: e as string });
-								} finally {
 									setSubmittingForm(false);
 								}
 							}}
diff --git a/front/views/AuthenticationView.tsx b/front/views/AuthenticationView.tsx
index ffd78bb..2b8dba6 100644
--- a/front/views/AuthenticationView.tsx
+++ b/front/views/AuthenticationView.tsx
@@ -23,6 +23,7 @@ const handleSignup = async (username: string, password: string, email: string, a
 		apiSetter(apiAccess);
 		return translate("loggedIn");
 	} catch (error) {
+		console.log(error);
 		return "User already exists";
 	}
 };
diff --git a/front/views/SettingsView.tsx b/front/views/SettingsView.tsx
index b0c6da9..4ff0a37 100644
--- a/front/views/SettingsView.tsx
+++ b/front/views/SettingsView.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { View } from 'react-native';
 import { Center, Button, Text, Switch, Slider, Select, Heading } from "native-base";
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import { unsetAPIAccess } from '../state/UserSlice';
+import { unsetAccessToken } from '../state/UserSlice';
 import { useDispatch } from "react-redux";
 import { useSelector } from '../state/Store';
 import { useLanguage } from "../state/LanguageSlice";
@@ -39,7 +39,7 @@ const MainView = ({navigation}) => {
             { translate('googleacctBtn')}
             </Button>
 
-            <Button variant='ghost' onPress={() => dispatch(unsetAPIAccess())} >
+            <Button variant='ghost' onPress={() => dispatch(unsetAccessToken())} >
                 { translate('signoutBtn')}
             </Button>
         </Center>

From 9b823f722f25fb5e42bd24b3ec685ec0a8cd93c7 Mon Sep 17 00:00:00 2001
From: Arthi-chaud <arthur.jamet@gmail.com>
Date: Mon, 14 Nov 2022 09:42:50 +0000
Subject: [PATCH 04/11] Front: Fix User Model

---
 front/models/User.ts     | 2 +-
 front/views/HomeView.tsx | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/front/models/User.ts b/front/models/User.ts
index aaf5e28..c7b5a94 100644
--- a/front/models/User.ts
+++ b/front/models/User.ts
@@ -3,7 +3,7 @@ import Model from "./Model";
 import UserSettings from "./UserSettings";
 
 interface User extends Model {
-	name: string;
+	username: string;
 	email: string;
 	xp: number;
 	premium: boolean;
diff --git a/front/views/HomeView.tsx b/front/views/HomeView.tsx
index f621af5..26a9ed0 100644
--- a/front/views/HomeView.tsx
+++ b/front/views/HomeView.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { useQueries, useQuery } from "react-query";
 import API from "../API";
 import LoadingComponent from "../components/Loading";
@@ -43,10 +43,11 @@ const HomeView = () => {
 			<LoadingComponent/>
 		</Box>
 	}
+	console.log(userQuery.data);
 	return <ScrollView>
 		<Box style={{ display: 'flex', padding: 30 }}>
 			<Box textAlign={ screenSize == 'small' ? 'center' : undefined } style={{ flexDirection, justifyContent: 'center', display: 'flex' }}>
-				<Text fontSize="xl" flex={screenSize == 'small' ? 1 : 2}>{`${translate('welcome')} ${userQuery.data.name}!`} </Text>
+				<Text fontSize="xl" flex={screenSize == 'small' ? 1 : 2}>{`${translate('welcome')} ${userQuery.data.username}!`} </Text>
 				<Box flex={1}>
 					<ProgressBar xp={userQuery.data.xp}/>
 				</Box>

From b83a369799ad06cc0322fd6193fda7c439f0e7a9 Mon Sep 17 00:00:00 2001
From: Arthi-chaud <arthur.jamet@gmail.com>
Date: Thu, 17 Nov 2022 18:22:32 +0000
Subject: [PATCH 05/11] Front: Signin Form: Fix submittingstate on error

---
 front/components/forms/signinform.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/front/components/forms/signinform.tsx b/front/components/forms/signinform.tsx
index 7f7d985..24aa310 100644
--- a/front/components/forms/signinform.tsx
+++ b/front/components/forms/signinform.tsx
@@ -110,6 +110,7 @@ const LoginForm = ({ onSubmit }: SigninFormProps) => {
 										formData.password.value
 									);
 									toast.show({ description: resp, colorScheme: 'secondary' });
+									setSubmittingForm(false);
 								} catch (e) {
 									toast.show({ description: e as string, colorScheme: 'red', avoidKeyboard: true })
 									setSubmittingForm(false);

From 6dedb3faccf9186f6fd659658157d5a65848cd26 Mon Sep 17 00:00:00 2001
From: Arthi-chaud <arthur.jamet@gmail.com>
Date: Fri, 18 Nov 2022 13:39:17 +0000
Subject: [PATCH 06/11] Front: Remove logs

---
 front/views/AuthenticationView.tsx | 1 -
 front/views/HomeView.tsx           | 1 -
 2 files changed, 2 deletions(-)

diff --git a/front/views/AuthenticationView.tsx b/front/views/AuthenticationView.tsx
index 2b8dba6..ffd78bb 100644
--- a/front/views/AuthenticationView.tsx
+++ b/front/views/AuthenticationView.tsx
@@ -23,7 +23,6 @@ const handleSignup = async (username: string, password: string, email: string, a
 		apiSetter(apiAccess);
 		return translate("loggedIn");
 	} catch (error) {
-		console.log(error);
 		return "User already exists";
 	}
 };
diff --git a/front/views/HomeView.tsx b/front/views/HomeView.tsx
index 26a9ed0..faefc22 100644
--- a/front/views/HomeView.tsx
+++ b/front/views/HomeView.tsx
@@ -43,7 +43,6 @@ const HomeView = () => {
 			<LoadingComponent/>
 		</Box>
 	}
-	console.log(userQuery.data);
 	return <ScrollView>
 		<Box style={{ display: 'flex', padding: 30 }}>
 			<Box textAlign={ screenSize == 'small' ? 'center' : undefined } style={{ flexDirection, justifyContent: 'center', display: 'flex' }}>

From 8546c863327787b62c6f48505b67a745c19cf384 Mon Sep 17 00:00:00 2001
From: Arthur Jamet <60505370+Arthi-chaud@users.noreply.github.com>
Date: Thu, 24 Nov 2022 17:20:45 +0000
Subject: [PATCH 07/11] Front/translate refactor (#110)

* Front: i18n: Create component

* Front: Use new translation component

* Front: Translation COmpoent: Change props name

* Front: Fix merge
---
 front/components/SongCardGrid.tsx     |  2 +-
 front/components/Translate.tsx        | 20 +++++++++++
 front/components/forms/signinform.tsx | 12 ++++---
 front/components/forms/signupform.tsx | 20 +++++++----
 front/i18n/i18n.ts                    | 11 ++++--
 front/models/User.ts                  |  2 +-
 front/views/AuthenticationView.tsx    |  7 ++--
 front/views/HomeView.tsx              | 30 ++++++++++------
 front/views/SettingsView.tsx          | 51 +++++++++++++++------------
 front/views/SongLobbyView.tsx         | 25 ++++++++-----
 10 files changed, 124 insertions(+), 56 deletions(-)
 create mode 100644 front/components/Translate.tsx

diff --git a/front/components/SongCardGrid.tsx b/front/components/SongCardGrid.tsx
index 89ffeb7..7f816ea 100644
--- a/front/components/SongCardGrid.tsx
+++ b/front/components/SongCardGrid.tsx
@@ -6,7 +6,7 @@ import { Heading, VStack } from 'native-base';
 type SongCardGrid = {
 	songs: Parameters<typeof SongCard>[0][];
 	maxItemPerRow?: number,
-	heading?: string
+	heading?: JSX.Element,
 }
 
 const SongCardGrid = (props: SongCardGrid) => {
diff --git a/front/components/Translate.tsx b/front/components/Translate.tsx
new file mode 100644
index 0000000..ef6da7c
--- /dev/null
+++ b/front/components/Translate.tsx
@@ -0,0 +1,20 @@
+import { translate } from "../i18n/i18n";
+import { en } from "../i18n/Translations";
+import { RootState, useSelector } from "../state/Store";
+
+type TranslateProps = {
+	translationKey: keyof typeof en;
+	format?: (translated: string) => string;
+} 
+/**
+ * Translation component
+ * @param param0 
+ * @returns 
+ */
+const Translate = ({ translationKey, format }: TranslateProps) => {
+	const selectedLanguage = useSelector((state: RootState) => state.language.value);
+	const translated = translate(translationKey, selectedLanguage);
+	return <>{format ? format(translated) : translated}</>;
+}
+
+export default Translate;
\ No newline at end of file
diff --git a/front/components/forms/signinform.tsx b/front/components/forms/signinform.tsx
index 24aa310..1b3005a 100644
--- a/front/components/forms/signinform.tsx
+++ b/front/components/forms/signinform.tsx
@@ -1,7 +1,7 @@
 // a form for sign in
 
 import React from "react";
-import { translate } from "../../i18n/i18n";
+import { Translate, translate } from "../../i18n/i18n";
 import { string } from "yup";
 import {
 	FormControl,
@@ -51,7 +51,9 @@ const LoginForm = ({ onSubmit }: SigninFormProps) => {
 							formData.password.error !== null
 						}
 					>
-						<FormControl.Label>{translate("username")}</FormControl.Label>
+						<FormControl.Label>
+							<Translate translationKey='username'/>
+						</FormControl.Label>
 						<Input
 							isRequired
 							type="text"
@@ -72,7 +74,9 @@ const LoginForm = ({ onSubmit }: SigninFormProps) => {
 						>
 							{formData.username.error}
 						</FormControl.ErrorMessage>
-						<FormControl.Label>{translate("password")}</FormControl.Label>
+						<FormControl.Label>
+							<Translate translationKey='password'/>
+						</FormControl.Label>
 						<Input
 							isRequired
 							type="password"
@@ -117,7 +121,7 @@ const LoginForm = ({ onSubmit }: SigninFormProps) => {
 								}
 							}}
 						>
-							{translate("login")}
+							<Translate translationKey='login'/>
 						</Button>
 					</FormControl>
 				</Stack>
diff --git a/front/components/forms/signupform.tsx b/front/components/forms/signupform.tsx
index f04f6c9..2b1c0db 100644
--- a/front/components/forms/signupform.tsx
+++ b/front/components/forms/signupform.tsx
@@ -1,7 +1,7 @@
 // a form for sign up
 
 import React from "react";
-import { translate } from "../../i18n/i18n";
+import { Translate, translate } from "../../i18n/i18n";
 import { string } from "yup";
 import {
 	FormControl,
@@ -74,7 +74,9 @@ const LoginForm = ({ onSubmit }: SignupFormProps) => {
 							formData.email.error !== null
 						}
 					>
-						<FormControl.Label>{translate("username")}</FormControl.Label>
+						<FormControl.Label>
+							<Translate translationKey='username'/>
+						</FormControl.Label>
 						<Input
 							isRequired
 							type="text"
@@ -95,7 +97,9 @@ const LoginForm = ({ onSubmit }: SignupFormProps) => {
 						>
 							{formData.username.error}
 						</FormControl.ErrorMessage>
-						<FormControl.Label>{translate("email")}</FormControl.Label>
+						<FormControl.Label>
+							<Translate translationKey='email'/>
+						</FormControl.Label>
 						<Input
 							isRequired
 							type="text"
@@ -116,7 +120,9 @@ const LoginForm = ({ onSubmit }: SignupFormProps) => {
 						>
 							{formData.email.error}
 						</FormControl.ErrorMessage>
-						<FormControl.Label>{translate("password")}</FormControl.Label>
+						<FormControl.Label>
+							<Translate translationKey='password'/>
+						</FormControl.Label>
 						<Input
 							isRequired
 							type="password"
@@ -137,7 +143,9 @@ const LoginForm = ({ onSubmit }: SignupFormProps) => {
 						>
 							{formData.password.error}
 						</FormControl.ErrorMessage>
-						<FormControl.Label>{translate("repeatPassword")}</FormControl.Label>
+						<FormControl.Label>
+							<Translate translationKey='repeatPassword'/>
+						</FormControl.Label>
 						<Input
 							isRequired
 							type="password"
@@ -193,7 +201,7 @@ const LoginForm = ({ onSubmit }: SignupFormProps) => {
 								}
 							}}
 						>
-							{translate("signUp")}
+							<Translate translationKey='signUp'/>
 						</Button>
 					</FormControl>
 				</Stack>
diff --git a/front/i18n/i18n.ts b/front/i18n/i18n.ts
index 132ca3d..7cbf9f5 100644
--- a/front/i18n/i18n.ts
+++ b/front/i18n/i18n.ts
@@ -1,7 +1,7 @@
 import { en, fr, sp } from './Translations';
 import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
-
+import Translate from '../components/Translate';
 
 export type AvailableLanguages = 'en' | 'fr' | 'sp';
 export const DefaultLanguage: AvailableLanguages = 'en';
@@ -28,9 +28,16 @@ i18n
 	});
 
 export default i18n;
+
 /**
  * Typesafe translation method
  * @param textKey the key of th text to translate
  * @returns the translated text
  */
-export const translate = (textKey: keyof typeof en) => i18n.t(textKey);
\ No newline at end of file
+export const translate = (key: keyof typeof en, language?: AvailableLanguages) => {
+	return i18n.t(key, {
+		lng: language
+	});
+}
+
+export { Translate };
\ No newline at end of file
diff --git a/front/models/User.ts b/front/models/User.ts
index c7b5a94..aaf5e28 100644
--- a/front/models/User.ts
+++ b/front/models/User.ts
@@ -3,7 +3,7 @@ import Model from "./Model";
 import UserSettings from "./UserSettings";
 
 interface User extends Model {
-	username: string;
+	name: string;
 	email: string;
 	xp: number;
 	premium: boolean;
diff --git a/front/views/AuthenticationView.tsx b/front/views/AuthenticationView.tsx
index ffd78bb..29c89c8 100644
--- a/front/views/AuthenticationView.tsx
+++ b/front/views/AuthenticationView.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { useDispatch } from '../state/Store';
-import { translate } from "../i18n/i18n";
+import { Translate, translate } from "../i18n/i18n";
 import API from "../API";
 import { setAccessToken } from "../state/UserSlice";
 import { Center, Button, Text } from 'native-base';
@@ -33,13 +33,16 @@ const AuthenticationView = () => {
 
 	return (
 		<Center style={{ flex: 1 }}>
+			<Text><Translate translationKey='welcome'/></Text>
 			{mode === "signin" 
 				? <SigninForm onSubmit={(username, password) => hanldeSignin(username, password, (accessToken) => dispatch(setAccessToken(accessToken)))} />
 			  	: <SignupForm onSubmit={(username, password, email) => handleSignup(username, password, email, (accessToken) => dispatch(setAccessToken(accessToken)))} />
 			}
 			{ mode ==="signin" && <Button variant="outline" marginTop={5} colorScheme="error" >{translate("forgottenPassword")}</Button> }
 			<Button variant='outline' marginTop={5} colorScheme='primary' onPress={() => setMode(mode === "signin" ? "signup" : "signin")}>
-				<Text>{translate(mode === "signin" ? "signUp" : "signIn")}</Text>
+				<Text>
+					<Translate translationKey={mode === "signin" ? "signUp" : "signIn"}/>
+				</Text>
 			</Button>
 		</Center>
 	);
diff --git a/front/views/HomeView.tsx b/front/views/HomeView.tsx
index faefc22..6ee0a30 100644
--- a/front/views/HomeView.tsx
+++ b/front/views/HomeView.tsx
@@ -6,7 +6,7 @@ import { Box, ScrollView, Flex, useBreakpointValue, Text, VStack, Progress, Butt
 import { useNavigation } from "@react-navigation/native";
 import SongCardGrid from '../components/SongCardGrid';
 import CompetenciesTable from '../components/CompetenciesTable'
-import { translate } from "../i18n/i18n";
+import { Translate } from "../i18n/i18n";
 
 const ProgressBar = ({ xp }: { xp: number}) => {
 	const level = Math.floor(xp / 1000);
@@ -16,11 +16,17 @@ const ProgressBar = ({ xp }: { xp: number}) => {
 
 	return (
 		<VStack alignItems={'center'}>
-			<Text>{`${translate('level')} ${level}`}</Text>
+			<Text>
+				<Translate translationKey='level' format={(id) => `${id} ${level}`}/>
+			</Text>
 			<Box w="90%" maxW="400">
 				<Progress value={progessValue} mx="4" />
 			</Box>
-			<Text>{xp} / {nextLevelThreshold} {translate('levelProgress')}</Text>
+			<Text>
+				<Translate translationKey='levelProgress'
+					format={(levelProgress) => `${xp} / ${nextLevelThreshold} ${levelProgress}`}
+				/>
+			</Text>
 		</VStack>
 	);
 }
@@ -46,7 +52,9 @@ const HomeView = () => {
 	return <ScrollView>
 		<Box style={{ display: 'flex', padding: 30 }}>
 			<Box textAlign={ screenSize == 'small' ? 'center' : undefined } style={{ flexDirection, justifyContent: 'center', display: 'flex' }}>
-				<Text fontSize="xl" flex={screenSize == 'small' ? 1 : 2}>{`${translate('welcome')} ${userQuery.data.username}!`} </Text>
+				<Text fontSize="xl" flex={screenSize == 'small' ? 1 : 2}>
+					<Translate translationKey="welcome" format={(welcome) => `${welcome} ${userQuery.data.name}!`}/>
+				</Text>
 				<Box flex={1}>
 					<ProgressBar xp={userQuery.data.xp}/>
 				</Box>
@@ -55,7 +63,7 @@ const HomeView = () => {
 			<Box paddingY={5} style={{ flexDirection }}>
 				<Box flex={2}>
 					<SongCardGrid
-						heading={translate('goNextStep')}
+						heading={<Translate translationKey='goNextStep'/>}
 						songs={nextStepQuery.data?.filter((song) => artistsQueries.find((artistQuery) => artistQuery.data?.id === song.artistId))
 							.map((song) => ({
 								albumCover: song.cover,
@@ -68,7 +76,7 @@ const HomeView = () => {
 
 					<Flex style={{ flexDirection }}>
 						<Box flex={1} paddingY={5}>
-							<Heading>{translate('mySkillsToImprove')}</Heading>
+							<Heading><Translate translationKey='mySkillsToImprove'/></Heading>
 							<Box padding={5}>
 								<CompetenciesTable {...skillsQuery.data}/>
 							</Box>
@@ -76,7 +84,7 @@ const HomeView = () => {
 
 						<Box flex={1} padding={5}>
 							<SongCardGrid
-								heading={translate('recentlyPlayed')}
+								heading={<Translate translationKey='recentlyPlayed'/>}
 								maxItemPerRow={2}
 								songs={playHistoryQuery.data?.filter((song) => artistsQueries.find((artistQuery) => artistQuery.data?.id === song.artistId))
 									.map((song) => ({
@@ -96,11 +104,11 @@ const HomeView = () => {
 							
 							<Box flex="2" padding={5}>
 								<Box style={{ flexDirection: 'row', justifyContent:'center' }}>
-									<Button backgroundColor={theme.colors.secondary[600]} rounded={"full"} size="sm" onPress={() => navigation.navigate('Search')} >{translate('search')}</Button>
+									<Button backgroundColor={theme.colors.secondary[600]} rounded={"full"} size="sm" onPress={() => navigation.navigate('Search')} ><Translate translationKey='search'/></Button>
 								</Box>
 								<SongCardGrid
 									maxItemPerRow={2}
-									heading={translate('lastSearched')}
+									heading={<Translate translationKey='lastSearched'/>}
 									songs={searchHistoryQuery.data?.filter((song) => artistsQueries.find((artistQuery) => artistQuery.data?.id === song.artistId))
 										.map((song) => ({
 											albumCover: song.cover,
@@ -113,7 +121,9 @@ const HomeView = () => {
 							</Box>
 						</Box>
 						<Box style={{ flexDirection: 'row', justifyContent:'center' }}>
-							<Button backgroundColor={theme.colors.primary[600]} rounded={"full"} size="sm" onPress={() => navigation.navigate('Settings')} >{translate('settingsBtn')}</Button>
+							<Button backgroundColor={theme.colors.primary[600]} rounded={"full"} size="sm" onPress={() => navigation.navigate('Settings')} >
+								<Translate translationKey='settingsBtn'/>
+							</Button>
 						</Box>
 				</VStack>
 			</Box>
diff --git a/front/views/SettingsView.tsx b/front/views/SettingsView.tsx
index 4ff0a37..b6facef 100644
--- a/front/views/SettingsView.tsx
+++ b/front/views/SettingsView.tsx
@@ -6,7 +6,7 @@ import { unsetAccessToken } from '../state/UserSlice';
 import { useDispatch } from "react-redux";
 import { useSelector } from '../state/Store';
 import { useLanguage } from "../state/LanguageSlice";
-import i18n, { AvailableLanguages, DefaultLanguage, translate } from "../i18n/i18n";
+import { AvailableLanguages, DefaultLanguage, translate, Translate } from "../i18n/i18n";
 
 const SettingsStack = createNativeStackNavigator();
 
@@ -16,31 +16,31 @@ const MainView = ({navigation}) => {
     return (
         <Center style={{ flex: 1}}>
             <Button variant='ghost' onPress={() => navigation.navigate('Preferences')}>
-                { translate('prefBtn')}
+                <Translate translationKey='prefBtn'/>
             </Button>
 
             <Button variant='ghost' onPress={() => navigation.navigate('Notifications')}>
-            { translate('notifBtn')}
+                <Translate translationKey='notifBtn'/>
             </Button>
 
             <Button variant='ghost' onPress={() => navigation.navigate('Privacy')}>
-            { translate('privBtn')}
+                <Translate translationKey='privBtn'/>
             </Button>
 
             <Button variant='ghost' onPress={() => navigation.navigate('ChangePassword')}>
-                { translate('changepasswdBtn')}
+                <Translate translationKey='changepasswdBtn'/>
             </Button>
 
             <Button variant='ghost' onPress={() => navigation.navigate('ChangeEmail')}>
-            { translate('changeemailBtn')}
+                <Translate translationKey='changeemailBtn'/>
             </Button>
 
             <Button variant='ghost' onPress={() => navigation.navigate('GoogleAccount')}>
-            { translate('googleacctBtn')}
+                <Translate translationKey='googleacctBtn'/>
             </Button>
 
             <Button variant='ghost' onPress={() => dispatch(unsetAccessToken())} >
-                { translate('signoutBtn')}
+                <Translate translationKey='signoutBtn'/>
             </Button>
         </Center>
     )
@@ -52,9 +52,12 @@ const PreferencesView = ({navigation}) => {
 
     return (
         <Center style={{ flex: 1}}>
-            <Heading style={{ textAlign: "center" }}>{ translate('prefBtn')}</Heading>
-
-            <Button onPress={() => navigation.navigate('Main')} style={{ margin: 10}}>{ translate('backBtn') }</Button>
+            <Heading style={{ textAlign: "center" }}>
+                <Translate translationKey='prefBtn'/>
+            </Heading>
+            <Button onPress={() => navigation.navigate('Main')} style={{ margin: 10}}>
+                <Translate translationKey='backBtn'/>
+            </Button>
 
             <View style={{margin: 20, maxHeight: 100, maxWidth: 500, width: '80%'}}>
                 <Select selectedValue={undefined}
@@ -62,9 +65,9 @@ const PreferencesView = ({navigation}) => {
                     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.Item label={translate('dark')} value='dark'/>
+                    <Select.Item label={translate('light')} value='light'/>
+                    <Select.Item label={translate('system')} value='system'/>
                 </Select>
             </View>
 
@@ -131,24 +134,24 @@ const NotificationsView = ({navigation}) => {
     return (
         <Center style={{ flex: 1, justifyContent: 'center' }}>
 
-            <Heading style={{ textAlign: "center" }}>{ translate('notifBtn')}</Heading>
-            <Button style={{ margin: 10}} onPress={() => navigation.navigate('Main')} >{ translate('backBtn') }</Button>
-
+            <Heading style={{ textAlign: "center" }}>
+                <Translate translationKey='notifBtn'/>
+            </Heading>
+            <Button style={{ margin: 10}} onPress={() => navigation.navigate('Main')} >
+                <Translate translationKey='backBtn'/>
+            </Button>
             <View style={{margin: 20}} >
                 <Text style={{ textAlign: "center" }}>Push notifications</Text>
                 <Switch style={{ alignSelf: 'center', margin: 10 }} colorScheme="primary"/>
             </View>
-
             <View style={{margin: 20}}>
                 <Text style={{ textAlign: "center" }}>Email notifications</Text>
                 <Switch style={{ alignSelf: 'center', margin: 10 }} colorScheme="primary"/>
             </View>
-
             <View style={{margin: 20}}>
                 <Text style={{ textAlign: "center" }}>Training reminder</Text>
                 <Switch style={{ alignSelf: 'center', margin: 10 }} colorScheme="primary"/>
             </View>
-
             <View style={{margin: 20}}>
                 <Text style={{ textAlign: "center" }}>New songs</Text>
                 <Switch style={{ alignSelf: 'center', margin: 10 }} colorScheme="primary"/>
@@ -160,9 +163,13 @@ const NotificationsView = ({navigation}) => {
 const PrivacyView = ({navigation}) => {
     return (
         <Center style={{ flex: 1}}>
-            <Heading style={{ textAlign: "center" }}>{ translate('privBtn')}</Heading>
+            <Heading style={{ textAlign: "center" }}>
+                <Translate translationKey='privBtn'/>
+            </Heading>
 
-            <Button onPress={() => navigation.navigate('Main')} style={{ margin: 10 }}>{ translate('backBtn') }</Button>
+            <Button onPress={() => navigation.navigate('Main')} style={{ margin: 10 }}>
+                <Translate translationKey='backBtn'/>
+            </Button>
 
             <View style={{margin: 20}} >
                 <Text style={{ textAlign: "center" }}>Data Collection</Text>
diff --git a/front/views/SongLobbyView.tsx b/front/views/SongLobbyView.tsx
index 5906aa6..088ae39 100644
--- a/front/views/SongLobbyView.tsx
+++ b/front/views/SongLobbyView.tsx
@@ -3,10 +3,9 @@ import { Button, Divider, Box, Center, Image, Text, VStack, PresenceTransition,
 import { useQuery } from 'react-query';
 import LoadingComponent from "../components/Loading";
 import React, { useEffect, useState } from "react";
-import { translate } from "../i18n/i18n";
+import { Translate, translate } from "../i18n/i18n";
 import formatDuration from "format-duration";
 import { Ionicons } from '@expo/vector-icons';
-import { useSelector } from "../state/Store";
 import API from "../API";
 
 interface SongLobbyProps {
@@ -39,19 +38,29 @@ const SongLobbyView = () => {
 				<Box style={{ flex: 0.5 }}/>
 				<Box style={{ flex: 3, padding: 10, flexDirection: 'column', justifyContent: 'space-between' }}>
 					<Box flex={1}>
-						<Text bold fontSize='lg'>{songQuery.data!.name}</Text>
-						<Text>{'3:20'} - {translate('level')} { chaptersQuery.data!.reduce((a, b) => a + b.difficulty, 0) / chaptersQuery.data!.length }</Text>
-						<Button width='auto'  rightIcon={<Icon as={Ionicons} name="play-outline"/>}>{ translate('playBtn') }</Button>
+						<Text bold fontSize='lg'>{songQuery.data!.title}</Text>
+						<Text>
+							<Translate translationKey='level'
+								format={(level) => `3:20 - ${level} - ${ chaptersQuery.data!.reduce((a, b) => a + b.difficulty, 0) / chaptersQuery.data!.length }`}
+							/>
+						</Text>
+						<Button width='auto'  rightIcon={<Icon as={Ionicons} name="play-outline"/>}>
+							<Translate translationKey='playBtn'/>
+						</Button>
 					</Box>
 				</Box>
 			</Box>
 			<Box style={{ flexDirection: 'row', justifyContent: 'space-between', padding: 30}}>
 				<Box style={{ flexDirection: 'column', alignItems: 'center' }}>
-					<Text bold fontSize='lg'>{translate('bestScore') }</Text>
+					<Text bold fontSize='lg'>
+						<Translate translationKey='bestScore'/>
+					</Text>
 					<Text>{scoresQuery.data!.sort()[0]?.score}</Text>
 				</Box>
 				<Box style={{ flexDirection: 'column', alignItems: 'center' }}>
-					<Text bold fontSize='lg'>{translate('lastScore') }</Text>
+					<Text bold fontSize='lg'>
+						<Translate translationKey='lastScore'/>
+					</Text>
 					<Text>{scoresQuery.data!.slice(-1)[0]!.score}</Text>
 				</Box>
 			</Box>
@@ -62,7 +71,7 @@ const SongLobbyView = () => {
 					onPress={() => setChaptersOpen(!chaptersOpen)}
 					endIcon={<Icon as={Ionicons} name={chaptersOpen ? "chevron-up-outline" : "chevron-down-outline"}/>}
 				>
-					{translate('chapters')}
+					<Translate translationKey='chapters'/>
 				</Button>
 			</Box>
 			<PresenceTransition visible={chaptersOpen} initial={{ opacity: 0 }}>

From 55526dbadcf5c3d3f758e8a205fe53b9763060fa Mon Sep 17 00:00:00 2001
From: Arthur Jamet <60505370+Arthi-chaud@users.noreply.github.com>
Date: Sat, 26 Nov 2022 14:18:06 +0000
Subject: [PATCH 08/11] Front: settings persistance (#108)

* Front: Add peristance dependencies

* Front: Fix Cross-platform persistance

* Front: Create Settings Slice

* Front: Use Redux State for settings

* Front: Check if access token is still valid

* Front: Create Language Gate to set correct language at startup

* Front: BEtter handling of Access Token validity
---
 front/App.tsx                      | 18 +++++---
 front/Navigation.tsx               | 18 ++++++--
 front/i18n/LanguageGate.ts         | 18 ++++++++
 front/package.json                 |  3 ++
 front/state/LanguageSlice.ts       |  4 +-
 front/state/SettingsSlice.ts       | 36 +++++++++++++++
 front/state/Store.ts               | 27 +++++++++---
 front/views/AuthenticationView.tsx |  2 +-
 front/views/SettingsView.tsx       | 71 ++++++++++++++++++------------
 front/yarn.lock                    | 29 ++++++++++++
 10 files changed, 179 insertions(+), 47 deletions(-)
 create mode 100644 front/i18n/LanguageGate.ts
 create mode 100644 front/state/SettingsSlice.ts

diff --git a/front/App.tsx b/front/App.tsx
index 46a8bd2..638964c 100644
--- a/front/App.tsx
+++ b/front/App.tsx
@@ -3,20 +3,26 @@ import Theme from './Theme';
 import React from 'react';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { Provider } from 'react-redux';
-import store from './state/Store';
+import store, { persistor } from './state/Store';
 import { Router } from './Navigation';
 import './i18n/i18n';
+import { PersistGate } from "redux-persist/integration/react";
+import LanguageGate from "./i18n/LanguageGate";
 
 const queryClient = new QueryClient();
 
 export default function App() {
 	return (
 		<Provider store={store}>
-			<QueryClientProvider client={queryClient}>
-				<NativeBaseProvider theme={Theme}>
-					<Router />
-				</NativeBaseProvider>
-			</QueryClientProvider>
+			<PersistGate loading={null} persistor={persistor}>
+				<QueryClientProvider client={queryClient}>
+					<NativeBaseProvider theme={Theme}>
+						<LanguageGate>
+							<Router/>
+						</LanguageGate>
+					</NativeBaseProvider>
+				</QueryClientProvider>
+			</PersistGate>
 		</Provider>
 	);
 }
diff --git a/front/Navigation.tsx b/front/Navigation.tsx
index 76a924b..d267777 100644
--- a/front/Navigation.tsx
+++ b/front/Navigation.tsx
@@ -8,6 +8,8 @@ import { NavigationContainer } from '@react-navigation/native';
 import { useSelector } from './state/Store';
 import SongLobbyView from './views/SongLobbyView';
 import { translate } from './i18n/i18n';
+import { useQuery } from 'react-query';
+import API from './API';
 
 const Stack = createNativeStackNavigator();
 
@@ -23,12 +25,20 @@ export const publicRoutes = <React.Fragment>
 </React.Fragment>;
 
 export const Router = () => {
-	const isAuthentified = useSelector((state) => state.user.accessToken !== undefined)
+	const isAuthentified = useSelector((state) => state.user.accessToken !== undefined);
+	const userProfile = useQuery(['user', 'me'], () => API.getUserInfo(), {
+		enabled: isAuthentified
+	});
 	return (
 		<NavigationContainer>
-			<Stack.Navigator>
-				{isAuthentified ? protectedRoutes : publicRoutes}
-			</Stack.Navigator>
+			{isAuthentified && !userProfile.isError
+				? <Stack.Navigator>
+					{protectedRoutes}
+				</Stack.Navigator>
+				: <Stack.Navigator>
+					{publicRoutes}
+				</Stack.Navigator>
+			}
 		</NavigationContainer>
 	)
 }
diff --git a/front/i18n/LanguageGate.ts b/front/i18n/LanguageGate.ts
new file mode 100644
index 0000000..12f9d4e
--- /dev/null
+++ b/front/i18n/LanguageGate.ts
@@ -0,0 +1,18 @@
+import { RootState, useSelector } from "../state/Store";
+import i18n from "./i18n";
+
+type LanguageGateProps = {
+	children: any; 
+}
+
+/**
+ * Gate to handle language update at startup and on every dispatch
+ * @param props the children to render
+ */
+const LanguageGate = (props: LanguageGateProps) => {
+	const language = useSelector((state: RootState) => state.language.value);
+	i18n.changeLanguage(language);
+	return props.children;
+}
+
+export default LanguageGate;
\ No newline at end of file
diff --git a/front/package.json b/front/package.json
index 0d06935..e4f1440 100644
--- a/front/package.json
+++ b/front/package.json
@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^13.0.0",
+    "@react-native-async-storage/async-storage": "^1.17.11",
     "@react-navigation/native": "^6.0.11",
     "@react-navigation/native-stack": "^6.7.0",
     "@reduxjs/toolkit": "^1.8.3",
@@ -25,6 +26,7 @@
     "expo": "~45.0.0",
     "expo-asset": "~8.5.0",
     "expo-dev-client": "~1.0.0",
+    "expo-secure-store": "~11.2.0",
     "expo-status-bar": "~1.3.0",
     "format-duration": "^2.0.0",
     "i18next": "^21.8.16",
@@ -43,6 +45,7 @@
     "react-native-testing-library": "^6.0.0",
     "react-native-web": "0.17.7",
     "react-redux": "^8.0.2",
+    "redux-persist": "^6.0.0",
     "yup": "^0.32.11"
   },
   "devDependencies": {
diff --git a/front/state/LanguageSlice.ts b/front/state/LanguageSlice.ts
index 1f1b571..9ecbaa7 100644
--- a/front/state/LanguageSlice.ts
+++ b/front/state/LanguageSlice.ts
@@ -1,5 +1,5 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
-import i18n, { AvailableLanguages, DefaultLanguage } from "../i18n/i18n";
+import { AvailableLanguages, DefaultLanguage } from "../i18n/i18n";
 
 
 export const languageSlice = createSlice({
@@ -10,11 +10,9 @@ export const languageSlice = createSlice({
 	reducers: {
 		useLanguage: (state, action: PayloadAction<AvailableLanguages>) => {
 			state.value = action.payload;
-			i18n.changeLanguage(state.value);
 		},
 		resetLanguage: (state) => {
 			state.value = DefaultLanguage;
-			i18n.changeLanguage(DefaultLanguage);
 		},
 	},
 });
diff --git a/front/state/SettingsSlice.ts b/front/state/SettingsSlice.ts
new file mode 100644
index 0000000..a49f2ea
--- /dev/null
+++ b/front/state/SettingsSlice.ts
@@ -0,0 +1,36 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+export type SettingsState = {
+	colorScheme: "dark" | "light" | "system",
+	enablePushNotifications: boolean,
+	enableMailNotifications: boolean,
+	enableLessongsReminders: boolean,
+	enableReleaseAlerts: boolean,
+	preferedLevel: 'easy' | 'medium' | 'hard',
+	colorBlind: boolean,
+	micLevel: number,
+	preferedInputName?: string
+}
+
+export const settingsSlice = createSlice({
+	name: 'settings',
+	initialState: {
+		settings: <SettingsState>{
+			enablePushNotifications: true,
+			enableMailNotifications: true,
+			enableLessongsReminders: true,
+			enableReleaseAlerts: true,
+			preferedLevel: 'easy',
+			colorBlind: false,
+			micLevel: 50,
+			colorScheme: "system"
+		},
+	},
+	reducers: {
+		updateSettings: (state, action: PayloadAction<Partial<SettingsState>>) => {
+			state.settings = { ...state.settings, ...action.payload }; 
+		}
+	}
+});
+export const { updateSettings } = settingsSlice.actions;
+export default settingsSlice.reducer;
\ No newline at end of file
diff --git a/front/state/Store.ts b/front/state/Store.ts
index 9a2d390..3af6bdd 100644
--- a/front/state/Store.ts
+++ b/front/state/Store.ts
@@ -1,14 +1,30 @@
 import userReducer from '../state/UserSlice';
+import settingsReduder from '../state/SettingsSlice';
 import { configureStore } from '@reduxjs/toolkit';
 import languageReducer from './LanguageSlice';
 import { TypedUseSelectorHook, useDispatch as reduxDispatch, useSelector as reduxSelector } from 'react-redux'
+import { persistStore, persistCombineReducers, FLUSH, PAUSE, PERSIST, PURGE, REGISTER, REHYDRATE } from "redux-persist";
+import AsyncStorage from '@react-native-async-storage/async-storage';
 
-const store = configureStore({
-	reducer: {
+const persistConfig = {
+	key: 'root',
+	storage: AsyncStorage
+}
+
+let store = configureStore({
+	reducer: persistCombineReducers(persistConfig, {
 		user: userReducer,
-		language: languageReducer
-	},
+		language: languageReducer,
+		settings: settingsReduder
+	}),
+	middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({
+    	serializableCheck: {
+    		ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
+    	},
+    }),
 })
+let persistor = persistStore(store);
 
 // Infer the `RootState` and `AppDispatch` types from the store itself
 export type RootState = ReturnType<typeof store.getState>
@@ -18,4 +34,5 @@ export type AppDispatch = typeof store.dispatch;
 export const useDispatch: () => AppDispatch = reduxDispatch
 export const useSelector: TypedUseSelectorHook<RootState> = reduxSelector
 
-export default store
\ No newline at end of file
+export default store
+export { persistor }
diff --git a/front/views/AuthenticationView.tsx b/front/views/AuthenticationView.tsx
index 29c89c8..6f394ff 100644
--- a/front/views/AuthenticationView.tsx
+++ b/front/views/AuthenticationView.tsx
@@ -13,7 +13,7 @@ const hanldeSignin = async (username: string, password: string, apiSetter: (acce
 		apiSetter(apiAccess);
 		return translate("loggedIn");
 	} catch (error) {
-		return "Username of password incorrect";
+		return "Username or password incorrect";
 	}
 };
 
diff --git a/front/views/SettingsView.tsx b/front/views/SettingsView.tsx
index b6facef..1f58785 100644
--- a/front/views/SettingsView.tsx
+++ b/front/views/SettingsView.tsx
@@ -4,9 +4,10 @@ import { Center, Button, Text, Switch, Slider, Select, Heading } from "native-ba
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { unsetAccessToken } from '../state/UserSlice';
 import { useDispatch } from "react-redux";
-import { useSelector } from '../state/Store';
+import { RootState, useSelector } from '../state/Store';
 import { useLanguage } from "../state/LanguageSlice";
-import { AvailableLanguages, DefaultLanguage, translate, Translate } from "../i18n/i18n";
+import { SettingsState, updateSettings } from '../state/SettingsSlice';
+import { AvailableLanguages, translate, Translate } from "../i18n/i18n";
 
 const SettingsStack = createNativeStackNavigator();
 
@@ -48,8 +49,8 @@ const MainView = ({navigation}) => {
 
 const PreferencesView = ({navigation}) => {
     const dispatch = useDispatch();
-    const language: AvailableLanguages = useSelector((state) => state.language.value);
-
+    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" }}>
@@ -60,14 +61,16 @@ const PreferencesView = ({navigation}) => {
             </Button>
 
             <View style={{margin: 20, maxHeight: 100, maxWidth: 500, width: '80%'}}>
-                <Select selectedValue={undefined}
-                placeholder={'Theme'}
+                <Select selectedValue={settings.colorScheme}
+                    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'/>
+                    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>
 
@@ -75,10 +78,8 @@ const PreferencesView = ({navigation}) => {
                 <Select selectedValue={language}
                     placeholder={translate('langBtn')} 
                     style={{ alignSelf: 'center'}}
-                    onValueChange={(itemValue: AvailableLanguages, itemIndex) => {
-                        let newLanguage = DefaultLanguage;
-                        newLanguage = itemValue;Heading
-                        dispatch(useLanguage(newLanguage));
+                    onValueChange={(itemValue) => {
+                        dispatch(useLanguage(itemValue as AvailableLanguages));
                     }}>
                     <Select.Item label='Français' value='fr'/>
                     <Select.Item label='English' value='en'/>
@@ -88,12 +89,12 @@ const PreferencesView = ({navigation}) => {
             </View>
 
             <View style={{margin: 20, maxHeight: 100, maxWidth: 500, width: '80%'}}>
-                <Select selectedValue={undefined}
+                <Select selectedValue={settings.preferedLevel}
                     placeholder={ translate('diffBtn') }
                     style={{ height: 50, width: 150, alignSelf: 'center'}}
-                    // onValueChange={(itemValue, itemIndex) => change level}
-                    >
-
+                    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'/>
@@ -102,12 +103,16 @@ const PreferencesView = ({navigation}) => {
 
             <View style={{margin: 20}}>
                 <Text style={{ textAlign: "center" }}>Color blind mode</Text>
-                <Switch style={{ alignSelf: 'center'}} colorScheme="primary"/>
+                <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={50} minValue={0} maxValue={1000} accessibilityLabel="hello world" step={10}>
+                <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>
@@ -116,11 +121,11 @@ const PreferencesView = ({navigation}) => {
             </View>
 
             <View style={{margin: 20, maxHeight: 100, maxWidth: 500, width: '80%'}}>
-                <Select selectedValue={undefined}
+                <Select selectedValue={settings.preferedInputName}
                     placeholder={'Device'}
                     style={{ height: 50, width: 150, alignSelf: 'center'}}
-                    // onValueChange={(itemValue, itemIndex) => change device}
-                    >
+                    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'/>
@@ -131,6 +136,8 @@ const PreferencesView = ({navigation}) => {
 }
 
 const NotificationsView = ({navigation}) => {
+    const dispatch = useDispatch();
+    const settings: SettingsState = useSelector((state: RootState) => state.settings);
     return (
         <Center style={{ flex: 1, justifyContent: 'center' }}>
 
@@ -142,19 +149,27 @@ const NotificationsView = ({navigation}) => {
             </Button>
             <View style={{margin: 20}} >
                 <Text style={{ textAlign: "center" }}>Push notifications</Text>
-                <Switch style={{ alignSelf: 'center', margin: 10 }} colorScheme="primary"/>
+                <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 style={{ alignSelf: 'center', margin: 10 }} colorScheme="primary"/>
+                <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 style={{ alignSelf: 'center', margin: 10 }} colorScheme="primary"/>
+                <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 style={{ alignSelf: 'center', margin: 10 }} colorScheme="primary"/>
+                <Switch value={settings.enableReleaseAlerts} style={{ alignSelf: 'center', margin: 10 }} colorScheme="primary"
+                    onValueChange={(value) => { dispatch(updateSettings({ enableReleaseAlerts: value })) }}
+                />
             </View>
         </Center>
     )
diff --git a/front/yarn.lock b/front/yarn.lock
index 7f4562e..78a6b89 100644
--- a/front/yarn.lock
+++ b/front/yarn.lock
@@ -2221,6 +2221,13 @@
     "@react-aria/ssr" "^3.0.1"
     "@react-aria/utils" "^3.3.0"
 
+"@react-native-async-storage/async-storage@^1.17.11":
+  version "1.17.11"
+  resolved "https://registry.yarnpkg.com/@react-native-async-storage/async-storage/-/async-storage-1.17.11.tgz#7ec329c1b9f610e344602e806b04d7c928a2341d"
+  integrity sha512-bzs45n5HNcDq6mxXnSsOHysZWn1SbbebNxldBXCQs8dSvF8Aor9KCdpm+TpnnGweK3R6diqsT8lFhX77VX0NFw==
+  dependencies:
+    merge-options "^3.0.4"
+
 "@react-native-community/cli-debugger-ui@^7.0.3":
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/@react-native-community/cli-debugger-ui/-/cli-debugger-ui-7.0.3.tgz#3eeeacc5a43513cbcae56e5e965d77726361bcb4"
@@ -4845,6 +4852,11 @@ expo-modules-core@0.9.2:
     compare-versions "^3.4.0"
     invariant "^2.2.4"
 
+expo-secure-store@~11.2.0:
+  version "11.2.0"
+  resolved "https://registry.yarnpkg.com/expo-secure-store/-/expo-secure-store-11.2.0.tgz#c2c8fdcac39c5e1828a8fea45765028a11625575"
+  integrity sha512-PlmDplx9QNqaTVKNLgqSurRhzYf6YbVTTiSKX5JlEMWgOiBTz77Nh6mpMMjI1jwrvtz9grD+CT2AlDEGXe+Ovg==
+
 expo-status-bar@~1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/expo-status-bar/-/expo-status-bar-1.3.0.tgz#d71fd0b880ea201905f5dd8abcd18db7476c9f03"
@@ -5790,6 +5802,11 @@ is-path-inside@^3.0.2:
   resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
   integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
 
+is-plain-obj@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-2.1.0.tgz#45e42e37fccf1f40da8e5f76ee21515840c09287"
+  integrity sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==
+
 is-plain-object@^2.0.3, is-plain-object@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
@@ -6938,6 +6955,13 @@ memory-cache@~0.2.0:
   resolved "https://registry.yarnpkg.com/memory-cache/-/memory-cache-0.2.0.tgz#7890b01d52c00c8ebc9d533e1f8eb17e3034871a"
   integrity sha512-OcjA+jzjOYzKmKS6IQVALHLVz+rNTMPoJvCztFaZxwG14wtAW7VRZjwTQu06vKCYOxh4jVnik7ya0SXTB0W+xA==
 
+merge-options@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/merge-options/-/merge-options-3.0.4.tgz#84709c2aa2a4b24c1981f66c179fe5565cc6dbb7"
+  integrity sha512-2Sug1+knBjkaMsMgf1ctR1Ujx+Ayku4EdJN4Z+C2+JzoeF7A3OZ9KM2GY0CpQS51NR61LTurMJrRKPhSs3ZRTQ==
+  dependencies:
+    is-plain-obj "^2.1.0"
+
 merge-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
@@ -8456,6 +8480,11 @@ recast@^0.20.4:
     source-map "~0.6.1"
     tslib "^2.0.1"
 
+redux-persist@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/redux-persist/-/redux-persist-6.0.0.tgz#b4d2972f9859597c130d40d4b146fecdab51b3a8"
+  integrity sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ==
+
 redux-thunk@^2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.4.1.tgz#0dd8042cf47868f4b29699941de03c9301a75714"

From cdcdea112648cc18f4ef3337c9ed4f886ef1c395 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Chlo=C3=A9=20Chauvin?=
 <60068251+Nekory23@users.noreply.github.com>
Date: Sun, 27 Nov 2022 17:20:23 +0900
Subject: [PATCH 09/11] =?UTF-8?q?54-=C3=A9cran-de-titre=20(#109)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* [ADD] function to hide the splash screen

* [DEL] useless lines

* [ADD] compatibility

* [UPD] settings for the splash screen

* [ADD] chromacase logo on the splash screen

* [UPD] splash logo

* [UPD] set the timeout to 0

* [UPD] set the timeout to 500

* User Slice: Use API Instance instead of access token

* Front: Fix API calls with JWT Token

* Front: Handle Empty Server response

* Front: Fix User Model

* Front: Signin Form: Fix submittingstate on error

* Front: Remove logs

* Front/translate refactor (#110)

* Front: i18n: Create component

* Front: Use new translation component

* Front: Translation COmpoent: Change props name

* Front: Fix merge

* Front: settings persistance (#108)

* Front: Add peristance dependencies

* Front: Fix Cross-platform persistance

* Front: Create Settings Slice

* Front: Use Redux State for settings

* Front: Check if access token is still valid

* Front: Create Language Gate to set correct language at startup

* Front: BEtter handling of Access Token validity

* [MERGE]

* [DEL] useless lines

* [UPD] settings for the splash screen

* [UPD] set the timeout to 0

* [DEL] duplicated line

* [REVERT]

Co-authored-by: Arthi-chaud <arthur.jamet@gmail.com>
Co-authored-by: Arthur Jamet <60505370+Arthi-chaud@users.noreply.github.com>
---
 front/App.tsx               |   5 +++++
 front/app.json              |  41 ++++++++++++++++++++++++++++++++++++
 front/assets/splashLogo.png | Bin 0 -> 32340 bytes
 front/i18n/i18n.ts          |   1 +
 front/package.json          |   1 +
 5 files changed, 48 insertions(+)
 create mode 100644 front/app.json
 create mode 100644 front/assets/splashLogo.png

diff --git a/front/App.tsx b/front/App.tsx
index 638964c..d67f5f8 100644
--- a/front/App.tsx
+++ b/front/App.tsx
@@ -6,12 +6,17 @@ import { Provider } from 'react-redux';
 import store, { persistor } from './state/Store';
 import { Router } from './Navigation';
 import './i18n/i18n';
+import * as SplashScreen from 'expo-splash-screen';
 import { PersistGate } from "redux-persist/integration/react";
 import LanguageGate from "./i18n/LanguageGate";
 
 const queryClient = new QueryClient();
 
 export default function App() {
+
+	SplashScreen.preventAutoHideAsync();
+	setTimeout(SplashScreen.hideAsync, 500);
+
 	return (
 		<Provider store={store}>
 			<PersistGate loading={null} persistor={persistor}>
diff --git a/front/app.json b/front/app.json
new file mode 100644
index 0000000..b4c10ac
--- /dev/null
+++ b/front/app.json
@@ -0,0 +1,41 @@
+{
+  "expo": {
+    "name": "Chromacase",
+    "slug": "Chromacase",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splashLogo.png",
+      "resizeMode": "cover",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#FFFFFF",
+        "package": "com.chromacase.chromacase",
+        "versionCode": 1
+      },
+      "package": "build.apk"
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    },
+    "extra": {
+      "eas": {
+        "projectId": "dade8e5e-3e2c-49f7-98c5-cf8834c7ebb2"
+      }
+    }
+  }
+}
diff --git a/front/assets/splashLogo.png b/front/assets/splashLogo.png
new file mode 100644
index 0000000000000000000000000000000000000000..a7205cb75900b21fcf270b481b2eb1c7652e4131
GIT binary patch
literal 32340
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
Z-q<kT=#Z3S@iP6jPJ8&c3r>c7|8G~h(yIUf

literal 0
HcmV?d00001

diff --git a/front/i18n/i18n.ts b/front/i18n/i18n.ts
index 7cbf9f5..6879540 100644
--- a/front/i18n/i18n.ts
+++ b/front/i18n/i18n.ts
@@ -9,6 +9,7 @@ export const DefaultLanguage: AvailableLanguages = 'en';
 i18n
 	.use(initReactI18next)
 	.init({
+		compatibilityJSON: 'v3',
 		resources: {
 			en: {
 				translation: en
diff --git a/front/package.json b/front/package.json
index e4f1440..c3f7201 100644
--- a/front/package.json
+++ b/front/package.json
@@ -26,6 +26,7 @@
     "expo": "~45.0.0",
     "expo-asset": "~8.5.0",
     "expo-dev-client": "~1.0.0",
+    "expo-splash-screen": "~0.15.1",
     "expo-secure-store": "~11.2.0",
     "expo-status-bar": "~1.3.0",
     "format-duration": "^2.0.0",

From 6312fc33371293a351dab3cc9130be3f879d12c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Chlo=C3=A9=20CHAUVIN?= <chloe.chauvin@epitech.eu>
Date: Sun, 27 Nov 2022 09:27:21 +0100
Subject: [PATCH 10/11] [FIX] splashscreen

---
 front/app.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/front/app.config.ts b/front/app.config.ts
index eb231cb..5bf8e63 100644
--- a/front/app.config.ts
+++ b/front/app.config.ts
@@ -6,7 +6,7 @@ module.exports = {
   "icon": "./assets/icon.png",
   "userInterfaceStyle": "light",
   "splash": {
-    "image": "./assets/cover.png",
+    "image": "./assets/splashLogo.png",
     "resizeMode": "contain",
     "backgroundColor": "#ffffff"
   },

From 56fdadc705433d6835d3dd99e6a15c9274dd267a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Le=20Bihan?= <clement.lebihan773@gmail.com>
Date: Tue, 20 Dec 2022 18:35:34 +0100
Subject: [PATCH 11/11] Docker fix (#114)

* fix: db healthcheck

* fixed missing front build argument

* fix: db healthcheck user

* message from db 'user' doesnt exist fixed

* rm: useless yarn

Co-authored-by: GitBluub <louis.auzuret@gmail.com>
---
 docker-compose.dev.yml |  8 +++++++-
 docker-compose.yml     | 14 ++++++++++++--
 front/Dockerfile       |  3 +++
 front/yarn.lock        | 41 ++++++++++++++++++++++++++++++++++++++++-
 4 files changed, 62 insertions(+), 4 deletions(-)

diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml
index 225affa..1036960 100644
--- a/docker-compose.dev.yml
+++ b/docker-compose.dev.yml
@@ -10,7 +10,8 @@ services:
       - ./back:/app
       - ./musics:/musics
     depends_on:
-      - "db"
+      db:
+        condition: service_healthy
     env_file:
       - .env
     
@@ -21,5 +22,10 @@ services:
     - POSTGRES_USER=${POSTGRES_USER}
     - POSTGRES_PASSWORD=${POSTGRES_PASSWORD}
     - POSTGRES_DB=${POSTGRES_DB}
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U ${POSTGRES_USER} -d ${POSTGRES_DB}"]
+      interval: 5s
+      timeout: 5s
+      retries: 5
     ports:
       - "5432:5432"
diff --git a/docker-compose.yml b/docker-compose.yml
index b69c965..3ff70f7 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -4,7 +4,8 @@ services:
     ports:
       - "3000:3000"
     depends_on:
-      - "db"
+      db:
+        condition: service_healthy
     env_file:
       - .env
     volumes:
@@ -18,8 +19,17 @@ services:
     - POSTGRES_DB=${POSTGRES_DB}
     ports:
       - "5432:5432"
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U ${POSTGRES_USER} -d ${POSTGRES_DB}"]
+      interval: 5s
+      timeout: 5s
+      retries: 5
+
   front:
-    build: ./front
+    build: 
+      context: ./front
+      args:
+      - API_URL=${API_URL}
     ports:
       - "80:80"
     depends_on:
diff --git a/front/Dockerfile b/front/Dockerfile
index df325fd..ae0fb16 100644
--- a/front/Dockerfile
+++ b/front/Dockerfile
@@ -10,6 +10,9 @@ RUN yarn global add expo-cli
 # add sharp-cli (^2.1.0) for faster image processing
 RUN yarn global add sharp-cli@^2.1.0
 COPY . .
+ARG API_URL
+ENV API_URL=$API_URL
+
 RUN expo build:web
 
 # Serve the app
diff --git a/front/yarn.lock b/front/yarn.lock
index 78a6b89..c61317f 100644
--- a/front/yarn.lock
+++ b/front/yarn.lock
@@ -1221,6 +1221,20 @@
     slugify "^1.3.4"
     sucrase "^3.20.0"
 
+"@expo/configure-splash-screen@^0.6.0":
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/@expo/configure-splash-screen/-/configure-splash-screen-0.6.0.tgz#07d97ee512fd859fcc09506ba3762fd6263ebc39"
+  integrity sha512-4DyPoNXJqx9bN4nEwF3HQreo//ECu7gDe1Xor3dnnzFm9P/VDxAKdbEhA0n+R6fgkNfT2onVHWijqvdpTS3Xew==
+  dependencies:
+    color-string "^1.5.3"
+    commander "^5.1.0"
+    fs-extra "^9.0.0"
+    glob "^7.1.6"
+    lodash "^4.17.15"
+    pngjs "^5.0.0"
+    xcode "^3.0.0"
+    xml-js "^1.6.11"
+
 "@expo/dev-server@0.1.116":
   version "0.1.116"
   resolved "https://registry.yarnpkg.com/@expo/dev-server/-/dev-server-0.1.116.tgz#65774a28cbe1ab22101be4f41626b7530b4f7560"
@@ -4014,7 +4028,7 @@ color-name@^1.0.0, color-name@~1.1.4:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
-color-string@^1.6.0:
+color-string@^1.5.3, color-string@^1.6.0:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.1.tgz#4467f9146f036f855b764dfb5bf8582bf342c7a4"
   integrity sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==
@@ -4057,6 +4071,11 @@ commander@^4.0.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
   integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
 
+commander@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
+  integrity sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==
+
 commander@^7.2.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
@@ -4857,6 +4876,14 @@ expo-secure-store@~11.2.0:
   resolved "https://registry.yarnpkg.com/expo-secure-store/-/expo-secure-store-11.2.0.tgz#c2c8fdcac39c5e1828a8fea45765028a11625575"
   integrity sha512-PlmDplx9QNqaTVKNLgqSurRhzYf6YbVTTiSKX5JlEMWgOiBTz77Nh6mpMMjI1jwrvtz9grD+CT2AlDEGXe+Ovg==
 
+expo-splash-screen@~0.15.1:
+  version "0.15.1"
+  resolved "https://registry.yarnpkg.com/expo-splash-screen/-/expo-splash-screen-0.15.1.tgz#bdfb2434bda7fb1cde97e029fc7a791d7b3e3125"
+  integrity sha512-Yvz6p/ig+cQp9c1PLSm1YshpNJXRp/xtxajfwPq2kampf61zA+xnoMk+J6YcNeXeIlqHysj3ND2tMhEEQjM/ow==
+  dependencies:
+    "@expo/configure-splash-screen" "^0.6.0"
+    "@expo/prebuild-config" "~4.0.0"
+
 expo-status-bar@~1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/expo-status-bar/-/expo-status-bar-1.3.0.tgz#d71fd0b880ea201905f5dd8abcd18db7476c9f03"
@@ -7994,6 +8021,11 @@ pngjs@^3.3.0:
   resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-3.4.0.tgz#99ca7d725965fb655814eaf65f38f12bbdbf555f"
   integrity sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==
 
+pngjs@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-5.0.0.tgz#e79dd2b215767fd9c04561c01236df960bce7fbb"
+  integrity sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==
+
 posix-character-classes@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
@@ -9982,6 +10014,13 @@ xcode@^3.0.0, xcode@^3.0.1:
     simple-plist "^1.1.0"
     uuid "^7.0.3"
 
+xml-js@^1.6.11:
+  version "1.6.11"
+  resolved "https://registry.yarnpkg.com/xml-js/-/xml-js-1.6.11.tgz#927d2f6947f7f1c19a316dd8eea3614e8b18f8e9"
+  integrity sha512-7rVi2KMfwfWFl+GpPg6m80IVMWXLRjO+PxTq7V2CDhoGak0wzYzFgUY2m4XJ47OGdXd8eLE8EmwfAmdjw7lC1g==
+  dependencies:
+    sax "^1.2.4"
+
 xml-name-validator@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"