1 files changed, 264 insertions, 0 deletions
diff --git a/src/screens/suggestedPeople/SPBody.tsx b/src/screens/suggestedPeople/SPBody.tsx
new file mode 100644
index 00000000..aa97dc94
--- /dev/null
+++ b/src/screens/suggestedPeople/SPBody.tsx
@@ -0,0 +1,264 @@
+import {useNavigation} from '@react-navigation/native';
+import React, {Fragment, useMemo} from 'react';
+import {StyleSheet, Text, View} from 'react-native';
+import {Image} from 'react-native-animatable';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import Animated from 'react-native-reanimated';
+import RequestedButton from '../../assets/ionicons/requested-button.svg';
+import {TaggsBar} from '../../components';
+import {MutualFriends} from '../../components/suggestedPeople';
+import {
+  ProfilePreviewType,
+  ScreenType,
+  SuggestedPeopleDataType,
+} from '../../types';
+import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+
+interface SPBodyProps {
+  item: SuggestedPeopleDataType;
+  index: number;
+  onAddFriend: (user: ProfilePreviewType) => Promise<void>;
+  onCancelRequest: (user: ProfilePreviewType) => void;
+  loggedInUserId: string;
+}
+
+const SPBody: React.FC<SPBodyProps> = ({
+  item: {user, mutual_friends, social_links, suggested_people_url, friendship},
+  index,
+  onAddFriend,
+  onCancelRequest,
+  loggedInUserId,
+}) => {
+  const firstItem = index === 0;
+  const screenType = ScreenType.SuggestedPeople;
+
+  const displayButton = () => {
+    switch (friendship.status) {
+      case 'friends':
+        return <Fragment />;
+      case 'requested':
+        if (friendship.requester_id === loggedInUserId) {
+          return (
+            <TouchableOpacity
+              style={styles.requestedButton}
+              onPress={() => onCancelRequest(user)}
+              disabled={false}>
+              <RequestedButton
+                width={SCREEN_WIDTH * 0.3}
+                height={SCREEN_HEIGHT * 0.085}
+              />
+            </TouchableOpacity>
+          );
+        } else {
+          return (
+            <TouchableOpacity style={styles.addButton} disabled={true}>
+              <Text style={styles.addButtonTitle}>{'Pending'}</Text>
+            </TouchableOpacity>
+          );
+        }
+      case 'no_record':
+        return (
+          <TouchableOpacity
+            style={styles.addButton}
+            onPress={() => onAddFriend(user)}
+            disabled={false}>
+            <Text style={styles.addButtonTitle}>{'Add Friend'}</Text>
+          </TouchableOpacity>
+        );
+      default:
+        return <Fragment />;
+    }
+  };
+
+  const backgroundImage = useMemo(
+    () => (
+      <Image
+        source={{
+          uri: suggested_people_url,
+        }}
+        style={styles.image}
+      />
+    ),
+    [suggested_people_url],
+  );
+  const navigation = useNavigation();
+
+  return (
+    <View>
+      {backgroundImage}
+      <View style={styles.mainContainer}>
+        <Text style={styles.title}>{firstItem && 'Suggested People'}</Text>
+        <View style={styles.body}>
+          <View style={styles.marginManager}>
+            <View style={styles.addUserContainer}>
+              <TouchableOpacity
+                onPress={() => {
+                  navigation.push('Profile', {
+                    userXId: user.id,
+                    screenType,
+                  });
+                }}
+                style={styles.nameInfoContainer}>
+                <Text style={styles.firstName}>{user.first_name}</Text>
+                <Text style={styles.username}>@{user.username}</Text>
+              </TouchableOpacity>
+              {user.id !== loggedInUserId && displayButton()}
+            </View>
+          </View>
+          <TaggsBar
+            y={Animated.useValue(0)}
+            userXId={user.id === loggedInUserId ? undefined : user.id}
+            profileBodyHeight={0}
+            screenType={screenType}
+            whiteRing={true}
+            linkedSocials={social_links}
+          />
+          <View style={styles.marginManager}>
+            <MutualFriends user={user} friends={mutual_friends} />
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  mainContainer: {
+    flexDirection: 'column',
+    width: SCREEN_WIDTH,
+    height: SCREEN_HEIGHT,
+    paddingVertical: '15%',
+    paddingBottom: '20%',
+    justifyContent: 'space-between',
+    alignSelf: 'center',
+  },
+  marginManager: {marginHorizontal: '5%'},
+  image: {
+    position: 'absolute',
+    width: SCREEN_WIDTH,
+    height: SCREEN_HEIGHT,
+    zIndex: 0,
+  },
+  title: {
+    zIndex: 1,
+    paddingTop: '3%',
+    alignSelf: 'center',
+    fontSize: normalize(22),
+    lineHeight: normalize(26),
+    fontWeight: '800',
+    letterSpacing: normalize(3),
+    color: '#FFFEFE',
+    textShadowColor: 'rgba(0, 0, 0, 0.4)',
+    textShadowOffset: {width: normalize(2), height: normalize(2)},
+    textShadowRadius: normalize(2),
+  },
+  firstName: {
+    color: '#fff',
+    fontWeight: '800',
+    fontSize: normalize(24),
+    lineHeight: normalize(29),
+    textShadowColor: 'rgba(0, 0, 0, 0.3)',
+    textShadowOffset: {width: normalize(2), height: normalize(2)},
+    textShadowRadius: normalize(2),
+    letterSpacing: normalize(2.5),
+    alignSelf: 'baseline',
+  },
+  username: {
+    color: '#fff',
+    fontWeight: '600',
+    fontSize: normalize(15),
+    lineHeight: normalize(18),
+    textShadowColor: 'rgba(0, 0, 0, 0.3)',
+    textShadowOffset: {width: normalize(2), height: normalize(2)},
+    textShadowRadius: normalize(2),
+    letterSpacing: normalize(2),
+  },
+  nameInfoContainer: {},
+  addButton: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: SCREEN_WIDTH * 0.3,
+    height: SCREEN_WIDTH * 0.085,
+    padding: 0,
+    borderWidth: 2,
+    borderColor: '#fff',
+    borderRadius: 1,
+    marginLeft: '1%',
+    marginTop: '4%',
+    shadowColor: 'rgb(0, 0, 0)',
+    shadowRadius: 2,
+    shadowOffset: {width: 2, height: 2},
+    shadowOpacity: 0.5,
+  },
+  addButtonTitle: {
+    color: 'white',
+    padding: 0,
+    fontSize: normalize(15),
+    lineHeight: normalize(18),
+    fontWeight: 'bold',
+    textAlign: 'center',
+    letterSpacing: normalize(1),
+  },
+  addUserContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    marginBottom: '5%',
+  },
+  requestedButton: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: SCREEN_WIDTH * 0.3,
+    height: SCREEN_WIDTH * 0.085,
+    padding: 0,
+    borderWidth: 2,
+    borderColor: 'transparent',
+    borderRadius: 1,
+    marginLeft: '1%',
+    marginTop: '4%',
+    shadowColor: 'rgb(0, 0, 0)',
+    shadowRadius: 2,
+    shadowOffset: {width: 2, height: 2},
+    shadowOpacity: 0.5,
+  },
+  requestedButtonTitle: {
+    backgroundColor: 'transparent',
+    fontSize: normalize(15),
+    lineHeight: normalize(18),
+    fontWeight: 'bold',
+    textAlign: 'center',
+    letterSpacing: normalize(1),
+  },
+  body: {},
+
+  button: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: SCREEN_WIDTH * 0.4,
+    aspectRatio: 154 / 33,
+    borderWidth: 2,
+    borderColor: '#fff',
+    borderRadius: 3,
+    marginRight: '2%',
+    marginLeft: '1%',
+  },
+  transparentBG: {
+    backgroundColor: 'transparent',
+  },
+  lightBlueBG: {
+    backgroundColor: '#fff',
+  },
+  label: {
+    fontSize: normalize(15),
+    fontWeight: '700',
+    letterSpacing: 1,
+  },
+  blueLabel: {
+    color: '#fff',
+  },
+  whiteLabel: {
+    color: 'white',
+  },
+});
+
+export default SPBody;