aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/moments/MomentPostContent.tsx5
-rw-r--r--src/components/suggestedPeople/BadgeIcon.tsx64
-rw-r--r--src/components/suggestedPeople/index.ts2
-rw-r--r--src/components/suggestedPeople/legacy/BadgesDropdown.tsx (renamed from src/components/suggestedPeople/BadgesDropdown.tsx)68
-rw-r--r--src/components/taggs/TaggDraggable.tsx2
-rw-r--r--src/screens/suggestedPeople/SPBody.tsx88
6 files changed, 132 insertions, 97 deletions
diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx
index 9413709d..67c086d3 100644
--- a/src/components/moments/MomentPostContent.tsx
+++ b/src/components/moments/MomentPostContent.tsx
@@ -36,6 +36,7 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
const [elapsedTime, setElapsedTime] = useState('');
const [comments_count, setCommentsCount] = useState('');
const [tags, setTags] = useState<MomentTagType[]>([]);
+ const [visible, setVisible] = useState(false);
const state: RootState = useStore().getState();
const navigation = useNavigation();
const dispatch = useDispatch();
@@ -43,6 +44,10 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
const [fadeValue, setFadeValue] = useState(new Animated.Value(0));
const [visible, setVisible] = useState(false);
+ const [fadeValue, setFadeValue] = useState<Animated.Value<number>>(
+ new Animated.Value(0),
+ );
+
useEffect(() => {
const loadTags = async () => {
const response = await loadMomentTags(momentId);
diff --git a/src/components/suggestedPeople/BadgeIcon.tsx b/src/components/suggestedPeople/BadgeIcon.tsx
new file mode 100644
index 00000000..8f576a43
--- /dev/null
+++ b/src/components/suggestedPeople/BadgeIcon.tsx
@@ -0,0 +1,64 @@
+import {useNavigation} from '@react-navigation/core';
+import React from 'react';
+import {
+ Image,
+ ImageSourcePropType,
+ StyleProp,
+ StyleSheet,
+ ViewStyle,
+} from 'react-native';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import LinearGradient from 'react-native-linear-gradient';
+import {UniversityBadge} from '../../types';
+import {normalize} from '../../utils';
+
+interface BadgeIconProps {
+ badge: UniversityBadge;
+ img: ImageSourcePropType;
+ style?: StyleProp<ViewStyle>;
+}
+
+const BadgeIcon: React.FC<BadgeIconProps> = ({badge, img, style}) => {
+ const navigation = useNavigation();
+ return (
+ <TouchableOpacity
+ style={[styles.badgeButton, style]}
+ onPress={() => {
+ navigation.navigate('MutualBadgeHolders', {
+ badge_id: badge.id,
+ badge_title: badge.name,
+ badge_img: img,
+ });
+ }}>
+ <LinearGradient
+ colors={['#4E3629', '#EC2027']}
+ useAngle={true}
+ angle={154.72}
+ angleCenter={{x: 0.5, y: 0.5}}
+ style={styles.badgeBackground}>
+ <Image source={img} style={styles.icon} />
+ </LinearGradient>
+ </TouchableOpacity>
+ );
+};
+
+const styles = StyleSheet.create({
+ badgeBackground: {
+ width: '100%',
+ height: '100%',
+ borderRadius: 50,
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ badgeButton: {
+ width: normalize(30),
+ height: normalize(30),
+ borderRadius: 30,
+ },
+ icon: {
+ width: '60%',
+ height: '60%',
+ },
+});
+
+export default BadgeIcon;
diff --git a/src/components/suggestedPeople/index.ts b/src/components/suggestedPeople/index.ts
index 339c9ae0..34bb96d4 100644
--- a/src/components/suggestedPeople/index.ts
+++ b/src/components/suggestedPeople/index.ts
@@ -1,3 +1,3 @@
export {default as MutualFriends} from './MutualFriends';
-export {default as BadgesDropdown} from './BadgesDropdown';
export {default as SPTaggsBar} from './SPTaggsBar';
+export {default as BadgeIcon} from './BadgeIcon';
diff --git a/src/components/suggestedPeople/BadgesDropdown.tsx b/src/components/suggestedPeople/legacy/BadgesDropdown.tsx
index bc4e7a54..267355f3 100644
--- a/src/components/suggestedPeople/BadgesDropdown.tsx
+++ b/src/components/suggestedPeople/legacy/BadgesDropdown.tsx
@@ -1,39 +1,35 @@
-import {useNavigation} from '@react-navigation/native';
import React, {useEffect, useState} from 'react';
-import {Image, StyleSheet} from 'react-native';
+import {ImageSourcePropType, StyleSheet} from 'react-native';
import {TouchableOpacity} from 'react-native-gesture-handler';
-import LinearGradient from 'react-native-linear-gradient';
import Animated, {Easing} from 'react-native-reanimated';
-import {UniversityType, UniversityBadge} from '../../types';
-import {UniversityIcon} from '..';
-import {normalize, SCREEN_WIDTH} from '../../utils';
-import UniversityIconClicked from './UniversityIconClicked';
+import {BadgeIcon, UniversityIcon} from '../..';
+import {UniversityBadge, UniversityType} from '../../../types';
+import {normalize} from '../../../utils';
+import UniversityIconClicked from '../UniversityIconClicked';
+
interface BadgesDropdownProps {
university: UniversityType;
localBadges: {
badge: UniversityBadge;
- img: string;
+ img: ImageSourcePropType;
}[];
- badges: UniversityBadge[];
}
const BadgesDropdown: React.FC<BadgesDropdownProps> = ({
university,
localBadges,
- badges,
}) => {
// Used to toggle between dropdown being displayed and not
const [displayBadges, setDisplayBadges] = useState<boolean>(false);
// Determines the absolute position of the individual badges [0, i * 40]
let [top, setTop] = useState<Animated.Value<number>[]>([]);
- const navigation = useNavigation();
useEffect(() => {
// Initialize position of badges to 0
const defineBadgePositions = () => {
let localTop: Animated.Value<number>[] = [];
- badges.forEach(() => {
+ localBadges.forEach(() => {
localTop.push(new Animated.Value(0));
});
setTop(localTop);
@@ -43,7 +39,7 @@ const BadgesDropdown: React.FC<BadgesDropdownProps> = ({
// Displays badges dropdown by updating top [state] for every badge
const animate = () => {
- for (let i = 0; i < badges?.length; i++) {
+ for (let i = 0; i < localBadges?.length; i++) {
if (top) {
Animated.timing(top[i], {
toValue: i * 40 + 50,
@@ -56,7 +52,7 @@ const BadgesDropdown: React.FC<BadgesDropdownProps> = ({
// Draws back displayed badges by setting top [state] to 0 for every badge
const animateBack = () => {
- for (let i = 0; i < badges?.length; i++) {
+ for (let i = 0; i < localBadges?.length; i++) {
if (top) {
Animated.timing(top[i], {
toValue: 0,
@@ -106,30 +102,7 @@ const BadgesDropdown: React.FC<BadgesDropdownProps> = ({
zIndex: -1 * badge.id,
},
]}>
- <TouchableOpacity
- style={styles.badgeButton}
- onPress={() => {
- navigation.navigate('MutualBadgeHolders', {
- badge_id: badge.id,
- badge_title: badge.name,
- badge_img: img,
- });
- }}>
- <LinearGradient
- colors={['#4E3629', '#EC2027']}
- useAngle={true}
- angle={154.72}
- angleCenter={{x: 0.5, y: 0.5}}
- style={styles.badgeBackground}>
- <Image
- source={img}
- style={{
- width: SCREEN_WIDTH * 0.04,
- height: SCREEN_WIDTH * 0.04,
- }}
- />
- </LinearGradient>
- </TouchableOpacity>
+ <BadgeIcon badge={badge} img={img} />
</Animated.View>
))}
</Animated.View>
@@ -137,18 +110,6 @@ const BadgesDropdown: React.FC<BadgesDropdownProps> = ({
};
const styles = StyleSheet.create({
- badgeBackground: {
- position: 'absolute',
- width: '100%',
- height: '100%',
- borderRadius: 50,
- borderColor: 'transparent',
- borderWidth: 1,
- alignSelf: 'center',
- flexDirection: 'row',
- justifyContent: 'center',
- alignItems: 'center',
- },
badgesContainer: {
flexDirection: 'column',
justifyContent: 'space-between',
@@ -157,12 +118,9 @@ const styles = StyleSheet.create({
left: '5%',
paddingBottom: '2%',
},
- badgeButton: {
- width: 30,
- height: 30,
- borderRadius: 15,
+ animatedBadgeView: {
+ position: 'absolute',
},
- animatedBadgeView: {position: 'absolute'},
universityIconContainer: {
width: normalize(31),
height: normalize(38),
diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx
index 8e330d0b..d458fab6 100644
--- a/src/components/taggs/TaggDraggable.tsx
+++ b/src/components/taggs/TaggDraggable.tsx
@@ -74,7 +74,7 @@ const TaggDraggable: React.FC<TaggDraggableProps> = (
const styles = StyleSheet.create({
imageTip: {
- height: normalize(12),
+ height: 12,
aspectRatio: 12 / 8,
},
container: {
diff --git a/src/screens/suggestedPeople/SPBody.tsx b/src/screens/suggestedPeople/SPBody.tsx
index c22f8143..eb80da49 100644
--- a/src/screens/suggestedPeople/SPBody.tsx
+++ b/src/screens/suggestedPeople/SPBody.tsx
@@ -1,11 +1,11 @@
import {useNavigation} from '@react-navigation/native';
import React, {Fragment, useEffect, useMemo, useState} from 'react';
-import {StyleSheet, Text, View} from 'react-native';
+import {ImageSourcePropType, StyleSheet, Text, View} from 'react-native';
import {Image} from 'react-native-animatable';
import {TouchableOpacity} from 'react-native-gesture-handler';
import RequestedButton from '../../assets/ionicons/requested-button.svg';
-import {SPTaggsBar} from '../../components';
-import {BadgesDropdown, MutualFriends} from '../../components/suggestedPeople';
+import {UniversityIcon} from '../../components';
+import {BadgeIcon, MutualFriends} from '../../components/suggestedPeople';
import {BADGE_DATA} from '../../constants/badges';
import {
ProfilePreviewType,
@@ -28,7 +28,6 @@ const SPBody: React.FC<SPBodyProps> = ({
user,
university,
mutual_friends,
- social_links,
suggested_people_url,
friendship,
badges,
@@ -43,7 +42,7 @@ const SPBody: React.FC<SPBodyProps> = ({
const [localBadges, setLocalBadges] = useState<
{
badge: UniversityBadge;
- img: string;
+ img: ImageSourcePropType;
}[]
>([]);
const navigation = useNavigation();
@@ -116,21 +115,30 @@ const SPBody: React.FC<SPBodyProps> = ({
[suggested_people_url],
);
- const NamePlate = () => {
- return (
- <TouchableOpacity
- onPress={() => {
- navigation.navigate('Profile', {
- userXId: loggedInUserId === user.id ? undefined : user.id,
- screenType,
- });
- }}
- style={styles.nameInfoContainer}>
- <Text style={styles.firstName}>{user.first_name}</Text>
- <Text style={styles.username}>@{user.username}</Text>
- </TouchableOpacity>
- );
- };
+ const NamePlate = () => (
+ <TouchableOpacity
+ onPress={() => {
+ navigation.navigate('Profile', {
+ userXId: loggedInUserId === user.id ? undefined : user.id,
+ screenType,
+ });
+ }}>
+ <Text style={styles.firstName}>{user.first_name}</Text>
+ <Text style={styles.username}>@{user.username}</Text>
+ </TouchableOpacity>
+ );
+
+ const Badges = () => (
+ // Badges aligned left and spaced as if there are 5 items
+ <View style={styles.badgeContainer}>
+ {localBadges.map(({badge, img}, index) => (
+ <BadgeIcon key={index} badge={badge} img={img} style={styles.badge} />
+ ))}
+ {[0, 0, 0, 0, 0].splice(localBadges.length, 5).map((_, index) => (
+ <View key={index} style={styles.badge} />
+ ))}
+ </View>
+ );
return (
<View>
@@ -138,22 +146,20 @@ const SPBody: React.FC<SPBodyProps> = ({
<View style={styles.mainContainer}>
<View style={styles.topContainer}>
<Text style={styles.title}>{firstItem && 'Suggested People'}</Text>
- {localBadges && (
- <BadgesDropdown {...{university, localBadges, badges}} />
- )}
+ <UniversityIcon
+ university={university}
+ style={styles.universityIcon}
+ imageStyle={styles.universityIcon}
+ />
</View>
- <View style={styles.body}>
+ <View>
<View style={styles.marginManager}>
<View style={styles.addUserContainer}>
<NamePlate />
{user.id !== loggedInUserId && <FriendButton />}
</View>
</View>
- <SPTaggsBar
- userXId={user.id === loggedInUserId ? undefined : user.id}
- screenType={screenType}
- linkedSocials={social_links}
- />
+ {localBadges.length !== 0 && <Badges />}
<View style={styles.marginManager}>
<MutualFriends user={user} friends={mutual_friends} />
</View>
@@ -219,7 +225,6 @@ const styles = StyleSheet.create({
textShadowRadius: normalize(2),
letterSpacing: normalize(2),
},
- nameInfoContainer: {},
addButton: {
justifyContent: 'center',
alignItems: 'center',
@@ -267,17 +272,20 @@ const styles = StyleSheet.create({
shadowOffset: {width: 2, height: 2},
shadowOpacity: 0.5,
},
- body: {},
- button: {
- justifyContent: 'center',
+ universityIcon: {
+ left: '5%',
+ width: normalize(31),
+ height: normalize(38),
+ },
+ badgeContainer: {
+ flexDirection: 'row',
alignItems: 'center',
- width: SCREEN_WIDTH * 0.4,
- aspectRatio: 154 / 33,
- borderWidth: 2,
- borderColor: '#fff',
- borderRadius: 3,
- marginRight: '2%',
- marginLeft: '1%',
+ justifyContent: 'space-evenly',
+ marginBottom: 25,
+ },
+ badge: {
+ width: normalize(52),
+ height: normalize(52),
},
});
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 22:09:03 +0000