converting to tsx 1

classes/ApiError.tsx

@@ -1,5 +1,5 @@
 class ApiError extends Error {
-    constructor(message) {
+    constructor(message: string) {
         super(message);
         this.name = 'ApiError';
     }

classes/Card.js

@@ -1,9 +0,0 @@
-class Card {
-    constructor(id,value,suit,image){
-        this.value = value;
-        this.suit = suit;
-        this.image = image;
-    }
-}
-
-/* might extend from Component */ 

classes/Card.tsx

@@ -0,0 +1,13 @@
+class Card {
+    value: number;
+    suit: string;
+    image: string;
+  
+    constructor(id: number, value: number, suit: string, image: string) {
+      this.value = value;
+      this.suit = suit;
+      this.image = image;
+    }
+  }
+
+/* might extend from Component */ 

classes/Game.js

@@ -1,26 +0,0 @@
-/* passer en tsx */
-export default class Game {
-    constructor(deckId) {
-        console.warn("I am inside the constructor!")
-        try {
-            this.deckId = deckId;
-            this.playerHand = [];
-            this.dealerHand = [];
-          } catch (error) {
-            console.error(error);
-          }
-    }
-
-    Draw(card, who) {
-        if(who == 'player')
-            this.playerHand.push(card);
-        else
-            this.dealerHand.push(card);
-    }
-
-    toObject() {
-        return {
-          deckId: this.deckId,
-        };
-    }
-}

classes/Game.tsx

@@ -0,0 +1,27 @@
+export default class Game {
+  deckId: string;
+  playerHand: Card[];
+  dealerHand: Card[];
+
+  constructor(deckId: string) {
+    console.warn('I am inside the constructor!');
+    try {
+      this.deckId = deckId;
+      this.playerHand = [];
+      this.dealerHand = [];
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  Draw(card: Card, who: 'player' | 'dealer') {
+    if (who == 'player') this.playerHand.push(card);
+    else this.dealerHand.push(card);
+  }
+
+  toObject() {
+    return {
+      deckId: this.deckId,
+    };
+  }
+}

package.json

@@ -13,7 +13,7 @@
     "@react-navigation/bottom-tabs": "^6.5.4",
     "@react-navigation/native": "^6.1.5",
     "@react-navigation/stack": "^6.3.15",
-    "@reduxjs/toolkit": "^1.9.2",
+    "@reduxjs/toolkit": "^1.9.3",
     "expo": "^47.0.13",
     "expo-cli": "^6.1.0",
     "expo-status-bar": "~1.4.2",

redux/actions/drawCard.tsx

@@ -1,12 +1,12 @@
-import Game from '../../classes/Game';
 import { setDeck } from "./setDeck";
+import { Dispatch } from "redux";
 
-export const drawCard = (deckid) => {
+export const drawCard = (deckid: string) => {
-    return async dispatch => {
+    return async (dispatch: Dispatch) => {
         try {
             console.log("fetch card started ...");
             // first we fetch data from api
-            const cardPromise = await fetch('https://www.deckofcardsapi.com/api/deck/${deckid}/draw/?deck_count=1');
+            const cardPromise = await fetch(`https://www.deckofcardsapi.com/api/deck/${deckid}/draw/?deck_count=1`);
             // then we convert to json
             const cardJson = await cardPromise.json();
             // check if success
@@ -17,24 +17,15 @@ export const drawCard = (deckid) => {
             } else {
                 console.log("api request succeded");
             }
-            /* this line allows to get exactly what we want from the 
-            json (in the case the deck_id) */
-            const {card_id} = cardJson;
 
-            /* now we can create a new game with
+            const { card_id } = cardJson.cards[0];
-            the id and dispatch it with our setDeck
-            action*/
-            // console.warn("deck id is: ",deck_id)
-            // const game = new Game(deck_id);
-            // console.warn("affected: ", game.deckId);
-            // dispatch(setDeck(game));
 
             try {
                 console.log("deckid: ", deckid);
                 console.log("cardid: ", card_id);
                 
-                console.warn("affected: ", game.deckId);
+                //console.warn("affected: ", game.deckId);
-                dispatch(setDeck(game.toObject()));
+               // dispatch(setDeck(game.toObject())); // assumes that game object is defined somewhere in the component
               } catch (error) {
                 console.error(error);
               }

redux/actions/fetchDeckFailed.js

@@ -1,8 +0,0 @@
-import { FETCH_DECK_FAILED } from "../constants"
-
-export const fetchDeckFailed = (error) => {
-    return {
-        type: FETCH_DECK_FAILED,
-        payload: error
-    }
-}

redux/actions/fetchDeckFailed.tsx

@@ -0,0 +1,8 @@
+import { FETCH_DECK_FAILED } from "../constants";
+
+export const fetchDeckFailed = (error: string) => {
+    return {
+        type: FETCH_DECK_FAILED,
+        payload: error
+    };
+};

redux/actions/newGame.tsx

@@ -1,8 +1,7 @@
-import { fetchDeckFailed } from "./fetchDeckFailed";
 import Game from '../../classes/Game';
-import { setDeck } from "./setDeck";
+import setDeck  from "./setDeck";
 
-export const newGame = () => {
+export default function newGame () {
     return async dispatch => {
         try {
             console.warn("trying");
@@ -34,7 +33,7 @@ export const newGame = () => {
                 console.warn("deck id is: ", deck_id);
                 const game = new Game(deck_id);
                 console.warn("affected: ", game.deckId);
-                dispatch(setDeck(game.toObject()));
+                dispatch(setDeck(game));
               } catch (error) {
                 console.error(error);
               }

redux/actions/setDeck.tsx

@@ -5,7 +5,7 @@ import Game from '../../classes/Game';
 a new deck from the API
  */
 
-export const setDeck = (game) => {
+export default function setDeck (game: Game) {
     return {
         type: FETCH_DECK,
         payload: game,

redux/reducers/wjReducer.js

@@ -1,10 +1,10 @@
 import { FETCH_DECK } from "../constants"
 
 const initialState = {
-    game: null
+    game: null,
 }
 
-export default appReducer = (state = initialState, action) => {
+export default wjReducer  = (state = initialState, action ) => {
     switch (action.type) {
         case FETCH_DECK:
             return {...state, game: action.payload };

redux/store.tsx

@@ -1,9 +1,9 @@
 import {configureStore} from '@reduxjs/toolkit'
-import appReducer from './reducers/appReducer';
+import wjReducer from './reducers/wjReducer';
 
 // Reference here all your application reducers
 const reducer = {
-  appReducer: appReducer,
+  wjReducer: wjReducer,
 }
 
 // @ts-ignore
@@ -11,4 +11,4 @@ const store = configureStore({
   reducer,
 },);
 
-export default store;
+export type RootState = ReturnType<typeof store.getState>;

screens/Cheatsheet.tsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { StyleSheet, Text, View, SafeAreaView, ScrollView, Image} from 'react-native';
+import { StyleSheet, Text, View, ScrollView, Image} from 'react-native';
 import { ColorContext } from '../context/ColorContext';
 
 export default function CheatSheetScreen() {

screens/Home.js

@@ -1,17 +1,20 @@
 import { StyleSheet, Text, View, TouchableOpacity, ImageBackground} from 'react-native';
 import {useSelector, useDispatch} from 'react-redux';
 import { useEffect } from 'react';
-import { newGame } from '../redux/actions/newGame';
+import  newGame  from '../redux/actions/newGame';
+
+// ?? != cours
+import { RootState } from '../redux/store';
 
 export default function HomeScreen({ navigation}) {
   
   console.log("test?");
-  const game = useSelector(state => state.appReducer.game);
+  const game = useSelector((state) => state.wjReducer.game);
   const dispatch = useDispatch();
 
   useEffect(() => {
     const loadGame = async () => {
-      await dispatch(newGame());
+      dispatch(newGame());
     };
     loadGame();
   }, [dispatch]);

screens/Informations.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import { ColorContext } from '../context/ColorContext';
-import { StyleSheet, Text, View, SafeAreaView, ScrollView, Image} from 'react-native';
+import { StyleSheet, Text, View, ScrollView, Image} from 'react-native';
 
 export default function InformationScreen() {
   

screens/Play.js

@@ -1,92 +0,0 @@
-import React, { useContext } from 'react';
-import { ColorContext } from '../context/ColorContext';
-import { DealerContext } from '../context/DealerContext';
-import { StyleSheet, Text, Image, View, TouchableOpacity, SafeAreaView, ScrollView} from 'react-native';
-
-export default function PlayScreen() {
-
-  const { isDarkMode, toggleTheme } = useContext(ColorContext);
-  const { dealerName } = useContext(DealerContext);
-  
-  const colors = [ 'blue', 'red', 'gold', 'green', 'purple']
-  const letters = ["H", "S", "P", "D", "R"]
-
-  const styles = StyleSheet.create({
-    container: {
-      backgroundColor: isDarkMode ? '#303030' : 'white',
-    },
-    top: {
-      justifyContent: 'flex-start',
-    },
-    dealer: {
-      flexDirection: 'column',
-      alignItems: 'center',
-    },
-    dealer_image: {
-      width: '100%',
-      resizeMode: 'contain',
-    },
-    dealer_name: {
-      fontSize: 20,
-      color: isDarkMode ? 'white' : '#303030',
-    },
-    text_top: {
-      fontSize: 20,
-    },
-    middle: {
-      alignItems: 'center'
-    },
-    text_middle: {
-      fontSize: 20,
-      fontWeight: 'bold',
-      color: isDarkMode ? 'white' : '#303030'
-    },
-    scroll: {
-      alignSelf: 'center',
-    },
-    button: {
-      height: 50,
-      width: 50,
-      alignItems: 'center',
-      justifyContent: 'center',
-      marginHorizontal: 10,
-      borderRadius: 5,
-    },
-    buttonText: {
-      color: 'white',
-      fontWeight: 'bold',
-    },
-    down: {
-      alignItems: 'center'
-    }, 
-  });
-  
-  return (
-      <SafeAreaView style={styles.container}>
-        <View style={styles.dealer_part}>
-          <View style={styles.dealer}>
-            <Image style={styles.dealer_image} source={require('../assets/dealer.png')}/>
-            <Text style={styles.dealer_name}> {dealerName}</Text>   
-          </View>    
-        </View>
-        <View style={styles.middle}>
-          <Text style={styles.text_middle}>YOUR CHOICE</Text>
-        </View>
-        <ScrollView horizontal={true} style={styles.scroll}>
-          {colors.map((color, index) => (
-            <View key={index} style={[styles.button, { backgroundColor: color }]}>
-              <TouchableOpacity >
-                <Text style={styles.buttonText}>
-                  {letters[index]}
-                </Text>
-              </TouchableOpacity>
-            </View>
-          ))}
-        </ScrollView>
-        <View style={styles.down}> 
-          <Image source={require('../assets/hands.png')}/>
-        </View>
-      </SafeAreaView>
-    );
-  } 
-  

screens/Play.tsx

@@ -0,0 +1,97 @@
+import React, { useContext } from "react";
+import { ColorContext } from "../context/ColorContext";
+import { DealerContext } from "../context/DealerContext";
+import {
+  StyleSheet,
+  Text,
+  Image,
+  View,
+  TouchableOpacity,
+  SafeAreaView,
+  ScrollView,
+} from "react-native";
+
+export default function PlayScreen() {
+  const { isDarkMode, toggleTheme } = useContext(ColorContext);
+  const { dealerName } = useContext(DealerContext);
+
+  const colors = ["blue", "red", "gold", "green", "purple"];
+  const letters = ["H", "S", "P", "D", "R"];
+
+  const styles = StyleSheet.create({
+    container: {
+      backgroundColor: isDarkMode ? "#303030" : "white",
+    },
+    top: {
+      justifyContent: "flex-start",
+    },
+    dealer: {
+      flexDirection: "column",
+      alignItems: "center",
+    },
+    dealer_image: {
+      width: "100%",
+      resizeMode: "contain",
+    },
+    dealer_name: {
+      fontSize: 20,
+      color: isDarkMode ? "white" : "#303030",
+    },
+    text_top: {
+      fontSize: 20,
+    },
+    middle: {
+      alignItems: "center",
+    },
+    text_middle: {
+      fontSize: 20,
+      fontWeight: "bold",
+      color: isDarkMode ? "white" : "#303030",
+    },
+    scroll: {
+      alignSelf: "center",
+    },
+    button: {
+      height: 50,
+      width: 50,
+      alignItems: "center",
+      justifyContent: "center",
+      marginHorizontal: 10,
+      borderRadius: 5,
+    },
+    buttonText: {
+      color: "white",
+      fontWeight: "bold",
+    },
+    down: {
+      alignItems: "center",
+    },
+  });
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.dealer}>
+        <Image
+          style={styles.dealer_image}
+          source={require("../assets/dealer.png")}
+        />
+        <Text style={styles.dealer_name}> {dealerName}</Text>
+      </View>
+      <View style={styles.middle}>
+        <Text style={styles.text_middle}>YOUR CHOICE</Text>
+      </View>
+      <ScrollView horizontal={true} style={styles.scroll}>
+        {colors.map((color, index) => (
+          <View key={index} style={[styles.button, { backgroundColor: color }]}>
+            <TouchableOpacity>
+              <Text style={styles.buttonText}>{letters[index]}</Text>
+            </TouchableOpacity>
+          </View>
+        ))}
+      </ScrollView>
+      <View style={styles.down}>
+        <Image source={require("../assets/hands.png")} />
+      </View>
+    </SafeAreaView>
+  );
+}

yarn.lock

@@ -2016,10 +2016,10 @@
     color "^4.2.3"
     warn-once "^0.1.0"
 
-"@reduxjs/toolkit@^1.9.2":
+"@reduxjs/toolkit@^1.9.3":
-  version "1.9.2"
+  version "1.9.3"
-  resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.9.2.tgz#4cd153491118038e2eebcb63b2264e42a8a2d74c"
+  resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.9.3.tgz#27e1a33072b5a312e4f7fa19247fec160bbb2df9"
-  integrity sha512-5ZAZ7hwAKWSii5T6NTPmgIBUqyVdlDs+6JjThz6J6dmHLDm6zCzv2OjHIFAi3Vvs1qjmXU0bm6eBojukYXjVMQ==
+  integrity sha512-GU2TNBQVofL09VGmuSioNPQIu6Ml0YLf4EJhgj0AvBadRlCGzUWet8372LjvO4fqKZF2vH1xU0htAa7BrK9pZg==
   dependencies:
     immer "^9.0.16"
     redux "^4.2.0"