From 6039b9462ce720006de40f2b88a343a690c011dd Mon Sep 17 00:00:00 2001 From: Pierre Ferreira Date: Wed, 8 Mar 2023 18:51:55 +0100 Subject: [PATCH] :art: ajout du darkmode. il faut plus de front pour rendre cela joli. :lipstick: --- data/ApiDataManager.tsx | 14 ----- data/stub.ts | 13 ---- redux/reducers/appReducer.tsx | 7 +-- screens/ListScreen.tsx | 110 ++++++++++++++++------------------ 4 files changed, 55 insertions(+), 89 deletions(-) delete mode 100644 data/ApiDataManager.tsx delete mode 100644 data/stub.ts diff --git a/data/ApiDataManager.tsx b/data/ApiDataManager.tsx deleted file mode 100644 index a08be79..0000000 --- a/data/ApiDataManager.tsx +++ /dev/null @@ -1,14 +0,0 @@ - -// export class ApiDataManager{ - - -// public async getCards() : Promise { - - -// 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; -// } -// } diff --git a/data/stub.ts b/data/stub.ts deleted file mode 100644 index f700882..0000000 --- a/data/stub.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { Card } from "../models/Card" - -export class StubLib { - - public getCards(): Card[] { - const NOUNOURS_LIST : Card[] = [ - - - ] - return NOUNOURS_LIST - } -} - diff --git a/redux/reducers/appReducer.tsx b/redux/reducers/appReducer.tsx index 181327b..31fdaf4 100644 --- a/redux/reducers/appReducer.tsx +++ b/redux/reducers/appReducer.tsx @@ -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; diff --git a/screens/ListScreen.tsx b/screens/ListScreen.tsx index 342fcae..0443494 100644 --- a/screens/ListScreen.tsx +++ b/screens/ListScreen.tsx @@ -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}) => ( - ); @@ -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 ( - - {/* } - keyExtractor={item => item.id}/> */} - - - - // navigation.navigate("CardsDetails", {"card": item})}> //* mettre la page de detail ici, renvoi a home pour l'instant - navigation.navigate("ListFav")}> - - - - // //{item.name} - // // - // // - - // // - } keyExtractor={(item: Card) => item.id.toString()}/> - - - -); + + handleThemeChange(mode)}> + Switch Mode + + + + // navigation.navigate("CardsDetails", {"card": item})}> //* mettre la page de detail ici, renvoi a home pour l'instant + navigation.navigate("ListFav")}> + + + + } keyExtractor={(item: Card) => item.id.toString()}/> + + ); } @@ -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', } });