From b59f0d961ca9c29fafd82f363a3bc0285fb7c056 Mon Sep 17 00:00:00 2001 From: gorky1234 Date: Thu, 6 Apr 2023 08:00:32 +0200 Subject: [PATCH] page artiste avec recherche des artistes --- App.js => App.tsx | 4 +- Model/Album.tsx | 45 ++++ Model/Artist.tsx | 33 ++- componente/Album/AlbumCard.tsx | 32 +++ componente/Album/AlbumList.tsx | 27 +++ componente/Artist/ArtistList.tsx | 46 ++-- componente/Artist/ArtistePage.tsx | 30 ++- componente/HomePage.tsx | 7 +- componente/{ => Navigation}/NavigationBar.tsx | 12 +- .../StackNavigationHomePage.tsx} | 9 +- .../Navigation/StackNavigationSearchPage.tsx | 17 ++ componente/SearchBar.tsx | 46 ++++ componente/SearchPage.tsx | 18 ++ package-lock.json | 200 ++++++++++++++++++ package.json | 1 + redux/actions/action.ts | 68 ------ redux/actions/action.tsx | 114 ++++++++++ redux/constants.ts | 3 - redux/constants.tsx | 5 + redux/reducers/reducer.ts | 14 -- redux/reducers/reducerArtist.tsx | 19 ++ redux/store.ts | 15 -- redux/store.tsx | 15 ++ 23 files changed, 636 insertions(+), 144 deletions(-) rename App.js => App.tsx (80%) create mode 100644 Model/Album.tsx create mode 100644 componente/Album/AlbumCard.tsx create mode 100644 componente/Album/AlbumList.tsx rename componente/{ => Navigation}/NavigationBar.tsx (67%) rename componente/{StackNavigation.tsx => Navigation/StackNavigationHomePage.tsx} (58%) create mode 100644 componente/Navigation/StackNavigationSearchPage.tsx create mode 100644 componente/SearchBar.tsx create mode 100644 componente/SearchPage.tsx delete mode 100644 redux/actions/action.ts create mode 100644 redux/actions/action.tsx delete mode 100644 redux/constants.ts create mode 100644 redux/constants.tsx delete mode 100644 redux/reducers/reducer.ts create mode 100644 redux/reducers/reducerArtist.tsx delete mode 100644 redux/store.ts create mode 100644 redux/store.tsx diff --git a/App.js b/App.tsx similarity index 80% rename from App.js rename to App.tsx index 987e466..52b8082 100644 --- a/App.js +++ b/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/NavigationBar"; +import NavigationBar from "./componente/Navigation/NavigationBar"; import {Provider} from "react-redux"; + import store from "./redux/store"; export default function App() { diff --git a/Model/Album.tsx b/Model/Album.tsx new file mode 100644 index 0000000..69a9517 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/Model/Artist.tsx b/Model/Artist.tsx index e67ec34..f7dbf80 100644 --- a/Model/Artist.tsx +++ b/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; } - - public get name(): string { + get id(): number{ + 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; + } } \ No newline at end of file diff --git a/componente/Album/AlbumCard.tsx b/componente/Album/AlbumCard.tsx new file mode 100644 index 0000000..2f2a6a6 --- /dev/null +++ b/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 ( + + + {album.name} + + ); +}; + +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; diff --git a/componente/Album/AlbumList.tsx b/componente/Album/AlbumList.tsx new file mode 100644 index 0000000..ec9fdbe --- /dev/null +++ b/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 ( + + ( + + )} + keyExtractor={(item) => item.name} + /> + + ); +}; + +const styles = StyleSheet.create({ + container: { + height: 400, + } +}); + +export default ArtistList; + + diff --git a/componente/Artist/ArtistList.tsx b/componente/Artist/ArtistList.tsx index 8e35686..9a3b342 100644 --- a/componente/Artist/ArtistList.tsx +++ b/componente/Artist/ArtistList.tsx @@ -1,36 +1,38 @@ import React from "react"; -import {FlatList} from "react-native"; -import {useDispatch, useSelector} from 'react-redux'; +import {FlatList, ScrollView} from "react-native"; +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 ARTISTS_LIST = useSelector(state => state.appReducer.artist); - const dispatch = useDispatch(); +const ArtistList = ({navigation, type}) => { + // @ts-ignore + let ARTISTS_LIST = useSelector((state) => state.ReducerArtist.artists); + if(type == "search") { + // @ts-ignore + ARTISTS_LIST = useSelector((state) => state.ReducerArtist.artistsSearch); + } useEffect(() => { - const loadArtist = async () => { - await dispatch(getArtistList("em")); - }; - loadArtist(); - }, [dispatch]); + console.log('ARTISTS_LIST has changed:', ARTISTS_LIST); + }, [ARTISTS_LIST]); + console.log("----") + console.log(ARTISTS_LIST) return ( - <> - - - } keyExtractor={(item: Artist) => item.name}/> - + + ( + + )} + keyExtractor={(item) => item.name} + /> + ); + + }; export default ArtistList; diff --git a/componente/Artist/ArtistePage.tsx b/componente/Artist/ArtistePage.tsx index dc65187..ac7008c 100644 --- a/componente/Artist/ArtistePage.tsx +++ b/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 ( {artist.name} + {artist.bio} + + Liste Album + ); }; @@ -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" + } }); \ No newline at end of file diff --git a/componente/HomePage.tsx b/componente/HomePage.tsx index 4a3cd5f..5efea50 100644 --- a/componente/HomePage.tsx +++ b/componente/HomePage.tsx @@ -1,9 +1,10 @@ -// @ts-ignore -import React from 'react'; -import { View, Text, StyleSheet } from 'react-native'; +import React, {useState} from 'react'; +import {View, Text, StyleSheet, TextInput} from 'react-native'; import ArtistList from "./Artist/ArtistList"; +import SearchBar from "./SearchBar"; const HomePage = ({navigation}) => { + return ( diff --git a/componente/NavigationBar.tsx b/componente/Navigation/NavigationBar.tsx similarity index 67% rename from componente/NavigationBar.tsx rename to componente/Navigation/NavigationBar.tsx index f3c32ea..491fb65 100644 --- a/componente/NavigationBar.tsx +++ b/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 HomePage from "./HomePage"; -import StackNavigation from "./StackNavigation"; +import SettingsPage from "../SettingsPage"; +import StackNavigationHomePage from "./StackNavigationHomePage"; +import StackNavigationSearchPage from "./StackNavigationSearchPage"; export default function NavigationBar() { const BottomTabNavigator = createBottomTabNavigator(); return ( - () }}/> + () + }}/> () diff --git a/componente/StackNavigation.tsx b/componente/Navigation/StackNavigationHomePage.tsx similarity index 58% rename from componente/StackNavigation.tsx rename to componente/Navigation/StackNavigationHomePage.tsx index 4f5975f..3283e98 100644 --- a/componente/StackNavigation.tsx +++ b/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 ArtistePage from "./Artist/ArtistePage"; -import NavigationBar from "./NavigationBar"; +import HomePage from "../HomePage"; +import ArtistePage from "../Artist/ArtistePage"; const Stack = createStackNavigator(); -export default function StackNavigation() { +export default function StackNavigationHomePage() { return ( diff --git a/componente/Navigation/StackNavigationSearchPage.tsx b/componente/Navigation/StackNavigationSearchPage.tsx new file mode 100644 index 0000000..82ec4d3 --- /dev/null +++ b/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 ( + + + + + ) +} \ No newline at end of file diff --git a/componente/SearchBar.tsx b/componente/SearchBar.tsx new file mode 100644 index 0000000..bc465a6 --- /dev/null +++ b/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 ( + + + + + + + ); +}; + +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; \ No newline at end of file diff --git a/componente/SearchPage.tsx b/componente/SearchPage.tsx new file mode 100644 index 0000000..5aeb4b8 --- /dev/null +++ b/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 ( + + + + + ); +}; + +export default SearchPage; + + diff --git a/package-lock.json b/package-lock.json index 12342b7..e7b881c 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 0f7defe..631f6e6 100644 --- a/package.json +++ b/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", diff --git a/redux/actions/action.ts b/redux/actions/action.ts deleted file mode 100644 index 3652c37..0000000 --- a/redux/actions/action.ts +++ /dev/null @@ -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); - } - } -} \ No newline at end of file diff --git a/redux/actions/action.tsx b/redux/actions/action.tsx new file mode 100644 index 0000000..8e55721 --- /dev/null +++ b/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); + } + } +} \ No newline at end of file diff --git a/redux/constants.ts b/redux/constants.ts deleted file mode 100644 index 8055413..0000000 --- a/redux/constants.ts +++ /dev/null @@ -1,3 +0,0 @@ -export const FETCH_ARTISTE = 'FETCH_ARTISTE'; - -export const ACCESS_TOKEN = 'nhmGn3gceDRH04YeeCqOSg1nD3cAXxIM_MOAOdh7lADuizSGEIuhAIT1dZ6hmkDU'; diff --git a/redux/constants.tsx b/redux/constants.tsx new file mode 100644 index 0000000..777ee41 --- /dev/null +++ b/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'; \ No newline at end of file diff --git a/redux/reducers/reducer.ts b/redux/reducers/reducer.ts deleted file mode 100644 index 5f2b847..0000000 --- a/redux/reducers/reducer.ts +++ /dev/null @@ -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; - } -} \ No newline at end of file diff --git a/redux/reducers/reducerArtist.tsx b/redux/reducers/reducerArtist.tsx new file mode 100644 index 0000000..14a6ed0 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/redux/store.ts b/redux/store.ts deleted file mode 100644 index b1cb83a..0000000 --- a/redux/store.ts +++ /dev/null @@ -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; \ No newline at end of file diff --git a/redux/store.tsx b/redux/store.tsx new file mode 100644 index 0000000..c4c12e7 --- /dev/null +++ b/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; \ No newline at end of file