aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/search/SearchCategories.tsx2
-rw-r--r--src/components/search/SearchResultList.tsx2
-rw-r--r--src/components/search/SearchResults.tsx4
-rw-r--r--src/components/suggestedPeople/BadgesDropdown.tsx169
-rw-r--r--src/components/suggestedPeople/UniversityIconClicked.tsx61
-rw-r--r--src/components/suggestedPeople/index.ts1
6 files changed, 235 insertions, 4 deletions
diff --git a/src/components/search/SearchCategories.tsx b/src/components/search/SearchCategories.tsx
index 2883a541..c3c4c518 100644
--- a/src/components/search/SearchCategories.tsx
+++ b/src/components/search/SearchCategories.tsx
@@ -4,7 +4,7 @@ import {StyleSheet, Text, View} from 'react-native';
import {TouchableOpacity} from 'react-native-gesture-handler';
import LinearGradient from 'react-native-linear-gradient';
import {getButtons} from '../../services/ExploreService';
-import {SearchCategoryType} from 'src/types';
+import {SearchCategoryType} from '../../types';
import {TAGG_LIGHT_BLUE_2, TAGG_PURPLE} from '../../constants';
import {SCREEN_WIDTH} from '../../utils';
diff --git a/src/components/search/SearchResultList.tsx b/src/components/search/SearchResultList.tsx
index 613ab734..d8cf02d9 100644
--- a/src/components/search/SearchResultList.tsx
+++ b/src/components/search/SearchResultList.tsx
@@ -1,7 +1,7 @@
import React, {useEffect, useState} from 'react';
import {SectionList, StyleSheet, Text, View} from 'react-native';
import {useSelector} from 'react-redux';
-import {RootState} from 'src/store/rootreducer';
+import {RootState} from '../../store/rootreducer';
import {NO_RESULTS_FOUND} from '../../constants/strings';
import {PreviewType, ScreenType} from '../../types';
import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
diff --git a/src/components/search/SearchResults.tsx b/src/components/search/SearchResults.tsx
index fbeae1d8..277b3454 100644
--- a/src/components/search/SearchResults.tsx
+++ b/src/components/search/SearchResults.tsx
@@ -5,10 +5,10 @@ import {
ScreenType,
CategoryPreviewType,
} from '../../types';
-import {StyleSheet, View} from 'react-native';
+import {View} from 'react-native';
import SearchResultsCell from './SearchResultCell';
import {useSelector} from 'react-redux';
-import {RootState} from 'src/store/rootReducer';
+import {RootState} from '../../store/rootReducer';
interface SearchResultsProps {
results: ProfilePreviewType[];
previewType: PreviewType;
diff --git a/src/components/suggestedPeople/BadgesDropdown.tsx b/src/components/suggestedPeople/BadgesDropdown.tsx
new file mode 100644
index 00000000..70c70e47
--- /dev/null
+++ b/src/components/suggestedPeople/BadgesDropdown.tsx
@@ -0,0 +1,169 @@
+import {useNavigation} from '@react-navigation/native';
+import React, {useEffect, useState} from 'react';
+import {Image, 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 {UniversityBadge} from 'src/types';
+import {UniversityIcon} from '..';
+import {normalize, SCREEN_WIDTH} from '../../utils';
+import UniversityIconClicked from './UniversityIconClicked';
+interface BadgesDropdownProps {
+ localBadges: {
+ badge: UniversityBadge;
+ img: string;
+ }[];
+ badges: UniversityBadge[];
+}
+
+const BadgesDropdown: React.FC<BadgesDropdownProps> = ({
+ 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(() => {
+ localTop.push(new Animated.Value(0));
+ });
+ setTop(localTop);
+ };
+ defineBadgePositions();
+ }, []);
+
+ // Displays badges dropdown by updating top [state] for every badge
+ const animate = () => {
+ for (let i = 0; i < badges?.length; i++) {
+ if (top) {
+ Animated.timing(top[i], {
+ toValue: i * 40 + 50,
+ duration: 150,
+ easing: Easing.linear,
+ }).start();
+ }
+ }
+ };
+
+ // Draws back displayed badges by setting top [state] to 0 for every badge
+ const animateBack = () => {
+ for (let i = 0; i < badges?.length; i++) {
+ if (top) {
+ Animated.timing(top[i], {
+ toValue: 0,
+ duration: 150,
+ easing: Easing.linear,
+ }).start();
+ }
+ }
+ };
+
+ return (
+ <Animated.View
+ style={[styles.badgesContainer, {height: 50 + 40 * localBadges.length}]}>
+ <TouchableOpacity
+ activeOpacity={1}
+ onPress={() => {
+ const updatedBadges = !displayBadges
+ setDisplayBadges(updatedBadges);
+ if (updatedBadges) {
+ animate();
+ } else {
+ animateBack();
+ }
+ }}>
+ {displayBadges ? (
+ <UniversityIconClicked
+ university="brown"
+ style={styles.universityIconContainer}
+ imageStyle={{width: normalize(31), height: normalize(38)}}
+ />
+ ) : (
+ <UniversityIcon
+ university="brown"
+ style={styles.universityIconContainer}
+ imageStyle={{width: normalize(31), height: normalize(38)}}
+ />
+ )}
+ </TouchableOpacity>
+ {localBadges &&
+ localBadges.map(({badge, img}, index) => (
+ <Animated.View
+ key={badge.id}
+ style={[
+ styles.animatedBadgeView,
+ {
+ top: top[index],
+ zIndex: -1 * badge.id,
+ },
+ ]}>
+ <TouchableOpacity
+ style={styles.badgeButton}
+ onPress={() => {
+ navigation.navigate('MutualBadgeHolders', {
+ badge_id: badge.id,
+ badge_title: badge.name,
+ });
+ }}>
+ <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>
+ </Animated.View>
+ ))}
+ </Animated.View>
+ );
+};
+
+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',
+ alignItems: 'center',
+ width: 38,
+ left: '5%',
+ paddingBottom: '2%',
+ },
+ badgeButton: {
+ width: 30,
+ height: 30,
+ borderRadius: 15,
+ },
+ animatedBadgeView: {position: 'absolute'},
+ universityIconContainer: {
+ width: normalize(31),
+ height: normalize(38),
+ },
+});
+
+export default BadgesDropdown;
diff --git a/src/components/suggestedPeople/UniversityIconClicked.tsx b/src/components/suggestedPeople/UniversityIconClicked.tsx
new file mode 100644
index 00000000..bde4e17f
--- /dev/null
+++ b/src/components/suggestedPeople/UniversityIconClicked.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import {ImageStyle, StyleProp, StyleSheet, ViewProps} from 'react-native';
+import {Image, Text, View} from 'react-native-animatable';
+import {getUniversityClass, normalize} from '../../utils';
+
+export interface UniversityIconClickedProps extends ViewProps {
+ university: string;
+ university_class?: number;
+ imageStyle?: StyleProp<ImageStyle>;
+}
+
+/**
+ * Component to display university icon and class
+ */
+const UniversityIconClicked: React.FC<UniversityIconClickedProps> = ({
+ style,
+ university,
+ university_class,
+ imageStyle,
+}) => {
+ var universityIcon;
+ switch (university) {
+ case 'brown':
+ universityIcon = require('../../assets/universities/brown-clicked.png');
+ break;
+ default:
+ universityIcon = require('../../assets/universities/brown-clicked.png');
+ break;
+ }
+
+ return (
+ <View style={[styles.container, style]}>
+ <Image source={universityIcon} style={[styles.icon, imageStyle]} />
+ {university_class && (
+ <Text style={styles.univClass}>
+ {getUniversityClass(university_class)}
+ </Text>
+ )}
+ </View>
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {
+ flexDirection: 'column',
+ flexWrap: 'wrap',
+ justifyContent: 'center',
+ alignItems: 'center',
+ height: '100%',
+ },
+ univClass: {
+ fontSize: normalize(14),
+ fontWeight: '500',
+ },
+ icon: {
+ width: normalize(17),
+ height: normalize(19),
+ },
+});
+
+export default UniversityIconClicked;
diff --git a/src/components/suggestedPeople/index.ts b/src/components/suggestedPeople/index.ts
index 219ee2fe..515f6fb4 100644
--- a/src/components/suggestedPeople/index.ts
+++ b/src/components/suggestedPeople/index.ts
@@ -1 +1,2 @@
export {default as MutualFriends} from './MutualFriends';
+export {default as BadgesDropdown} from './BadgesDropdown';
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 17:14:56 +0000