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.
82 lines
2.6 KiB
82 lines
2.6 KiB
// screens/moves/MoveDetailScreen.tsx
|
|
|
|
import React, { useEffect } from 'react';
|
|
import { Button, ScrollView, StyleSheet, Text, View } from 'react-native';
|
|
import { RouteProp } from '@react-navigation/native';
|
|
import { RootStackParamList } from "../../navigation/navigationTypes";
|
|
import TypeTacticsInfoList from "../../components/TypeTacticsInfoList"
|
|
import { StackNavigationProp } from "@react-navigation/stack";
|
|
import { MOVE_DETAIL, MOVE_FORM } from '../../navigation/constants';
|
|
import { useSelector } from "react-redux";
|
|
import { RootState } from "../../redux/store";
|
|
import { Move } from "../../entities/Move";
|
|
|
|
|
|
type MoveDetailScreenNavigationProp = StackNavigationProp<RootStackParamList, typeof MOVE_DETAIL>;
|
|
type MoveDetailScreenRouteProp = RouteProp<RootStackParamList, typeof MOVE_DETAIL>;
|
|
|
|
type Props = {
|
|
navigation: MoveDetailScreenNavigationProp;
|
|
route: MoveDetailScreenRouteProp;
|
|
};
|
|
|
|
const MoveDetailScreen = ({ navigation, route }: Props) => {
|
|
const move =
|
|
useSelector(
|
|
(state: RootState) => state.move.moves.find(
|
|
(m: Move) => m.id === route.params.move.id
|
|
)
|
|
);
|
|
|
|
|
|
useEffect(() => {
|
|
navigation.setOptions({ title: move?.name });
|
|
}, [move]);
|
|
|
|
return (
|
|
<ScrollView style={styles.container}>
|
|
<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>
|
|
<Text style={styles.detail}>Accuracy: {move?.accuracy}</Text>
|
|
<Text style={styles.detail}>Type: {move?.type.name}</Text>
|
|
<View style={styles.typeListsContainer}>
|
|
<TypeTacticsInfoList isWeakness={true} types={move?.type.weakAgainst || []}/>
|
|
<TypeTacticsInfoList isWeakness={false} types={move?.type.effectiveAgainst || []}/>
|
|
</View>
|
|
</ScrollView>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
updateButton: {
|
|
backgroundColor: '#BA22DA',
|
|
},
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#FFFFFF',
|
|
padding: 20,
|
|
},
|
|
title: {
|
|
fontSize: 24,
|
|
fontWeight: 'bold',
|
|
marginBottom: 10,
|
|
},
|
|
detail: {
|
|
fontSize: 18,
|
|
marginBottom: 5,
|
|
},
|
|
typeListsContainer: {
|
|
flexDirection: 'row',
|
|
flexWrap: 'wrap',
|
|
justifyContent: 'space-around',
|
|
marginTop: 10,
|
|
},
|
|
});
|
|
|
|
export default MoveDetailScreen;
|