From 913e321498b87163a19fa12e95d79fcd4d1b0b29 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 25 May 2021 12:28:41 -0400 Subject: Clean up code --- src/screens/suggestedPeople/SPBody.tsx | 25 +++++++++---------------- 1 file changed, 9 insertions(+), 16 deletions(-) (limited to 'src/screens') diff --git a/src/screens/suggestedPeople/SPBody.tsx b/src/screens/suggestedPeople/SPBody.tsx index c22f8143..352e4433 100644 --- a/src/screens/suggestedPeople/SPBody.tsx +++ b/src/screens/suggestedPeople/SPBody.tsx @@ -1,6 +1,12 @@ import {useNavigation} from '@react-navigation/native'; import React, {Fragment, useEffect, useMemo, useState} from 'react'; -import {StyleSheet, Text, View} from 'react-native'; +import { + ImageSourcePropType, + ScrollView, + 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'; @@ -43,7 +49,7 @@ const SPBody: React.FC = ({ const [localBadges, setLocalBadges] = useState< { badge: UniversityBadge; - img: string; + img: ImageSourcePropType; }[] >([]); const navigation = useNavigation(); @@ -138,9 +144,7 @@ const SPBody: React.FC = ({ {firstItem && 'Suggested People'} - {localBadges && ( - - )} + {localBadges && } @@ -267,17 +271,6 @@ const styles = StyleSheet.create({ shadowOffset: {width: 2, height: 2}, shadowOpacity: 0.5, }, - body: {}, - button: { - justifyContent: 'center', - alignItems: 'center', - width: SCREEN_WIDTH * 0.4, - aspectRatio: 154 / 33, - borderWidth: 2, - borderColor: '#fff', - borderRadius: 3, - marginRight: '2%', - marginLeft: '1%', }, }); -- cgit v1.2.3-70-g09d2 From 7f47d1f36255ff1e42efea1d0cf6c1b97fc557b1 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 25 May 2021 14:52:49 -0400 Subject: Finish styling badges --- src/components/suggestedPeople/BadgeIcon.tsx | 13 ++++-- src/screens/suggestedPeople/SPBody.tsx | 61 +++++++++++++++++++--------- 2 files changed, 51 insertions(+), 23 deletions(-) (limited to 'src/screens') diff --git a/src/components/suggestedPeople/BadgeIcon.tsx b/src/components/suggestedPeople/BadgeIcon.tsx index e8425308..8f576a43 100644 --- a/src/components/suggestedPeople/BadgeIcon.tsx +++ b/src/components/suggestedPeople/BadgeIcon.tsx @@ -1,6 +1,12 @@ import {useNavigation} from '@react-navigation/core'; import React from 'react'; -import {Image, ImageSourcePropType, StyleSheet} from 'react-native'; +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'; @@ -9,13 +15,14 @@ import {normalize} from '../../utils'; interface BadgeIconProps { badge: UniversityBadge; img: ImageSourcePropType; + style?: StyleProp; } -const BadgeIcon: React.FC = ({badge, img}) => { +const BadgeIcon: React.FC = ({badge, img, style}) => { const navigation = useNavigation(); return ( { navigation.navigate('MutualBadgeHolders', { badge_id: badge.id, diff --git a/src/screens/suggestedPeople/SPBody.tsx b/src/screens/suggestedPeople/SPBody.tsx index 352e4433..9708a652 100644 --- a/src/screens/suggestedPeople/SPBody.tsx +++ b/src/screens/suggestedPeople/SPBody.tsx @@ -1,17 +1,11 @@ import {useNavigation} from '@react-navigation/native'; import React, {Fragment, useEffect, useMemo, useState} from 'react'; -import { - ImageSourcePropType, - ScrollView, - 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, @@ -34,7 +28,6 @@ const SPBody: React.FC = ({ user, university, mutual_friends, - social_links, suggested_people_url, friendship, badges, @@ -130,8 +123,7 @@ const SPBody: React.FC = ({ userXId: loggedInUserId === user.id ? undefined : user.id, screenType, }); - }} - style={styles.nameInfoContainer}> + }}> {user.first_name} @{user.username} @@ -144,20 +136,35 @@ const SPBody: React.FC = ({ {firstItem && 'Suggested People'} - {localBadges && } + - + {user.id !== loggedInUserId && } - + {localBadges.length !== 0 && ( + // Badges aligned left and spaced as if there are 5 items + + {localBadges.map(({badge, img}, index) => ( + + ))} + {[0, 0, 0, 0, 0].splice(localBadges.length, 5).map((_, index) => ( + + ))} + + )} @@ -223,7 +230,6 @@ const styles = StyleSheet.create({ textShadowRadius: normalize(2), letterSpacing: normalize(2), }, - nameInfoContainer: {}, addButton: { justifyContent: 'center', alignItems: 'center', @@ -271,6 +277,21 @@ const styles = StyleSheet.create({ shadowOffset: {width: 2, height: 2}, shadowOpacity: 0.5, }, + universityIcon: { + left: '5%', + width: normalize(31), + height: normalize(38), + }, + badgeContainer: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-evenly', + marginBottom: 25, + }, + badge: { + width: normalize(52), + height: normalize(52), + borderWidth: 1, }, }); -- cgit v1.2.3-70-g09d2 From 0a7a50d53ab4f34f07c4a66c38c7a6bd6d89c550 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 25 May 2021 14:54:28 -0400 Subject: Remove test border --- src/screens/suggestedPeople/SPBody.tsx | 1 - 1 file changed, 1 deletion(-) (limited to 'src/screens') diff --git a/src/screens/suggestedPeople/SPBody.tsx b/src/screens/suggestedPeople/SPBody.tsx index 9708a652..3d7cf3f2 100644 --- a/src/screens/suggestedPeople/SPBody.tsx +++ b/src/screens/suggestedPeople/SPBody.tsx @@ -291,7 +291,6 @@ const styles = StyleSheet.create({ badge: { width: normalize(52), height: normalize(52), - borderWidth: 1, }, }); -- cgit v1.2.3-70-g09d2 From 0cdd6943aa37dbcc69ee161f3b853169464950fa Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Wed, 26 May 2021 17:43:30 -0700 Subject: Code refactor minor --- src/screens/suggestedPeople/SPBody.tsx | 55 ++++++++++++++++------------------ 1 file changed, 25 insertions(+), 30 deletions(-) (limited to 'src/screens') diff --git a/src/screens/suggestedPeople/SPBody.tsx b/src/screens/suggestedPeople/SPBody.tsx index 3d7cf3f2..eb80da49 100644 --- a/src/screens/suggestedPeople/SPBody.tsx +++ b/src/screens/suggestedPeople/SPBody.tsx @@ -115,20 +115,30 @@ const SPBody: React.FC = ({ [suggested_people_url], ); - const NamePlate = () => { - return ( - { - navigation.navigate('Profile', { - userXId: loggedInUserId === user.id ? undefined : user.id, - screenType, - }); - }}> - {user.first_name} - @{user.username} - - ); - }; + const NamePlate = () => ( + { + navigation.navigate('Profile', { + userXId: loggedInUserId === user.id ? undefined : user.id, + screenType, + }); + }}> + {user.first_name} + @{user.username} + + ); + + const Badges = () => ( + // Badges aligned left and spaced as if there are 5 items + + {localBadges.map(({badge, img}, index) => ( + + ))} + {[0, 0, 0, 0, 0].splice(localBadges.length, 5).map((_, index) => ( + + ))} + + ); return ( @@ -149,22 +159,7 @@ const SPBody: React.FC = ({ {user.id !== loggedInUserId && } - {localBadges.length !== 0 && ( - // Badges aligned left and spaced as if there are 5 items - - {localBadges.map(({badge, img}, index) => ( - - ))} - {[0, 0, 0, 0, 0].splice(localBadges.length, 5).map((_, index) => ( - - ))} - - )} + {localBadges.length !== 0 && } -- cgit v1.2.3-70-g09d2