✨ Implement choosing type logics in 'add move'

screens/moves/MoveFormScreen.tsx

@@ -14,6 +14,7 @@ import { Picker }                                    from "@react-native-communi
 import { ItemValue }                                 from "@react-native-community/picker/typings/Picker";
 import { MoveCategoryName }                          from "../../entities/MoveCategoryName";
 import { TypeName }                                  from "../../entities/TypeName";
+import MultiSelect                                   from "react-native-multiple-select";
 
 type MoveFormScreenNavigationProp = StackNavigationProp<RootStackParamList, typeof MOVE_FORM>;
 type MoveFormScreenRouteProp = RouteProp<RootStackParamList, typeof MOVE_FORM>;
@@ -39,25 +40,41 @@ const MoveFormScreen = ({ navigation, route }: Props) => {
         schemaVersion: 2
     });
 
+
+    const [selectedWeakAgainst, setSelectedWeakAgainst] = useState<string[]>(move.type.weakAgainst);
+    const [selectedEffectiveAgainst, setSelectedEffectiveAgainst] = useState<string[]>(move.type.effectiveAgainst);
+
+    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);
+    };
+
     const handleSave = () => {
         if (route.params?.move) {
-            (dispatch as AppDispatch)(updateMove(route.params.move.id!, move));
+            (dispatch as AppDispatch)(updateMove(route.params.move.id!, {
+                ...move,
+                type: { ...move.type, weakAgainst: selectedWeakAgainst, effectiveAgainst: selectedEffectiveAgainst }
+            }));
         }
         else {
-            (dispatch as AppDispatch)(createMove(move));
+            (dispatch as AppDispatch)(createMove({
+                ...move,
+                type: { ...move.type, weakAgainst: selectedWeakAgainst, effectiveAgainst: selectedEffectiveAgainst }
+            }));
         }
         navigation.goBack();
     };
 
     return (
         <View style={styles.container}>
-            <Text>Name: </Text>
+            <Text style={styles.label}>Name: </Text>
             <TextInput
                 value={move.name}
                 onChangeText={(text) => setMove({ ...move, name: text })}
                 style={styles.input}
             />
-            <Text>Category: </Text>
+            <Text style={styles.label}>Category: </Text>
             <Picker
                 selectedValue={move.category}
                 style={styles.input}
@@ -68,21 +85,21 @@ const MoveFormScreen = ({ navigation, route }: Props) => {
                     <Picker.Item key={value} label={value} value={value}/>
                 )}
             </Picker>
-            <Text>Power: </Text>
+            <Text style={styles.label}>Power: </Text>
             <TextInput
                 value={move.power.toString()}
                 onChangeText={(text) => setMove({ ...move, power: Number(text) })}
                 style={styles.input}
                 keyboardType="numeric"
             />
-            <Text>Accuracy: </Text>
+            <Text style={styles.label}>Accuracy: </Text>
             <TextInput
                 value={move.accuracy.toString()}
                 onChangeText={(text) => setMove({ ...move, accuracy: Number(text) })}
                 style={styles.input}
                 keyboardType="numeric"
             />
-            <Text>Type: </Text>
+            <Text style={styles.label}>Type: </Text>
             <Picker
                 selectedValue={move.type.name}
                 style={styles.input}
@@ -93,7 +110,30 @@ const MoveFormScreen = ({ navigation, route }: Props) => {
                     <Picker.Item key={value} label={value} value={value}/>
                 )}
             </Picker>
-            {/*TODO add type.weakAgainst and type.effectiveAgainst columns... Two pickers for that, and the ability to keep adding types in each column.. but user can't put the same type in each column or twice in a column*/}
+            <Text style={styles.label}>Weak Against: </Text>
+            <MultiSelect
+                items={
+                    Object.values(TypeName).map((value) => ({ id: value, name: value }))
+                }
+                uniqueKey="id"
+                onSelectedItemsChange={
+                    (selectedItems) => handleSelectType(selectedItems, setSelectedWeakAgainst, selectedEffectiveAgainst)
+                }
+                selectedItems={selectedWeakAgainst}
+                displayKey="name"
+            />
+            <Text style={styles.label}>Effective Against: </Text>
+            <MultiSelect
+                items={
+                    Object.values(TypeName).map((value) => ({ id: value, name: value }))
+                }
+                uniqueKey="id"
+                onSelectedItemsChange={
+                    (selectedItems) => handleSelectType(selectedItems, setSelectedEffectiveAgainst, selectedWeakAgainst)
+                }
+                selectedItems={selectedEffectiveAgainst}
+                displayKey="name"
+            />
             <Button title="Save" onPress={handleSave}/>
         </View>
     );
@@ -107,7 +147,11 @@ const styles = StyleSheet.create({
     input: {
         backgroundColor: '#CEC',
         borderRadius: 8,
+        height: 32,
     },
+    label: {
+        margin: 8,
+    }
 });
 
 export default MoveFormScreen;