page artiste avec recherche des artistes

App.tsx

@@ -1,8 +1,8 @@
 import {SafeAreaView, StyleSheet} from 'react-native';
 import React from "react";
-import BottomTabNavigator from "@react-navigation/bottom-tabs/src/navigators/createBottomTabNavigator";
+import NavigationBar from "./componente/Navigation/NavigationBar";
-import NavigationBar from "./componente/NavigationBar";
 import {Provider} from "react-redux";
+
 import store from "./redux/store";
 
 export default function App() {

Model/Album.tsx

@@ -0,0 +1,45 @@
+export class Album{
+    private _id: number;
+    private _name: string;
+    private _coverUrl: string
+    private _date: Date;
+
+    constructor(id: number, name: string, coverUrl: string, date: Date) {
+        this._id = id;
+        this._name = name;
+        this._coverUrl = coverUrl;
+        this._date = date;
+    }
+
+    get id(): number {
+        return this._id;
+    }
+
+    set id(value: number) {
+        this._id = value;
+    }
+
+    get name(): string {
+        return this._name;
+    }
+
+    set name(value: string) {
+        this._name = value;
+    }
+
+    get coverUrl(): string {
+        return this._coverUrl;
+    }
+
+    set coverUrl(value: string) {
+        this._coverUrl = value;
+    }
+
+    get date(): Date {
+        return this._date;
+    }
+
+    set date(value: Date) {
+        this._date = value;
+    }
+}

Model/Artist.tsx

@@ -1,18 +1,27 @@
+import {Album} from "./Album";
+
 export class Artist {
+    private _id: number
     private _name: string;
     private _image: string;
+    private _bio: string;
+    private _listAlbum: Album[];
 
-    constructor(name: string, image: string) {
+    constructor(id: number, name: string, image: string,bio: string) {
+        this._id = id;
         this._name = name;
         this._image = image;
+        this._bio = bio;
     }
 
-
+    get id(): number{
-    public get name(): string {
+        return this._id;
+    }
+    get name(): string {
         return this._name;
     }
 
-    public set name(value: string) {
+    set name(value: string) {
         this._name = value;
     }
 
@@ -23,4 +32,20 @@ export class Artist {
     set image(value: string) {
         this._image = value;
     }
+
+    get bio(): string {
+        return this._bio;
+    }
+
+    set bio(value: string) {
+        this._bio = value;
+    }
+
+    get listAlbum(): Album[] {
+        return this._listAlbum;
+    }
+
+    set listAlbum(value: Album[]) {
+        this._listAlbum = value;
+    }
 }

componente/Album/AlbumCard.tsx

@@ -0,0 +1,32 @@
+// @ts-ignore
+import React from 'react';
+import {View, Image, Text, StyleSheet} from 'react-native';
+
+const AlbumCard = ({ album }) => {
+    console.log(album);
+    return (
+        <View style={styles.container}>
+            <Image source={{ uri: album.coverUrl }} style={styles.image}/>
+            <Text style={styles.name}>{album.name}</Text>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        margin: 10,
+    },
+    image: {
+        width: 50,
+        height: 50,
+        marginRight: 10,
+    },
+    name: {
+        fontSize: 20,
+        fontWeight: 'bold',
+    },
+});
+
+export default AlbumCard;

componente/Album/AlbumList.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import {FlatList, ScrollView, StyleSheet, View} from "react-native";
+import AlbumCard from "./AlbumCard";
+
+const ArtistList = ({ALBUM_LIST}) => {
+    return (
+        <View style={styles.container}>
+            <FlatList
+                data={ALBUM_LIST}
+                renderItem={({ item }) => (
+                    <AlbumCard album={item} />
+                )}
+                keyExtractor={(item) => item.name}
+            />
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        height: 400,
+    }
+});
+
+export default ArtistList;
+
+

componente/Artist/ArtistList.tsx

@@ -1,36 +1,38 @@
 import React from "react";
-import {FlatList} from "react-native";
+import {FlatList, ScrollView} from "react-native";
-import {useDispatch, useSelector} from 'react-redux';
+import {useSelector} from 'react-redux';
 import {useEffect} from 'react';
 
 import ArtistCard from "./ArtistCard";
-import {Artist} from "../../Model/Artist";
-import {getArtistList} from "../../redux/actions/action"
 
-/*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 ArtistList = ({navigation, type}) => {
-    const ARTISTS_LIST = useSelector(state => state.appReducer.artist);
+    // @ts-ignore
-    const dispatch = useDispatch();
+    let ARTISTS_LIST = useSelector((state) => state.ReducerArtist.artists);
+    if(type == "search") {
+        // @ts-ignore
+        ARTISTS_LIST = useSelector((state) => state.ReducerArtist.artistsSearch);
+    }
 
     useEffect(() => {
-        const loadArtist = async () => {
+        console.log('ARTISTS_LIST has changed:', ARTISTS_LIST);
-            await dispatch(getArtistList("em"));
+    }, [ARTISTS_LIST]);
-        };
-        loadArtist();
-    }, [dispatch]);
 
+    console.log("----")
+    console.log(ARTISTS_LIST)
     return (
-        <>
+        <ScrollView>
-            <FlatList data={ARTISTS_LIST} renderItem={({item}) =>
+            <FlatList
-                <ArtistCard navigation={navigation} item={item}/>
+                data={ARTISTS_LIST}
-            } keyExtractor={(item: Artist) => item.name}/>
+                renderItem={({ item }) => (
-        </>
+                    <ArtistCard navigation={navigation} item={item} />
+                )}
+                keyExtractor={(item) => item.name}
+            />
+        </ScrollView>
     );
+
+
 };
 
 export default ArtistList;

componente/Artist/ArtistePage.tsx

@@ -1,14 +1,32 @@
 // @ts-ignore
-import React from 'react';
+import React, {useEffect} from 'react';
 import { View, Image, Text, StyleSheet } from 'react-native';
+import {getAlbumByArtist, getArtistInfo} from "../../redux/actions/action";
+import {useDispatch} from "react-redux";
+import ArtistList from "../Album/AlbumList";
 
 export default function ArtistPage({ route }) {
     const artist = route.params.artist;
+    const dispatch = useDispatch();
+
+    useEffect(() => {
+        const load = async () => {
+            // @ts-ignore
+            await dispatch(getArtistInfo(artist));
+            // @ts-ignore
+            await dispatch(getAlbumByArtist(artist));
+        };
+        load();
+    })
 
     return (
         <View style={styles.container}>
             <Image source={{ uri: artist.image }} style={styles.image} />
             <Text style={styles.name}>{artist.name}</Text>
+            <Text style={styles.bio}>{artist.bio}</Text>
+
+            <Text style={styles.titre}>Liste Album</Text>
+            <ArtistList ALBUM_LIST={artist.listAlbum}/>
         </View>
     );
 };
@@ -17,7 +35,6 @@ const styles = StyleSheet.create({
     container: {
         marginTop:10,
         alignItems: 'center'
-
     },
     image: {
         width: 100,
@@ -28,8 +45,15 @@ const styles = StyleSheet.create({
         borderColor: 'black'
     },
     name: {
-        fontSize: 20,
+        fontSize: 30,
         fontWeight: 'bold',
         textAlign: 'center',
     },
+    bio:{
+
+    },
+    titre:{
+        fontSize: 20,
+        fontWeight: "bold"
+    }
 });

componente/HomePage.tsx

@@ -1,9 +1,10 @@
-// @ts-ignore
+import React, {useState} from 'react';
-import React from 'react';
+import {View, Text, StyleSheet, TextInput} from 'react-native';
-import { View, Text, StyleSheet } from 'react-native';
 import ArtistList from "./Artist/ArtistList";
+import SearchBar from "./SearchBar";
 
 const HomePage = ({navigation}) => {
+
     return (
         <View style={styles.container}>
             <ArtistList navigation={navigation}/>

componente/Navigation/NavigationBar.tsx

@@ -1,19 +1,23 @@
 import {createBottomTabNavigator} from "@react-navigation/bottom-tabs";
 import {NavigationContainer} from "@react-navigation/native";
 import {AntDesign, Ionicons} from '@expo/vector-icons';
-import SettingsPage from "./SettingsPage";
+import SettingsPage from "../SettingsPage";
-import HomePage from "./HomePage";
+import StackNavigationHomePage from "./StackNavigationHomePage";
-import StackNavigation from "./StackNavigation";
+import StackNavigationSearchPage from "./StackNavigationSearchPage";
 
 export default function NavigationBar() {
     const BottomTabNavigator = createBottomTabNavigator();
     return (
         <NavigationContainer >
             <BottomTabNavigator.Navigator initialRouteName="HomeNav" screenOptions={{headerShown: false}}>
-                <BottomTabNavigator.Screen name="HomeNav" component={StackNavigation} options={{
+                <BottomTabNavigator.Screen name="HomeNav" component={StackNavigationHomePage} options={{
                     title: 'Home',
                     tabBarIcon: () => (<AntDesign name="home" size={24} color="black" />)
                 }}/>
+                <BottomTabNavigator.Screen name="Search" component={StackNavigationSearchPage} options={{
+                    title: 'Search',
+                    tabBarIcon: () => (<AntDesign name="search1" size={24} color="black" />)
+                }}/>
                 <BottomTabNavigator.Screen name="Settings" component={SettingsPage} options={{
                     title: 'Settings',
                     tabBarIcon: () => (<Ionicons name="settings-outline" size={24} color="black" />)

componente/Navigation/StackNavigationHomePage.tsx

@@ -1,15 +1,12 @@
 // @ts-ignore
 import React from "react";
-import {NavigationContainer} from "@react-navigation/native";
 import {createStackNavigator} from "@react-navigation/stack";
-import SettingsPage from "./SettingsPage";
+import HomePage from "../HomePage";
-import HomePage from "./HomePage";
+import ArtistePage from "../Artist/ArtistePage";
-import ArtistePage from "./Artist/ArtistePage";
-import NavigationBar from "./NavigationBar";
 
 const Stack = createStackNavigator();
 
-export default function StackNavigation() {
+export default function StackNavigationHomePage() {
     return (
             <Stack.Navigator initialRouteName="Home">
                 <Stack.Screen name="Home" component={HomePage}/>

componente/Navigation/StackNavigationSearchPage.tsx

@@ -0,0 +1,17 @@
+// @ts-ignore
+import React from "react";
+import {createStackNavigator} from "@react-navigation/stack";
+import HomePage from "../HomePage";
+import ArtistePage from "../Artist/ArtistePage";
+import SearchPage from "../SearchPage";
+
+const Stack = createStackNavigator();
+
+export default function StackNavigationSearchPage() {
+    return (
+        <Stack.Navigator initialRouteName="Home">
+            <Stack.Screen name="Search" component={SearchPage}/>
+            <Stack.Screen name="ArtistDetail" component={ArtistePage}/>
+        </Stack.Navigator>
+    )
+}

componente/SearchBar.tsx

@@ -0,0 +1,46 @@
+import React, { useState } from "react";
+import { TextInput, TouchableOpacity, View, StyleSheet } from "react-native";
+import { AntDesign } from "@expo/vector-icons";
+import {searchArtists} from "../redux/actions/action";
+import {useDispatch, useSelector} from "react-redux";
+
+const SearchBar = () => {
+    const [searchText, setSearchText] = useState("");
+
+    const dispatch = useDispatch();
+    const handleSearch = () => {
+        console.log(searchText)
+        const loadArtist = async () => {
+            // @ts-ignore
+            await dispatch(searchArtists(searchText));
+        };
+        loadArtist();
+    };
+
+    return (
+        <View style={styles.container}>
+            <TextInput style={styles.input} value={searchText} onChangeText={setSearchText} placeholder="Search"/>
+            <TouchableOpacity onPress={handleSearch}>
+                <AntDesign name="search1" size={24} color="black" />
+            </TouchableOpacity>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: "row",
+        alignItems: "center",
+        backgroundColor: "#FFFFFF",
+        borderRadius: 5,
+        margin: 10,
+        paddingHorizontal: 5,
+    },
+    input: {
+        flex: 1,
+        fontSize: 18,
+        paddingVertical: 10,
+    },
+});
+
+export default SearchBar;

componente/SearchPage.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import ArtistList from "./Artist/ArtistList";
+import {View} from "react-native";
+import SearchBar from "./SearchBar";
+
+
+const SearchPage = ({ navigation }) => {
+    return (
+        <View>
+            <SearchBar/>
+            <ArtistList navigation={navigation} type={"search"}/>
+        </View>
+    );
+};
+
+export default SearchPage;
+
+

package-lock.json

@@ -22,6 +22,7 @@
         "react": "18.2.0",
         "react-dom": "^18.2.0",
         "react-native": "0.71.3",
+        "react-native-paper": "^5.5.0",
         "react-native-safe-area-context": "4.5.0",
         "react-native-web": "~0.18.11",
         "react-redux": "^8.0.5",
@@ -1799,6 +1800,18 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@callstack/react-theme-provider": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@callstack/react-theme-provider/-/react-theme-provider-3.0.8.tgz",
+      "integrity": "sha512-5U231sYY2sqQOaELX0WBCn+iluV8bFaXIS7em03k4W5Xz0AhGvKlnpLIhDGFP8im/SvNW7/2XoR0BsClhn9t6Q==",
+      "dependencies": {
+        "deepmerge": "^3.2.0",
+        "hoist-non-react-statics": "^3.3.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.3.0"
+      }
+    },
     "node_modules/@colors/colors": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
@@ -16447,6 +16460,31 @@
       "resolved": "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.71.15.tgz",
       "integrity": "sha512-7S3pAuPaQJlhax6EZ4JMsDNpj05TfuzX9gPgWLrFfAIWIFLuJ6aDQYAZy2TEI9QJALPoWrj8LWaqP/DGYh14pw=="
     },
+    "node_modules/react-native-paper": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-5.5.0.tgz",
+      "integrity": "sha512-vzT4LLi0SIYm8fvG/n5ikXp7YqkHw/86DAYhBYbfFNxtktmYRjmq9p2HeEKWbXh+/c9n+R8IWiXhPZjXtIRWQA==",
+      "dependencies": {
+        "@callstack/react-theme-provider": "^3.0.8",
+        "color": "^3.1.2",
+        "use-latest-callback": "^0.1.5"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*",
+        "react-native-safe-area-context": "*",
+        "react-native-vector-icons": "*"
+      }
+    },
+    "node_modules/react-native-paper/node_modules/color": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
+      "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
+      "dependencies": {
+        "color-convert": "^1.9.3",
+        "color-string": "^1.6.0"
+      }
+    },
     "node_modules/react-native-safe-area-context": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.5.0.tgz",
@@ -16470,6 +16508,79 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-vector-icons": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-9.2.0.tgz",
+      "integrity": "sha512-wKYLaFuQST/chH3AJRjmOLoLy3JEs1JR6zMNgTaemFpNoXs0ztRnTxcxFD9xhX7cJe1/zoN5BpQYe7kL0m5yyA==",
+      "peer": true,
+      "dependencies": {
+        "prop-types": "^15.7.2",
+        "yargs": "^16.1.1"
+      },
+      "bin": {
+        "fa5-upgrade": "bin/fa5-upgrade.sh",
+        "generate-icon": "bin/generate-icon.js"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/cliui": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+      "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+      "peer": true,
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^7.0.0"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "peer": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/yargs": {
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+      "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+      "peer": true,
+      "dependencies": {
+        "cliui": "^7.0.2",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.0",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^20.2.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/yargs-parser": {
+      "version": "20.2.9",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
+      "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/react-native-web": {
       "version": "0.18.12",
       "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.18.12.tgz",
@@ -21789,6 +21900,15 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@callstack/react-theme-provider": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@callstack/react-theme-provider/-/react-theme-provider-3.0.8.tgz",
+      "integrity": "sha512-5U231sYY2sqQOaELX0WBCn+iluV8bFaXIS7em03k4W5Xz0AhGvKlnpLIhDGFP8im/SvNW7/2XoR0BsClhn9t6Q==",
+      "requires": {
+        "deepmerge": "^3.2.0",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "@colors/colors": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
@@ -33087,6 +33207,27 @@
       "resolved": "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.71.15.tgz",
       "integrity": "sha512-7S3pAuPaQJlhax6EZ4JMsDNpj05TfuzX9gPgWLrFfAIWIFLuJ6aDQYAZy2TEI9QJALPoWrj8LWaqP/DGYh14pw=="
     },
+    "react-native-paper": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-5.5.0.tgz",
+      "integrity": "sha512-vzT4LLi0SIYm8fvG/n5ikXp7YqkHw/86DAYhBYbfFNxtktmYRjmq9p2HeEKWbXh+/c9n+R8IWiXhPZjXtIRWQA==",
+      "requires": {
+        "@callstack/react-theme-provider": "^3.0.8",
+        "color": "^3.1.2",
+        "use-latest-callback": "^0.1.5"
+      },
+      "dependencies": {
+        "color": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
+          "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
+          "requires": {
+            "color-convert": "^1.9.3",
+            "color-string": "^1.6.0"
+          }
+        }
+      }
+    },
     "react-native-safe-area-context": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.5.0.tgz",
@@ -33103,6 +33244,65 @@
         "warn-once": "^0.1.0"
       }
     },
+    "react-native-vector-icons": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-9.2.0.tgz",
+      "integrity": "sha512-wKYLaFuQST/chH3AJRjmOLoLy3JEs1JR6zMNgTaemFpNoXs0ztRnTxcxFD9xhX7cJe1/zoN5BpQYe7kL0m5yyA==",
+      "peer": true,
+      "requires": {
+        "prop-types": "^15.7.2",
+        "yargs": "^16.1.1"
+      },
+      "dependencies": {
+        "cliui": {
+          "version": "7.0.4",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+          "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+          "peer": true,
+          "requires": {
+            "string-width": "^4.2.0",
+            "strip-ansi": "^6.0.0",
+            "wrap-ansi": "^7.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+          "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+          "peer": true,
+          "requires": {
+            "ansi-regex": "^5.0.1"
+          }
+        },
+        "y18n": {
+          "version": "5.0.8",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+          "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+          "peer": true
+        },
+        "yargs": {
+          "version": "16.2.0",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+          "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+          "peer": true,
+          "requires": {
+            "cliui": "^7.0.2",
+            "escalade": "^3.1.1",
+            "get-caller-file": "^2.0.5",
+            "require-directory": "^2.1.1",
+            "string-width": "^4.2.0",
+            "y18n": "^5.0.5",
+            "yargs-parser": "^20.2.2"
+          }
+        },
+        "yargs-parser": {
+          "version": "20.2.9",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
+          "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
+          "peer": true
+        }
+      }
+    },
     "react-native-web": {
       "version": "0.18.12",
       "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.18.12.tgz",

package.json

@@ -23,6 +23,7 @@
     "react": "18.2.0",
     "react-dom": "^18.2.0",
     "react-native": "0.71.3",
+    "react-native-paper": "^5.5.0",
     "react-native-safe-area-context": "4.5.0",
     "react-native-web": "~0.18.11",
     "react-redux": "^8.0.5",

redux/actions/action.ts

@@ -1,68 +0,0 @@
-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/actions/action.tsx

@@ -0,0 +1,114 @@
+import {FETCH_ARTISTE_SEARCH,ACCESS_TOKEN} from '../constants';
+import {Artist} from "../../Model/Artist";
+import {Album} from "../../Model/Album";
+
+
+export const setArtistList = (artistList: Artist[]) => {
+    return {
+        type: FETCH_ARTISTE_SEARCH,
+        payload: artistList,
+    };
+}
+
+export const searchArtists = (recherche) => {
+    console.log("getArtistList");
+    return async dispatch => {
+        try{
+                const response = await fetch(`https://genius.com/api/search/artists?page=1&q=${encodeURIComponent(recherche)}`);
+
+                if (!response.ok) {
+                    throw new Error('[searchArtists] Network response was not ok');
+                }
+
+                const artistListJson = await response.json();
+                console.log(artistListJson);
+
+                console.log("ici")
+                const artistList: Artist[] = artistListJson.response.sections[0].hits.map(hit =>
+                    new Artist(hit.result.id, hit.result.name, hit.result.image_url,"")
+                );
+
+                dispatch(setArtistList(artistList));
+            } catch (error) {
+                console.error('Error:', error);
+            }
+    }
+}
+
+export const getArtistInfo = (artist) => {
+    console.log(artist._id)
+    return async dispatch => {
+        try{
+            const response = await fetch(`https://api.genius.com/artists/${artist._id}`, {
+                headers: {
+                    'Authorization': `Bearer ${ACCESS_TOKEN}`,
+                    'Content-Type': 'application/json'
+                }
+            })
+
+            if (!response.ok) {
+                console.log(response);
+                throw new Error('[getArtistInfo] Network response was not ok');
+            }
+
+            const artistInfoJson = await response.json();
+            artist.bio = artistInfoJson.response.artist.description.dom.children[0].children[0];
+
+        } catch (error) {
+            console.error('Error:', error);
+        }
+    }
+}
+
+export const getSongByArtist = (artist) => {
+    return async dispatch => {
+        try{
+            const response = await fetch(`https://api.genius.com/artists/${artist.id}/songs`, {
+                headers: {
+                    'Authorization': `Bearer ${ACCESS_TOKEN}`,
+                    'Content-Type': 'application/json'
+                }
+            })
+
+            if (!response.ok) {
+                console.log(response);
+                throw new Error('[getSongByArtist] Network response was not ok');
+            }
+
+            const artistSongsJson = await response.json();
+            console.log(artistSongsJson);
+            artistSongsJson.response.songs.map((hit: any) => console.log(hit));
+
+        } catch (error) {
+            console.error('Error:', error);
+        }
+    }
+}
+
+export const getAlbumByArtist = (artist) => {
+    return async dispatch => {
+        try{
+            const response = await fetch(`https://genius.com/api/artists/${artist.id}/albums`)
+
+            if (!response.ok) {
+                console.log(response);
+                throw new Error('[getAlbumByArtist] Network response was not ok');
+            }
+
+            const artistAlbumJson = await response.json();
+            const albumList: Album[] = artistAlbumJson.response.albums.map((album: any) =>
+                new Album(album.id,
+                    album.name,
+                    album.cover_art_thumbnail_url,
+                    // @ts-ignore
+                    Date(album.release_date_components.day, album.release_date_components.month, album.release_date_components.year)
+                )
+            );
+            artist.listAlbum = albumList;
+            console.log(artist.listAlbum);
+
+        } catch (error) {
+            console.error('Error:', error);
+        }
+    }
+}

redux/constants.ts

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

redux/constants.tsx

@@ -0,0 +1,5 @@
+export const FETCH_ARTISTE = 'FETCH_ARTISTE';
+export const FETCH_ARTISTE_SEARCH = 'FETCH_ARTISTE_SEARCH';
+
+
+export const ACCESS_TOKEN = 'M0GAzZXbwqfifGOTxfB7lLmEWlRNadkFGV99E9SQCgirIX58kbcvEFYhu2WajbGH';

redux/reducers/reducer.ts

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

redux/reducers/reducerArtist.tsx

@@ -0,0 +1,19 @@
+import {FETCH_ARTISTE, FETCH_ARTISTE_SEARCH} from '../constants';
+
+const initialState = {
+    artists: [],
+    artistsSearch: []
+}
+
+export default function ReducerArtist(state = initialState, action){
+    switch (action.type) {
+        case FETCH_ARTISTE:
+            // @ts-ignore
+            return {...state, artists: action.payload};
+        case FETCH_ARTISTE_SEARCH:
+            return {...state, artistsSearch: action.payload};
+
+        default:
+            return state;
+    }
+}

redux/store.ts

@@ -1,15 +0,0 @@
-import {configureStore} from '@reduxjs/toolkit'
-import appReducer from './reducers/reducer';
-
-// Reference here all your application reducers
-const reducer = {
-    appReducer: appReducer,
-}
-
-// @ts-ignore
-const store = configureStore({
-        reducer,
-    },
-);
-
-export default store;

redux/store.tsx

@@ -0,0 +1,15 @@
+import {configureStore} from '@reduxjs/toolkit'
+import ReducerArtist from './reducers/reducerArtist';
+
+// Reference here all your application reducers
+const reducer = {
+    ReducerArtist: ReducerArtist,
+}
+
+const store = configureStore(
+    {
+        reducer,
+        middleware: (getDefaultMiddleware ) => getDefaultMiddleware({serializableCheck : false})
+    } );
+
+export default store;