From ee19dc26884a93850f1963ec5e755bbd3bab57a7 Mon Sep 17 00:00:00 2001 From: Pierre Ferreira Date: Wed, 22 Feb 2023 12:08:21 +0100 Subject: [PATCH] :children_crossing: ajout du redux, manque la liaison avec l'API --- App.tsx | 40 +++++++------- components/mainComponent.tsx | 1 + redux/actions/action.tsx | 0 redux/actions/action_setFavList.tsx | 8 +++ redux/actions/action_setList.tsx | 15 ++++++ redux/constants.tsx | 5 ++ redux/reducers/appReducer.tsx | 22 ++++++++ redux/store.tsx | 1 + screens/ListFav.tsx | 83 ++++++++++++++++++++++++++++- 9 files changed, 156 insertions(+), 19 deletions(-) delete mode 100644 redux/actions/action.tsx create mode 100644 redux/actions/action_setFavList.tsx create mode 100644 redux/actions/action_setList.tsx diff --git a/App.tsx b/App.tsx index abaa4bc..ff2e2bd 100644 --- a/App.tsx +++ b/App.tsx @@ -18,25 +18,29 @@ import { import { Provider } from 'react-redux'; -// export default function App() { -// //safearea -// //mettre le navigateur ayant le princ -// return ( -// -// -// -// ); -// } - export default function App() { + //safearea + //mettre le navigateur ayant le princ return ( - <> - {/* Bind your application store to the Provider store */} - - - - - - + + + ); } + + + +///décommenter quand API Fonctionnel/// + +// export default function App() { +// return ( +// <> +// {/* Bind your application store to the Provider store */} +// +// +// +// +// +// +// ); +// } diff --git a/components/mainComponent.tsx b/components/mainComponent.tsx index 99deaa0..c7e5640 100644 --- a/components/mainComponent.tsx +++ b/components/mainComponent.tsx @@ -2,6 +2,7 @@ import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View, Button } from 'react-native'; import React, { useState } from "react"; +// @ts-ignore export default function Main(props : mainProps){ const [count, setCount] = useState(0); return ( diff --git a/redux/actions/action.tsx b/redux/actions/action.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/redux/actions/action_setFavList.tsx b/redux/actions/action_setFavList.tsx new file mode 100644 index 0000000..960fe9d --- /dev/null +++ b/redux/actions/action_setFavList.tsx @@ -0,0 +1,8 @@ +import {ADD_FAVORITE_DATA, FETCH_DATA} from '../constants'; + +export const setFavList = (List: String[]) => { + return { + type: ADD_FAVORITE_DATA, + payload: List, + }; +} \ No newline at end of file diff --git a/redux/actions/action_setList.tsx b/redux/actions/action_setList.tsx new file mode 100644 index 0000000..e443c32 --- /dev/null +++ b/redux/actions/action_setList.tsx @@ -0,0 +1,15 @@ +import {ADD_FAVORITE_DATA, FETCH_DATA} from '../constants'; + +export const setList = (List: String[]) => { + return { + type: FETCH_DATA, + payload: List, + }; +} + +// export const setFavList = (List: String[]) => { +// return { +// type: ADD_FAVORITE_DATA, +// payload: List, +// }; +// } \ No newline at end of file diff --git a/redux/constants.tsx b/redux/constants.tsx index e69de29..ef14783 100644 --- a/redux/constants.tsx +++ b/redux/constants.tsx @@ -0,0 +1,5 @@ + + +export const FETCH_DATA = "FETCH_DATA" + +export const ADD_FAVORITE_DATA = "ADD_FAVORITE_DATA" \ No newline at end of file diff --git a/redux/reducers/appReducer.tsx b/redux/reducers/appReducer.tsx index e69de29..9da1fae 100644 --- a/redux/reducers/appReducer.tsx +++ b/redux/reducers/appReducer.tsx @@ -0,0 +1,22 @@ +import {FETCH_DATA, ADD_FAVORITE_DATA} from '../constants' + +const initialState = { + 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}; + default: + return state; + } +} + diff --git a/redux/store.tsx b/redux/store.tsx index dc655fa..dbfc7ea 100644 --- a/redux/store.tsx +++ b/redux/store.tsx @@ -8,6 +8,7 @@ const reducer = { // @ts-ignore const store = configureStore({ + // @ts-ignore reducer, },); diff --git a/screens/ListFav.tsx b/screens/ListFav.tsx index 1584855..eb14546 100644 --- a/screens/ListFav.tsx +++ b/screens/ListFav.tsx @@ -1,10 +1,78 @@ -import { StyleSheet, Text, View, Button } from 'react-native'; +import { StyleSheet, Text, View, Button, FlatList } from 'react-native'; import { StatusBar } from 'expo-status-bar'; import React, { useState } from "react"; +import {setFavList } from '../redux/actions/action_setFavList'; + +//redux +import {useDispatch, useSelector} from 'react-redux'; +import {useEffect} from 'react'; + + +export const Cardslist = [ + { + id: '1', + title: "premier élément", + }, + { + id: '2', + title: "second élément", + }, + { + id: '3', + title: "élément", + }, + { + id: '4', + title: "barman douteux", + }, + { + id: '10', + title: "dernier élément", + } +]; + + + +//@ts-ignore +const Item = ({title}) => ( + + {title} + +); + + + +//TODO +// export const getFavList = () => { +// //In order to use await your callback must be asynchronous using async keyword. +// return async dispatch => { +// //Then perform your asynchronous operations. +// try { +// //Have it first fetch data from our starwars url. +// //const nounoursPromise = await fetch('https://iut-weather-api.azurewebsites.net/nounours'); +// //Then use the json method to get json data from api/ +// //const nounoursListJson = await nounoursPromise.json(); +// //const nounoursList: Nounours[] = nounoursListJson.map(elt => new Nounours(elt["name"], elt["age"], elt["nbPoils"], elt["image"])); + +// dispatch(setFavList(Array{id,title})); +// } catch (error) { +// console.log('Error---------', error); +// //You can dispatch to another action if you want to display an error message in the application +// //dispatch(fetchDataRejected(error)) +// } +// } +// } + + + + + + export default function Main(){ const [count, setCount] = useState(0); + return ( Maman, J4AI UNE LISTE DE FAVORIS ! ! @@ -13,6 +81,10 @@ export default function Main(){