aboutsummaryrefslogtreecommitdiff
path: root/src/screens
diff options
context:
space:
mode:
Diffstat (limited to 'src/screens')
-rw-r--r--src/screens/badge/BadgeItem.tsx84
-rw-r--r--src/screens/badge/BadgeList.tsx57
-rw-r--r--src/screens/badge/BadgeListHeader.tsx33
-rw-r--r--src/screens/badge/BadgeScreenHeader.tsx42
-rw-r--r--src/screens/badge/BadgeSelection.tsx266
-rw-r--r--src/screens/badge/index.ts5
-rw-r--r--src/screens/index.ts1
-rw-r--r--src/screens/main/NotificationsScreen.tsx116
-rw-r--r--src/screens/profile/SocialMediaTaggs.tsx7
-rw-r--r--src/screens/search/SearchScreen.tsx72
-rw-r--r--src/screens/search/mock.ts118
-rw-r--r--src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx1
12 files changed, 737 insertions, 65 deletions
diff --git a/src/screens/badge/BadgeItem.tsx b/src/screens/badge/BadgeItem.tsx
new file mode 100644
index 00000000..d7c0b74a
--- /dev/null
+++ b/src/screens/badge/BadgeItem.tsx
@@ -0,0 +1,84 @@
+import React from 'react';
+import {View, Text, StyleSheet, Image, ImageSourcePropType} from 'react-native';
+import {SCREEN_WIDTH, normalize} from '../../utils';
+import LinearGradient from 'react-native-linear-gradient';
+import {BADGE_GRADIENT_FIRST, BADGE_GRADIENT_REST} from '../../constants';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+
+interface BadgeItemProps {
+ title: string;
+ resourcePath: ImageSourcePropType;
+ index: Number;
+ selected: boolean;
+ onSelection: (ikey: string) => void;
+}
+
+const BadgeItem: React.FC<BadgeItemProps> = ({
+ title,
+ resourcePath,
+ selected,
+ index,
+ onSelection,
+}) => {
+ return (
+ <TouchableOpacity onPress={() => onSelection(title)}>
+ <LinearGradient
+ colors={index === 0 ? BADGE_GRADIENT_FIRST : BADGE_GRADIENT_REST}
+ useAngle={true}
+ angle={136.69}
+ style={styles.item}>
+ <View
+ style={
+ selected ? styles.selectedDetailContainer : styles.detailContainer
+ }>
+ <Image source={resourcePath} style={styles.imageStyles} />
+ <View style={styles.textContainer}>
+ <Text style={styles.title}>{title}</Text>
+ </View>
+ </View>
+ </LinearGradient>
+ </TouchableOpacity>
+ );
+};
+
+const styles = StyleSheet.create({
+ item: {
+ width: SCREEN_WIDTH / 3 - 20,
+ height: SCREEN_WIDTH / 3 - 20,
+ marginLeft: 15,
+ marginBottom: 12,
+ borderRadius: 8,
+ },
+ detailContainer: {
+ flexGrow: 1,
+ justifyContent: 'center',
+ alignItems: 'center',
+ borderWidth: 3,
+ borderRadius: 8,
+ borderColor: 'transparent',
+ },
+ selectedDetailContainer: {
+ flexGrow: 1,
+ justifyContent: 'center',
+ alignItems: 'center',
+ borderWidth: 3,
+ borderColor: 'white',
+ borderRadius: 8,
+ },
+ imageStyles: {
+ width: '31%',
+ height: '31%',
+ marginTop: '11%',
+ },
+ textContainer: {marginTop: '16%'},
+ title: {
+ fontSize: normalize(15),
+ fontWeight: '500',
+ lineHeight: normalize(17.9),
+ textAlign: 'center',
+ color: 'white',
+ marginHorizontal: '2%',
+ },
+});
+
+export default BadgeItem;
diff --git a/src/screens/badge/BadgeList.tsx b/src/screens/badge/BadgeList.tsx
new file mode 100644
index 00000000..f3e96d60
--- /dev/null
+++ b/src/screens/badge/BadgeList.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import {SectionList, StyleSheet} from 'react-native';
+import {SCREEN_HEIGHT} from '../../utils';
+import BadgeItem from './BadgeItem';
+import BadgeHeader from './BadgeListHeader';
+
+interface BadgeListProps {
+ data: any[];
+ selectedBadges: any[];
+ selectKey: (ikey: string) => void;
+}
+
+const BadgeList: React.FC<BadgeListProps> = ({
+ data,
+ selectedBadges,
+ selectKey,
+}) => {
+ return (
+ <SectionList
+ stickySectionHeadersEnabled={false}
+ style={{height: SCREEN_HEIGHT * 0.8}}
+ contentContainerStyle={styles.listContainer}
+ sections={data}
+ keyExtractor={(item, index) => item + index}
+ extraData={selectedBadges}
+ renderItem={({item: {badgeName, badgeImage}, index}) => {
+ return (
+ <BadgeItem
+ selected={selectedBadges.includes(badgeName)}
+ onSelection={selectKey}
+ title={badgeName}
+ resourcePath={badgeImage}
+ index={index}
+ />
+ );
+ }}
+ renderSectionHeader={({section: {title}}) => (
+ <BadgeHeader title={title} />
+ )}
+ />
+ );
+};
+
+const styles = StyleSheet.create({
+ listContainer: {
+ flexDirection: 'row',
+ flexWrap: 'wrap',
+ alignItems: 'center',
+ flexGrow: 1,
+ paddingBottom: SCREEN_HEIGHT * 0.1,
+ },
+ scrollViewStyles: {
+ paddingBottom: SCREEN_HEIGHT * 0.5,
+ },
+});
+
+export default BadgeList;
diff --git a/src/screens/badge/BadgeListHeader.tsx b/src/screens/badge/BadgeListHeader.tsx
new file mode 100644
index 00000000..27335dfb
--- /dev/null
+++ b/src/screens/badge/BadgeListHeader.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import {View, Text, StyleSheet} from 'react-native';
+import {SCREEN_WIDTH, normalize} from '../../utils';
+
+interface BadgeHeaderProps {
+ title: String;
+}
+
+const BadgeListHeader: React.FC<BadgeHeaderProps> = ({title}) => {
+ return (
+ <View style={styles.headerContainer}>
+ <Text style={styles.header}>{title}</Text>
+ </View>
+ );
+};
+
+const styles = StyleSheet.create({
+ headerContainer: {
+ width: SCREEN_WIDTH * 0.75,
+ marginHorizontal: SCREEN_WIDTH * 0.125,
+ marginBottom: '2%',
+ marginTop: '4%',
+ },
+ header: {
+ fontSize: normalize(20),
+ fontWeight: '700',
+ lineHeight: normalize(23.87),
+ color: '#fff',
+ textAlign: 'center',
+ },
+});
+
+export default BadgeListHeader;
diff --git a/src/screens/badge/BadgeScreenHeader.tsx b/src/screens/badge/BadgeScreenHeader.tsx
new file mode 100644
index 00000000..fd250585
--- /dev/null
+++ b/src/screens/badge/BadgeScreenHeader.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import {Image, StyleSheet, Text, View} from 'react-native';
+import {normalize} from '../../utils';
+
+const BadgeScreenHeader: React.FC = () => {
+ return (
+ <View style={styles.container}>
+ <Image source={require('../../assets/images/badges/brown_badge.png')} />
+ <View style={styles.universityTextContainer}>
+ <Text style={styles.universityText}>Brown University Badges</Text>
+ </View>
+ <View style={styles.searchTextContainer}>
+ <Text style={styles.searchText}>
+ Search for organizations you are a part of!
+ </Text>
+ </View>
+ </View>
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {
+ alignItems: 'center',
+ marginBottom: '1%',
+ },
+ universityTextContainer: {marginTop: 12},
+ universityText: {
+ fontSize: normalize(20),
+ fontWeight: '700',
+ lineHeight: normalize(23.87),
+ color: 'white',
+ },
+ searchTextContainer: {marginTop: 6},
+ searchText: {
+ fontSize: normalize(15),
+ fontWeight: '500',
+ lineHeight: normalize(17.9),
+ color: 'white',
+ },
+});
+
+export default BadgeScreenHeader;
diff --git a/src/screens/badge/BadgeSelection.tsx b/src/screens/badge/BadgeSelection.tsx
new file mode 100644
index 00000000..4754960b
--- /dev/null
+++ b/src/screens/badge/BadgeSelection.tsx
@@ -0,0 +1,266 @@
+import AsyncStorage from '@react-native-community/async-storage';
+import {StackNavigationProp} from '@react-navigation/stack';
+import React, {useEffect, useState} from 'react';
+import {Alert, SafeAreaView, StatusBar, StyleSheet, View} from 'react-native';
+import {Text} from 'react-native-animatable';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import LinearGradient from 'react-native-linear-gradient';
+import {useDispatch} from 'react-redux';
+import {ADD_USER_BADGES, BACKGROUND_GRADIENT_MAP} from '../../constants';
+import {
+ ERROR_BADGES_EXCEED_LIMIT,
+ ERROR_UPLOAD_BADGES,
+} from '../../constants/strings';
+import {suggestedPeopleBadgesFinished} from '../../store/actions';
+import {BackgroundGradientType} from '../../types';
+import {SCREEN_HEIGHT, StatusBarHeight} from '../../utils';
+import BadgeList from './BadgeList';
+import BadgeScreenHeader from './BadgeScreenHeader';
+
+/**
+ * Home Screen for displaying Tagg Badge Selections
+ **/
+
+const BadgeImages = {
+ football: require('../../assets/images/badges/football.png'),
+ track: require('../../assets/images/badges/track.png'),
+ volleyball: require('../../assets/images/badges/volleyball.png'),
+ lax: require('../../assets/images/badges/brown_badge.png'),
+ fieldHockey: require('../../assets/images/badges/field_hockey.png'),
+ gymnastics: require('../../assets/images/badges/gymnastics.png'),
+ hockey: require('../../assets/images/badges/hockey.png'),
+ baseball: require('../../assets/images/badges/baseball.png'),
+ basketball: require('../../assets/images/badges/basketball.png'),
+ kappadelta: require('../../assets/images/badges/kappa_delta.png'),
+ alphachiomega: require('../../assets/images/badges/alpha_chi_omega.png'),
+ deltagamma: require('../../assets/images/badges/delta_gamma.png'),
+ sigma: require('../../assets/images/badges/sigma.png'),
+ thetaalpha: require('../../assets/images/badges/theta_alpha.png'),
+ deltaphi: require('../../assets/images/badges/delta_phi.png'),
+ kappaalphapsi: require('../../assets/images/badges/kappa_alpha_psi.png'),
+ alphaphialpha: require('../../assets/images/badges/alpha_phi_alpha.png'),
+ betaomegachi: require('../../assets/images/badges/beta_omega_chi.png'),
+};
+
+const DATA = [
+ {
+ title: 'Athletics',
+ data: [
+ {
+ badgeName: 'Brown Football',
+ badgeImage: BadgeImages.football,
+ },
+ {
+ badgeName: 'Brown Track',
+ badgeImage: BadgeImages.track,
+ },
+ {
+ badgeName: 'Brown Volleyball',
+ badgeImage: BadgeImages.volleyball,
+ },
+ {
+ badgeName: 'Brown LAX',
+ badgeImage: BadgeImages.lax,
+ },
+ {
+ badgeName: 'Brown Field Hockey',
+ badgeImage: BadgeImages.fieldHockey,
+ },
+ {
+ badgeName: 'Brown Gymnastics',
+ badgeImage: BadgeImages.gymnastics,
+ },
+ {
+ badgeName: 'Brown Hockey',
+ badgeImage: BadgeImages.hockey,
+ },
+ {
+ badgeName: 'Brown Baseball',
+ badgeImage: BadgeImages.baseball,
+ },
+ {
+ badgeName: 'Brown Basketball',
+ badgeImage: BadgeImages.basketball,
+ },
+ ],
+ },
+
+ {
+ title: 'Sorority',
+ data: [
+ {
+ badgeName: 'Kappa Delta',
+ badgeImage: BadgeImages.kappadelta,
+ },
+ {
+ badgeName: 'Alpha Chi Omega',
+ badgeImage: BadgeImages.alphachiomega,
+ },
+ {
+ badgeName: 'Delta Gamma',
+ badgeImage: BadgeImages.deltagamma,
+ },
+ ],
+ },
+
+ {
+ title: 'Fraternity',
+ data: [
+ {
+ badgeName: 'Sigma',
+ badgeImage: BadgeImages.sigma,
+ },
+ {
+ badgeName: 'Theta Alpha',
+ badgeImage: BadgeImages.thetaalpha,
+ },
+ {
+ badgeName: 'Delta Phi',
+ badgeImage: BadgeImages.deltaphi,
+ },
+ ],
+ },
+ {
+ title: 'Historically Black Fraternities',
+ data: [
+ {
+ badgeName: 'Kappa Alpha Psi',
+ badgeImage: BadgeImages.kappadelta,
+ },
+ {
+ badgeName: 'Alpha Phi Alpha',
+ badgeImage: BadgeImages.alphaphialpha,
+ },
+ {
+ badgeName: 'Beta Omega Chi',
+ badgeImage: BadgeImages.betaomegachi,
+ },
+ ],
+ },
+];
+
+type BadgeSelectionParamList = {
+ BadgeList: any[];
+};
+
+type BadgeSelectionScreenNavigationProp = StackNavigationProp<
+ BadgeSelectionParamList,
+ 'BadgeList'
+>;
+
+type BadgeSelectionProps = {
+ navigation: BadgeSelectionScreenNavigationProp;
+};
+
+const BadgeSelection: React.FC<BadgeSelectionProps> = ({navigation}) => {
+ const [canSubmit, setCanSubmit] = useState(false);
+ navigation.setOptions({
+ headerRight: () => (
+ <TouchableOpacity
+ style={styles.rightButtonContainer}
+ onPress={() => {
+ if (canSubmit) {
+ uploadUserSelection();
+ }
+ }}>
+ <Text style={styles.rightButton}>{canSubmit ? 'Done' : 'Skip'}</Text>
+ </TouchableOpacity>
+ ),
+ });
+
+ const [selectedBadges, setSelectedBadges] = useState<string[]>([]);
+ const selectKey = (key: string) => {
+ if (selectedBadges.includes(key)) {
+ const selectedBadgesArray = [...selectedBadges];
+ const itemIndex = selectedBadgesArray.indexOf(key);
+ if (itemIndex > -1) {
+ selectedBadgesArray.splice(itemIndex, 1);
+ }
+ setSelectedBadges(selectedBadgesArray);
+ } else {
+ const selectedBadgesArray = [...selectedBadges, key];
+ setSelectedBadges(selectedBadgesArray);
+ }
+ };
+ const dispatch = useDispatch();
+ useEffect(() => {
+ setCanSubmit(selectedBadges.length !== 0);
+ }, [selectedBadges]);
+
+ const uploadUserSelection = async () => {
+ try {
+ const token = await AsyncStorage.getItem('token');
+ const form = new FormData();
+ form.append('badges', JSON.stringify(selectedBadges));
+ const response = await fetch(ADD_USER_BADGES, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'multipart/form-data',
+ Authorization: 'Token ' + token,
+ },
+ body: form,
+ });
+ if (response.status === 400) {
+ Alert.alert(ERROR_BADGES_EXCEED_LIMIT);
+ return;
+ }
+ dispatch(suggestedPeopleBadgesFinished());
+ } catch (error) {
+ console.log(error);
+ Alert.alert(ERROR_UPLOAD_BADGES);
+ }
+ };
+
+ return (
+ <LinearGradient
+ colors={BACKGROUND_GRADIENT_MAP[BackgroundGradientType.Dark]}
+ style={styles.container}>
+ <StatusBar barStyle={'light-content'} />
+ <SafeAreaView>
+ <View style={styles.listContainer}>
+ <BadgeScreenHeader />
+ {/* filter not working, comment out for now */}
+ {/* <SearchBar
+ style={styles.searchBarStyle}
+ onCancel={() => {}}
+ top={Animated.useValue(0)}
+ /> */}
+ <BadgeList
+ data={DATA}
+ selectedBadges={selectedBadges}
+ selectKey={selectKey}
+ />
+ </View>
+ </SafeAreaView>
+ </LinearGradient>
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ },
+ searchBarStyle: {
+ width: '95%',
+ alignSelf: 'center',
+ marginTop: SCREEN_HEIGHT * 0.05,
+ },
+ viewContainer: {marginTop: StatusBarHeight},
+ listContainer: {marginTop: SCREEN_HEIGHT * 0.05},
+ rightButtonContainer: {marginRight: 24},
+ rightButton: {
+ color: '#FFFFFF',
+ fontWeight: 'bold',
+ fontSize: 15,
+ lineHeight: 18,
+ },
+ leftButtonContainer: {marginLeft: 24},
+ leftButton: {
+ color: '#FFFFFF',
+ fontWeight: '500',
+ fontSize: 15,
+ lineHeight: 18,
+ },
+});
+
+export default BadgeSelection;
diff --git a/src/screens/badge/index.ts b/src/screens/badge/index.ts
new file mode 100644
index 00000000..217aa7e8
--- /dev/null
+++ b/src/screens/badge/index.ts
@@ -0,0 +1,5 @@
+export {default as BadgeSelection} from './BadgeSelection';
+export {default as BadgeItem} from './BadgeItem';
+export {default as BadgeListHeader} from './BadgeListHeader';
+export {default as BadgeList} from './BadgeList';
+export {default as BadgeScreenHeader} from './BadgeScreenHeader';
diff --git a/src/screens/index.ts b/src/screens/index.ts
index faf3d0b7..50ada3d1 100644
--- a/src/screens/index.ts
+++ b/src/screens/index.ts
@@ -4,3 +4,4 @@ export * from './profile';
export * from './search';
export * from './suggestedPeople';
export * from './suggestedPeopleOnboarding';
+export * from './badge';
diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx
index aa53c4a9..74bcf906 100644
--- a/src/screens/main/NotificationsScreen.tsx
+++ b/src/screens/main/NotificationsScreen.tsx
@@ -1,8 +1,15 @@
import AsyncStorage from '@react-native-community/async-storage';
import {useFocusEffect} from '@react-navigation/native';
import moment from 'moment';
-import React, {useCallback, useEffect, useState} from 'react';
+import React, {
+ Fragment,
+ ReactElement,
+ useCallback,
+ useEffect,
+ useState,
+} from 'react';
import {
+ Image,
RefreshControl,
SectionList,
StatusBar,
@@ -12,26 +19,22 @@ import {
} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
import {useDispatch, useSelector} from 'react-redux';
+import {TabsGradient, TaggPrompt} from '../../components';
import {Notification} from '../../components/notifications';
-import EmptyNotificationView from './notification/EmptyNotificationView';
import {
loadUserNotifications,
updateNewNotificationReceived,
} from '../../store/actions';
import {RootState} from '../../store/rootReducer';
import {NotificationType, ScreenType} from '../../types';
-import {getDateAge, SCREEN_HEIGHT} from '../../utils';
-import {normalize} from '../../utils';
+import {getDateAge, normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import EmptyNotificationView from './notification/EmptyNotificationView';
const NotificationsScreen: React.FC = () => {
- const {moments: loggedInUserMoments} = useSelector(
- (state: RootState) => state.moments,
- );
const {newNotificationReceived} = useSelector(
(state: RootState) => state.user,
);
const [refreshing, setRefreshing] = useState(false);
- const [noNotification, setNoNotification] = useState(false);
// used for figuring out which ones are unread
const [lastViewed, setLastViewed] = useState<moment.Moment | undefined>(
undefined,
@@ -39,13 +42,14 @@ const NotificationsScreen: React.FC = () => {
const {notifications} = useSelector(
(state: RootState) => state.notifications,
);
-
+ const {suggested_people_linked} = useSelector(
+ (state: RootState) => state.user.profile,
+ );
+ const [showSPNotifyPopUp, setShowSPNotifyPopUp] = useState(false);
const {user: loggedInUser} = useSelector((state: RootState) => state.user);
-
const [sectionedNotifications, setSectionedNotifications] = useState<
{title: 'Today' | 'Yesterday' | 'This Week'; data: NotificationType[]}[]
>([]);
-
const dispatch = useDispatch();
const refreshNotifications = () => {
@@ -62,6 +66,10 @@ const NotificationsScreen: React.FC = () => {
refreshNotifications();
}, [refreshNotifications]);
+ useEffect(() => {
+ setShowSPNotifyPopUp(suggested_people_linked !== 2);
+ }, [suggested_people_linked]);
+
useFocusEffect(
useCallback(() => {
const resetNewNotificationFlag = () => {
@@ -126,15 +134,20 @@ const NotificationsScreen: React.FC = () => {
continue;
}
}
- setSectionedNotifications([
- {title: 'Today', data: todays},
- {title: 'Yesterday', data: yesterdays},
- {title: 'This Week', data: thisWeeks},
- ]);
- setNoNotification(
- todays.length === 0 && yesterdays.length === 0 && thisWeeks.length === 0,
+ setSectionedNotifications(
+ todays.length === 0 && yesterdays.length === 0 && thisWeeks.length === 0
+ ? []
+ : [
+ {title: 'Today', data: todays},
+ {title: 'Yesterday', data: yesterdays},
+ {title: 'This Week', data: thisWeeks},
+ ],
);
- }, [lastViewed, notifications]);
+ }, [lastViewed, notifications, showSPNotifyPopUp]);
+
+ useEffect(() => {
+ console.log(sectionedNotifications);
+ }, [sectionedNotifications]);
const renderNotification = ({item}: {item: NotificationType}) => (
<Notification
@@ -151,35 +164,65 @@ const NotificationsScreen: React.FC = () => {
</View>
);
+ const SPPromptNotification: ReactElement = showSPNotifyPopUp ? (
+ <TaggPrompt
+ messageHeader={'New Suggested People Page!'}
+ messageBody={
+ <>
+ <Text>
+ A new page where you can discover new profiles. Just press the new{' '}
+ </Text>
+ <Image
+ style={styles.icon}
+ source={require('../../assets/navigationIcons/home.png')}
+ />
+ <Text> button on the tab bar to check it out!</Text>
+ </>
+ }
+ logoType={'tagg'}
+ hideCloseButton={true}
+ noPadding={true}
+ onClose={() => {}}
+ />
+ ) : (
+ <Fragment />
+ );
+
return (
- <SafeAreaView>
- <StatusBar barStyle="dark-content" />
- <View style={styles.header}>
- <Text style={styles.headerText}>Notifications</Text>
- </View>
- {noNotification && (
- <View style={styles.emptyViewContainer}>
- <EmptyNotificationView />
+ <View style={styles.background}>
+ <SafeAreaView>
+ <StatusBar barStyle="dark-content" />
+ <View style={styles.header}>
+ <Text style={styles.headerText}>Notifications</Text>
</View>
- )}
-
- {!noNotification && (
<SectionList
contentContainerStyle={styles.container}
sections={sectionedNotifications}
keyExtractor={(item, index) => index.toString()}
renderItem={renderNotification}
renderSectionHeader={renderSectionHeader}
+ ListHeaderComponent={SPPromptNotification}
refreshControl={
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
}
+ ListEmptyComponent={
+ <View style={styles.emptyViewContainer}>
+ <EmptyNotificationView />
+ </View>
+ }
/>
- )}
- </SafeAreaView>
+ </SafeAreaView>
+ <TabsGradient />
+ </View>
);
};
const styles = StyleSheet.create({
+ background: {
+ width: SCREEN_WIDTH,
+ height: SCREEN_HEIGHT,
+ backgroundColor: 'white',
+ },
header: {
marginLeft: '8%',
marginTop: '5%',
@@ -197,7 +240,6 @@ const styles = StyleSheet.create({
},
sectionHeaderContainer: {
width: '100%',
- backgroundColor: '#f3f2f2',
},
sectionHeader: {
marginLeft: '8%',
@@ -209,7 +251,13 @@ const styles = StyleSheet.create({
color: '#828282',
},
emptyViewContainer: {
- marginTop: '22%',
+ flex: 1,
+ justifyContent: 'center',
+ },
+ icon: {
+ width: 20,
+ height: 20,
+ tintColor: 'grey',
},
});
diff --git a/src/screens/profile/SocialMediaTaggs.tsx b/src/screens/profile/SocialMediaTaggs.tsx
index 45d417a6..466ba509 100644
--- a/src/screens/profile/SocialMediaTaggs.tsx
+++ b/src/screens/profile/SocialMediaTaggs.tsx
@@ -12,7 +12,12 @@ import {
} from '../../components';
import {AVATAR_GRADIENT} from '../../constants';
import {ProfileStackParams} from '../../routes';
-import {SimplePostType, TwitterPostType, SocialAccountType, ScreenType} from '../../types';
+import {
+ SimplePostType,
+ TwitterPostType,
+ SocialAccountType,
+ ScreenType,
+} from '../../types';
import {AvatarHeaderHeight, SCREEN_HEIGHT} from '../../utils';
import {useSelector} from 'react-redux';
import {RootState} from '../../store/rootReducer';
diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx
index 84efa931..70733d7e 100644
--- a/src/screens/search/SearchScreen.tsx
+++ b/src/screens/search/SearchScreen.tsx
@@ -16,19 +16,16 @@ import {
SearchBackground,
SearchBar,
SearchHeader,
- SearchResults,
+ SearchResultList,
SearchResultsBackground,
TabsGradient,
} from '../../components';
import {SEARCH_ENDPOINT, TAGG_LIGHT_BLUE} from '../../constants';
+import {loadSearchResults} from '../../services';
import {loadRecentlySearched, resetScreenType} from '../../store/actions';
import {RootState} from '../../store/rootReducer';
-import {ProfilePreviewType, ScreenType, UserType} from '../../types';
+import {ProfilePreviewType, ScreenType} from '../../types';
import {SCREEN_HEIGHT, SCREEN_WIDTH, StatusBarHeight} from '../../utils';
-const NO_USER: UserType = {
- userId: '',
- username: '',
-};
/**
* Search Screen for user recommendations and a search
@@ -38,14 +35,27 @@ const NO_USER: UserType = {
const SearchScreen: React.FC = () => {
const {recentSearches} = useSelector((state: RootState) => state.taggUsers);
const [query, setQuery] = useState<string>('');
- const [results, setResults] = useState<Array<ProfilePreviewType>>([]);
+ const [results, setResults] = useState<Array<any> | undefined>(undefined);
const [recents, setRecents] = useState<Array<ProfilePreviewType>>(
recentSearches ?? [],
);
const [searching, setSearching] = useState(false);
const top = Animated.useValue(-SCREEN_HEIGHT);
const [refreshing, setRefreshing] = useState<boolean>(false);
+ const [keyboardVisible, setKeyboardVisible] = React.useState(
+ 'keyboardVisible',
+ );
+ useEffect(() => {
+ const showKeyboard = () => setKeyboardVisible('keyboardVisibleTrue');
+ Keyboard.addListener('keyboardWillShow', showKeyboard);
+ return () => Keyboard.removeListener('keyboardWillShow', showKeyboard);
+ }, []);
+ useEffect(() => {
+ const hideKeyboard = () => setKeyboardVisible('keyboardVisibleFalse');
+ Keyboard.addListener('keyboardWillHide', hideKeyboard);
+ return () => Keyboard.removeListener('keyboardWillHide', hideKeyboard);
+ }, []);
const dispatch = useDispatch();
const onRefresh = useCallback(() => {
@@ -60,31 +70,31 @@ const SearchScreen: React.FC = () => {
useEffect(() => {
if (query.length < 3) {
- setResults([]);
+ setResults(undefined);
return;
}
- const loadResults = async (q: string) => {
- try {
- const token = await AsyncStorage.getItem('token');
- const response = await fetch(`${SEARCH_ENDPOINT}?query=${q}`, {
- method: 'GET',
- headers: {
- Authorization: 'Token ' + token,
+ (async () => {
+ const searchResults = await loadSearchResults(
+ `${SEARCH_ENDPOINT}?query=${query}`,
+ );
+ if (query.length > 2) {
+ const categories = searchResults?.categories;
+ const users = searchResults?.users;
+ const sanitizedResult = [
+ {
+ title: 'categories',
+ data: categories,
+ },
+ {
+ title: 'users',
+ data: users,
},
- });
- const status = response.status;
- if (status === 200) {
- let searchResults = await response.json();
- setResults(searchResults);
- return;
- }
- setResults([]);
- } catch (error) {
- console.log(error);
- setResults([]);
+ ];
+ setResults(sanitizedResult);
+ } else {
+ setResults(undefined);
}
- };
- loadResults(query);
+ })();
}, [query]);
/**
@@ -160,8 +170,9 @@ const SearchScreen: React.FC = () => {
{...{top, searching}}
/>
<Explore />
+
<SearchResultsBackground {...{top}}>
- {results.length === 0 && recents.length !== 0 ? (
+ {results === undefined && recents.length !== 0 ? (
<RecentSearches
sectionTitle="Recent"
sectionButtonTitle="Clear all"
@@ -170,8 +181,9 @@ const SearchScreen: React.FC = () => {
screenType={ScreenType.Search}
/>
) : (
- <SearchResults
+ <SearchResultList
{...{results}}
+ keyboardVisible={keyboardVisible === 'keyboardVisibleTrue'}
previewType={'Search'}
screenType={ScreenType.Search}
/>
diff --git a/src/screens/search/mock.ts b/src/screens/search/mock.ts
new file mode 100644
index 00000000..d9909b22
--- /dev/null
+++ b/src/screens/search/mock.ts
@@ -0,0 +1,118 @@
+const MockResults = () => {
+ return {
+ categories: [
+ {
+ id: 11,
+ name: "Brown '21",
+ category: 'Brown',
+ },
+ {
+ id: 12,
+ name: "Brown '22",
+ category: 'Brown',
+ },
+ {
+ id: 13,
+ name: "Brown '23",
+ category: null,
+ },
+ {
+ id: 14,
+ name: "Brown '24",
+ category: null,
+ },
+ ],
+ users: [
+ {
+ id: 'd5295557-59ce-49fc-aa8a-442874dbffc3',
+ username: 'foobar',
+ first_name: 'Foo',
+ last_name: 'Bar',
+ thumbnail_url:
+ 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-d5295557-59ce-49fc-aa8a-442874dbffc3-thumbnail.jpg',
+ },
+ {
+ id: '31e93eb5-ccc9-4743-b053-eff368e23fa8',
+ username: 'foobar2',
+ first_name: 'Foo',
+ last_name: 'Bar',
+ thumbnail_url:
+ 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-31e93eb5-ccc9-4743-b053-eff368e23fa8-thumbnail.jpg',
+ },
+ {
+ id: 'b1b68df9-97ac-48de-b00d-eab10a6a644a',
+ username: 'foobar3',
+ first_name: 'Foo',
+ last_name: 'Bar',
+ thumbnail_url:
+ 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-b1b68df9-97ac-48de-b00d-eab10a6a644a-thumbnail.jpg',
+ },
+ {
+ id: 'b89c88b3-6b2f-4b6c-85d9-a03ff5396113',
+ username: 'foobar4',
+ first_name: 'Foo',
+ last_name: 'Bar',
+ thumbnail_url:
+ 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-b89c88b3-6b2f-4b6c-85d9-a03ff5396113-thumbnail.jpg',
+ },
+ {
+ id: '73b4496a-0aa8-4115-98da-2070bf326134',
+ username: 'foobar5',
+ first_name: 'Foo',
+ last_name: 'Bar',
+ thumbnail_url:
+ 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-73b4496a-0aa8-4115-98da-2070bf326134-thumbnail.jpg',
+ },
+ {
+ id: '329763b8-931e-4d4d-8a07-003374d38497',
+ username: 'foobar6',
+ first_name: 'Foo',
+ last_name: 'Bar',
+ thumbnail_url:
+ 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-329763b8-931e-4d4d-8a07-003374d38497-thumbnail.jpg',
+ },
+ {
+ id: '9e82fea2-cddc-41e1-be05-6873f58138ca',
+ username: 'foobar7',
+ first_name: 'Foo',
+ last_name: 'Bar',
+ thumbnail_url:
+ 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-9e82fea2-cddc-41e1-be05-6873f58138ca-thumbnail.jpg',
+ },
+ {
+ id: '6e5b8892-4384-45a1-bc0a-8f2c9d614fbc',
+ username: 'foobar8',
+ first_name: 'Foo',
+ last_name: 'Bar',
+ thumbnail_url:
+ 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-6e5b8892-4384-45a1-bc0a-8f2c9d614fbc-thumbnail.jpg',
+ },
+ {
+ id: 'c49b01c6-9151-4654-8fae-834adfa15727',
+ username: 'foobar9',
+ first_name: 'Foo',
+ last_name: 'Bar',
+ thumbnail_url:
+ 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-c49b01c6-9151-4654-8fae-834adfa15727-thumbnail.jpg',
+ },
+ {
+ id: '5b394d5b-62e3-405e-8ecd-7433517ef688',
+ username: 'foobar10',
+ first_name: 'Foo',
+ last_name: 'Bar',
+ thumbnail_url:
+ 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-5b394d5b-62e3-405e-8ecd-7433517ef688-thumbnail.jpg',
+ },
+ {
+ id: '698e38f0-24ed-404c-9f0c-6a24e43af576',
+ username: 'fooo',
+ first_name: 'wefwef',
+ last_name: 'wefwef',
+ thumbnail_url:
+ 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-698e38f0-24ed-404c-9f0c-6a24e43af576-thumbnail.jpg',
+ },
+ ],
+ };
+};
+
+export default MockResults;
diff --git a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx
index c587e930..bb8aaccf 100644
--- a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx
+++ b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx
@@ -76,6 +76,7 @@ const SuggestedPeopleUploadPictureScreen: React.FC = ({route}) => {
const success = await sendSuggestedPeoplePhoto(image);
if (success) {
dispatch(uploadedSuggestedPeoplePhoto(image));
+ navigation.push('BadgeSelection');
} else {
Alert.alert(ERROR_UPLOAD);
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-12-10 09:47:19 +0000