add redux + debut utilisation api

App.js

@@ -2,14 +2,18 @@ import {SafeAreaView, StyleSheet} from 'react-native';
 import React from "react";
 import BottomTabNavigator from "@react-navigation/bottom-tabs/src/navigators/createBottomTabNavigator";
 import NavigationBar from "./componente/NavigationBar";
+import {Provider} from "react-redux";
+import store from "./redux/store";
 
 export default function App() {
     return (
     <>
-        <SafeAreaView style={styles.topSafeArea}/>
-        <SafeAreaView style={styles.mainSafeArea}>
-            <NavigationBar/>
-        </SafeAreaView>
+        <Provider store={store}>
+            <SafeAreaView style={styles.topSafeArea}/>
+            <SafeAreaView style={styles.mainSafeArea}>
+                <NavigationBar/>
+            </SafeAreaView>
+        </Provider>
     </>
   );
 }

componente/Artist/ArtistList.tsx

@@ -1,40 +1,29 @@
 import React from "react";
-import {Button, FlatList, TouchableNativeFeedback} from "react-native";
-import ArtistCard from "./ArtistCard";
-
-export class Artist {
-    private _name: string;
-    private _image: string;
-
-    constructor(name: string, image: string) {
-        this._name = name;
-        this._image = image;
-    }
-
-    public get name(): string {
-        return this._name;
-    }
-
-    public set name(value: string) {
-        this._name = value;
-    }
+import {FlatList} from "react-native";
+import {useDispatch, useSelector} from 'react-redux';
+import {useEffect} from 'react';
 
-    get image(): string {
-        return this._image;
-    }
-
-    set image(value: string) {
-        this._image = value;
-    }
-}
+import ArtistCard from "./ArtistCard";
+import {Artist} from "../../Model/Artist";
+import {getArtistList} from "../../redux/actions/action"
 
-const ARTISTS_LIST: Artist[] = [
+/*const ARTISTS_LIST: Artist[] = [
     new Artist("Eminem", "https://images.genius.com/76c536a17ca35f7edd1f78e129609fe0.573x573x1.jpg"),
     new Artist("Kendrick Lamar", "https://images.genius.com/d6d96651b423fa5a83c38ee2a4c6c939.1000x1000x1.jpg"),
     new Artist("J. Cole", "https://images.genius.com/84a98a8d26b13b7311aa2359ebade757.1000x1000x1.jpg"),
-];
+];*/
 
 const ArtistList = ({navigation}) => {
+    const ARTISTS_LIST = useSelector(state => state.appReducer.artist);
+    const dispatch = useDispatch();
+
+    useEffect(() => {
+        const loadArtist = async () => {
+            await dispatch(getArtistList("em"));
+        };
+        loadArtist();
+    }, [dispatch]);
+
     return (
         <>
             <FlatList data={ARTISTS_LIST} renderItem={({item}) =>

redux/actions/action.ts

@@ -0,0 +1,68 @@
+import {FETCH_ARTISTE,ACCESS_TOKEN} from '../constants';
+import {Artist} from "../../Model/Artist";
+
+
+export const setArtistList = (artistList: Artist[]) => {
+    return {
+        type: FETCH_ARTISTE,
+        payload: artistList,
+    };
+}
+
+export const getArtistList = (recherche) => {
+    return async dispatch => {
+        try{
+                const response = await fetch(`https://genius.com/api/search/artists?q=${encodeURIComponent(recherche)}`);
+
+                if (!response.ok) {
+                    throw new Error('Network response was not ok');
+                }
+
+                const artistListJson = await response.json();
+                console.log(artistListJson);
+
+
+                /*artistListJson.response.hits.map((hit: any) =>
+                    /*new Artist(hit.result.name, hit.result.image_url)*/
+                    //console.log(hit)
+                //);
+                const artistList: Artist[] = artistListJson.response.sections[0].hits.map(hit => new Artist(hit.result.name, hit.result.image_url));
+
+                console.log(artistList);
+
+
+                dispatch(setArtistList(artistList));
+            } catch (error) {
+                console.error('Error:', error);
+            }
+    }
+}
+
+export const getArtistInfo = (idArtist) => {
+    return async dispatch => {
+        try{
+            const response = await fetch(`https://api.genius.com/artists/${idArtist}`, {
+                headers: {
+                    Authorization: `Bearer ${ACCESS_TOKEN}`
+                }
+            })
+
+            if (!response.ok) {
+                throw new Error('Network response was not ok');
+            }
+
+            const artistInfoJson = await response.json();
+            console.log(artistInfoJson);
+
+
+            /*const artistList: Artist[] = artistListJson.response.hits.map((hit: any) =>
+                new Artist(hit.result.primary_artist.name, hit.result.primary_artist.age)
+            );*/
+
+
+            //dispatch(setArtistList(artistList));
+        } catch (error) {
+            console.error('Error:', error);
+        }
+    }
+}

redux/constants.ts

@@ -0,0 +1,3 @@
+export const FETCH_ARTISTE = 'FETCH_ARTISTE';
+
+export const ACCESS_TOKEN = 'nhmGn3gceDRH04YeeCqOSg1nD3cAXxIM_MOAOdh7lADuizSGEIuhAIT1dZ6hmkDU';

redux/reducers/reducer.ts

@@ -1,8 +1,10 @@
+import {FETCH_ARTISTE} from '../constants';
+
 const initialState = {
     artists: [],
 }
 
-export default appReducer = (state = initialState, action) => {
+export default function appReducer(state = initialState, action){
     switch (action.type) {
         case FETCH_ARTISTE:
             return {...state, artists: action.payload};

redux/store.ts

@@ -1,5 +1,5 @@
 import {configureStore} from '@reduxjs/toolkit'
-import appReducer from './appReducer';
+import appReducer from './reducers/reducer';
 
 // Reference here all your application reducers
 const reducer = {

reduxStore/action.js

@@ -1,9 +0,0 @@
-import {FETCH_ARTISTE} from '../constants';
-import Artist from '../defineObject/Artist';
-
-export const setArtistList = (ArtistList: Artist[]) => {
-    return {
-        type: FETCH_ARTISTE,
-        payload: ArtistList,
-    };
-}