Merge branch 'redux' into typescript

bob_party/index.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import App from './App'
+import store from './src/redux/store'
+import { Provider } from 'react-redux'
+
+export default function Index(){
+  return(
+    <Provider store={store}>
+        <App />
+    </Provider>
+  )
+}

bob_party/package.json

@@ -9,9 +9,11 @@
     "web": "expo start --web"
   },
   "dependencies": {
+    "@react-native-picker/picker": "^2.4.8",
     "@react-navigation/bottom-tabs": "^6.4.0",
     "@react-navigation/native": "^6.0.13",
     "@react-navigation/stack": "^6.3.2",
+    "@reduxjs/toolkit": "^1.8.6",
     "expo": "^46.0.15",
     "expo-status-bar": "~1.4.0",
     "jest": "^26.6.3",
@@ -19,9 +21,13 @@
     "react": "18.0.0",
     "react-dom": "18.0.0",
     "react-native": "^0.69.6",
+    "react-native-dialog": "^9.2.2",
+    "react-native-dialog-input": "^1.0.8",
     "react-native-gesture-handler": "~2.5.0",
+    "react-native-picker-select": "^8.0.4",
     "react-native-safe-area-context": "4.3.1",
-    "react-native-web": "~0.18.7"
+    "react-native-web": "~0.18.7",
+    "react-redux": "^8.0.4"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",

bob_party/src/components/CustomTextInput.tsx

@@ -1,30 +0,0 @@
-import { FC, ReactNode } from "react"
-import { View, TextInput,Text } from "react-native"
-import React from "react"
-import { trace } from "console"
-import { Game } from "../core/game"
-
-/*
-    Importing the correct stylesheet
-*/
-import styles from "./style/TextInput.style"
-
-export const CustomTextInput : 
-/*
-    * game : Game that must be displayed
-    * nav : tool needed to allow the navigation between the screens
-*/
-FC<{placeholder:String,text:String}> = 
-({placeholder, text}) => 
-{
-    const [value, onChangeText] = React.useState(placeholder);
-    return (
-        <View>
-            <Text style={styles.section}>{text}</Text>
-            <TextInput
-                style={styles.input}
-                onChangeText= {onChangeText}
-            />
-        </View> 
-    )       
-}

bob_party/src/components/Skin.tsx

@@ -7,6 +7,8 @@ import { Skin } from "../core/skin"
     Importing the correct stylesheet
 */
 import styles from "./style/Skin.style"
+import { useDispatch } from "react-redux"
+import { updateSkin } from "../redux/features/currentUserSlice"
 
 export const SkinComponent :
 /* Parameters : 
@@ -16,6 +18,8 @@ export const SkinComponent :
 FC<{skin: Skin, state: String}> = 
 ({skin, state}) => 
 {
+    const dispatch=useDispatch();
+
     /* The display of this component depends of the screen from where it has been called:
         * From the TopBar (icon) : Small image in a circle
         * From the shop (shop) : Image + Name + Price, Pressable => Buy the skin
@@ -42,7 +46,7 @@ FC<{skin: Skin, state: String}> =
             )
         case 'liste':
             return(
-                <Pressable onPress={() => Alert.alert("Changement du skin")} style={styles.imageWrapper}>
+                <Pressable onPress={() => dispatch(updateSkin(skin))} style={styles.imageWrapper}>
                     <Text style={styles.nomSkin}>{skin.getSkinName()}</Text>
                     <Image
                         style={styles.imageSkin}
@@ -61,6 +65,11 @@ FC<{skin: Skin, state: String}> =
                 </Pressable>
             )
         default:
-            break;
+            return(
+                <Image
+                        style={styles.imageSkin}
+                        source={skin.getSkinSource()}
+                />
+            )
     }
 }

bob_party/src/components/TopBar.tsx

@@ -3,11 +3,14 @@ import { Pressable, Image, Text, View} from "react-native"
 import { Skin } from "../core/Skin"
 import React from "react"
 import { SkinComponent } from "./Skin"
+import { User } from "../core/user"
 
 /*
     Import the correct stylesheet
 */
 import styles from './style/TopBar.style';
+import { useSelector } from "react-redux"
+import { RootState } from "../redux/store"
 
 /* 
     Images required
@@ -23,9 +26,12 @@ export const TopBar :
     * state :  optional parameter that indicates from which screen the component has been called
         (the string must be the name of the screen)
 */
-FC<{skin?: Skin, nav: any, state?: string}> = 
+FC<{nav: any, state?: string}> = 
-({skin, nav, state}) => 
+({nav, state}) => 
 {
+
+    const currentUser = useSelector((state: RootState) => state.currentUser.value)[0];
+
     /* The display of this component depends of the screen from where it has been called:
         * From the Settings (icon) : Name of the page + cross button
         * From other : skin + Title + parameters icon
@@ -47,7 +53,7 @@ FC<{skin?: Skin, nav: any, state?: string}> =
             return (
                 <View style={styles.header}>
                     <Pressable onPress={() => nav.navigate('ProfileTab', {screen: 'Profile'})}>
-                            <SkinComponent skin={skin} state='icon' />
+                            <SkinComponent skin={currentUser.getCurrentSkin()} state='icon' />
                         </Pressable>
                         <Text style={styles.titre}>BOB PARTY</Text>
                         <Pressable onPress={() => nav.navigate('Settings')}>

bob_party/src/components/style/TextInput.style.js

@@ -1,19 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-export default StyleSheet.create({
-    input: {
-      height: 40,
-      width: 250,
-      marginBottom:12,
-      borderWidth: 1,
-      padding: 10,
-      alignContent:'center',
-      backgroundColor:'white'
-    },
-    section:{
-        fontSize:15,
-        alignSelf:'left',
-        marginLeft:10,
-        color:'white',
-      },
-})

bob_party/src/constCov.ts

@@ -5,7 +5,7 @@ import { User } from "./core/User/user";
 
 
 let UserActu:User=new User("14", "leBg", "MdpDeOuf", "ouioui", "grand", new Date(2022,12,12), 12222, 123324, 12, tabSkinApp[0], tabSkinApp, undefined);
-let UserTest:User=new User("48", "Wesh Wesh", "MdpDeOuf", "ouioui", "grand", new Date(2022,12,12), 12222, 123324, 12, tabSkinApp[1], tabSkinApp, undefined);
+let UserTest:User=new User("48", "Wesh Wesh", "MdpDeOuf", "ouioui", "grand", new Date(2022,12,12), 12222, 123324, 12, tabSkinApp[5], tabSkinApp, undefined);
 
 let tabMessageTest:Message[]=[
     new Message("Salut", UserActu, new Date(2022,12,12,11,30,40)),

bob_party/src/constNat.ts

@@ -0,0 +1,11 @@
+
+const tabNat = [
+    { label: "France", value: "Français" },
+    { label: "Allemagne", value: "Allemand" },
+    { label: "Espagne", value: "Espagnol" },
+    { label: "Royaume-Uni", value: "Anglais" },
+    { label: "États-Unis", value: "Américain" },
+    { label: "Italie", value: "Italien" },
+]
+
+export default tabNat;

bob_party/src/constSex.ts

@@ -0,0 +1,9 @@
+
+const tabSex = [
+    { label: "Homme", value: "Homme" },
+    { label: "Femmme", value: "Femmme" },
+    { label: "Non-binaire", value: "Non-binaire" },
+    { label: "Autre", value: "Autre" },
+]
+
+export default tabSex;

bob_party/src/constUser.ts

@@ -0,0 +1,15 @@
+import { Message } from "./core/message"
+import { Conversation } from "./core/conversation"
+import tabSkinApp from './constSkin'
+import { User } from "./core/user";
+import tabConv from "./constCov";
+
+
+let UserActu:User=new User("14", "leBg", "MdpDeOuf", "ouioui", "grand", new Date(2022,12,12), 12222, 123324, 12, tabSkinApp[0], tabSkinApp, undefined);
+let UserTest:User=new User("48", "WeshWesh", "MdpDeOuf", "ouioui", "grand", new Date(2022,12,12), 12222, 123324, 12, tabSkinApp[2], tabSkinApp, undefined);
+let Alban:User=new User("17", "Alban", "oui", "ouioui", "homme", new Date(2022,12,12), 555, 667, 12, tabSkinApp[1], tabSkinApp, tabConv);
+let Fefe63:User=new User("17", "Fefe63", "jesuishm", "ouioui", "homme", new Date(2022,12,12), 12222, 123324, 12, tabSkinApp[6], tabSkinApp, undefined);
+
+let tabUS:User[]=[UserActu, UserTest, Alban, Fefe63];
+
+export default tabUS;

bob_party/src/core/User/user.ts

@@ -19,20 +19,23 @@ export class User{
     /* Consturctor of the class */
     constructor(id: string, username: string, password:string, nationality: string, sexe: string, dateOfBirth: Date, currentCoins: number, totalCoins: number,
                 nbGamePlayed:number, currentSkin: Skin, tabSkin: Skin[], tabConv?: Conversation[] ){
-                    this.id=id;
+                    this.Id=id;
-                    this.username=username;
+                    this.Username=username;
-                    this.password=password;
+                    this.Password=password;
-                    this.nationality=nationality;
+                    this.Nationality=nationality;
-                    this.sexe=sexe;
+                    this.Sexe=sexe;
-                    this.dateOfBirth=dateOfBirth;
+                    this.DateOfBirth=dateOfBirth;
-                    this.nbGamePlayed=nbGamePlayed;
+                    this.NbGamePlayed=nbGamePlayed;
-                    this.currentCoins=currentCoins;
+                    this.CurrentCoins=currentCoins;
-                    this.totalCoins=totalCoins;
+                    this.TotalCoins=totalCoins;
-                    this.currentSkin=currentSkin;
+                    this.CurrentSkin=currentSkin;
-                    this.tabSkin=[...tabSkin];
+                    this.TabSkin=[...tabSkin];
-                    tabConv?.forEach(conv => {
+                    if(tabConv!==undefined){
-                        this.tabConv?.push(conv);
+                        this.TabConv=[...tabConv];
-                    });
+                    }
+                    else{
+                        this.TabConv=tabConv;
+                    }
                 }
 
     /* Brief : Function getting the name of an user */

bob_party/src/navigation/AppNavigator.tsx

@@ -10,6 +10,8 @@ import Settings from '../screens/Settings'
 import Profile from '../screens/Profile'
 import SkinList from '../screens/SkinList'
 import GameChoice from '../screens/GameChoice'
+import SignIn from '../screens/SignIn'
+import SignUp from '../screens/SignUp'
 
 
 
@@ -76,6 +78,7 @@ function MainTabNavigator() {
   return (
     <NavigationContainer>
       <Tab.Navigator
+        initialRouteName='SignIn'
         backBehavior='none'
         screenOptions={{headerShown: false, tabBarStyle: { display: 'none' },}}
         >
@@ -83,6 +86,8 @@ function MainTabNavigator() {
         <Tab.Screen name='StoreTab' component={StoreStackScreen} />
         <Tab.Screen name='ChatTab' component={ChatStackScreen} />
         <Tab.Screen name='ProfileTab' component={ProfileStackScreen} />
+        <Tab.Screen name='SignIn' component={SignIn} />
+        <Tab.Screen name='SignUp' component={SignUp} />
       </Tab.Navigator>
     </NavigationContainer>
   )

bob_party/src/redux/features/currentUserSlice.ts

@@ -0,0 +1,60 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit"
+import { Skin } from "../../core/Skin";
+import { User } from "../../core/user";
+
+interface currentUserState {
+    value: User[]
+}
+
+const initialState: currentUserState = {
+    value: [],
+}
+
+export const currentUserSlice = createSlice({
+    name: "currentUser",
+    initialState,
+    reducers: {
+        loginUser: (state, action: PayloadAction<User>) => {
+            state.value.push(action.payload);
+        },
+        updateSkin: (state, action: PayloadAction<Skin>) =>{
+            const newUser = state.value[0]
+            newUser.setCurrentSkin(action.payload);
+            state.value.pop();
+            state.value.push(newUser);
+        },
+        updatePseudo: (state, action: PayloadAction<string>) =>{
+            const newUser = state.value[0]
+            newUser.setUsername(action.payload);
+            state.value.pop();
+            state.value.push(newUser);
+        },
+        updatePassword: (state, action: PayloadAction<string>) =>{
+            const newUser = state.value[0]
+            newUser.setPassword(action.payload);
+            state.value.pop();
+            state.value.push(newUser);
+        },
+        updateNationality: (state, action: PayloadAction<string>) =>{
+            const newUser = state.value[0]
+            newUser.setNationality(action.payload);
+            state.value.pop();
+            state.value.push(newUser);
+        },
+        updateSex: (state, action: PayloadAction<string>) =>{
+            const newUser = state.value[0]
+            newUser.setSexe(action.payload);
+            state.value.pop();
+            state.value.push(newUser);
+        }
+    },
+});
+
+export const { loginUser } =  currentUserSlice.actions
+export const { updateSkin } = currentUserSlice.actions
+export const { updatePseudo } = currentUserSlice.actions
+export const { updatePassword } = currentUserSlice.actions
+export const { updateNationality } = currentUserSlice.actions
+export const { updateSex } = currentUserSlice.actions
+
+export default currentUserSlice.reducer;

bob_party/src/redux/store.ts

@@ -0,0 +1,18 @@
+import { configureStore } from "@reduxjs/toolkit";
+import currentUserReducer from "./features/currentUserSlice";
+import { getDefaultMiddleware } from '@reduxjs/toolkit';
+
+const customizedMiddleware = getDefaultMiddleware({
+    serializableCheck: false
+  })
+
+const store = configureStore({
+    reducer: {
+        currentUser: currentUserReducer,
+    },
+    middleware: (getDefaultMiddleware) => customizedMiddleware,
+})
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
+export default store;

bob_party/src/screens/Chat.tsx

@@ -1,32 +1,28 @@
 import { StatusBar } from 'expo-status-bar'
-import { StyleSheet, View, Text} from 'react-native'
+import {View} from 'react-native'
 import React from 'react';
-import stylesScreen from './style/screens.style'
+import stylesScreen from './style/screens.style';
-import { Skin } from '../core/skin';
 import { TopBar } from '../components/TopBar';
 import { BotBar } from '../components/BotBar';
-import { ScreenIndicator } from '../components/ScreenIndicator';
-import { User } from '../core/User/user';
 import { FlatList } from 'react-native-gesture-handler';
 import { ConversationComponent } from '../components/ConversationComponent';
-
+import { useSelector } from 'react-redux';
-import tabSkinApp from '../constSkin';
+import { RootState } from '../redux/store';
-import tabConv from '../constCov';
-
-
-const UserActu=new User("14", "leBg", "MdpDeOuf", "ouioui", "grand", new Date(2022,12,12), 12222, 123324, 12,  tabSkinApp[0], tabSkinApp, tabConv);
 
 function Chat(props: { navigation: any; }) {
     const { navigation } = props
+
+    const currentUser = useSelector((state: RootState) => state.currentUser.value[0]);
+    
     return (  
     <View style={stylesScreen.container}>
       <TopBar
-          skin={UserActu.getCurrentSkin()}
+          skin={currentUser.getCurrentSkin()}
           nav={navigation}
           />
       <View style={stylesScreen.bodyStart}>
         <FlatList 
-          data={tabConv}
+          data={currentUser.getTabConv()}
           renderItem={({item}) => <ConversationComponent conv={item} state='Preview'/>} 
         />
       </View>

bob_party/src/screens/Home.tsx

@@ -1,28 +1,28 @@
 import { StatusBar } from 'expo-status-bar'
-import { StyleSheet, View, ImageSourcePropType} from 'react-native'
+import { View} from 'react-native'
 import React from 'react';
 import stylesScreen from './style/screens.style'
-import { User } from '../core/User/user';
-import { Skin } from '../core/skin';
 import { TopBar } from '../components/TopBar';
 import { BotBar } from '../components/BotBar';
 import { Conversation } from '../core/conversation';
 import { ButtonGameTypeChoice } from '../components/ButtonGameTypeChoice';
-import tabSkinApp from '../constSkin';
+import { useSelector } from 'react-redux';
-import { GameSolo } from '../core/gameSolo';
+import { RootState } from '../redux/store';
-
 
 
 //const test= new GameSolo("test", require('bob_party/assets/ImagesJeux/BatailleNavale.jpeg'), "test", );
 let tabConv:Conversation[]=[];
-const UserActu=new User("14", "leBg", "MdpDeOuf", "ouioui", "grand", new Date(2022,12,12), 12222, 123324, 12,  tabSkinApp[0], tabSkinApp, tabConv);
+
 
 function Home(props: { navigation: any; }) {
     const { navigation } = props
+
+    const currentUser = useSelector((state: RootState) => state.currentUser.value[0]);
+    
     return ( 
       <View style={stylesScreen.container}>
         <TopBar
-        skin={UserActu.getCurrentSkin()} 
+          skin={currentUser.getCurrentSkin()} 
           nav={navigation}
           state= 'Home'
         />

bob_party/src/screens/Profile.tsx

@@ -1,46 +1,49 @@
 import { StatusBar } from 'expo-status-bar'
-import { StyleSheet, View, Text, Image} from 'react-native'
+import { View, Text, Image} from 'react-native'
 import React from 'react';
 import stylesScreen from './style/screens.style'
 import styles from './style/Profile.style'
 import { TopBar } from '../components/TopBar';
 import { BotBar } from '../components/BotBar';
 import { SkinComponent } from '../components/Skin';
-import { User } from '../core/User/user';
-import tabSkinApp from '../constSkin';
-import tabConv from '../constCov'
 import { ButtonGreySmall } from '../components/ButtonGreySmall';
 import { ScreenIndicator } from '../components/ScreenIndicator';
+import { useSelector } from 'react-redux';
+import { RootState } from '../redux/store';
 
 const coin = require('../../assets/Icons/Coin.png')
 
-const UserActu=new User("14", "leBg","MdpDeOuf", "ouioui", "grand", new Date(2022,12,12), 12222, 123324, 12, tabSkinApp[0], tabSkinApp, tabConv);
+
 
 function Profile(props: { navigation: any; }) {
     const { navigation } = props
+
+    const currentUser = useSelector((state: RootState) => state.currentUser.value)[0];
+
     return (
     <View style={stylesScreen.container}>
         <TopBar
-          skin={UserActu.getCurrentSkin()} 
+          skin={currentUser.getCurrentSkin()} 
           nav={navigation}
           />
       <View style={stylesScreen.bodyStart}>
         <ScreenIndicator title='Profil'/>
+        <Text style={styles.pseudoText}>{currentUser.getUsername()}</Text>
         <View style={styles.coinSkinView}>
             <View style={styles.coinView}>
                 <Image 
                     style={styles.coin}
                     source={coin}
                 />
-                <Text style={styles.coinText}>{UserActu.getCurrentCoins()}</Text>
+                <Text style={styles.coinText}>{currentUser.getCurrentCoins()}</Text>
             </View>
             <View style={styles.skinView}>
-                <SkinComponent skin={UserActu.getCurrentSkin()} state='profile'/>
+                <SkinComponent skin={currentUser.getCurrentSkin()} state='profile' nav={navigation} />
                 <ButtonGreySmall onPress={() => navigation.navigate('SkinList')} title='Changer de skin' state='Profile'/>
             </View>
         </View>
         <View style={styles.infoView}>
-            <Text style={styles.infoText}>Total de BobCoin gagnés: {UserActu.getTotalCoins()}</Text>
+            <Text style={styles.infoText}>Total de BobCoin gagnés: {currentUser.getTotalCoins()}</Text>
         </View>
       </View>
       <BotBar

bob_party/src/screens/Settings.tsx

@@ -1,23 +1,34 @@
 import { StatusBar } from 'expo-status-bar'
-import { StyleSheet, View, Text, Alert} from 'react-native'
+import { View, Text } from 'react-native'
-import React from 'react';
+import React, { useState } from 'react';
 import stylesScreen from './style/screens.style';
 import styles from './style/Settings.style';
 import { TopBar } from '../components/TopBar';
-import { User } from '../core/user';
-
-import tabSkinApp from '../constSkin';
-import tabConv from '../constCov';
 import { ButtonGreySmall } from '../components/ButtonGreySmall';
-import { title } from 'process';
+import { useDispatch, useSelector } from 'react-redux';
-import { info } from 'console';
+import { RootState } from '../redux/store';
+import DialogInput from "react-native-dialog-input";
+import { updatePseudo, updatePassword, updateNationality, updateSex } from "../redux/features/currentUserSlice";
+import Dialog from "react-native-dialog"
+import RNPickerSelect from "react-native-picker-select";
+import tabNat from '../constNat';
+import tabSex from '../constSex';
+
+function Settings(props: { navigation: any; }) {
+    const { navigation } = props
 
+    const currentUser = useSelector((state: RootState) => state.currentUser.value)[0];
 
-const UserActu=new User("14", "leBg", "MdpDeOuf", "ouioui", "grand", new Date(2022,12,12), 12222, 123324, 12,  tabSkinApp[0], tabSkinApp, tabConv);
+    const [dialogPseudoVisible, setDialogPseudoVisible] = useState(false);
+    const [dialogPasswordVisible, setDialogPasswordVisible] = useState(false);
+    const [dialogNationalityVisible, setDialogNationalityVisible] = useState(false);
+    const [dialogSexVisible, setDialogSexVisible] = useState(false);
 
+    const [selectedSex, setSelectedSex] = useState("");
+    const [selectedNationality, setSelectedNationality] = useState("");
+
+    const dispatch=useDispatch();
 
-function Store(props: { navigation: any; }) {
-    const { navigation } = props
     return (
     <View style={stylesScreen.container}>
       <TopBar
@@ -30,28 +41,71 @@ function Store(props: { navigation: any; }) {
           <View style={{flexDirection: 'row', justifyContent: 'space-between',}}>
             <View>
               <View>
-                <Text style={styles.text}>Pseudo: {UserActu.getUsername()}</Text>
+                <Text style={styles.text}>Pseudo: {currentUser.getUsername()}</Text>
-                <ButtonGreySmall onPress={UserActu.setUsername} title='Changer le pseudo'/>
+                <ButtonGreySmall onPress={() => setDialogPseudoVisible(true)} title='Changer le pseudo'/>
               </View>
               <View>
-                <Text style={styles.text}>Mot de passe: {UserActu.getPassword()}</Text>
+                <Text style={styles.text}>Mot de passe: {currentUser.getPassword()}</Text>
-                <ButtonGreySmall onPress={() => console.log('changer mdp')} title='Changer le mot de passe'/>
+                <ButtonGreySmall onPress={() => setDialogPasswordVisible(true)} title='Changer le mot de passe'/>
               </View>
               <View>
-                <Text style={styles.text}>Nationalité: {UserActu.getNationality()}</Text>
+                <Text style={styles.text}>Nationalité: {currentUser.getNationality()}</Text>
-                <ButtonGreySmall onPress={() => console.log('changer nat')} title='Changer la nationnalité'/>
+                <ButtonGreySmall onPress={() => setDialogNationalityVisible(true)} title='Changer la nationnalité'/>
               </View>
               <View>
-                <Text style={styles.text}>Sexe: {UserActu.getSexe()}</Text>
+                <Text style={styles.text}>Sexe: {currentUser.getSexe()}</Text>
-                <ButtonGreySmall onPress={() => console.log('changer sexe')} title='Changer le sexe'/>
+                <ButtonGreySmall onPress={() => setDialogSexVisible(true)} title='Changer le sexe'/>
+              </View>
+            </View>
+            <Text style={styles.textID}>ID: {currentUser.getId()}</Text>
           </View>
         </View>
-            <Text style={styles.textID}>ID: {UserActu.getId()}</Text>
       </View>
+
+      <DialogInput
+        isDialogVisible={dialogPseudoVisible}
+        title="Inserer le nouveau pseudo"
+        hintInput ="Pseudo"
+        submitInput={ (inputText: string) => {dispatch(updatePseudo(inputText)); setDialogPseudoVisible(false)} }
+        closeDialog={ () => {setDialogPseudoVisible(false)}}>
+      </DialogInput>
+
+      <DialogInput 
+        isDialogVisible={dialogPasswordVisible}
+        title="Inserer le nouveau mot de passe"
+        hintInput ="Mot de passe"
+        submitInput={ (inputText: string) => {dispatch(updatePassword(inputText)); setDialogPasswordVisible(false)} }
+        closeDialog={ () => {setDialogPasswordVisible(false)}}>
+      </DialogInput>
+
+      <Dialog.Container visible={dialogNationalityVisible}>
+        <Dialog.Title>Changer de nationalité</Dialog.Title>
+        <View style={styles.RNPView}>
+          <RNPickerSelect
+            placeholder={{label:"Cliquez pour changer", value: null}}
+            onValueChange={(value:string) => setSelectedNationality(value)}
+            items={tabNat}
+          />
         </View>  
+        <Dialog.Button label="Cancel" onPress={() => setDialogNationalityVisible(false)} />
+        <Dialog.Button label="Valider" onPress={() => {dispatch(updateNationality(selectedNationality)); setDialogNationalityVisible(false)}} />
+      </Dialog.Container>
+
+      <Dialog.Container visible={dialogSexVisible}>
+        <Dialog.Title>Changer de sexe</Dialog.Title>
+        <View style={styles.RNPView}>
+          <RNPickerSelect
+            placeholder={{label:"Cliquez pour changer", value: null}}
+            onValueChange={(value:string) => setSelectedSex(value)}
+            items={tabSex}
+          />
         </View>  
+        <Dialog.Button label="Cancel" onPress={() => setDialogSexVisible(false)} />
+        <Dialog.Button label="Valider" onPress={() => {dispatch(updateSex(selectedSex)); setDialogSexVisible(false)}} />
+      </Dialog.Container>
+
     </View>
   );
 }
 
-export default Store
+export default Settings

bob_party/src/screens/SignIn.tsx

@@ -1,24 +1,49 @@
 import { StatusBar } from 'expo-status-bar'
 import { StyleSheet, View, ImageSourcePropType, Pressable, Text} from 'react-native'
-import React from 'react';
+import React, { useState } from 'react';
 import stylesScreen from './style/screens.style'
 import { TextInput } from 'react-native-gesture-handler';
 import { CustomTextInput } from '../components/CustomTextInput';
 import { ButtonGameTypeChoice } from '../components/ButtonGameTypeChoice';
+import { User } from "../core/user";
+import tabUS from "../constUser";
 
 import styles from "./style/SignIn.style"
+import { useDispatch, useSelector } from 'react-redux';
+import { RootState } from '../redux/store';
+import { loginUser } from '../redux/features/currentUserSlice';
+
+
+
+
 
 function SignIn(props: { navigation: any; }) {
     const { navigation } = props
+
+    const [pseudo, setPseudo] = useState('');
+    const [password, setPassword] = useState('');
+    
+    const dispatch=useDispatch();
+
+    function userVerif(login: string, password: string, nav: any){
+        if((tabUS.map((User) => User.getUsername()).indexOf(login)) !== -1){
+            let id = (tabUS.map((User) => User.getUsername()).indexOf(login))
+            if ((tabUS.map((User) => User.getUsername()).indexOf(login) === id) && ( tabUS[id].getPassword() === password) ){
+                dispatch(loginUser(tabUS[id]));
+                nav.navigate('HomeTab');
+            }
+        }
+    }
+
     return (
     <View style={stylesScreen.container}>
         <View style={stylesScreen.bodyCenter}>
-            <CustomTextInput placeholder={""} text="ID"/>
+            <TextInput style={styles.textInput} placeholder='Login' onChangeText={(val) => setPseudo(val)} autoCapitalize='none' />
-            <CustomTextInput placeholder={""} text="Password"/>
+            <TextInput style={styles.textInput} placeholder='Password' onChangeText={(val) => setPassword(val)} autoCapitalize='none' />
-            <Pressable style={styles.button} onPress={navigation.navigate('Home')}>
+            <Pressable style={styles.button} onPress={() => userVerif(pseudo, password, navigation)}>
                 <Text style={styles.text}>Se connecter</Text>
             </Pressable>
-            <Pressable>
+            <Pressable onPress={() => navigation.navigate('SignUp')}>
                 <Text style={styles.signup}>Pas de compte? Inscrivez vous !</Text>
             </Pressable>
         </View>

bob_party/src/screens/SignUp.tsx

@@ -1,30 +1,30 @@
-import { StatusBar } from 'expo-status-bar'
+// import { StatusBar } from 'expo-status-bar'
-import { StyleSheet, View, ImageSourcePropType, Pressable, Text} from 'react-native'
+// import { StyleSheet, View, ImageSourcePropType, Pressable, Text} from 'react-native'
-import React from 'react';
+// import React from 'react';
-import stylesScreen from './style/screens.style'
+// import stylesScreen from './style/screens.style'
-import { TextInput } from 'react-native-gesture-handler';
+// import { TextInput } from 'react-native-gesture-handler';
-import { CustomTextInput } from '../components/CustomTextInput';
+// import { CustomTextInput } from '../components/CustomTextInput';
-import { ButtonGameTypeChoice } from '../components/ButtonGameTypeChoice';
+// import { ButtonGameTypeChoice } from '../components/ButtonGameTypeChoice';
 
-import styles from "./style/SignIn.style"
+// import styles from "./style/SignIn.style"
 
-function SignUp(props: { navigation: any; }) {
+// function SignUp(props: { navigation: any; }) {
-    const { navigation } = props
+//     const { navigation } = props
-    return (
+//     return (
-    <View style={stylesScreen.container}>
+//     <View style={stylesScreen.container}>
-        <View style={stylesScreen.bodyCenter}>
+//         <View style={stylesScreen.bodyCenter}>
-            <CustomTextInput placeholder={""} text="Pseudo"/>
+//             <CustomTextInput placeholder={""} text="Pseudo"/>
-            <CustomTextInput placeholder={""} text="Mot de passe"/>
+//             <CustomTextInput placeholder={""} text="Mot de passe"/>
-            <CustomTextInput placeholder={""} text="Mot de passe"/>
+//             <CustomTextInput placeholder={""} text="Mot de passe"/>
-            <CustomTextInput placeholder={""} text="Nationalité"/>
+//             <CustomTextInput placeholder={""} text="Nationalité"/>
-            <CustomTextInput placeholder={""} text="Date de naisance"/>
+//             <CustomTextInput placeholder={""} text="Date de naisance"/>
-            <CustomTextInput placeholder={""} text="Sexe"/>
+//             <CustomTextInput placeholder={""} text="Sexe"/>
-            <Pressable style={styles.button} onPress={navigation.navigate('Home')}>
+//             <Pressable style={styles.button} onPress={navigation.navigate('Home')}>
-                <Text style={styles.text}>S'inscrire</Text>
+//                 <Text style={styles.text}>S'inscrire</Text>
-            </Pressable>
+//             </Pressable>
-        </View>
+//         </View>
-    </View>
+//     </View>
-  );
+//   );
-}
+// }
 
-export default SignUp
+// export default SignUp

bob_party/src/screens/SkinList.tsx

@@ -1,22 +1,27 @@
 import { StatusBar } from 'expo-status-bar'
-import { StyleSheet, View, Text} from 'react-native'
+import { View } from 'react-native'
 import React from 'react';
 import stylesScreen from './style/screens.style'
-import { Skin } from '../core/skin';
 import { TopBar } from '../components/TopBar';
 import { BotBar } from '../components/BotBar';
 import { FlatList } from 'react-native-gesture-handler';
 import { SkinComponent } from '../components/Skin';
 import tabSkinApp from '../constSkin';
 import { ScreenIndicator } from '../components/ScreenIndicator';
+import { useSelector } from 'react-redux';
+import { RootState } from '../redux/store';
+
 
 
 function SkinList(props: { navigation: any; }) {
     const { navigation } = props
+
+    const currentUser = useSelector((state: RootState) => state.currentUser.value[0]);
+
     return (
     <View style={stylesScreen.container}>
         <TopBar
-          skin={tabSkinApp[0]} 
+          skin={currentUser.getCurrentSkin()} 
           nav={navigation}
           />
       <View style={stylesScreen.bodyStart}>

bob_party/src/screens/Store.tsx

@@ -1,28 +1,30 @@
 import { StatusBar } from 'expo-status-bar'
-import { StyleSheet, View} from 'react-native'
+import { View } from 'react-native'
 import React from 'react';
-import stylesScreen from './style/screens.style'
+import stylesScreen from './style/screens.style';
-import { Skin } from '../core/skin';
 import { TopBar } from '../components/TopBar';
 import { BotBar } from '../components/BotBar';
 import { FlatList } from 'react-native-gesture-handler';
 import { SkinComponent } from '../components/Skin';
 import { ScreenIndicator } from '../components/ScreenIndicator';
-
+import { useSelector } from 'react-redux';
-import tabSkinApp from '../constSkin';
+import { RootState } from '../redux/store';
 
 function Store(props: { navigation: any; }) {
   const { navigation } = props
+
+  const currentUser = useSelector((state: RootState) => state.currentUser.value[0]);
+
   return (
     <View style={stylesScreen.container}>
       <TopBar
-        skin={tabSkinApp[0]}
+        skin={currentUser.getCurrentSkin()}
         nav={navigation}
       />
       <View style={stylesScreen.bodyStart}>
         <ScreenIndicator title='Store'/>
         <FlatList 
-          data={tabSkinApp}
+          data={currentUser.getTabSkin()}
           numColumns={2}
           columnWrapperStyle={{ flex: 1, justifyContent: "space-around"}}
           keyExtractor={item =>item.getSkinName()}

bob_party/src/screens/style/Profile.style.js

@@ -39,5 +39,14 @@ export default StyleSheet.create({
       letterSpacing: 0.25,
       color: 'white',
       marginVertical: (infoGap/2),
+    },
+    pseudoText: {
+      fontSize: 24,
+      lineHeight: 21,
+      fontWeight: 'bold',
+      letterSpacing: 0.25,
+      color: 'white',
+      marginTop :25,
+      alignSelf: 'center',
     }
 });

bob_party/src/screens/style/Settings.style.js

@@ -27,5 +27,10 @@ export default StyleSheet.create({
          borderWidth: 2,
         width: '90%',
         margin: 15,
-        padding: 15,}
+        padding: 15,
+    },
+    RNPView: {
+        alignSelf: 'center',
+        padding: 20,
+    }
 });

bob_party/src/screens/style/SignIn.style.js

@@ -24,4 +24,9 @@ export default StyleSheet.create({
         color:'white',
         textDecorationLine:"underline",   
       },
+      textInput: {
+        width: '50%',
+        height: '5%',
+        backgroundColor: 'white',
+      }
   });