diff options
Diffstat (limited to 'src/components/common/BadgeDetailView.tsx')
| -rw-r--r-- | src/components/common/BadgeDetailView.tsx | 231 |
1 files changed, 231 insertions, 0 deletions
diff --git a/src/components/common/BadgeDetailView.tsx b/src/components/common/BadgeDetailView.tsx new file mode 100644 index 00000000..1dc50c32 --- /dev/null +++ b/src/components/common/BadgeDetailView.tsx @@ -0,0 +1,231 @@ +import {useNavigation} from '@react-navigation/core'; +import React, {useState} from 'react'; +import {FlatList, Image, Modal, StyleSheet, Text, View} from 'react-native'; +import {TouchableOpacity} from 'react-native-gesture-handler'; +import LinearGradient from 'react-native-linear-gradient'; +import {BADGE_GRADIENT_FIRST} from '../../constants'; +import CloseIcon from '../../assets/ionicons/close-outline.svg'; +import {UniversityBadge, UniversityType} from '../../types'; +import {getUniversityBadge, normalize} from '../../utils'; +import {removeBadgesService} from '../../services'; +import {useSelector} from 'react-redux'; +import {RootState} from '../../store/rootreducer'; + +interface BadgeDetailModalProps { + isEditable: boolean; + setBadgeViewVisible: Function; + selectedBadges: UniversityBadge[]; + name?: string; + userId: string; +} + +const BadgeDetailView: React.FC<BadgeDetailModalProps> = ({ + name, + isEditable = true, + setBadgeViewVisible, + selectedBadges, +}) => { + const navigation = useNavigation(); + const [removableBadges, setRemovableBadges] = useState([]); + + const { + user: {userId = ''}, + } = useSelector((state: RootState) => state.user); + + const removeBadgeCell = async () => { + await removeBadgesService(removableBadges, userId); + }; + + const badgeEditCell = ({item: {id, name, badgeImage}}) => { + return ( + <TouchableOpacity + style={styles.badgeCellContainerStyles} + onPress={() => { + setBadgeViewVisible(false); + navigation.navigate('MutualBadgeHolders', { + badge_id: id, + badge_title: name, + badge_img: badgeImage, + }); + }}> + <View + style={ + isEditable + ? styles.badgeCellImageContainerStyles + : styles.badgeCellImageNoEditContainerStyles + }> + <LinearGradient + colors={BADGE_GRADIENT_FIRST} + useAngle={true} + style={styles.badgeCellImageStyles} + angle={136.69}> + <Image + resizeMode="cover" + style={{ + width: 70, + height: 70, + alignSelf: 'center', + }} + source={badgeImage} + /> + </LinearGradient> + {isEditable && ( + <TouchableOpacity + onPress={() => { + selectedBadges = selectedBadges.filter((b) => b.id === id); + const obj = {id, name}; + removableBadges.push(obj); + removeBadgeCell(); + }}> + <CloseIcon height={25} width={25} color="gray" /> + </TouchableOpacity> + )} + </View> + <View style={{marginTop: 10}}> + <Text style={styles.badgeCellTextStyles}>{name}</Text> + </View> + </TouchableOpacity> + ); + }; + + const addButton = () => { + return ( + <TouchableOpacity + onPress={() => { + setBadgeViewVisible(false); + navigation.navigate('BadgeSelection', {editing: true}); + }} + style={styles.addButtonStyles}> + <Text style={styles.addButtonTextStyles}>Add Badges</Text> + </TouchableOpacity> + ); + }; + + const modalHeader = () => { + const heading = isEditable ? 'Edit your badges!' : name; + const subheading = isEditable + ? 'Add or delete your badges' + : 'View badges to discover groups!'; + return ( + <View> + <Text style={styles.modalHeadingStyles}>{heading}</Text> + <Text style={styles.modalSubheadingStyles}>{subheading}</Text> + </View> + ); + }; + + return ( + <Modal + animationType="slide" + transparent + visible={true} + presentationStyle="overFullScreen"> + <View style={styles.viewWrapper}> + <View style={styles.modalView}> + <View style={styles.modalUpperContainerStyles}> + <TouchableOpacity + style={{marginTop: 10, marginLeft: 10}} + onPress={() => setBadgeViewVisible(false)}> + <CloseIcon height={25} width={25} color="gray" /> + </TouchableOpacity> + <View style={styles.modalImageContainerStyles}> + <Image + style={styles.modalImageStyles} + source={getUniversityBadge(UniversityType.Brown, 'Crest')} + /> + </View> + </View> + {modalHeader()} + <View> + <FlatList + contentContainerStyle={styles.modalListStyles} + scrollEnabled={false} + data={selectedBadges} + numColumns={3} + renderItem={badgeEditCell} + keyExtractor={(item) => item.id.toString()} + /> + </View> + {isEditable && addButton()} + </View> + </View> + </Modal> + ); +}; + +const styles = StyleSheet.create({ + badgeCellContainerStyles: { + alignItems: 'center', + justifyContent: 'center', + paddingVertical: 10, + }, + badgeCellImageContainerStyles: { + flexDirection: 'row', + marginLeft: 25, + }, + badgeCellImageNoEditContainerStyles: { + flexDirection: 'row', + marginHorizontal: 25, + }, + badgeCellImageStyles: { + borderRadius: 50, + }, + badgeCellTextStyles: { + fontWeight: '600', + fontSize: normalize(12), + lineHeight: normalize(16), + textAlign: 'center', + }, + addButtonStyles: { + height: 40, + borderRadius: 5, + marginBottom: 45, + width: '40%', + marginTop: 14, + alignItems: 'center', + justifyContent: 'center', + alignSelf: 'center', + backgroundColor: '#698DD3', + }, + addButtonTextStyles: {color: 'white'}, + modalHeadingStyles: { + fontWeight: '600', + fontSize: normalize(17), + lineHeight: normalize(20.29), + textAlign: 'center', + }, + modalSubheadingStyles: { + fontWeight: '600', + fontSize: normalize(11), + lineHeight: normalize(15), + textAlign: 'center', + color: '#828282', + }, + modalUpperContainerStyles: { + flexDirection: 'row', + alignItems: 'flex-start', + }, + modalImageContainerStyles: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + }, + modalImageStyles: {left: -15, top: -30}, + modalListStyles: { + alignSelf: 'center', + marginVertical: 35, + }, + viewWrapper: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + backgroundColor: 'rgba(0, 0, 0, 0.2)', + }, + modalView: { + width: '95%', + backgroundColor: '#fff', + borderRadius: 7, + }, +}); + +export default BadgeDetailView; |