diff --git a/App.js b/App.js index 79a53b4..987e466 100644 --- a/App.js +++ b/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 ( <> - - - - + + + + + + ); } diff --git a/componente/Artist/ArtistList.tsx b/componente/Artist/ArtistList.tsx index 4ad1cf2..8e35686 100644 --- a/componente/Artist/ArtistList.tsx +++ b/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 ( <> diff --git a/redux/actions/action.ts b/redux/actions/action.ts new file mode 100644 index 0000000..3652c37 --- /dev/null +++ b/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); + } + } +} \ No newline at end of file diff --git a/redux/constants.ts b/redux/constants.ts new file mode 100644 index 0000000..8055413 --- /dev/null +++ b/redux/constants.ts @@ -0,0 +1,3 @@ +export const FETCH_ARTISTE = 'FETCH_ARTISTE'; + +export const ACCESS_TOKEN = 'nhmGn3gceDRH04YeeCqOSg1nD3cAXxIM_MOAOdh7lADuizSGEIuhAIT1dZ6hmkDU'; diff --git a/reduxStore/reducer.js b/redux/reducers/reducer.ts similarity index 64% rename from reduxStore/reducer.js rename to redux/reducers/reducer.ts index db59b5a..5f2b847 100644 --- a/reduxStore/reducer.js +++ b/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}; diff --git a/reduxStore/store.js b/redux/store.ts similarity index 76% rename from reduxStore/store.js rename to redux/store.ts index b320afc..b1cb83a 100644 --- a/reduxStore/store.js +++ b/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 = { diff --git a/reduxStore/action.js b/reduxStore/action.js deleted file mode 100644 index dbfd2eb..0000000 --- a/reduxStore/action.js +++ /dev/null @@ -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, - }; -} \ No newline at end of file