diff --git a/.gitignore b/.gitignore index f80f2faf..75df2064 100644 --- a/.gitignore +++ b/.gitignore @@ -8,6 +8,7 @@ /Documentation/docusaurus.docusaurus /Documentation/docusaurus.cache-loader /Meteo/node_modules +/node_modules # Misc .DS_Store .env.local @@ -18,4 +19,4 @@ npm-debug.log* yarn-debug.log* yarn-error.log* -node_modules +node_modules/ diff --git a/Meteo/Components/CityInfo.tsx b/Meteo/Components/CityInfo.tsx new file mode 100644 index 00000000..3fa54064 --- /dev/null +++ b/Meteo/Components/CityInfo.tsx @@ -0,0 +1,45 @@ +import React from 'react'; +import { View, Text, StyleSheet } from 'react-native'; +import { City } from '../data/stub'; +type infoProps = { + city : City +} + +const CityInfo = ( infoProps ) => { + return ( + + + City: + {infoProps.city.name} + + + {infoProps.city.latitude} + {infoProps.city.longitude} + + + ); +}; + +const styles = StyleSheet.create({ + container: { + flexDirection: 'row', + justifyContent: 'space-between', + paddingHorizontal: 16, + marginBottom: 16, + backgroundColor: '#eec', + padding: 5 + }, + column: { + flex: 1, + }, + label: { + fontSize: 16, + fontWeight: 'bold', + marginBottom: 8, + }, + value: { + fontSize: 14, + }, +}); + +export default CityInfo; diff --git a/Meteo/Components/FavoriteComponent.tsx b/Meteo/Components/FavoriteComponent.tsx index c5b245ad..901e1018 100644 --- a/Meteo/Components/FavoriteComponent.tsx +++ b/Meteo/Components/FavoriteComponent.tsx @@ -3,17 +3,29 @@ import { View, Text, Image, StyleSheet, TouchableOpacity, Dimensions } from 'rea import { Ionicons } from '@expo/vector-icons'; import { getImageSource, getTemperatureColor } from './ImageWeatherType'; import { ButtonGroup } from 'react-native-elements'; +import { useDispatch } from 'react-redux'; +import { removeFromFavorites } from '../redux/actions/ActionFavorites'; +import { deleteFavorite } from '../thunk/favorites/thunkRemoveFavorites'; +import { Weather } from '../data/stub'; +type favoriProps = { + weather : Weather +} + +export const FavoriteWeather = (favoriProps) => { + const weather = favoriProps.weather; -export class FavoriteWeather extends React.Component { - render() { - const { weather, city } = this.props; + const dispatch = useDispatch(); + + const handleRemFavorite = () => { + dispatch(deleteFavorite(weather._at, weather._city._name)); + }; const temperatureColor = getTemperatureColor(weather._temperature); return ( - {weather._at} + {weather._at} - {weather._weatherType} + {weather._weatherType} - + {weather._temperature} °C - {weather._windSpeed} + {weather._windSpeed} - {weather._pressure} + {weather._pressure} - {weather._temperatureFeelsLike} + {weather._temperatureFeelsLike} - {}}> + {}}> @@ -60,7 +72,6 @@ export class FavoriteWeather extends React.Component { ); - } } const styles = StyleSheet.create({ @@ -69,10 +80,10 @@ const styles = StyleSheet.create({ padding: 20, marginBottom: 8, backgroundColor: '#f5f5f5', - borderRadius: 10, - shadowColor: '#000', + borderRadius: 15, + shadowColor: '#aba0e5', shadowOffset: { - width: 0, + width: 1, height: 2, }, shadowOpacity: 0.25, diff --git a/Meteo/Components/Navigation.tsx b/Meteo/Components/Navigation.tsx index bd08813f..046ee07f 100644 --- a/Meteo/Components/Navigation.tsx +++ b/Meteo/Components/Navigation.tsx @@ -1,41 +1,86 @@ // Navigation.js -import { createStackNavigator } from '@react-navigation/stack'; -import { NavigationContainer, useNavigation } from '@react-navigation/native'; +import React from 'react'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; -import Home from '../Screens/Home'; +import { createStackNavigator } from '@react-navigation/stack'; +import { Icon } from 'react-native-elements'; import Details from '../Screens/Details'; -import React from 'react'; -import { Button, Icon } from 'react-native-elements'; -import { TouchableHighlight } from 'react-native-gesture-handler'; -import Favorite from '../Screens/Favorites'; +import Home from '../Screens/Home'; +import Favorites from '../Screens/Favorites'; +import { NavigationContainer } from '@react-navigation/native'; +import Favorite from '../Screens/Favorite'; - export default function Navigation() { - const BottomTabNavigator = createBottomTabNavigator(); - const Stack = createStackNavigator(); - const navigatiocn = useNavigation; - - return ( - - - ( - - - ) }} /> +const Tab = createBottomTabNavigator(); +const Stack = createStackNavigator(); + +const HomeStack = () => ( + + ({ + headerRight: () => ( + navigation.navigate('Favorite')} + /> + ), + })} + /> + ({ + title: 'Détails', + headerRight: () => ( + navigation.navigate('Favorite')} + /> + ), + })} + /> + + ({ + title: 'Favoris', + })} + /> + +); - ( - -