aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/components/common/BadgeDetailView.tsx154
-rw-r--r--src/components/profile/FriendsCount.tsx1
-rw-r--r--src/components/profile/ProfileHeader.tsx46
-rw-r--r--src/components/profile/UniversityIcon.tsx23
4 files changed, 136 insertions, 88 deletions
diff --git a/src/components/common/BadgeDetailView.tsx b/src/components/common/BadgeDetailView.tsx
index 1dc50c32..f4271099 100644
--- a/src/components/common/BadgeDetailView.tsx
+++ b/src/components/common/BadgeDetailView.tsx
@@ -1,39 +1,90 @@
import {useNavigation} from '@react-navigation/core';
-import React, {useState} from 'react';
-import {FlatList, Image, Modal, StyleSheet, Text, View} from 'react-native';
+import React, {useEffect, useState} from 'react';
+import {
+ ActivityIndicator,
+ 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 {useSelector} from 'react-redux';
import CloseIcon from '../../assets/ionicons/close-outline.svg';
+import {BADGE_GRADIENT_FIRST} from '../../constants';
+import {BADGE_DATA} from '../../constants/badges';
+import {getSuggestedPeopleProfile, removeBadgesService} from '../../services';
+import {RootState} from '../../store/rootreducer';
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 navigation = useNavigation();
+ const [selectedBadges, setSelectedBadges] = useState<UniversityBadge[]>([]);
+ const [isLoading, setIsLoading] = useState(true);
+ const [selectedBadgesWithImage, setSelectedBadgesWithImage] = useState<any[]>(
+ [],
+ );
+
+ const fetchBadges = async () => {
+ if (userId) {
+ const response = await getSuggestedPeopleProfile(userId);
+ if (response) {
+ const data = response.badges;
+ let extractedBadgeNames: UniversityBadge[] = [];
+ data.forEach((badge) => {
+ extractedBadgeNames.push(badge);
+ });
+ setSelectedBadges(extractedBadgeNames);
+ }
+ }
+ };
+
+ useEffect(() => {
+ setIsLoading(true);
+ fetchBadges();
+ }, []);
+
+ useEffect(() => {
+ let badgesWithImage = [];
+ selectedBadges.forEach((e) => {
+ const uniData = BADGE_DATA[e.university];
+ const categoryData = uniData.filter((u) => {
+ return u.title === e.category;
+ });
+ const badgeData = categoryData[0].data.filter((c) => {
+ return c.badgeName === e.name;
+ });
+ badgeData.forEach((c) => {
+ const obj = {...e, badgeImage: c.badgeImage};
+ badgesWithImage.push(obj);
+ });
+ });
+ setTimeout(() => {
+ setSelectedBadgesWithImage(badgesWithImage);
+ setIsLoading(false);
+ }, 500);
+ }, [selectedBadges]);
- const removeBadgeCell = async () => {
- await removeBadgesService(removableBadges, userId);
+ const removeBadgeCell = async (badge: string) => {
+ setIsLoading(true);
+ await removeBadgesService([badge], userId);
+ fetchBadges();
};
const badgeEditCell = ({item: {id, name, badgeImage}}) => {
@@ -61,27 +112,20 @@ const BadgeDetailView: React.FC<BadgeDetailModalProps> = ({
angle={136.69}>
<Image
resizeMode="cover"
- style={{
- width: 70,
- height: 70,
- alignSelf: 'center',
- }}
+ style={styles.badgeImageStyles}
source={badgeImage}
/>
</LinearGradient>
{isEditable && (
<TouchableOpacity
onPress={() => {
- selectedBadges = selectedBadges.filter((b) => b.id === id);
- const obj = {id, name};
- removableBadges.push(obj);
- removeBadgeCell();
+ removeBadgeCell(name);
}}>
<CloseIcon height={25} width={25} color="gray" />
</TouchableOpacity>
)}
</View>
- <View style={{marginTop: 10}}>
+ <View style={styles.userNameContainerStyles}>
<Text style={styles.badgeCellTextStyles}>{name}</Text>
</View>
</TouchableOpacity>
@@ -114,17 +158,13 @@ const BadgeDetailView: React.FC<BadgeDetailModalProps> = ({
);
};
- return (
- <Modal
- animationType="slide"
- transparent
- visible={true}
- presentationStyle="overFullScreen">
+ const _modalContent = () => {
+ return (
<View style={styles.viewWrapper}>
<View style={styles.modalView}>
<View style={styles.modalUpperContainerStyles}>
<TouchableOpacity
- style={{marginTop: 10, marginLeft: 10}}
+ style={styles.crossButtonStyles}
onPress={() => setBadgeViewVisible(false)}>
<CloseIcon height={25} width={25} color="gray" />
</TouchableOpacity>
@@ -136,19 +176,40 @@ const BadgeDetailView: React.FC<BadgeDetailModalProps> = ({
</View>
</View>
{modalHeader()}
- <View>
- <FlatList
- contentContainerStyle={styles.modalListStyles}
- scrollEnabled={false}
- data={selectedBadges}
- numColumns={3}
- renderItem={badgeEditCell}
- keyExtractor={(item) => item.id.toString()}
- />
- </View>
+ {!isLoading && (
+ <View>
+ <FlatList
+ contentContainerStyle={styles.modalListStyles}
+ scrollEnabled={false}
+ data={selectedBadgesWithImage}
+ numColumns={3}
+ renderItem={badgeEditCell}
+ keyExtractor={(item) => item.id.toString()}
+ />
+ </View>
+ )}
+ {isLoading && _loaderView()}
{isEditable && addButton()}
</View>
</View>
+ );
+ };
+
+ const _loaderView = () => {
+ return (
+ <View style={styles.loaderStyles}>
+ <ActivityIndicator animating={isLoading} size="large" color="black" />
+ </View>
+ );
+ };
+
+ return (
+ <Modal
+ animationType="slide"
+ transparent
+ visible={true}
+ presentationStyle="overFullScreen">
+ {_modalContent()}
</Modal>
);
};
@@ -163,12 +224,20 @@ const styles = StyleSheet.create({
flexDirection: 'row',
marginLeft: 25,
},
+ badgeImageStyles: {
+ width: '50%',
+ height: '50%',
+ alignSelf: 'center',
+ },
badgeCellImageNoEditContainerStyles: {
flexDirection: 'row',
marginHorizontal: 25,
},
badgeCellImageStyles: {
borderRadius: 50,
+ width: 70,
+ height: 70,
+ justifyContent: 'center',
},
badgeCellTextStyles: {
fontWeight: '600',
@@ -176,6 +245,8 @@ const styles = StyleSheet.create({
lineHeight: normalize(16),
textAlign: 'center',
},
+ userNameContainerStyles: {marginTop: 10},
+ crossButtonStyles: {marginTop: 10, marginLeft: 10},
addButtonStyles: {
height: 40,
borderRadius: 5,
@@ -194,6 +265,7 @@ const styles = StyleSheet.create({
lineHeight: normalize(20.29),
textAlign: 'center',
},
+ loaderStyles: {justifyContent: 'center', marginVertical: 20},
modalSubheadingStyles: {
fontWeight: '600',
fontSize: normalize(11),
diff --git a/src/components/profile/FriendsCount.tsx b/src/components/profile/FriendsCount.tsx
index 4790743b..18cd1400 100644
--- a/src/components/profile/FriendsCount.tsx
+++ b/src/components/profile/FriendsCount.tsx
@@ -62,6 +62,7 @@ const styles = StyleSheet.create({
fontSize: normalize(14),
},
label: {
+ marginTop: 10,
fontWeight: '500',
fontSize: normalize(14),
},
diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx
index a17d9f6f..061bbd0d 100644
--- a/src/components/profile/ProfileHeader.tsx
+++ b/src/components/profile/ProfileHeader.tsx
@@ -40,47 +40,6 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
const [drawerVisible, setDrawerVisible] = useState(false);
const [showBadgeView, setBadgeViewVisible] = useState(false);
const [firstName, lastName] = [...name.split(' ')];
- const [selectedBadges, setSelectedBadges] = useState<UniversityBadge[]>([]);
- const [selectedBadgesWithImage, setSelectedBadgesWithImage] = useState<any[]>(
- [],
- );
-
- const fetchBadges = async () => {
- const uid = userXId ? userXId : userId;
- if (uid) {
- const response = await getSuggestedPeopleProfile(uid);
- if (response) {
- const data = response.badges;
- let extractedBadgeNames: UniversityBadge[] = [];
- data.forEach((badge) => {
- extractedBadgeNames.push(badge);
- });
- setSelectedBadges(extractedBadgeNames);
- }
- }
- };
-
- useEffect(() => {
- fetchBadges();
- }, []);
-
- useEffect(() => {
- let badgesWithImage = [];
- selectedBadges.forEach((e) => {
- const uniData = BADGE_DATA[e.university];
- const categoryData = uniData.filter((u) => {
- return u.title === e.category;
- });
- const badgeData = categoryData[0].data.filter((c) => {
- return c.badgeName === e.name;
- });
- badgeData.forEach((c) => {
- const obj = {...e, badgeImage: c.badgeImage};
- badgesWithImage.push(obj);
- });
- });
- setSelectedBadgesWithImage(badgesWithImage);
- }, [selectedBadges]);
return (
<View style={styles.container}>
@@ -111,13 +70,14 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
<View style={styles.friendsAndUniversity}>
<FriendsCount screenType={screenType} userXId={userXId} />
<TouchableOpacity onPress={() => setBadgeViewVisible(true)}>
- <UniversityIcon {...{university, university_class}} />
+ <UniversityIcon
+ {...{university, university_class, needsShadow: true}}
+ />
</TouchableOpacity>
{showBadgeView && (
<BadgeDetailView
isEditable={userXName === username}
name={name}
- selectedBadges={selectedBadgesWithImage}
setBadgeViewVisible={setBadgeViewVisible}
/>
)}
diff --git a/src/components/profile/UniversityIcon.tsx b/src/components/profile/UniversityIcon.tsx
index 4cb1abe6..f1451f83 100644
--- a/src/components/profile/UniversityIcon.tsx
+++ b/src/components/profile/UniversityIcon.tsx
@@ -8,6 +8,7 @@ export interface UniversityIconProps extends ViewProps {
university: UniversityType;
university_class?: number;
imageStyle?: StyleProp<ImageStyle>;
+ needsShadow?: boolean;
}
/**
@@ -18,13 +19,16 @@ const UniversityIcon: React.FC<UniversityIconProps> = ({
university,
university_class,
imageStyle,
+ needsShadow = false,
}) => {
return (
<View style={[styles.container, style]}>
- <Image
- source={getUniversityBadge(university, 'Crest')}
- style={[styles.icon, imageStyle]}
- />
+ <View style={needsShadow && styles.shadowStyle}>
+ <Image
+ source={getUniversityBadge(university, 'Crest')}
+ style={[styles.icon, imageStyle]}
+ />
+ </View>
{university_class && (
<Text style={styles.univClass}>
{getUniversityClass(university_class)}
@@ -50,6 +54,17 @@ const styles = StyleSheet.create({
width: normalize(17),
height: normalize(19),
},
+ shadowStyle: {
+ padding: 5,
+ borderRadius: 30,
+ shadowOffset: {
+ width: 1,
+ height: 1,
+ },
+ shadowOpacity: 1,
+ shadowRadius: 3,
+ backgroundColor: 'white',
+ },
});
export default UniversityIcon;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 11:35:05 +0000