👽 changement du token du lien de l'api et placement d'un bouton dans la top bar pour le theme, amélioré le front et voir si il est possible de rendre la mise en place du theme plus propre... 💩

App.tsx

@@ -6,12 +6,14 @@ import React, { useState, useEffect } from "react";
 import Navigation from './navigation/Navigation';
 import StackNavigation from './navigation/StackNavigation';
 
+
 import { createStackNavigator } from '@react-navigation/stack';
 
 import {useDispatch, useSelector} from 'react-redux';
 
 import store from './redux/store';
 
+
 // Import your application store
 //import store from "./redux/store";
 

navigation/Navigation.tsx

@@ -12,11 +12,24 @@ import ListFav from '../screens/ListFav';
 import TabBarIcon from '../components/TabBarIcon';
 import StackNavigation from './StackNavigation';
 
+import { Ionicons } from '@expo/vector-icons';
+import { HeaderButton, HeaderButtons, Item } from 'react-navigation-header-buttons';
 
-
+import { switchMode } from '../redux/actions/action_switchMode';
+import {useDispatch, useSelector} from 'react-redux';
+//@ts-ignore
+function fHeaderButton(props) {
+    //@ts-ignore
+    return <HeaderButton {...props} IconComponent={Ionicons} iconSize={23} color="black" />;
+}
 
 export default function Navigation() {
     const BottomTabNavigator = createBottomTabNavigator();
+
+    //@ts-ignore
+    const mode = useSelector(state => state.appReducer.mode);
+
+    const dispatch = useDispatch();
     return (
         <NavigationContainer>
             <BottomTabNavigator.Navigator initialRouteName="Home">
@@ -29,9 +42,20 @@ export default function Navigation() {
                                             options={{
                                                 title: 'Home',
                                                 tabBarIcon: ({color}) => <TabBarIcon name="home" color={color}/>,
-                                                headerShown: false
+                                                headerRight: () => (
+                                                    <HeaderButtons HeaderButtonComponent={fHeaderButton}>
+                                                    <Item
+                                                        title="Paramètres"
+                                                        iconName="md-settings"
+                                                        onPress={() => 
+                                                            dispatch(switchMode(mode === 'light' ? 'dark' : 'light'))}
+                                                    />
+                                                    </HeaderButtons>
+                                                ),
                                             }}
                                             />
+
+
                 <BottomTabNavigator.Screen name="ListFav" component={ListFav}
                                             options={{
                                                 title: 'Liste de Favoris ♥',

navigation/NavigationWrapper.tsx

@@ -0,0 +1,23 @@
+// import React from 'react';
+// import { SafeAreaView, StatusBar } from 'react-native';
+// import ThemeContext from '../styles/themeContext';
+// import theme from '../styles/theme';
+// import { useSelector } from 'react-redux';
+// import { lightTheme, darkTheme } from '../styles/theme';
+// //@ts-ignore
+// const NavigationWrapper = ({ children }) => {
+    
+//     const mode = useSelector(state => state.appReducer.mode);
+//     const theme = mode === 'light' ? lightTheme : darkTheme;
+    
+//     return (
+//     <SafeAreaView style={{ flex: 1 }}>
+//         <StatusBar />
+//         <ThemeContext.Provider value={theme}>
+//             {children}
+//         </ThemeContext.Provider>
+//     </SafeAreaView>
+//     );
+// };
+
+// export default NavigationWrapper;

navigation/StackNavigation.tsx

@@ -13,7 +13,11 @@ export default function StackNavigation() {
     return (
         //<NavigationContainer>
             <Stack.Navigator initialRouteName="Home">
-                <Stack.Screen name="Home" component={HomeScreen}/>
+                <Stack.Screen
+                    name="Home"
+                    component={HomeScreen}
+                    options={{ headerShown: false }} // enlever l'header pour cet écran
+                />
                 <Stack.Screen name="ListScreen" component={ListScreen}/>
                 <Stack.Screen name="ListFav" component={ListFav}/>
             </Stack.Navigator>

package.json

@@ -22,6 +22,7 @@
     "react-native-gesture-handler": "~2.9.0",
     "react-native-safe-area-context": "4.5.0",
     "react-native-web": "~0.18.11",
+    "react-navigation-header-buttons": "^10.0.0",
     "react-redux": "^8.0.5",
     "redux": "^4.2.1"
   },

redux/actions/actionSelection.tsx

@@ -52,13 +52,17 @@ export const getAllCards = () => {
           'etag':'W/"74bb-QMT8DIj6saBS1wT4u5WWcEmZAdw"'
         }
       };
-      const CardsPromise = await fetch('https://us.api.blizzard.com/hearthstone/cards?locale=en_US&access_token=EURTWhjBC2SRb4Ez42BT1kx8R2NcJc07kL', options);
+
+      console.log("API")
+      //const CardsPromise = await fetch('https://us.api.blizzard.com/hearthstone/cards?locale=en_US&access_token=EURTWhjBC2SRb4Ez42BT1kx8R2NcJc07kL', options);
+      const CardsPromise = await fetch('https://us.api.blizzard.com/hearthstone/cards?locale=en_US&access_token=EUGIkMrnzNyG68ac33y5Tpn6MUtraN3QiV', options);
       //console.log("FETCH")
       //console.log(CardsPromise)
 
-      //Then use the json method to get json data from api/
-      const CardsListJson = await CardsPromise.json();
       
+      //Then use the json method to get json data from api/
+      const CardsListJson = await CardsPromise.json(); //! ??????
+      console.log("jsoncardlist")
       //console.log(CardsListJson['cards']) 
       
       
@@ -72,7 +76,7 @@ export const getAllCards = () => {
       
       //console.log("TOTO")
       
-      //console.log(CardsList)
+      console.log("CardsList")
       //call the action 
       
       dispatch(setCardsList(CardsList));

screens/HomeScreen.tsx

@@ -94,7 +94,7 @@ export default function HomeScreen({navigation}) {
     },
     container_dark: {
         flex: 1,
-        backgroundColor: '#121212',
+        backgroundColor: '#3e3e42',
         alignItems: 'center',
         justifyContent: 'center',
     },

screens/ListScreen.tsx

@@ -122,7 +122,7 @@ const styles = StyleSheet.create({
     },
     container_dark: {
         flex: 1,
-        backgroundColor: '#121212',
+        backgroundColor: '#3e3e42',
         alignItems: 'center',
         justifyContent: 'center',
     },

styles/theme.tsx

@@ -0,0 +1,26 @@
+
+
+export const lightTheme = {
+    backgroundColor: 'white',
+    textColor: 'black',
+    headerBackgroundColor: 'lightblue',
+};
+
+export const darkTheme = {
+    backgroundColor: 'black',
+    textColor: 'white',
+    headerBackgroundColor: 'darkblue',
+};
+
+
+const theme = {
+    backgroundColor: '#FFFFFF',
+    textColor: '#000000',
+    headerBackgroundColor: '#FFFFFF',
+    dark: false,
+    colors: {
+            primary: 'blue',
+    },
+};
+
+export default theme;

styles/themeContext.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import theme from './theme';
+
+const ThemeContext = React.createContext(theme);
+
+export default ThemeContext;