Ajout du current User du redux dans les écrans
stub-api
Alban GUILHOT 3 years ago
parent 8c5dfb2f2c
commit 1354fe9479

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

@ -1,32 +1,28 @@
import { StatusBar } from 'expo-status-bar' import { StatusBar } from 'expo-status-bar'
import { StyleSheet, View, Text} from 'react-native' import {View} from 'react-native'
import React from 'react'; 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 { TopBar } from '../components/TopBar';
import { BotBar } from '../components/BotBar'; import { BotBar } from '../components/BotBar';
import { ScreenIndicator } from '../components/ScreenIndicator';
import { User } from '../core/user';
import { FlatList } from 'react-native-gesture-handler'; import { FlatList } from 'react-native-gesture-handler';
import { ConversationComponent } from '../components/ConversationComponent'; 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; }) { function Chat(props: { navigation: any; }) {
const { navigation } = props const { navigation } = props
return (
const currentUser = useSelector((state: RootState) => state.currentUser.value[0]);
return (
<View style={stylesScreen.container}> <View style={stylesScreen.container}>
<TopBar <TopBar
skin={UserActu.getCurrentSkin()} skin={currentUser.getCurrentSkin()}
nav={navigation} nav={navigation}
/> />
<View style={stylesScreen.bodyStart}> <View style={stylesScreen.bodyStart}>
<FlatList <FlatList
data={tabConv} data={currentUser.getTabConv()}
renderItem={({item}) => <ConversationComponent conv={item} state='Preview'/>} renderItem={({item}) => <ConversationComponent conv={item} state='Preview'/>}
/> />
</View> </View>

@ -1,46 +1,46 @@
import { StatusBar } from 'expo-status-bar' import { StatusBar } from 'expo-status-bar'
import { StyleSheet, View, ImageSourcePropType} from 'react-native' import { View} from 'react-native'
import React from 'react'; import React from 'react';
import stylesScreen from './style/screens.style' import stylesScreen from './style/screens.style'
import { User } from '../core/user';
import { Skin } from '../core/skin';
import { TopBar } from '../components/TopBar'; import { TopBar } from '../components/TopBar';
import { BotBar } from '../components/BotBar'; import { BotBar } from '../components/BotBar';
import { Conversation } from '../core/conversation'; import { Conversation } from '../core/conversation';
import { ButtonGameTypeChoice } from '../components/ButtonGameTypeChoice'; 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", ); //const test= new GameSolo("test", require('bob_party/assets/ImagesJeux/BatailleNavale.jpeg'), "test", );
let tabConv:Conversation[]=[]; 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; }) { function Home(props: { navigation: any; }) {
const { navigation } = props const { navigation } = props
return (
<View style={stylesScreen.container}> const currentUser = useSelector((state: RootState) => state.currentUser.value[0]);
<TopBar
skin={UserActu.getCurrentSkin()} return (
nav={navigation} <View style={stylesScreen.container}>
state= 'Home' <TopBar
/> skin={currentUser.getCurrentSkin()}
<View style={stylesScreen.bodyCenter}> nav={navigation}
<ButtonGameTypeChoice state= 'Home'
title='Jouer Seul'
onPress={() => navigation.navigate('GameChoice')}
/> />
<ButtonGameTypeChoice <View style={stylesScreen.bodyCenter}>
title='Défier mes amis' <ButtonGameTypeChoice
onPress={() => navigation.navigate('GameChoice')} title='Jouer Seul'
onPress={() => navigation.navigate('GameChoice')}
/>
<ButtonGameTypeChoice
title='Défier mes amis'
onPress={() => navigation.navigate('GameChoice')}
/>
</View>
<BotBar
nav={navigation}
state='Home'
/> />
</View> </View>
<BotBar
nav={navigation}
state='Home'
/>
</View>
); );
} }

@ -1,46 +1,49 @@
import { StatusBar } from 'expo-status-bar' 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 React from 'react';
import stylesScreen from './style/screens.style' import stylesScreen from './style/screens.style'
import styles from './style/Profile.style' import styles from './style/Profile.style'
import { TopBar } from '../components/TopBar'; import { TopBar } from '../components/TopBar';
import { BotBar } from '../components/BotBar'; import { BotBar } from '../components/BotBar';
import { SkinComponent } from '../components/Skin'; import { SkinComponent } from '../components/Skin';
import { User } from '../core/user';
import tabSkinApp from '../constSkin';
import tabConv from '../constCov'
import { ButtonGreySmall } from '../components/ButtonGreySmall'; import { ButtonGreySmall } from '../components/ButtonGreySmall';
import { ScreenIndicator } from '../components/ScreenIndicator'; import { ScreenIndicator } from '../components/ScreenIndicator';
import { useSelector } from 'react-redux';
import { RootState } from '../redux/store';
const coin = require('../../assets/Icons/Coin.png') 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; }) { function Profile(props: { navigation: any; }) {
const { navigation } = props const { navigation } = props
const currentUser = useSelector((state: RootState) => state.currentUser.value)[0];
return ( return (
<View style={stylesScreen.container}> <View style={stylesScreen.container}>
<TopBar <TopBar
skin={UserActu.getCurrentSkin()} skin={currentUser.getCurrentSkin()}
nav={navigation} nav={navigation}
/> />
<View style={stylesScreen.bodyStart}> <View style={stylesScreen.bodyStart}>
<ScreenIndicator title='Profil'/> <ScreenIndicator title='Profil'/>
<Text style={styles.pseudoText}>{currentUser.getUsername()}</Text>
<View style={styles.coinSkinView}> <View style={styles.coinSkinView}>
<View style={styles.coinView}> <View style={styles.coinView}>
<Image <Image
style={styles.coin} style={styles.coin}
source={coin} source={coin}
/> />
<Text style={styles.coinText}>{UserActu.getCurrentCoins()}</Text> <Text style={styles.coinText}>{currentUser.getCurrentCoins()}</Text>
</View> </View>
<View style={styles.skinView}> <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'/> <ButtonGreySmall onPress={() => navigation.navigate('SkinList')} title='Changer de skin' state='Profile'/>
</View> </View>
</View> </View>
<View style={styles.infoView}> <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>
</View> </View>
<BotBar <BotBar

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

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

Loading…
Cancel
Save