corentin.richard
/
TP_ReactNative
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

probleme de conflit : debut du switch mais stash sur la mauvaise branche, voir si recupérable

Browse Source
DarkLightTheme
Pierre Ferreira 2 years ago
parent f1b34cd3f2
commit 1aff6817f8
6 changed files with 220 additions and 195 deletions
Show Stats Download Patch File Download Diff File

37
App.tsx
Unescape View File

@ -1,19 +1,54 @@
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Button } from 'react-native';
import React, { useState } from "react";
import React, { useState, useEffect } from "react";
import Navigation from './navigation/Navigation';
import StackNavigation from './navigation/StackNavigation';
import { createStackNavigator } from '@react-navigation/stack';
import {useDispatch, useSelector} from 'react-redux';
// Import your application store
//import store from "./redux/store";
import {
SafeAreaView,
SafeAreaProvider,
} from 'react-native-safe-area-context';
import { Provider } from 'react-redux';
export default function App() {
//safearea
//mettre le navigateur ayant le princ
return (
<SafeAreaProvider>
<Navigation/>
</SafeAreaProvider>
);
}
// ///décommenter quand API Fonctionnel///
// // export default function App() {
// // return (
// // <>
// // {/* Bind your application store to the Provider store */}
// // <Provider store={store}>
// // <SafeAreaProvider>
// // <Navigation/>
// // </SafeAreaProvider>
// // </Provider>
// // </>
// // );
// // }

188
data/stub.ts
Unescape View File

@ -1,188 +0,0 @@
export class City {
private _name: string;
private _latitude: number;
private _longitude: number;
constructor(name: string, latitude: number, longitude: number) {
this._name = name;
this._latitude = latitude;
this._longitude = longitude;
}
get name(): string {
return this._name;
}
set name(value: string) {
this._name = value;
}
get latitude(): number {
return this._latitude;
}
set latitude(value: number) {
this._latitude = value;
}
get longitude(): number {
return this._longitude;
}
set longitude(value: number) {
this._longitude = value;
}
}
export class Weather {
private _at: string;
private _visibility: number;
private _weatherType: string;
private _weatherDescription: string;
private _temperature: number;
private _temperatureFeelsLike: number;
private _humidity: number;
private _windSpeed: number;
private _pressure: number;
private _city: City;
constructor(at: string, visibility: number, weatherType: string, weatherDescription: string, temperature: number, temperatureFeelsLike: number, humidity: number, windSpeed: number, pressure: number, city: City) {
this._at = at;
this._visibility = visibility;
this._weatherType = weatherType;
this._weatherDescription = weatherDescription;
this._temperature = temperature;
this._temperatureFeelsLike = temperatureFeelsLike;
this._humidity = humidity;
this._windSpeed = windSpeed;
this._pressure = pressure;
this._city = city;
}
get at(): string {
return this._at;
}
set at(value: string) {
this._at = value;
}
get visibility(): number {
return this._visibility;
}
set visibility(value: number) {
this._visibility = value;
}
get weatherType(): string {
return this._weatherType;
}
set weatherType(value: string) {
this._weatherType = value;
}
get weatherDescription(): string {
return this._weatherDescription;
}
set weatherDescription(value: string) {
this._weatherDescription = value;
}
get temperature(): number {
return this._temperature;
}
set temperature(value: number) {
this._temperature = value;
}
get temperatureFeelsLike(): number {
return this._temperatureFeelsLike;
}
set temperatureFeelsLike(value: number) {
this._temperatureFeelsLike = value;
}
get humidity(): number {
return this._humidity;
}
set humidity(value: number) {
this._humidity = value;
}
get windSpeed(): number {
return this._windSpeed;
}
set windSpeed(value: number) {
this._windSpeed = value;
}
get pressure(): number {
return this._pressure;
}
set pressure(value: number) {
this._pressure = value;
}
get city(): City {
return this._city;
}
set city(value: City) {
this._city = value;
}
}
export const CITIES_DATA: City[] = [
new City("Paris", 48.866667, 2.333333),
new City("Clermont-Ferrand", 45.777222, 3.087025),
new City("Lyon", 45.764043, 4.835659),
new City("Marseille", 43.296482, 5.36978),
new City("Bruxelles", 50.85034, 4.35171),
];
export const FAVORITE_CITY_DATA =
new City("Clermont-Ferrand", 45.777222, 3.087025);
export const DEFAULT_SELECTED_CITY_DATA: City =
new City("Paris", 48.866667, 2.333333);
export const WEATHER_DATA: Weather[] = [
new Weather("2023-01-22 09:55:59", 10000, "Nuageux",
"couvert", 0.52, -4.34,
82, 5.14, 1032,
new City("Paris", 48.866667, 2.333333)
),
new Weather("2023-01-22 09:55:59", 10000, "Nuageux",
"couvert", 0.52, -4.34,
82, 5.14, 1032,
new City("Clermont-Ferrand", 45.777222, 3.087025)
),
new Weather("2023-01-22 09:55:59", 10000, "Nuageux",
"couvert", 0.52, -4.34,
82, 5.14, 1032,
new City("Lyon", 45.764043, 4.835659)
),
new Weather("2023-01-22 09:55:59", 10000, "Nuageux",
"couvert", 0.52, -4.34,
82, 5.14, 1032,
new City("Marseille", 43.296482, 5.36978)
),
new Weather("2023-01-22 09:55:59", 10000, "Nuageux",
"couvert", 0.52, -4.34,
82, 5.14, 1032,
new City("Bruxelles", 50.85034, 4.35171)
),
];
export const getCurrentWeather = (cityName: string) => {
if (cityName === undefined) return {};
return WEATHER_DATA.filter(elt => elt.city.name === cityName)[0];
}

13
redux/actions/action_switchMode.tsx
Unescape View File

@ -0,0 +1,13 @@
import {THEME_CHANGE} from '../constants';
// switch mode according to what is specified...
//@ts-ignore
export const switchMode = (mode) => {
return {
type: THEME_CHANGE,
payload: mode,
};
};

9
redux/constants.tsx
Unescape View File

@ -0,0 +1,9 @@
export const FETCH_DATA = "FETCH_DATA"
export const ADD_FAVORITE_DATA = "ADD_FAVORITE_DATA"
export const DISPLAY_ALL_CARD = "DISPLAY_ALL_CARD"
export const THEME_CHANGE = 'THEME_CHANGE';

29
redux/reducers/appReducer.tsx
Unescape View File

@ -0,0 +1,29 @@
import {THEME_CHANGE, FETCH_DATA, ADD_FAVORITE_DATA} from '../constants'
const initialState = {
mode: 'light',
cards: [],
favoriteCards: [],
// 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};
case THEME_CHANGE:
return {...state,mode: action.payload};
default:
return state;
}
}

139
screens/ListScreen.tsx
Unescape View File

@ -4,16 +4,108 @@ import { StatusBar } from 'expo-status-bar';
import React, { useState } from "react";
export default function Main(){
//? possiblement à supprimer
import { getAllCards } from "../redux/actions/actionSelection"
import { Card } from '../models/Card';
import { Image } from 'react-native';
import { ImageURISource } from 'react-native';
import { switchMode } from '../redux/actions/action_switchMode';
//@ts-ignore
const Item = ({url}) => (
// <View style={styles.item}>
// <Text style={styles.title}>{title}</Text>
// </View>
<View>
<Image
source={{uri:url}}
style={{flex:1, minHeight:250, minWidth:180}}/>
</View>
);
//@ts-ignore
export default function ListScreen({navigation}){
const [count, setCount] = useState(0);
// get the current theme
//@ts-ignore
const theme = useSelector(state => state.theme);
// // Initialize the binding content with the application initial state
//@ts-ignore
const nList = useSelector(state => state.appReducer.cards);
// Create a const that will hold the react-redux events dispatcher
const dispatch = useDispatch();
// Let's define a hook that will be used to update the rendered state after the return will be called
// You cannot perform side-effects outside of a useEffect hook
useEffect(() => {
const loadCards = async () => {
//@ts-ignore
await dispatch(getAllCards());
};
loadCards();
}, [dispatch]);
//* Stub
// const {getCards} = new StubLib();
// const list: Card[] = getCards();
// const req = fetch('https://omgvamp-hearthstone-v1.p.rapidapi.com/cards')
//https://us.api.blizzard.com/hearthstone/cards/678?locale=en_US
//* Themes *//
// define a component mode state
const [mode, setMode] = useState(theme.mode);
// Handle changing the theme mode
const handleThemeChange = () => {
dispatch(switchMode(theme.mode === 'light' ? 'dark' : 'light'));
}
// Update the app Incase the theme mode changes
useEffect(() => {
setMode(theme.mode);
}, [theme]);
return (
<View style={styles.container}>
<View style={styles.border}>
<Text>Maman, prend la caméra ! !</Text>
<StatusBar style="auto" />
<Text>{count}</Text>
<Button onPress={()=> setCount(count+1)} title="+1"/>
{/* <FlatList data={nList}
renderItem={({item}) => <Item title={item.name} />}
keyExtractor={item => item.id}/> */}
<View style={styles.container}>
<Button onPress={()=> theme.mode === 'light' ? 'dark' : 'light'} title="Switch Theme"/>
</View>
<FlatList
numColumns={2}
data={nList}
renderItem={({item}) =>
//<TouchableHighlight onPress={() => navigation.navigate("CardsDetails", {"card": item})}> //* mettre la page de detail ici, renvoi a home pour l'instant
<TouchableHighlight onPress={() => navigation.navigate("ListFav")}>
<Item url={item.img}/>
</TouchableHighlight>
// //<Text>{item.name}</Text>
// // <View>
// // <Image
// // source={{uri:item.img}}
// // style={{flex:1, minHeight:250, minWidth:180}}/>
// // </View>
} keyExtractor={(item: Card) => item.id.toString()}/>
</View>
);
}
@ -38,5 +130,40 @@ const styles = StyleSheet.create({
borderColor : '#00ffaa',
alignItems: 'center',
justifyContent: 'center',
},
item: {
borderRadius : 15,
backgroundColor: '#efefef',
padding: 20,
margin : 10,
},
title: {
fontStyle: "italic",
},
container_light: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
}
,
container_dark: {
flex: 1,
backgroundColor: '#121212',
alignItems: 'center',
justifyContent: 'center',
}
,
text_light: {
marginBottom: 20,
color: '#000'
}
,
text_dark: {
marginBottom: 20,
color: "#fff"
}
});

Write Preview
Loading…
Cancel
Save