diff --git a/Notation.md b/Notation.md deleted file mode 100644 index 70a2bc1..0000000 --- a/Notation.md +++ /dev/null @@ -1,32 +0,0 @@ -# React-Native BUT2 Notation - -Duration : 10 * 2h - -## Documentation (4 pts) - -* Application sketches - -## Basics (10 pts) - -* Navigation (2 pts) - * Tab bottom navigation + at least one button -* Store (2 pts) - * Read data from redux store -* Actions (1 pts) - * Update data to redux store -* Display list of items (2 pts) - * FlatList, VirtualizedList or SectionList -* Display image (1 pts) -* Child props (1 pts) -* TextInput (1 pts) - -## Application features (6 pts) - -* Retrieve data using the Web API (2 pts) -* Store favorite data into phone storage (2 pts) -* Write Tests (2 pts) - -## Bonus (only taken into account if the basics are all mastered) - -* Dark/Light mode switch (2pts) -* Sexy UI (2 pts) diff --git a/Readme.md b/Readme.md index 48019c8..c06b4f8 100644 --- a/Readme.md +++ b/Readme.md @@ -1 +1,79 @@ -[Slides](https://iutsa01.blob.core.windows.net/react-native/ReactNative.pdf) +
+ + + +
+ +
+ +--- + +  ![Android](https://img.shields.io/badge/Android-3DDC84?style=for-the-badge&logo=android&logoColor=white) +  ![Java](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black) + + +--- + +
+ +
+ +# **DesckStone** + +
+ + + +# :bookmark_tabs: Présentation + +DeckStone est une application master detail créé grâce au framework React Native en TypeScript et en JavaScript. +Elle vous permet la gestion des cartes hearstone que vous posséder avec la consultation des informations des cartes et l'utilisation de favoris persistants. + + + +# Notation :white_check_mark: + + +## ``` Documentation ``` + +:white_check_mark: **ReadMe** +:white_check_mark: **Sketches** : ![Sketchs](./assets/Sketchs.PNG) + +## ```Bases``` + +:white_check_mark: **Navigation** : Nous avons une barre de navigation fonctionnel nous permettant de naviguer entre les trois écrans. +:white_check_mark: **Store** : Nous utilisons le store pour charger nos données et les stocker mais aussi pour gérer les favoris. +:white_check_mark: **Actions** : Nous utilisons les actions pour charger les données depuis le redux mais aussi pour ajouter et supprimer les favoris. +:white_check_mark: **Display List of Items** : Nous affichons la liste des cartes et celles des favoris dans 2 écrans différents. +:white_check_mark: **Display image** : Chaque cartes sont affiché par un component qui affiche l'image de la carte. +:white_check_mark: **Child props** : Nous utilisons un props pour passer la carte au component qui l'affiche. +:white_check_mark: **TextInput** : Une recherche par nom peut être effectué par dans les 2 listes. + +## ```Application features``` + +:construction_worker: **API** : Nous utilisons l'API officielle du jeu pour récupérer nos données, cependant nous n'avons pas pu gérer le changement de token, nous le changeons donc à la main. +***Source*** : https://develop.battle.net/documentation/hearthstone/game-data-apis +:white_check_mark: **Store favorite data into phone storage** : Nous utilison l'AsyncStorage pour sauvegarder la liste des favoris dans le téléphone. +:construction_worker: **Write Tests** : Nous testons les actions, le reducer et les composants UI que nous avons implémenter, cependant les éléments utilisant indirectement l'AsyncStorage ne passent pas les tests à cause d'un problème d'utilisation du mockAsyncStorage. + +## ``Bonus`` + +* :warning: **Dark/Light mode switch** : Nous n'avons pas mis en place ce mode +* :construction_worker: **Sexy UI** : A vous de juger ! + + +# :construction_worker: Développeurs + +- Corentin RICHARD : corentin.richard@etu.uca.fr +- Pierre FERREIRA : pierre.ferreira@etu.uca.fr + +
+ + + + + + + +© IUT - Auvergne +
\ No newline at end of file diff --git a/__mocks__/@react-native-community/async-storage.js b/__mocks__/@react-native-community/async-storage.js new file mode 100644 index 0000000..254c85b --- /dev/null +++ b/__mocks__/@react-native-community/async-storage.js @@ -0,0 +1,9 @@ +// somewhere in your configuration files +import AsyncStorageMock from '@react-native-async-storage/async-storage/jest/async-storage-mock'; + +AsyncStorageMock.multiGet = jest.fn(([keys], callback) => { + // do something here to retrieve data + callback([]); +}); + +export default AsyncStorageMock; \ No newline at end of file diff --git a/assets/Sketchs.PNG b/assets/Sketchs.PNG new file mode 100644 index 0000000..0a6b373 Binary files /dev/null and b/assets/Sketchs.PNG differ diff --git a/assets/banner.png b/assets/banner.png new file mode 100644 index 0000000..519a9d9 Binary files /dev/null and b/assets/banner.png differ diff --git a/assets/logo.png b/assets/logo.png new file mode 100644 index 0000000..345237a Binary files /dev/null and b/assets/logo.png differ diff --git a/components/ListItemComponent.tsx b/components/ListItemComponent.tsx index aab3d50..9cbeb72 100644 --- a/components/ListItemComponent.tsx +++ b/components/ListItemComponent.tsx @@ -15,4 +15,4 @@ export function ListItemComponent(props : ItemProps){ /> ) -} +} \ No newline at end of file diff --git a/components/ListeFavComponent.tsx b/components/ListeFavComponent.tsx new file mode 100644 index 0000000..a39c0d3 --- /dev/null +++ b/components/ListeFavComponent.tsx @@ -0,0 +1,55 @@ +import { useDispatch } from "react-redux"; +import { Card } from "../models/Card"; +import { setFavList } from "../redux/actions/action_setFavList"; +import { Image, TouchableHighlight, View } from "react-native"; +import React, { useEffect } from "react"; +import {CardProps} from "../props/favProps" +import { FontAwesome } from '@expo/vector-icons'; +import { StyleSheet} from 'react-native'; + + +export default function Item(props: CardProps){ // a mettre dans components et definir une props pour passer le param + + const {route} = props; + const item: Card = route.card; + const bool: boolean = route.bool; + const dispatch = useDispatch() + + const HandleAddFav = (props : CardProps) => { + dispatch(setFavList(props)); + } + return( + + /* dispatch , */ + + HandleAddFav(props)} > + + + + + ); +} +const styles = StyleSheet.create({ + item: { + zIndex:0 + }, + favoriteButtonNonFav: { + position: 'absolute', + top: 10, + right: 10, + backgroundColor: 'red', + borderRadius: 50, + padding: 10, + zIndex:1 + }, + favoriteButtonFav: { + position: 'absolute', + top: 10, + right: 10, + backgroundColor: 'red', + borderRadius: 50, + padding: 10, + zIndex:1 + },}); \ No newline at end of file diff --git a/components/mainComponent.tsx b/components/mainComponent.tsx deleted file mode 100644 index c7e5640..0000000 --- a/components/mainComponent.tsx +++ /dev/null @@ -1,41 +0,0 @@ -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 ( - - - Maman, prend la caméra ! ! - - {count} -