🤖 Fix #14: Make this app work with Android (#21)

Co-authored-by: Alexis DRAI <alexis.drai@etu.uca.fr>
Reviewed-on: #21

README.md

@@ -60,31 +60,47 @@ This app will contain a home page, and a "master/detail" tab for `Moves` with ba
 
 The home screen provides a logo, and tab navigation options to other parts of the application.
 
-<img src="./docs/home.png" width="410" style="margin:20px">
+<img src="./docs/home.png" width="410" style="margin:20px" alt="">
 
 ### Collection
 
 The collection screen displays a list of `Moves` fetched from the API.
 
-<img src="./docs/moves.png" width="410" style="margin:20px">
+<img src="./docs/moves.png" width="410" style="margin:20px" alt="">>
 
 ### Detail
 
 The detail screen displays detailed information about a selected `Move`.
 
-<img src="./docs/move.png" width="410" style="margin:20px">
+<img src="./docs/move.png" width="410" style="margin:20px" alt="">>
 
 ### Creating
 
 The creating screen provides a form for creating a new `Move`.
 
-<img src="./docs/create.png" width="410" style="margin:20px">
+<img src="./docs/create.png" width="410" style="margin:20px" alt="">>
 
 ### Updating
 
 The updating screen provides a form for updating an existing `Move`.
 
-<img src="./docs/update.png" width="410" style="margin:20px">
+<img src="./docs/update.png" width="410" style="margin:20px" alt="">>
+
+## Some business logic
+
+While the back end doesn't forbid a `Move` from being both weak against and effective against the same one type,
+it should. That's one of the flaws of that API.
+
+In this app, we did implement the business logic described above in our callbacks for our `MultiSelect` elements, like
+so:
+
+```typescript
+const handleSelectType = (selectedTypes: string[], setTypes: React.Dispatch<React.SetStateAction<string[]>>, otherSelectedTypes: string[]) => {
+    const uniqueSelectedTypes = Array.from(new Set(selectedTypes));
+    const withoutDuplicatesFromOtherColumn = uniqueSelectedTypes.filter(type => !otherSelectedTypes.includes(type));
+    setTypes(withoutDuplicatesFromOtherColumn);
+};
+```
 
 ## Using the app
 
@@ -94,9 +110,16 @@ In order to use this app, you will need to run the dedicated backend. A `README`
 with [instructions](https://github.com/draialexis/pokemong_api#user-content-prep-steps) is provided
 for that purpose.
 
+### Connecting to the backend locally
+
+First, please find the `config.ts` file at the root of this project, and replace ~~`192.168.0.15`~~
+with the IPv4 address associated with your own Wi-Fi adapter.
+
+To find that address out, you can run `ipconfig` on Windows or `ifconfig` on macOS/Linux in your terminal.
+
 ### Running this app
 
-With the [Expo CLI](https://docs.expo.dev/more/expo-cli/) installed, at the root of the project, simply run
+Then, with the [Expo CLI](https://docs.expo.dev/more/expo-cli/) installed, at the root of the project, simply run
 
 ```bash
 npx expo start

config.ts

@@ -1,2 +1,2 @@
 // config.ts
-export const API_BASE_URL = 'http://localhost:8080';
+export const API_BASE_URL = 'http://192.168.0.15:8080';

redux/actions/moveActions.ts

@@ -1,8 +1,6 @@
 // redux/actions/moveAction.ts
 import { CREATE_MOVE, DELETE, DELETE_MOVE, GET, GET_MOVES, MOVE_ERROR, POST, PUT, UPDATE_MOVE } from '../constants';
-import {
+import { Move } from "../../entities/Move";
-    Move
-}                                                                                               from "../../entities/Move";
 import { Dispatch } from "redux";
 import { API_BASE_URL } from "../../config";
 

screens/moves/MoveDetailScreen.tsx

@@ -35,7 +35,10 @@ const MoveDetailScreen = ({ navigation, route }: Props) => {
 
     return (
         <ScrollView style={styles.container}>
-            <Button title="Edit Move" onPress={() => navigation.navigate(MOVE_FORM, { move: move })}/>
+            <Button
+                title="Edit Move"
+                color={styles.updateButton.backgroundColor}
+                onPress={() => navigation.navigate(MOVE_FORM, { move: move })}/>
             <Text style={styles.title}>Name: {move?.name}</Text>
             <Text style={styles.detail}>Category: {move?.category}</Text>
             <Text style={styles.detail}>Power: {move?.power}</Text>
@@ -50,6 +53,9 @@ const MoveDetailScreen = ({ navigation, route }: Props) => {
 };
 
 const styles = StyleSheet.create({
+    updateButton: {
+        backgroundColor: '#BA22DA',
+    },
     container: {
         flex: 1,
         backgroundColor: '#FFFFFF',

screens/moves/MoveFormScreen.tsx

@@ -1,7 +1,17 @@
 // screens/moves/MoveFormScreen.tsx
 
 import React, { useEffect, useState } from 'react';
-import { Button, StyleSheet, Text, TextInput } from 'react-native';
+import {
+    Button,
+    KeyboardAvoidingView,
+    Modal,
+    Platform,
+    ScrollView,
+    StyleSheet,
+    Text,
+    TextInput,
+    View
+} from 'react-native';
 import { StackNavigationProp } from '@react-navigation/stack';
 import { RootStackParamList } from "../../navigation/navigationTypes";
 import { useDispatch, useSelector } from 'react-redux';
@@ -15,7 +25,6 @@ import { ItemValue }                           from "@react-native-community/pic
 import { MoveCategoryName } from "../../entities/MoveCategoryName";
 import { TypeName } from "../../entities/TypeName";
 import MultiSelect from "react-native-multiple-select";
-import { KeyboardAwareScrollView }             from "react-native-keyboard-aware-scroll-view";
 import AlertModal from "../../components/AlertModal";
 import { MOVE_ERROR } from "../../redux/constants";
 
@@ -50,6 +59,14 @@ const MoveFormScreen = ({ navigation, route }: Props) => {
         });
     }, [navigation, route.params?.move]);
 
+    const [isModalVisible, setModalVisible] = useState(false);
+    const [currentMultiSelect, setCurrentMultiSelect] = useState<'weakAgainst' | 'effectiveAgainst'>('weakAgainst');
+
+    const handleOpenModal = (multiSelect: 'weakAgainst' | 'effectiveAgainst') => {
+        setCurrentMultiSelect(multiSelect);
+        setModalVisible(true);
+    };
+
     const [selectedWeakAgainst, setSelectedWeakAgainst] = useState<string[]>(move.type.weakAgainst);
     const [selectedEffectiveAgainst, setSelectedEffectiveAgainst] = useState<string[]>(move.type.effectiveAgainst);
 
@@ -76,18 +93,25 @@ const MoveFormScreen = ({ navigation, route }: Props) => {
     };
 
     return (
-        <KeyboardAwareScrollView style={styles.container}>
+        <KeyboardAvoidingView
+            style={styles.container}
+            behavior={Platform.OS === "ios" ? "padding" : "height"}
+        >
+            <ScrollView contentContainerStyle={{ paddingBottom: 20 }}>
                 <AlertModal
                     visible={!!error}
                     message={error || ''}
                     onClose={() => dispatch({ type: MOVE_ERROR, payload: null })}
                 />
+                <View style={styles.row}>
                     <Text style={styles.label}>Name: </Text>
                     <TextInput
                         value={move.name}
                         onChangeText={(text) => setMove({ ...move, name: text })}
                         style={styles.input}
                     />
+                </View>
+                <View style={styles.row}>
                     <Text style={styles.label}>Category: </Text>
                     <Picker
                         selectedValue={move.category}
@@ -99,6 +123,8 @@ const MoveFormScreen = ({ navigation, route }: Props) => {
                             <Picker.Item key={value} label={value} value={value}/>
                         )}
                     </Picker>
+                </View>
+                <View style={styles.row}>
                     <Text style={styles.label}>Power: </Text>
                     <TextInput
                         value={move.power.toString()}
@@ -110,6 +136,8 @@ const MoveFormScreen = ({ navigation, route }: Props) => {
                         style={styles.input}
                         keyboardType="numeric"
                     />
+                </View>
+                <View style={styles.row}>
                     <Text style={styles.label}>Accuracy: </Text>
                     <TextInput
                         value={move.accuracy.toString()}
@@ -121,6 +149,8 @@ const MoveFormScreen = ({ navigation, route }: Props) => {
                         style={styles.input}
                         keyboardType="numeric"
                     />
+                </View>
+                <View style={styles.row}>
                     <Text style={styles.label}>Type: </Text>
                     <Picker
                         selectedValue={move.type.name}
@@ -132,33 +162,44 @@ const MoveFormScreen = ({ navigation, route }: Props) => {
                             <Picker.Item key={value} label={value} value={value}/>
                         )}
                     </Picker>
-            <Text style={styles.label}>Weak Against: </Text>
+                </View>
+                <Text>Weak Against: {selectedWeakAgainst.join(', ')}</Text>
+                <View style={styles.buttonContainer}>
+                    <Button title="Select Weak Against" onPress={() => handleOpenModal('weakAgainst')}/>
+                </View>
+                <Text>Effective Against: {selectedEffectiveAgainst.join(', ')}</Text>
+                <View style={styles.buttonContainer}>
+                    <Button title="Select Effective Against" onPress={() => handleOpenModal('effectiveAgainst')}/>
+                </View>
+                <View style={styles.buttonContainer}>
+                    <Button title="Save" onPress={handleSave} color={styles.saveButton.backgroundColor}/>
+                </View>
+            </ScrollView>
+            <Modal
+                animationType="slide"
+                transparent={true}
+                visible={isModalVisible}
+                onRequestClose={() => {
+                    setModalVisible(!isModalVisible);
+                }}>
+                <View style={styles.centeredView}>
+                    <View style={styles.modalView}>
                         <MultiSelect
                             items={
                                 Object.values(TypeName).map((value) => ({ id: value, name: value }))
                             }
                             uniqueKey="id"
                             onSelectedItemsChange={
-                    (selectedItems) => handleSelectType(selectedItems, setSelectedWeakAgainst, selectedEffectiveAgainst)
+                                (selectedItems) => handleSelectType(selectedItems, currentMultiSelect === 'weakAgainst' ? setSelectedWeakAgainst : setSelectedEffectiveAgainst, currentMultiSelect === 'weakAgainst' ? selectedEffectiveAgainst : selectedWeakAgainst)
                             }
-                selectedItems={selectedWeakAgainst}
+                            selectedItems={currentMultiSelect === 'weakAgainst' ? selectedWeakAgainst : selectedEffectiveAgainst}
                             displayKey="name"
                         />
-            <Text style={styles.label}>Effective Against: </Text>
+                        <Button title="Close" onPress={() => setModalVisible(false)}/>
-            <MultiSelect
+                    </View>
-                items={
+                </View>
-                    Object.values(TypeName).map((value) => ({ id: value, name: value }))
+            </Modal>
-                }
+        </KeyboardAvoidingView>
-                uniqueKey="id"
-                onSelectedItemsChange={
-                    (selectedItems) => handleSelectType(selectedItems, setSelectedEffectiveAgainst, selectedWeakAgainst)
-                }
-                selectedItems={selectedEffectiveAgainst}
-                displayKey="name"
-            />
-            <Button title="Save" onPress={handleSave}/>
-
-        </KeyboardAwareScrollView>
     );
 };
 
@@ -167,14 +208,49 @@ const styles = StyleSheet.create({
         flex: 1,
         padding: 16,
     },
+    label: {
+        marginRight: 8,
+    },
     input: {
         backgroundColor: '#CEC',
         borderRadius: 8,
-        height: 32,
+        minHeight: 32,
+        flex: 1,
     },
-    label: {
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'flex-start',
         margin: 8,
-    }
+        flexWrap: 'wrap',
+    },
+    centeredView: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+        marginTop: 22
+    },
+    modalView: {
+        margin: 20,
+        backgroundColor: "white",
+        borderRadius: 20,
+        padding: 35,
+        alignItems: "center",
+        shadowColor: "#000",
+        shadowOffset: {
+            width: 0,
+            height: 2
+        },
+        shadowOpacity: 0.25,
+        shadowRadius: 4,
+        elevation: 5
+    },
+    buttonContainer: {
+        margin: 8,
+    },
+    saveButton: {
+        backgroundColor: '#BADA55',
+    },
 });
 
 export default MoveFormScreen;

screens/moves/MoveListScreen.tsx

@@ -49,7 +49,10 @@ const MoveListScreen = ({ navigation }: Props) => {
             <FlatList
                 data={moves}
                 ListHeaderComponent={
-                    <Button title="Add Move" onPress={() => navigation.navigate(MOVE_FORM, { move: undefined })}/>
+                    <Button
+                        title="Add Move"
+                        color={styles.addButton.backgroundColor}
+                        onPress={() => navigation.navigate(MOVE_FORM, { move: undefined })}/>
                 }
                 renderItem={({ item }) => (
                     <View style={styles.listItemContainer}>
@@ -77,6 +80,9 @@ const styles = StyleSheet.create({
     deleteButton: {
         backgroundColor: '#FF6961',
     },
+    addButton: {
+        backgroundColor: '#BADA55',
+    },
     listItemContainer: {
         flexDirection: 'row',
         justifyContent: 'space-between',