continuation des recherches pour le darkmode💩

App.tsx

@@ -1,13 +1,21 @@
 import { StatusBar } from 'expo-status-bar';
 import { StyleSheet, Text, View, Button } from 'react-native';
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
+
 
 import Navigation from './navigation/Navigation';
 import StackNavigation from './navigation/StackNavigation';
 
+import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
+
 import { createStackNavigator } from '@react-navigation/stack';
 
+import {useDispatch, useSelector} from 'react-redux';
+
 import store from './redux/store';
+
+//import { DefaultTheme, Provider as PaperProvider } from 'react-native-paper';
+
 // Import your application store
 //import store from "./redux/store";
 
@@ -20,8 +28,11 @@ import {
 import { Provider } from 'react-redux';
 
 export default function App() {
-    //safearea
-    //mettre le navigateur ayant le princ
+
+  // const [isDarkTheme, setIsDarkTheme] = React.useState(false);
+
+  // const theme = isDarkTheme ? darkTheme : defaultTheme;
+
   return (
     <Provider store={store}>
       <SafeAreaProvider>
@@ -32,18 +43,20 @@ export default function App() {
 }
 
 
+////<PaperProvider theme={theme}></PaperProvider>
+
 
-///décommenter quand API Fonctionnel///
+// ///décommenter quand API Fonctionnel///
 
-// export default function App() {
-//   return (
-//     <>
-//       {/* Bind your application store to the Provider store */}
-//       <Provider store={store}>
-//         <SafeAreaProvider>
-//           <Navigation/>
-//         </SafeAreaProvider>
-//       </Provider>
-//     </>
-//   );
-// }
+// // export default function App() {
+// //   return (
+// //     <>
+// //       {/* Bind your application store to the Provider store */}
+// //       <Provider store={store}>
+// //         <SafeAreaProvider>
+// //           <Navigation/>
+// //         </SafeAreaProvider>
+// //       </Provider>
+// //     </>
+// //   );
+// // }

data/ApiDataManager.tsx

@@ -1,14 +0,0 @@
-
-// export class ApiDataManager{
-
-
-//     public async  getCards() : Promise<String[]> {
-
-
-//         const CardPromise = await fetch('https://omgvamp-hearthstone-v1.p.rapidapi.com/cards')
-        
-//         const CardListJson = await CardPromise.json();
-//         const CardList: String[] = Array.of(CardListJson);
-//         return CardList;
-//     }
-// }

data/stub.ts

@@ -1,13 +0,0 @@
-import { Card } from "../models/Card"
-
-export class StubLib {
-    
-    public getCards(): Card[] {
-        const NOUNOURS_LIST : Card[] = [
-            
-            
-        ]
-        return NOUNOURS_LIST
-    }
-}
-

navigation/Navigation.tsx

@@ -1,8 +1,8 @@
     import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View, Button } from 'react-native';
+import {useColorScheme, StyleSheet, Text, View, Button } from 'react-native';
 import React, { useState } from "react";
 
-import { NavigationContainer } from '@react-navigation/native';
+import { NavigationContainer, useTheme, DefaultTheme} from '@react-navigation/native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 
 import HomeScreen from '../screens/HomeScreen';
@@ -13,13 +13,83 @@ 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();
+
+        //* themes
+    //const { colors } = useTheme();
+
+    //const scheme = useColorScheme();
+
+
+
+// const defaultTheme = {
+//     ...DefaultTheme,
+//     colors: {
+//         ...DefaultTheme.colors,
+//         primary: 'blue',
+//         accent: 'yellow',
+//         background: 'white',
+//         text: 'black',
+//     },
+// };
+
+// const darkTheme = {
+//     ...DefaultTheme,
+//     dark: true,
+//     colors: {
+//         ...DefaultTheme.colors,
+//         primary: '#BB86FC',
+//         accent: '#03DAC6',
+//         background: '#121212',
+//         surface: '#121212',
+//         text: '#FFFFFF',
+//         disabled: '#9E9E9E',
+//         placeholder: '#9E9E9E',
+//         backdrop: '#00000070',
+//     },
+// };
+
+// const MyTheme = {
+//     dark: false,
+//     colors: {
+//         primary: 'rgb(255, 45, 85)',
+//         background: 'rgb(242, 242, 242)',
+//         card: 'rgb(255, 255, 255)',
+//         text: 'rgb(28, 28, 30)',
+//         border: 'rgb(199, 199, 204)',
+//         notification: 'rgb(255, 69, 58)',
+//     },
+// };
+
     return (
+        // <NavigationContainer theme={scheme === 'dark' ? darkTheme : DefaultTheme}>
         <NavigationContainer>
-            <BottomTabNavigator.Navigator initialRouteName="Home">
+            <BottomTabNavigator.Navigator 
+            initialRouteName="Home"
+            screenOptions={({ route }) => ({
+                tabBarActiveTintColor: 'blue',
+                tabBarInactiveTintColor: 'gray',
+            })}
+            >
                 <BottomTabNavigator.Screen name="List" component={ListScreen}
                                             options={{
                                                 title: 'List',
@@ -29,9 +99,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

@@ -20,8 +20,10 @@
     "react-dom": "18.2.0",
     "react-native": "0.71.3",
     "react-native-gesture-handler": "~2.9.0",
+    "react-native-paper": "^5.4.1",
     "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,15 +52,20 @@ 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);
+      const CardsPromise = await fetch('https://us.api.blizzard.com/hearthstone/cards?locale=en_US&access_token=EUZvGOfXsMKYrjqLJp5mE7IJlhQuELMiPk', 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']) 
-
+      
       
       //@ts-ignore
       const CardsList: Card[] = CardsListJson['cards'].map(elt => new Card(elt["id"] ? elt["id"] : 1,
@@ -72,8 +77,9 @@ export const getAllCards = () => {
       
       //console.log("TOTO")
       
-      //console.log(CardsList)
+      console.log("CardsList")
       //call the action 
+      
       dispatch(setCardsList(CardsList));
       
     } catch (error) {

redux/actions/action_switchMode.tsx

@@ -0,0 +1,13 @@
+import {THEME_CHANGE} from '../constants';
+
+
+
+// switch mode according to what is specified...
+
+//@ts-ignore
+export const switchMode = (mode) => {
+    return {
+        type: THEME_CHANGE,
+        payload: mode,
+    };
+};

redux/constants.tsx

@@ -4,4 +4,6 @@ export const FETCH_DATA = "FETCH_DATA"
 
 export const ADD_FAVORITE_DATA = "ADD_FAVORITE_DATA"
 
-export const DISPLAY_ALL_CARD = "DISPLAY_ALL_CARD"
+export const DISPLAY_ALL_CARD = "DISPLAY_ALL_CARD"
+
+export const THEME_CHANGE = 'THEME_CHANGE';

redux/reducers/appReducer.tsx

@@ -1,13 +1,11 @@
-import {FETCH_DATA, ADD_FAVORITE_DATA} from '../constants'
+import {THEME_CHANGE, FETCH_DATA, ADD_FAVORITE_DATA} from '../constants'
 
 const initialState = {
+    mode: 'light',
     cards: [],
-    favoriteCards: [],
-    // cards: ["C_ace", "C_K", "C_Q", "C_J"],
-    // favoriteCards: [ "C_ace", "C_K"],
+    favoriteCards: []
 }
 
-
 // @ts-ignore
 export default appReducer = (state = initialState, action) => {
     switch (action.type) {
@@ -17,6 +15,10 @@ export default appReducer = (state = initialState, action) => {
         case FETCH_DATA:
         // @ts-ignore
             return {...state, cards: action.payload};
+
+        case THEME_CHANGE:
+            return {...state, mode: action.payload};
+
         default:
             return state;
     }

screens/HomeScreen.tsx

@@ -1,16 +1,26 @@
-
 import { StyleSheet, Text, View, TouchableNativeFeedback } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { NavigationContainer } from '@react-navigation/native';
+import { useTheme } from 'react-native-paper';
 import StackNavigation from '../navigation/StackNavigation' 
 import { Colors } from 'react-native/Libraries/NewAppScreen';
+import {useDispatch, useSelector} from 'react-redux';
+
+
+
 
 //import Button from 'react-bootstrap/Button';
 
 // @ts-ignore //(ta gueule pour l'erreur sur navigation)
 export default function HomeScreen({navigation}) {
+    //@ts-ignore
+    const mode = useSelector(state => state.appReducer.mode);
+
+    const { colors } = useTheme();
+
+    
     return (
-        <View style={styles.container}>
+        <View style={mode === 'light' ? styles.container_light : styles.container_dark}>
             <View style={styles.centered}>
                 <Text style={styles.title}>Mes super Nounours !</Text>
             </View>
@@ -20,18 +30,20 @@ export default function HomeScreen({navigation}) {
                 <Text style={styles.textStyle}>Nous sommes actuellement dans l'écran d'accueil !</Text>
             </View>
         
-            <View>
-                <Text style={styles.t3}> Vous cherchez une entités ? </Text>
-                <TouchableNativeFeedback onPress={() => navigation.navigate("ListScreen")}>
-                    <Text style={styles.ButtonStyle}> Consulter la liste global !</Text>
-                </TouchableNativeFeedback>
-            </View>
+            <View style={styles.MidArea}>
+                <View>
+                    <Text style={styles.t3}> Vous cherchez une entités ? </Text>
+                    <TouchableNativeFeedback onPress={() => navigation.navigate("ListScreen")}>
+                        <Text style={styles.ButtonStyle}> Consulter la liste global !</Text>
+                    </TouchableNativeFeedback>
+                </View>
 
-            <View>
-                <Text style={styles.t3}> Vous avez des entités favorites ? </Text>
-                <TouchableNativeFeedback onPress={() => navigation.navigate("ListFav")}>
-                    <Text style={styles.ButtonStyle}>Aller sur la page de favoris !</Text>
-                </TouchableNativeFeedback>
+                <View>
+                    <Text style={styles.t3}> Vous avez des entités favorites ? </Text>
+                    <TouchableNativeFeedback onPress={() => navigation.navigate("ListFav")}>
+                        <Text style={styles.ButtonStyle}>Aller sur la page de favoris !</Text>
+                    </TouchableNativeFeedback>
+                </View>
             </View>
         </View>
     )
@@ -56,7 +68,11 @@ export default function HomeScreen({navigation}) {
         paddingTop: 50,
         paddingBottom: 50,
         margin: 40,
+        padding: 2,
+
         borderRadius: 15,
+        borderWidth:5,
+        borderColor:"#ababab"
     },
     textStyle: {
         textAlign: "center",
@@ -73,5 +89,22 @@ export default function HomeScreen({navigation}) {
     t3 :{
         fontSize : 20,
         fontWeight: 'bold',
-    }
+    },
+    container_light: {
+        flex: 1,
+        backgroundColor: '#fff',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    container_dark: {
+        flex: 1,
+        backgroundColor: '#3e3e42',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    text_light: {
+        marginBottom: 20,
+        color: '#000'
+    },
+
 });

screens/ListFav.tsx

@@ -3,7 +3,6 @@ import { StatusBar } from 'expo-status-bar';
 import React, { useState } from "react";
 
 import {setFavList } from '../redux/actions/action_setFavList';
-
 //redux
 import {useDispatch, useSelector} from 'react-redux';
 import {useEffect} from 'react';
@@ -72,9 +71,10 @@ const Item = ({title}) => (
 
 export default function Main(){
     const [count, setCount] = useState(0);
-    
+    //@ts-ignore
+    const mode = useSelector(state => state.appReducer.mode);
     return (
-        <View style={styles.container}>
+        <View style={mode === 'light' ? styles.container_light : styles.container_dark}>
             <Text>Maman, J4AI UNE LISTE DE FAVORIS ! !</Text>
             <StatusBar style="auto" />
             <Text>{count}</Text>
@@ -106,5 +106,17 @@ const styles = StyleSheet.create({
     },
     title: {
         fontStyle: "italic",
+    },
+    container_light: {
+        flex: 1,
+        backgroundColor: '#fff',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    container_dark: {
+        flex: 1,
+        backgroundColor: '#121212',
+        alignItems: 'center',
+        justifyContent: 'center',
     }
 });

screens/ListScreen.tsx

@@ -1,5 +1,5 @@
 
-import { StyleSheet, Text, View, Button, TouchableHighlight } from 'react-native';
+import { StyleSheet, Text, View, Button, TouchableHighlight, Pressable } from 'react-native';
 import { StatusBar } from 'expo-status-bar';
 import React, { useState, useEffect } from "react";
 import { FlatList } from 'react-native-gesture-handler';
@@ -11,11 +11,12 @@ import { ThunkAction } from 'redux-thunk';
 //? possiblement à supprimer
 import { getAllCards } from "../redux/actions/actionSelection"
 
-import { StubLib } from '../data/stub';
 import { Card } from '../models/Card';
 import { Image } from 'react-native';
 import { ImageURISource } from 'react-native';
 
+import { switchMode } from '../redux/actions/action_switchMode';
+
 //@ts-ignore
 const Item = ({url}) => (
     // <View style={styles.item}>
@@ -25,20 +26,20 @@ const Item = ({url}) => (
         <Image 
         source={{uri:url}}
         style={{flex:1, minHeight:250, minWidth:180}}/>
-
     </View>
 );
 
 //@ts-ignore
 export default function ListScreen({navigation}){
     const [count, setCount] = useState(0);
-
-
-
-    //  // Initialize the binding content with the application initial state
-
+    
+    //@ts-ignore
+    const theme = useSelector(state => state.theme);
     //@ts-ignore
     const nList = useSelector(state => state.appReducer.cards);
+    //@ts-ignore
+    const mode = useSelector(state => state.appReducer.mode);
+
     // Create a const that will hold the react-redux events dispatcher
     const dispatch = useDispatch();
     
@@ -46,7 +47,6 @@ export default function ListScreen({navigation}){
     // You cannot perform side-effects outside of a useEffect hook
 
     useEffect(() => {
-        console.log("USEEFFECT")
         const loadCards = async () => {
             //@ts-ignore
             await dispatch(getAllCards());
@@ -54,21 +54,20 @@ export default function ListScreen({navigation}){
         loadCards();
     }, [dispatch]);
 
+    // Handle changing the theme mode
 
+    //@ts-ignore
+    const handleThemeChange = (mode) => { 
+        dispatch(switchMode(mode === 'light' ? 'dark' : 'light'));
+    }
 
-    //* Stub
-    // const {getCards} = new StubLib();
-    // const list: Card[] = getCards();
-    // const req =  fetch('https://omgvamp-hearthstone-v1.p.rapidapi.com/cards')
 
-    //https://us.api.blizzard.com/hearthstone/cards/678?locale=en_US
 
     return (
-        <View style={styles.container}>
-            {/* <FlatList data={nList}         
-            renderItem={({item}) => <Item title={item.name} />}
-            keyExtractor={item => item.id}/> */}
-
+        <View style={mode === 'light' ? styles.container_light : styles.container_dark}>
+            <Pressable style={mode === 'light' ? styles.button_white : styles.button_black} onPress={() => handleThemeChange(mode)}>
+                <Text>Switch Mode</Text>
+            </Pressable>
             <FlatList 
                 numColumns={2}
                 data={nList} 
@@ -78,18 +77,9 @@ export default function ListScreen({navigation}){
                     <TouchableHighlight onPress={() => navigation.navigate("ListFav")}>
                         <Item url={item.img}/>
                     </TouchableHighlight>
-                    
-                    // //<Text>{item.name}</Text>
-                    // // <View>
-                    // //     <Image 
-                    // //     source={{uri:item.img}}
-                    // //     style={{flex:1, minHeight:250, minWidth:180}}/>
 
-                    // // </View>
                 } keyExtractor={(item: Card) => item.id.toString()}/>
         </View>
-
-        
     );
 }
 
@@ -121,5 +111,45 @@ const styles = StyleSheet.create({
     },
     title: {
         fontStyle: "italic",
+    },
+
+    ///themes
+    container_light: {
+        flex: 1,
+        backgroundColor: '#fff',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    container_dark: {
+        flex: 1,
+        backgroundColor: '#3e3e42',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    text_light: {
+        marginBottom: 20,
+        color: '#000'
+    },
+    text_dark: {
+        marginBottom: 20,
+        color: "#fff"
+    },
+    button_black: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: 12,
+        paddingHorizontal: 32,
+        borderRadius: 4,
+        elevation: 3,
+        backgroundColor: 'black',
+    },
+    button_white: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: 12,
+        paddingHorizontal: 32,
+        borderRadius: 4,
+        elevation: 3,
+        backgroundColor: 'white',
     }
 });

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;