probleme de conflit : debut du switch mais stash sur la mauvaise branche, voir si recupérable

App.tsx

@@ -1,19 +1,54 @@
 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 { createStackNavigator } from '@react-navigation/stack';
+
+import {useDispatch, useSelector} from 'react-redux';
+
+// Import your application store
+//import store from "./redux/store";
+
 
 import {
   SafeAreaView,
   SafeAreaProvider,
 } from 'react-native-safe-area-context';
 
+import { Provider } from 'react-redux';
+
+
+
 export default function App() {
     //safearea
     //mettre le navigateur ayant le princ
+
   return (
     <SafeAreaProvider>
       <Navigation/>
     </SafeAreaProvider>
   );
 }
+
+
+
+
+
+// ///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>
+// //     </>
+// //   );
+// // }

data/stub.ts

@@ -1,188 +0,0 @@
-export class City {
-  private _name: string;
-  private _latitude: number;
-  private _longitude: number;
-
-  constructor(name: string, latitude: number, longitude: number) {
-    this._name = name;
-    this._latitude = latitude;
-    this._longitude = longitude;
-  }
-
-  get name(): string {
-    return this._name;
-  }
-
-  set name(value: string) {
-    this._name = value;
-  }
-
-  get latitude(): number {
-    return this._latitude;
-  }
-
-  set latitude(value: number) {
-    this._latitude = value;
-  }
-
-  get longitude(): number {
-    return this._longitude;
-  }
-
-  set longitude(value: number) {
-    this._longitude = value;
-  }
-}
-
-export class Weather {
-  private _at: string;
-  private _visibility: number;
-  private _weatherType: string;
-  private _weatherDescription: string;
-  private _temperature: number;
-  private _temperatureFeelsLike: number;
-  private _humidity: number;
-  private _windSpeed: number;
-  private _pressure: number;
-  private _city: City;
-
-  constructor(at: string, visibility: number, weatherType: string, weatherDescription: string, temperature: number, temperatureFeelsLike: number, humidity: number, windSpeed: number, pressure: number, city: City) {
-    this._at = at;
-    this._visibility = visibility;
-    this._weatherType = weatherType;
-    this._weatherDescription = weatherDescription;
-    this._temperature = temperature;
-    this._temperatureFeelsLike = temperatureFeelsLike;
-    this._humidity = humidity;
-    this._windSpeed = windSpeed;
-    this._pressure = pressure;
-    this._city = city;
-  }
-
-  get at(): string {
-    return this._at;
-  }
-
-  set at(value: string) {
-    this._at = value;
-  }
-
-  get visibility(): number {
-    return this._visibility;
-  }
-
-  set visibility(value: number) {
-    this._visibility = value;
-  }
-
-  get weatherType(): string {
-    return this._weatherType;
-  }
-
-  set weatherType(value: string) {
-    this._weatherType = value;
-  }
-
-  get weatherDescription(): string {
-    return this._weatherDescription;
-  }
-
-  set weatherDescription(value: string) {
-    this._weatherDescription = value;
-  }
-
-  get temperature(): number {
-    return this._temperature;
-  }
-
-  set temperature(value: number) {
-    this._temperature = value;
-  }
-
-  get temperatureFeelsLike(): number {
-    return this._temperatureFeelsLike;
-  }
-
-  set temperatureFeelsLike(value: number) {
-    this._temperatureFeelsLike = value;
-  }
-
-  get humidity(): number {
-    return this._humidity;
-  }
-
-  set humidity(value: number) {
-    this._humidity = value;
-  }
-
-  get windSpeed(): number {
-    return this._windSpeed;
-  }
-
-  set windSpeed(value: number) {
-    this._windSpeed = value;
-  }
-
-  get pressure(): number {
-    return this._pressure;
-  }
-
-  set pressure(value: number) {
-    this._pressure = value;
-  }
-
-  get city(): City {
-    return this._city;
-  }
-
-  set city(value: City) {
-    this._city = value;
-  }
-}
-
-export const CITIES_DATA: City[] = [
-  new City("Paris", 48.866667, 2.333333),
-  new City("Clermont-Ferrand", 45.777222, 3.087025),
-  new City("Lyon", 45.764043, 4.835659),
-  new City("Marseille", 43.296482, 5.36978),
-  new City("Bruxelles", 50.85034, 4.35171),
-];
-
-export const FAVORITE_CITY_DATA =
-  new City("Clermont-Ferrand", 45.777222, 3.087025);
-
-export const DEFAULT_SELECTED_CITY_DATA: City =
-  new City("Paris", 48.866667, 2.333333);
-
-export const WEATHER_DATA: Weather[] = [
-  new Weather("2023-01-22 09:55:59", 10000, "Nuageux",
-    "couvert", 0.52, -4.34,
-    82, 5.14, 1032,
-    new City("Paris", 48.866667, 2.333333)
-  ),
-  new Weather("2023-01-22 09:55:59", 10000, "Nuageux",
-    "couvert", 0.52, -4.34,
-    82, 5.14, 1032,
-    new City("Clermont-Ferrand", 45.777222, 3.087025)
-  ),
-  new Weather("2023-01-22 09:55:59", 10000, "Nuageux",
-    "couvert", 0.52, -4.34,
-    82, 5.14, 1032,
-    new City("Lyon", 45.764043, 4.835659)
-  ),
-  new Weather("2023-01-22 09:55:59", 10000, "Nuageux",
-    "couvert", 0.52, -4.34,
-    82, 5.14, 1032,
-    new City("Marseille", 43.296482, 5.36978)
-  ),
-  new Weather("2023-01-22 09:55:59", 10000, "Nuageux",
-    "couvert", 0.52, -4.34,
-    82, 5.14, 1032,
-    new City("Bruxelles", 50.85034, 4.35171)
-  ),
-];
-
-export const getCurrentWeather = (cityName: string) => {
-  if (cityName === undefined) return {};
-  return WEATHER_DATA.filter(elt => elt.city.name === cityName)[0];
-}

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

@@ -0,0 +1,9 @@
+
+
+export const FETCH_DATA = "FETCH_DATA"
+
+export const ADD_FAVORITE_DATA = "ADD_FAVORITE_DATA"
+
+export const DISPLAY_ALL_CARD = "DISPLAY_ALL_CARD"
+
+export const THEME_CHANGE = 'THEME_CHANGE';

redux/reducers/appReducer.tsx

@@ -0,0 +1,29 @@
+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"],
+}
+
+
+// @ts-ignore
+export default appReducer = (state = initialState, action) => {
+    switch (action.type) {
+        case ADD_FAVORITE_DATA:
+        // @ts-ignore
+            return {...state, favoriteCards: state.favoriteCards.push(action.payload)};
+        case FETCH_DATA:
+        // @ts-ignore
+            return {...state, cards: action.payload};
+
+        case THEME_CHANGE:
+            return {...state,mode: action.payload};
+
+        default:
+            return state;
+    }
+}
+

screens/ListScreen.tsx

@@ -4,16 +4,108 @@ import { StatusBar } from 'expo-status-bar';
 import React, { useState } from "react";
 
 
-export default function Main(){
+//? possiblement à supprimer
+import { getAllCards } from "../redux/actions/actionSelection"
+
+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}>
+    //     <Text style={styles.title}>{title}</Text>
+    // </View>
+    <View>
+        <Image 
+        source={{uri:url}}
+        style={{flex:1, minHeight:250, minWidth:180}}/>
+
+    </View>
+);
+
+//@ts-ignore
+export default function ListScreen({navigation}){
     const [count, setCount] = useState(0);
+
+    // get the current theme
+    //@ts-ignore
+    const theme = useSelector(state => state.theme);
+
+    //  // Initialize the binding content with the application initial state
+
+    //@ts-ignore
+    const nList = useSelector(state => state.appReducer.cards);
+    // Create a const that will hold the react-redux events dispatcher
+    const dispatch = useDispatch();
+    
+    // Let's define a hook that will be used to update the rendered state after the return will be called
+    // You cannot perform side-effects outside of a useEffect hook
+
+    useEffect(() => {
+        const loadCards = async () => {
+            //@ts-ignore
+            await dispatch(getAllCards());
+        };
+        loadCards();
+    }, [dispatch]);
+
+
+
+    //* 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
+
+
+    //* Themes *//
+    
+    // define a component mode state
+
+    const [mode, setMode] = useState(theme.mode);
+
+    // Handle changing the theme mode
+    const handleThemeChange = () => { 
+        dispatch(switchMode(theme.mode === 'light' ? 'dark' : 'light'));
+    }
+
+    // Update the app Incase the theme mode changes
+    useEffect(() => { 
+        setMode(theme.mode);
+    }, [theme]);
+
+
+
     return (
         <View style={styles.container}>
-            <View style={styles.border}>
+            {/* <FlatList data={nList}         
-                <Text>Maman, prend la caméra ! !</Text>
+            renderItem={({item}) => <Item title={item.name} />}
-                <StatusBar style="auto" />
+            keyExtractor={item => item.id}/> */}
-                <Text>{count}</Text>
+            <View style={styles.container}>
-                <Button onPress={()=> setCount(count+1)} title="+1"/>
+                <Button onPress={()=> theme.mode === 'light' ? 'dark' : 'light'} title="Switch Theme"/>
             </View>
+            <FlatList 
+                numColumns={2}
+                data={nList} 
+                renderItem={({item}) =>
+                    
+                    //<TouchableHighlight onPress={() => navigation.navigate("CardsDetails", {"card": item})}> //* mettre la page de detail ici, renvoi a home pour l'instant
+                    <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>
     );
 }
@@ -38,5 +130,40 @@ const styles = StyleSheet.create({
         borderColor : '#00ffaa',
         alignItems: 'center',
         justifyContent: 'center',
+    },
+    item: {
+        borderRadius : 15,
+        backgroundColor: '#efefef',
+        padding: 20,
+        margin : 10,
+    },
+    title: {
+        fontStyle: "italic",
+    },
+    container_light: {
+        flex: 1,
+        backgroundColor: '#fff',
+        alignItems: 'center',
+        justifyContent: 'center',
+    }
+
+    ,
+    container_dark: {
+        flex: 1,
+        backgroundColor: '#121212',
+        alignItems: 'center',
+        justifyContent: 'center',
+    }
+
+    ,
+    text_light: {
+        marginBottom: 20,
+        color: '#000'
+    }
+
+    ,
+    text_dark: {
+        marginBottom: 20,
+        color: "#fff"
     }
 });