From c01a9f1e864560e631147bfe3bf8ab60384dcd33 Mon Sep 17 00:00:00 2001 From: ankit-thanekar007 Date: Tue, 16 Feb 2021 15:37:56 -0800 Subject: Badge Screen UI Changes --- src/assets/images/dummy_badge.png | Bin 0 -> 843 bytes src/assets/images/football.png | Bin 0 -> 5374 bytes 2 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/assets/images/dummy_badge.png create mode 100644 src/assets/images/football.png (limited to 'src/assets') diff --git a/src/assets/images/dummy_badge.png b/src/assets/images/dummy_badge.png new file mode 100644 index 00000000..bcffb6e3 Binary files /dev/null and b/src/assets/images/dummy_badge.png differ diff --git a/src/assets/images/football.png b/src/assets/images/football.png new file mode 100644 index 00000000..2e8214b7 Binary files /dev/null and b/src/assets/images/football.png differ -- cgit v1.2.3-70-g09d2 From f8d251d30ef5aff0ee1cef50e2a2e3e1f367efd1 Mon Sep 17 00:00:00 2001 From: ankit-thanekar007 Date: Wed, 24 Feb 2021 12:14:11 -0800 Subject: Resetting old commit --- src/assets/images/badges/alpha_chi_omega.png | Bin 0 -> 1039 bytes src/assets/images/badges/alpha_phi_alpha.png | Bin 0 -> 1107 bytes src/assets/images/badges/baseball.png | Bin 0 -> 1305 bytes src/assets/images/badges/basketball.png | Bin 0 -> 1484 bytes src/assets/images/badges/beta_omega_chi.png | Bin 0 -> 1187 bytes src/assets/images/badges/brown_badge.png | Bin 0 -> 843 bytes src/assets/images/badges/delta_gamma.png | Bin 0 -> 643 bytes src/assets/images/badges/delta_phi.png | Bin 0 -> 857 bytes src/assets/images/badges/field_hockey.png | Bin 0 -> 970 bytes src/assets/images/badges/football.png | Bin 0 -> 5374 bytes src/assets/images/badges/gymnastics.png | Bin 0 -> 1643 bytes src/assets/images/badges/hockey.png | Bin 0 -> 1077 bytes src/assets/images/badges/kappa_alpha_psi.png | Bin 0 -> 1018 bytes src/assets/images/badges/kappa_delta.png | Bin 0 -> 758 bytes src/assets/images/badges/lax.png | Bin 0 -> 1091 bytes src/assets/images/badges/sigma.png | Bin 0 -> 685 bytes src/assets/images/badges/theta_alpha.png | Bin 0 -> 852 bytes src/assets/images/badges/track.png | Bin 0 -> 1162 bytes src/assets/images/badges/volleyball.png | Bin 0 -> 1674 bytes src/assets/images/dummy_badge.png | Bin 843 -> 0 bytes src/assets/images/football.png | Bin 5374 -> 0 bytes src/constants/api.ts | 1 + src/routes/main/MainStackScreen.tsx | 2 +- src/screens/badge/BadgeItem.tsx | 67 +++++-- src/screens/badge/BadgeList.tsx | 25 ++- src/screens/badge/BadgeListHeader.tsx | 3 +- src/screens/badge/BadgeScreenHeader.tsx | 2 +- src/screens/badge/BadgeSelection.tsx | 259 ++++++++++++++++++++++----- 28 files changed, 287 insertions(+), 72 deletions(-) create mode 100644 src/assets/images/badges/alpha_chi_omega.png create mode 100644 src/assets/images/badges/alpha_phi_alpha.png create mode 100644 src/assets/images/badges/baseball.png create mode 100644 src/assets/images/badges/basketball.png create mode 100644 src/assets/images/badges/beta_omega_chi.png create mode 100644 src/assets/images/badges/brown_badge.png create mode 100644 src/assets/images/badges/delta_gamma.png create mode 100644 src/assets/images/badges/delta_phi.png create mode 100644 src/assets/images/badges/field_hockey.png create mode 100644 src/assets/images/badges/football.png create mode 100644 src/assets/images/badges/gymnastics.png create mode 100644 src/assets/images/badges/hockey.png create mode 100644 src/assets/images/badges/kappa_alpha_psi.png create mode 100644 src/assets/images/badges/kappa_delta.png create mode 100644 src/assets/images/badges/lax.png create mode 100644 src/assets/images/badges/sigma.png create mode 100644 src/assets/images/badges/theta_alpha.png create mode 100644 src/assets/images/badges/track.png create mode 100644 src/assets/images/badges/volleyball.png delete mode 100644 src/assets/images/dummy_badge.png delete mode 100644 src/assets/images/football.png (limited to 'src/assets') diff --git a/src/assets/images/badges/alpha_chi_omega.png b/src/assets/images/badges/alpha_chi_omega.png new file mode 100644 index 00000000..473894cc Binary files /dev/null and b/src/assets/images/badges/alpha_chi_omega.png differ diff --git a/src/assets/images/badges/alpha_phi_alpha.png b/src/assets/images/badges/alpha_phi_alpha.png new file mode 100644 index 00000000..275e0eb3 Binary files /dev/null and b/src/assets/images/badges/alpha_phi_alpha.png differ diff --git a/src/assets/images/badges/baseball.png b/src/assets/images/badges/baseball.png new file mode 100644 index 00000000..7b470dbe Binary files /dev/null and b/src/assets/images/badges/baseball.png differ diff --git a/src/assets/images/badges/basketball.png b/src/assets/images/badges/basketball.png new file mode 100644 index 00000000..45d1139b Binary files /dev/null and b/src/assets/images/badges/basketball.png differ diff --git a/src/assets/images/badges/beta_omega_chi.png b/src/assets/images/badges/beta_omega_chi.png new file mode 100644 index 00000000..f2a85996 Binary files /dev/null and b/src/assets/images/badges/beta_omega_chi.png differ diff --git a/src/assets/images/badges/brown_badge.png b/src/assets/images/badges/brown_badge.png new file mode 100644 index 00000000..bcffb6e3 Binary files /dev/null and b/src/assets/images/badges/brown_badge.png differ diff --git a/src/assets/images/badges/delta_gamma.png b/src/assets/images/badges/delta_gamma.png new file mode 100644 index 00000000..84182eca Binary files /dev/null and b/src/assets/images/badges/delta_gamma.png differ diff --git a/src/assets/images/badges/delta_phi.png b/src/assets/images/badges/delta_phi.png new file mode 100644 index 00000000..074317d1 Binary files /dev/null and b/src/assets/images/badges/delta_phi.png differ diff --git a/src/assets/images/badges/field_hockey.png b/src/assets/images/badges/field_hockey.png new file mode 100644 index 00000000..766f0f60 Binary files /dev/null and b/src/assets/images/badges/field_hockey.png differ diff --git a/src/assets/images/badges/football.png b/src/assets/images/badges/football.png new file mode 100644 index 00000000..2e8214b7 Binary files /dev/null and b/src/assets/images/badges/football.png differ diff --git a/src/assets/images/badges/gymnastics.png b/src/assets/images/badges/gymnastics.png new file mode 100644 index 00000000..5d500f26 Binary files /dev/null and b/src/assets/images/badges/gymnastics.png differ diff --git a/src/assets/images/badges/hockey.png b/src/assets/images/badges/hockey.png new file mode 100644 index 00000000..7e269665 Binary files /dev/null and b/src/assets/images/badges/hockey.png differ diff --git a/src/assets/images/badges/kappa_alpha_psi.png b/src/assets/images/badges/kappa_alpha_psi.png new file mode 100644 index 00000000..1b7d7aff Binary files /dev/null and b/src/assets/images/badges/kappa_alpha_psi.png differ diff --git a/src/assets/images/badges/kappa_delta.png b/src/assets/images/badges/kappa_delta.png new file mode 100644 index 00000000..642ddb5b Binary files /dev/null and b/src/assets/images/badges/kappa_delta.png differ diff --git a/src/assets/images/badges/lax.png b/src/assets/images/badges/lax.png new file mode 100644 index 00000000..3810589b Binary files /dev/null and b/src/assets/images/badges/lax.png differ diff --git a/src/assets/images/badges/sigma.png b/src/assets/images/badges/sigma.png new file mode 100644 index 00000000..7e6c9d22 Binary files /dev/null and b/src/assets/images/badges/sigma.png differ diff --git a/src/assets/images/badges/theta_alpha.png b/src/assets/images/badges/theta_alpha.png new file mode 100644 index 00000000..607720f5 Binary files /dev/null and b/src/assets/images/badges/theta_alpha.png differ diff --git a/src/assets/images/badges/track.png b/src/assets/images/badges/track.png new file mode 100644 index 00000000..a531f641 Binary files /dev/null and b/src/assets/images/badges/track.png differ diff --git a/src/assets/images/badges/volleyball.png b/src/assets/images/badges/volleyball.png new file mode 100644 index 00000000..a9bb9c88 Binary files /dev/null and b/src/assets/images/badges/volleyball.png differ diff --git a/src/assets/images/dummy_badge.png b/src/assets/images/dummy_badge.png deleted file mode 100644 index bcffb6e3..00000000 Binary files a/src/assets/images/dummy_badge.png and /dev/null differ diff --git a/src/assets/images/football.png b/src/assets/images/football.png deleted file mode 100644 index 2e8214b7..00000000 Binary files a/src/assets/images/football.png and /dev/null differ diff --git a/src/constants/api.ts b/src/constants/api.ts index 57c26824..dcc2032d 100644 --- a/src/constants/api.ts +++ b/src/constants/api.ts @@ -32,6 +32,7 @@ export const NOTIFICATIONS_ENDPOINT: string = API_URL + 'notifications/'; export const DISCOVER_ENDPOINT: string = API_URL + 'discover/'; export const WAITLIST_USER_ENDPOINT: string = API_URL + 'waitlist-user/'; export const COMMENT_THREAD_ENDPOINT: string = API_URL + 'reply/'; +export const ADD_USER_BADGES: string = API_URL + 'suggested_people/add_badges/'; // Suggested People export const SP_USERS_ENDPOINT: string = API_URL + 'suggested_people/'; diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index b99e2e3a..7b55d249 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -236,7 +236,7 @@ const MainStackScreen: React.FC = ({route}) => { name="Badge" component={BadgeSelection} options={{ - ...headerBarOptions('white', 'Badge'), + ...headerBarOptions('white', ''), }} /> diff --git a/src/screens/badge/BadgeItem.tsx b/src/screens/badge/BadgeItem.tsx index 6d2a2f2e..790fea0a 100644 --- a/src/screens/badge/BadgeItem.tsx +++ b/src/screens/badge/BadgeItem.tsx @@ -1,33 +1,46 @@ import React from 'react'; -import {View, Text, StyleSheet, Image} from 'react-native'; +import {View, Text, StyleSheet, Image, ImageSourcePropType} from 'react-native'; import {Background} from '../../components'; 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: String; + title: string; + resourcePath: ImageSourcePropType; index: Number; + selected: boolean; + onSelection: (ikey: string) => void; + itemKey: string; } -const BadgeItem: React.FC = ({title, index}) => { +const BadgeItem: React.FC = ({ + title, + resourcePath, + selected, + index, + onSelection, + itemKey, +}) => { return ( - - - - - {title} + onSelection(itemKey)}> + + + + + {title} + - - + + ); }; @@ -39,7 +52,22 @@ const styles = StyleSheet.create({ marginBottom: 12, borderRadius: 8, }, - detailContainer: {flex: 1, justifyContent: 'center', alignItems: 'center'}, + detailContainer: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + borderWidth: 3, + borderRadius: 8, + borderColor: 'transparent', + }, + selectedDetailContainer: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + borderWidth: 3, + borderColor: 'white', + borderRadius: 8, + }, imageStyles: { width: '31%', height: '31%', @@ -52,6 +80,7 @@ const styles = StyleSheet.create({ lineHeight: normalize(17.9), textAlign: 'center', color: 'white', + marginHorizontal: '2%', }, }); diff --git a/src/screens/badge/BadgeList.tsx b/src/screens/badge/BadgeList.tsx index aa95b464..0f9fa67e 100644 --- a/src/screens/badge/BadgeList.tsx +++ b/src/screens/badge/BadgeList.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {useState} from 'react'; import {StyleSheet, SectionList, ScrollView, View} from 'react-native'; import BadgeItem from './BadgeItem'; import BadgeHeader from './BadgeListHeader'; @@ -6,9 +6,12 @@ import {SCREEN_HEIGHT} from '../../utils'; interface BadgeListProps { data: any[]; + selectedBadges : any[], + selectKey: (ikey: string) => void; } -const BadgeList: React.FC = ({data}) => { +const BadgeList: React.FC = ({data, selectedBadges, selectKey}) => { + return ( @@ -16,9 +19,21 @@ const BadgeList: React.FC = ({data}) => { contentContainerStyle={styles.listContainer} sections={data} keyExtractor={(item, index) => item + index} - renderItem={({item, index}) => ( - - )} + extraData={selectedBadges} + renderItem={({item: {badgeName, badgeImage}, index}) => { + return ( + + ); + }} renderSectionHeader={({section: {title}}) => ( )} diff --git a/src/screens/badge/BadgeListHeader.tsx b/src/screens/badge/BadgeListHeader.tsx index 57364d22..27335dfb 100644 --- a/src/screens/badge/BadgeListHeader.tsx +++ b/src/screens/badge/BadgeListHeader.tsx @@ -18,7 +18,8 @@ const styles = StyleSheet.create({ headerContainer: { width: SCREEN_WIDTH * 0.75, marginHorizontal: SCREEN_WIDTH * 0.125, - marginBottom: 17, + marginBottom: '2%', + marginTop: '4%', }, header: { fontSize: normalize(20), diff --git a/src/screens/badge/BadgeScreenHeader.tsx b/src/screens/badge/BadgeScreenHeader.tsx index 6cc576a8..7f722e28 100644 --- a/src/screens/badge/BadgeScreenHeader.tsx +++ b/src/screens/badge/BadgeScreenHeader.tsx @@ -5,7 +5,7 @@ import {SCREEN_WIDTH, SCREEN_HEIGHT, normalize} from '../../utils'; const BadgeScreenHeader: React.FC = () => { return ( - + Brown University Badges diff --git a/src/screens/badge/BadgeSelection.tsx b/src/screens/badge/BadgeSelection.tsx index 924eefc3..3c718202 100644 --- a/src/screens/badge/BadgeSelection.tsx +++ b/src/screens/badge/BadgeSelection.tsx @@ -1,11 +1,5 @@ -import React from 'react'; -import { - StatusBar, - SafeAreaView, - View, - StyleSheet, - ScrollView, -} from 'react-native'; +import React, {useEffect, useState} from 'react'; +import {StatusBar, SafeAreaView, View, StyleSheet} from 'react-native'; import {BackgroundGradientType} from '../../types'; import {Background} from '../../components'; import {StatusBarHeight, SCREEN_HEIGHT} from '../../utils'; @@ -13,60 +7,231 @@ import LinearGradient from 'react-native-linear-gradient'; import {BACKGROUND_GRADIENT_MAP} from '../../constants'; import BadgeList from './BadgeList'; import BadgeScreenHeader from './BadgeScreenHeader'; - +import {ADD_USER_BADGES} from '../../constants'; +import {getTokenOrLogout} from './../../utils'; import Animated from 'react-native-reanimated'; import {SearchBar} from '../../components'; + +import {StackNavigationProp} from '@react-navigation/stack'; + /** - * Home Screen for displaying Tagg post suggestions - * for users to discover and browse - */ + * 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: 'Historically Black Fraternities', - data: ['Pizza', 'Burger', 'Risotto'], + 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: 'Sides', + title: 'Sorority', data: [ - 'French Fries', - 'Onion Rings', - 'Fried Shrimps', - 'French Fries', - 'Onion Rings', - 'Fried Shrimps', - 'French Fries', - 'Onion Rings', - 'Fried Shrimps', - 'French Fries', - 'Onion Rings', - 'Fried Shrimps', - 'French Fries', - 'Onion Rings', - 'Fried Shrimps', - 'French Fries', - 'Onion Rings', - 'Fried Shrimps', - 'French Fries', - 'Onion Rings', - 'Fried Shrimps', - 'French Fries', - 'Onion Rings', - 'Fried Shrimps', + { + badgeName: 'Kappa Delta', + badgeImage: BadgeImages.kappadelta, + }, + { + badgeName: 'Alpha Chi Omega', + badgeImage: BadgeImages.alphachiomega, + }, + { + badgeName: 'Delta Gamma', + badgeImage: BadgeImages.deltagamma, + }, ], }, + { - title: 'Drinks', - data: ['Water', 'Coke', 'Beer'], + title: 'Fraternity', + data: [ + { + badgeName: 'Sigma', + badgeImage: BadgeImages.sigma, + }, + { + badgeName: 'Theta Alpha', + badgeImage: BadgeImages.thetaalpha, + }, + { + badgeName: 'Delta Phi', + badgeImage: BadgeImages.deltaphi, + }, + ], }, { - title: 'Desserts', - data: ['Cheese Cake', 'Ice Cream'], + 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, + }, + ], }, ]; -const BadgeSelection: React.FC = () => { +import {TouchableOpacity} from 'react-native-gesture-handler'; +import {Text} from 'react-native-animatable'; +import {useDispatch} from 'react-redux'; + +type BadgeSelectionParamList = { + BadgeList: any[]; +}; + +type BadgeSelectionScreenNavigationProp = StackNavigationProp< + BadgeSelectionParamList, + 'BadgeList' +>; + +type BadgeSelectionProps = { + navigation: BadgeSelectionScreenNavigationProp; +}; + +const BadgeSelection: React.FC = ({navigation}) => { + const [canSubmit, setCanSubmit] = useState(false); + navigation.setOptions({ + headerRight: () => ( + { + if (canSubmit) { + uploadUserSelection(); + } + }}> + + {canSubmit ? 'Done' : 'Skip'} + + + ), + headerLeft: () => ( + + + Cancel + + + ), + }); + + const [selectedBadges, setSelectedBadges] = useState(Array()); + 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 getTokenOrLogout(dispatch); + const reqBody = JSON.stringify({ + badges: selectedBadges, + }); + const response = await fetch(ADD_USER_BADGES, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + Authorization: 'Token ' + token, + }, + body: reqBody, + }); + const status = response.status; + const data = await response.json(); + console.log(response); + } catch (error) { + console.log(error); + } + }; + return ( { top={Animated.useValue(0)} /> - + -- cgit v1.2.3-70-g09d2 From af349a745bb00b5260f84909320d511ae9d0af2b Mon Sep 17 00:00:00 2001 From: ankit-thanekar007 Date: Tue, 2 Mar 2021 17:28:02 -0800 Subject: updated formatting, minor changes and integration testing --- src/assets/images/bwbadges.png | Bin 0 -> 528 bytes src/assets/images/bwbadges@2x.png | Bin 0 -> 991 bytes src/assets/images/bwbadges@3x.png | Bin 0 -> 1438 bytes src/assets/images/search.png | Bin 0 -> 354 bytes src/assets/images/search@2x.png | Bin 0 -> 643 bytes src/assets/images/search@3x.png | Bin 0 -> 901 bytes src/components/search/SearchResultCell.tsx | 208 ++++++++++++++++------------- src/components/search/SearchResultList.tsx | 64 ++++----- src/constants/api.ts | 1 + src/screens/search/SearchScreen.tsx | 100 +++++++++----- src/screens/search/mock.ts | 4 + 11 files changed, 218 insertions(+), 159 deletions(-) create mode 100644 src/assets/images/bwbadges.png create mode 100644 src/assets/images/bwbadges@2x.png create mode 100644 src/assets/images/bwbadges@3x.png create mode 100644 src/assets/images/search.png create mode 100644 src/assets/images/search@2x.png create mode 100644 src/assets/images/search@3x.png (limited to 'src/assets') diff --git a/src/assets/images/bwbadges.png b/src/assets/images/bwbadges.png new file mode 100644 index 00000000..3a337775 Binary files /dev/null and b/src/assets/images/bwbadges.png differ diff --git a/src/assets/images/bwbadges@2x.png b/src/assets/images/bwbadges@2x.png new file mode 100644 index 00000000..60c2f995 Binary files /dev/null and b/src/assets/images/bwbadges@2x.png differ diff --git a/src/assets/images/bwbadges@3x.png b/src/assets/images/bwbadges@3x.png new file mode 100644 index 00000000..874c0c4d Binary files /dev/null and b/src/assets/images/bwbadges@3x.png differ diff --git a/src/assets/images/search.png b/src/assets/images/search.png new file mode 100644 index 00000000..ba9906ba Binary files /dev/null and b/src/assets/images/search.png differ diff --git a/src/assets/images/search@2x.png b/src/assets/images/search@2x.png new file mode 100644 index 00000000..fa133ae1 Binary files /dev/null and b/src/assets/images/search@2x.png differ diff --git a/src/assets/images/search@3x.png b/src/assets/images/search@3x.png new file mode 100644 index 00000000..3ea4ce15 Binary files /dev/null and b/src/assets/images/search@3x.png differ diff --git a/src/components/search/SearchResultCell.tsx b/src/components/search/SearchResultCell.tsx index 46d5ee44..cdeed922 100644 --- a/src/components/search/SearchResultCell.tsx +++ b/src/components/search/SearchResultCell.tsx @@ -1,100 +1,128 @@ -import React, {useEffect, useState} from 'react'; -import {ProfilePreviewType, PreviewType, ScreenType} from '../../types'; -import ProfilePreview from '../profile/ProfilePreview'; -import {Image, SectionList, StyleSheet, View, Text} from 'react-native'; -import {normalize} from '../../utils'; -import {defaultUserProfile} from '../../utils/users'; -import {loadImageFromURL} from '../../services'; +import React, { useEffect, useState } from 'react'; +import { Image, StyleSheet, Text, View } from 'react-native'; +import { loadImageFromURL } from '../../services'; +import { ProfilePreviewType } from '../../types'; +import { normalize, SCREEN_WIDTH } from '../../utils'; +import { defaultUserProfile } from '../../utils/users'; +interface SearchResults { + profileData: ProfilePreviewType; +} -const SearchResultsCell: React.FC = ({ - item: {id, name, username, first_name, last_name, thumbnail_url}, - }) => { - const [avatar, setAvatar] = useState(''); - useEffect(() => { - (async () => { - const response = await loadImageFromURL(thumbnail_url); - if (response) { - setAvatar(response); +const SearchResultsCell: React.FC = ({ + profileData: { + id, + name, + username, + first_name, + last_name, + thumbnail_url, + category, + }, +}) => { + const [avatar, setAvatar] = useState(''); + useEffect(() => { + (async () => { + if (thumbnail_url !== undefined) { + try { + const response = await loadImageFromURL(thumbnail_url); + if (response) { + setAvatar(response); + } + } catch (error) { + console.log('Error while downloading ', error); + throw error; } - })(); - }, []); - - const userCell = () => { - return ( - - - - - {username} - - - {first_name + ' ' + last_name} - - + } + })(); + }, [thumbnail_url]); + + const userCell = () => { + return ( + + + + {`@${username}`} + + {first_name + ' ' + last_name} + - ); - }; - - const categoryCell = () => { - return ( - + + ); + }; + + const searchIcon = () => { + return require('../../assets/images/search.png'); + }; + + const universityIcon = () => { + return require('../../assets/images/bwbadges.png'); + }; + + const categoryCell = () => { + return ( + + - - - {name} - - - ); - }; - - return ( - <> - {name !== undefined && categoryCell()} - {name === undefined && userCell()} - + + {name} + + ); }; - export default SearchResultsCell \ No newline at end of file + return ( + <> + {name !== undefined && categoryCell()} + {name === undefined && userCell()} + + ); +}; + +const styles = StyleSheet.create({ + cellContainer: { + flexDirection: 'row', + marginHorizontal: SCREEN_WIDTH * 0.08, + marginBottom: SCREEN_WIDTH * 0.08, + }, + imageContainer: { + width: SCREEN_WIDTH * 0.112, + height: SCREEN_WIDTH * 0.112, + borderRadius: (SCREEN_WIDTH * 0.112) / 2, + }, + categoryBackground: { + backgroundColor: 'rgba(196, 196, 196, 0.45)', + justifyContent: 'center', + alignItems: 'center', + }, + categoryImage: { + width: '40%', + height: '40%', + }, + initialTextContainer: { + marginLeft: SCREEN_WIDTH * 0.08, + flexDirection: 'column', + justifyContent: 'center', + }, + initialTextStyle: { + fontWeight: '500', + fontSize: normalize(14), + }, + secondaryTextStyle: { + fontWeight: '500', + fontSize: normalize(12), + color: '#828282', + }, + multiText: {justifyContent: 'space-between'}, +}); + +export default SearchResultsCell; diff --git a/src/components/search/SearchResultList.tsx b/src/components/search/SearchResultList.tsx index 702ce7c8..c464e7b1 100644 --- a/src/components/search/SearchResultList.tsx +++ b/src/components/search/SearchResultList.tsx @@ -1,10 +1,11 @@ -import React, {useEffect, useState} from 'react'; -import {ProfilePreviewType, PreviewType, ScreenType} from '../../types'; -import ProfilePreview from '../profile/ProfilePreview'; -import {Image, SectionList, StyleSheet, View, Text} from 'react-native'; -import {normalize} from '../../utils'; -import {defaultUserProfile} from '../../utils/users'; -import {loadImageFromURL} from '../../services'; +import React from 'react'; +import { + SectionList, + StyleSheet, + View +} from 'react-native'; +import { PreviewType, ScreenType } from '../../types'; +import { normalize, SCREEN_HEIGHT } from '../../utils'; import SearchResultsCell from './SearchResultCell'; interface SearchResultsProps { @@ -13,37 +14,36 @@ interface SearchResultsProps { screenType: ScreenType; } +const sectionHeader: React.FC = (showBorder: Boolean) => { + if (showBorder) { + return ; + } + return null; +}; + const SearchResultList: React.FC = ({results}) => { return ( - - item + index} - renderItem={({item}) => } - renderSectionHeader={({section: {title}}) => { - if (title === 'categories') { - return ; - } - return ( - - ); - }} - /> - + item + index} + renderItem={({item}) => } + renderSectionHeader={({section: {title}}) => + sectionHeader(title !== 'categories') + } + /> ); }; const styles = StyleSheet.create({ - containerSearch: {flexDirection: 'column', flexWrap: 'wrap'}, - container: {flex: 1, marginTop: 24}, + container: {flex: 1, marginTop: SCREEN_HEIGHT * 0.02}, + sectionHeaderStyle: { + width: '100%', + height: 0.5, + marginBottom: normalize(24), + backgroundColor: '#C4C4C4', + }, }); export default SearchResultList; diff --git a/src/constants/api.ts b/src/constants/api.ts index 57c26824..5e23ac7e 100644 --- a/src/constants/api.ts +++ b/src/constants/api.ts @@ -18,6 +18,7 @@ export const GET_IG_POSTS_ENDPOINT: string = API_URL + 'posts-ig/'; export const GET_FB_POSTS_ENDPOINT: string = API_URL + 'posts-fb/'; export const GET_TWITTER_POSTS_ENDPOINT: string = API_URL + 'posts-twitter/'; export const SEARCH_ENDPOINT: string = API_URL + 'search/'; +export const SEARCH_V2_ENDPOINT: string = API_URL + 'search/v2/'; export const MOMENTS_ENDPOINT: string = API_URL + 'moments/'; export const MOMENT_THUMBNAIL_ENDPOINT: string = API_URL + 'moment-thumbnail/'; export const VERIFY_INVITATION_CODE_ENDPOUNT: string = API_URL + 'verify-code/'; diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx index c3bd9fec..39b0425d 100644 --- a/src/screens/search/SearchScreen.tsx +++ b/src/screens/search/SearchScreen.tsx @@ -21,7 +21,11 @@ import { SearchResultList, TabsGradient, } from '../../components'; -import {SEARCH_ENDPOINT, TAGG_LIGHT_BLUE} from '../../constants'; +import { + SEARCH_ENDPOINT, + SEARCH_V2_ENDPOINT, + TAGG_LIGHT_BLUE, +} from '../../constants'; import {loadRecentlySearched, resetScreenType} from '../../store/actions'; import {RootState} from '../../store/rootReducer'; import {ProfilePreviewType, ScreenType, UserType} from '../../types'; @@ -40,7 +44,7 @@ const NO_USER: UserType = { const SearchScreen: React.FC = () => { const {recentSearches} = useSelector((state: RootState) => state.taggUsers); const [query, setQuery] = useState(''); - const [results, setResults] = useState([]); + const [results, setResults] = useState(Array()); const [recents, setRecents] = useState>( recentSearches ?? [], ); @@ -65,40 +69,62 @@ const SearchScreen: React.FC = () => { setResults([]); 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, - // }, - // }); - // const status = response.status; - // if (status === 200) { - // let searchResults = await response.json(); - // setResults(searchResults); - // return; - // } - // setResults([]); - // } catch (error) { - // console.log(error); - // setResults([]); - // } - const searchResults = MockResults(); - const sanitizedResult = [ - { - title: 'categories', - data: searchResults.categories, - }, - { - title: 'users', - data: searchResults.users, - }, - ]; - setResults(sanitizedResult); - }; - loadResults(query); + // const loadResults = async (q: string) => { + // try { + // const token = await AsyncStorage.getItem('token'); + // const response = await fetch(`${SEARCH_V2_ENDPOINT}?query=${q}`, { + // method: 'GET', + // headers: { + // Authorization: 'Token ' + token, + // }, + // }); + // const {status} = response; + // if (status === 200) { + // const searchResults = await response.json(); + // const sanitizedResult = [ + // { + // title: 'categories', + // data: searchResults.categories, + // }, + // { + // title: 'users', + // data: searchResults.users, + // }, + // ]; + // setResults(sanitizedResult); + // } else { + // const searchResults = MockResults(); + // const sanitizedResult = [ + // { + // title: 'categories', + // data: searchResults.categories, + // }, + // { + // title: 'users', + // data: searchResults.users, + // }, + // ]; + // setResults(sanitizedResult); + // } + // setResults([]); + // } catch (error) { + // console.log(error); + // setResults([]); + // } + // }; + const searchResults = MockResults(); + const sanitizedResult = [ + { + title: 'categories', + data: searchResults.categories, + }, + { + title: 'users', + data: searchResults.users, + }, + ]; + setResults(sanitizedResult); + // loadResults(query); }, [query]); /** @@ -175,7 +201,7 @@ const SearchScreen: React.FC = () => { /> - {results && Object.keys(results).length === 0 ? ( + {results && results.length === 0 ? ( { { 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: [ -- cgit v1.2.3-70-g09d2