diff --git a/screens/moves/MoveFormScreen.tsx b/screens/moves/MoveFormScreen.tsx index 6a3b0ad..f052d4b 100644 --- a/screens/moves/MoveFormScreen.tsx +++ b/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; type MoveFormScreenRouteProp = RouteProp; @@ -39,25 +40,41 @@ const MoveFormScreen = ({ navigation, route }: Props) => { schemaVersion: 2 }); + + const [selectedWeakAgainst, setSelectedWeakAgainst] = useState(move.type.weakAgainst); + const [selectedEffectiveAgainst, setSelectedEffectiveAgainst] = useState(move.type.effectiveAgainst); + + const handleSelectType = (selectedTypes: string[], setTypes: React.Dispatch>, 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 ( - Name: + Name: setMove({ ...move, name: text })} style={styles.input} /> - Category: + Category: { )} - Power: + Power: setMove({ ...move, power: Number(text) })} style={styles.input} keyboardType="numeric" /> - Accuracy: + Accuracy: setMove({ ...move, accuracy: Number(text) })} style={styles.input} keyboardType="numeric" /> - Type: + Type: { )} - {/*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*/} + Weak Against: + ({ id: value, name: value })) + } + uniqueKey="id" + onSelectedItemsChange={ + (selectedItems) => handleSelectType(selectedItems, setSelectedWeakAgainst, selectedEffectiveAgainst) + } + selectedItems={selectedWeakAgainst} + displayKey="name" + /> + Effective Against: + ({ id: value, name: value })) + } + uniqueKey="id" + onSelectedItemsChange={ + (selectedItems) => handleSelectType(selectedItems, setSelectedEffectiveAgainst, selectedWeakAgainst) + } + selectedItems={selectedEffectiveAgainst} + displayKey="name" + />