You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
112 lines
4.3 KiB
112 lines
4.3 KiB
// screens/moves/MoveFormScreen.tsx
|
|
|
|
import React, { useState } from 'react';
|
|
import { Button, StyleSheet, TextInput, View } from 'react-native';
|
|
import { StackNavigationProp } from '@react-navigation/stack';
|
|
import { RootStackParamList } from "../../navigation/navigationTypes";
|
|
import { useDispatch } from 'react-redux';
|
|
import { createMove, updateMove } from '../../redux/actions/moveActions';
|
|
import { AppDispatch } from "../../redux/store";
|
|
import { Move } from "../../entities/Move";
|
|
import { RouteProp } from "@react-navigation/native";
|
|
import { MOVE_FORM } from "../../navigation/constants";
|
|
import { Picker } from "@react-native-community/picker";
|
|
import { ItemValue } from "@react-native-community/picker/typings/Picker";
|
|
import { MoveCategoryName } from "../../entities/MoveCategoryName";
|
|
import { TypeName } from "../../entities/TypeName";
|
|
|
|
type MoveFormScreenNavigationProp = StackNavigationProp<RootStackParamList, typeof MOVE_FORM>;
|
|
type MoveFormScreenRouteProp = RouteProp<RootStackParamList, typeof MOVE_FORM>;
|
|
|
|
type Props = {
|
|
navigation: MoveFormScreenNavigationProp;
|
|
route: MoveFormScreenRouteProp
|
|
};
|
|
|
|
const MoveFormScreen = ({ navigation, route }: Props) => {
|
|
const dispatch = useDispatch();
|
|
const [move, setMove] = useState<Move>(route.params?.move || {
|
|
id: null,
|
|
name: '',
|
|
category: MoveCategoryName.PHYSICAL,
|
|
power: 0,
|
|
accuracy: 0,
|
|
type: {
|
|
name: TypeName.NORMAL,
|
|
weakAgainst: [],
|
|
effectiveAgainst: [],
|
|
},
|
|
schemaVersion: 2
|
|
});
|
|
|
|
const handleSave = () => {
|
|
if (route.params?.move) {
|
|
(dispatch as AppDispatch)(updateMove(route.params.move.id!, move));
|
|
}
|
|
else {
|
|
(dispatch as AppDispatch)(createMove(move));
|
|
}
|
|
navigation.goBack();
|
|
};
|
|
|
|
// TODO add labels and remove placeholders
|
|
return (
|
|
<View style={styles.container}>
|
|
<TextInput
|
|
value={move.name}
|
|
onChangeText={(text) => setMove({ ...move, name: text })}
|
|
placeholder="Name"
|
|
style={styles.input}
|
|
/>
|
|
<Picker
|
|
selectedValue={move.category}
|
|
onValueChange={(itemValue: ItemValue) =>
|
|
setMove({ ...move, category: itemValue as MoveCategoryName })
|
|
}>
|
|
{Object.values(MoveCategoryName).map((value) =>
|
|
<Picker.Item key={value} label={value} value={value}/>
|
|
)}
|
|
</Picker>
|
|
<TextInput
|
|
value={move.power.toString()}
|
|
onChangeText={(text) => setMove({ ...move, power: Number(text) })}
|
|
placeholder="Power"
|
|
style={styles.input}
|
|
keyboardType="numeric"
|
|
/>
|
|
<TextInput
|
|
value={move.accuracy.toString()}
|
|
onChangeText={(text) => setMove({ ...move, accuracy: Number(text) })}
|
|
placeholder="Accuracy"
|
|
style={styles.input}
|
|
keyboardType="numeric"
|
|
/>
|
|
<Picker
|
|
selectedValue={move.type.name}
|
|
onValueChange={(itemValue: ItemValue) =>
|
|
setMove({ ...move, type: { ...move.type, name: itemValue as TypeName } })
|
|
}>
|
|
{Object.values(TypeName).map((value) =>
|
|
<Picker.Item key={value} label={value} value={value}/>
|
|
)}
|
|
</Picker>
|
|
{/*TODO add weakAgainst and 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*/}
|
|
<Button title="Save" onPress={handleSave}/>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
// TODO improve styles a bit
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
padding: 16,
|
|
},
|
|
input: {
|
|
backgroundColor: '#CEC',
|
|
borderRadius: 8,
|
|
},
|
|
});
|
|
|
|
export default MoveFormScreen;
|