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

🎨 ajout du darkmode. il faut plus de front pour rendre cela joli. 💄

Browse Source
DarkLightTheme
Pierre Ferreira 2 years ago
parent b1863bd1d3
commit 6039b9462c
4 changed files with 55 additions and 89 deletions
Show Stats Download Patch File Download Diff File

14
data/ApiDataManager.tsx
Unescape View File

@ -1,14 +0,0 @@
// export class ApiDataManager{
// public async getCards() : Promise<String[]> {
// const CardPromise = await fetch('https://omgvamp-hearthstone-v1.p.rapidapi.com/cards')
// const CardListJson = await CardPromise.json();
// const CardList: String[] = Array.of(CardListJson);
// return CardList;
// }
// }

13
data/stub.ts
Unescape View File

@ -1,13 +0,0 @@
import { Card } from "../models/Card"
export class StubLib {
public getCards(): Card[] {
const NOUNOURS_LIST : Card[] = [
]
return NOUNOURS_LIST
}
}

7
redux/reducers/appReducer.tsx
Unescape View File

@ -3,12 +3,9 @@ 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"],
favoriteCards: []
}
// @ts-ignore
export default appReducer = (state = initialState, action) => {
switch (action.type) {
@ -20,7 +17,7 @@ export default appReducer = (state = initialState, action) => {
return {...state, cards: action.payload};
case THEME_CHANGE:
return {...state,mode: action.payload};
return {...state, mode: action.payload};
default:
return state;

110
screens/ListScreen.tsx
Unescape View File

@ -1,5 +1,5 @@
import { StyleSheet, Text, View, Button, TouchableHighlight } from 'react-native';
import { StyleSheet, Text, View, Button, TouchableHighlight, Pressable } from 'react-native';
import { StatusBar } from 'expo-status-bar';
import React, { useState, useEffect } from "react";
import { FlatList } from 'react-native-gesture-handler';
@ -26,7 +26,6 @@ const Item = ({url}) => (
<Image
source={{uri:url}}
style={{flex:1, minHeight:250, minWidth:180}}/>
</View>
);
@ -37,11 +36,12 @@ export default function ListScreen({navigation}){
// 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);
//@ts-ignore
const mode = useSelector(state => state.appReducer.mode);
// Create a const that will hold the react-redux events dispatcher
const dispatch = useDispatch();
@ -56,62 +56,44 @@ export default function ListScreen({navigation}){
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);
//const [mode, setMode] = useState(theme.mode);
// Handle changing the theme mode
const handleThemeChange = () => {
dispatch(switchMode(theme.mode === 'light' ? 'dark' : 'light'));
//@ts-ignore
const handleThemeChange = (mode) => {
dispatch(switchMode(mode === 'light' ? 'dark' : 'light'));
}
// Update the app Incase the theme mode changes
useEffect(() => {
setMode(theme.mode);
}, [theme]);
// useEffect(() => {
// setMode(theme.mode);
// }, [theme]);
return (
<View style={styles.container}>
{/* <FlatList data={nList}
renderItem={({item}) => <Item title={item.name} />}
keyExtractor={item => item.id}/> */}
<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>
);
<View style={mode === 'light' ? styles.container_light : styles.container_dark}>
<Pressable style={mode === 'light' ? styles.button_white : styles.button_black} onPress={() => handleThemeChange(mode)}>
<Text>Switch Mode</Text>
</Pressable>
<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>
} keyExtractor={(item: Card) => item.id.toString()}/>
</View>
);
}
@ -143,30 +125,44 @@ const styles = StyleSheet.create({
title: {
fontStyle: "italic",
},
///themes
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"
},
button_black: {
alignItems: 'center',
justifyContent: 'center',
paddingVertical: 12,
paddingHorizontal: 32,
borderRadius: 4,
elevation: 3,
backgroundColor: 'black',
},
button_white: {
alignItems: 'center',
justifyContent: 'center',
paddingVertical: 12,
paddingHorizontal: 32,
borderRadius: 4,
elevation: 3,
backgroundColor: 'white',
}
});

Write Preview
Loading…
Cancel
Save