massive friends button cleanup

1 files changed, 86 insertions, 62 deletions

diff --git a/src/components/common/FriendsButton.tsx b/src/components/common/FriendsButton.tsx
index 243a551d..a1e107c5 100644
--- a/src/components/common/FriendsButton.tsx
+++ b/src/components/common/FriendsButton.tsx
@@ -1,18 +1,34 @@
-import React from 'react';
-import {StyleSheet} from 'react-native';
-import {Button} from 'react-native-elements';
-import {ScreenType} from '../../types';
+import React, {Fragment} from 'react';
+import {
+  StyleProp,
+  StyleSheet,
+  Text,
+  TextStyle,
+  View,
+  ViewStyle,
+} from 'react-native';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import {useDispatch, useSelector, useStore} from 'react-redux';
 import {TAGG_LIGHT_BLUE} from '../../constants';
-import {handleFriendUnfriend, SCREEN_WIDTH} from '../../utils';
 import {NO_PROFILE, NO_USER} from '../../store/initialStates';
-import {useDispatch, useSelector, useStore} from 'react-redux';
 import {RootState} from '../../store/rootReducer';
+import {ScreenType} from '../../types';
+import {handleFriendUnfriend, normalize, SCREEN_WIDTH} from '../../utils';
 
-interface ProfileBodyProps {
+interface FriendsButtonProps {
   userXId: string | undefined;
   screenType: ScreenType;
+  friendship_requester_id: string;
+  onAcceptRequest: () => void;
+  onRejectRequest: () => void;
 }
-const FriendsButton: React.FC<ProfileBodyProps> = ({userXId, screenType}) => {
+const FriendsButton: React.FC<FriendsButtonProps> = ({
+  userXId,
+  screenType,
+  friendship_requester_id,
+  onAcceptRequest,
+  onRejectRequest,
+}) => {
   const dispatch = useDispatch();
 
   const {user = NO_USER, profile = NO_PROFILE} = userXId
@@ -24,35 +40,29 @@ const FriendsButton: React.FC<ProfileBodyProps> = ({userXId, screenType}) => {
   );
 
   const state = useStore().getState();
-
   const {friendship_status} = profile;
 
-  return (
-    <>
-      {friendship_status === 'no_record' && (
-        <Button
-          title={'Add Friend'}
-          buttonStyle={styles.button}
-          titleStyle={styles.buttonTitle}
-          onPress={() =>
-            handleFriendUnfriend(
-              screenType,
-              user,
-              profile,
-              dispatch,
-              state,
-              loggedInUser,
-            )
-          } // requested, requested status
-        />
-      )}
-      {friendship_status === 'friends' && (
-        <Button
-          title={'Unfriend'}
-          buttonStyle={styles.requestedButton}
-          titleStyle={styles.requestedButtonTitle}
-          onPress={() =>
-            handleFriendUnfriend(
+  const outlineButton: [StyleProp<ViewStyle>, StyleProp<TextStyle>] = [
+    [styles.button, styles.transparentBG],
+    [styles.label, styles.blueLabel],
+  ];
+
+  const filledButton: [StyleProp<ViewStyle>, StyleProp<TextStyle>] = [
+    [styles.button, styles.lightBlueBG],
+    [styles.label, styles.whiteLabel],
+  ];
+
+  const renderButton = (
+    title: string,
+    style: [StyleProp<ViewStyle>, StyleProp<TextStyle>],
+    onPress?: () => void,
+  ) => (
+    <TouchableOpacity
+      style={style[0]}
+      onPress={() =>
+        onPress
+          ? onPress()
+          : handleFriendUnfriend(
               screenType,
               user,
               profile,
@@ -60,50 +70,64 @@ const FriendsButton: React.FC<ProfileBodyProps> = ({userXId, screenType}) => {
               state,
               loggedInUser,
             )
-          } // unfriend, no record status
-        />
-      )}
-    </>
+      }>
+      <Text style={style[1]}>{title}</Text>
+    </TouchableOpacity>
   );
+
+  switch (friendship_status) {
+    case 'friends':
+      return renderButton('Unfriend', outlineButton);
+    case 'requested':
+      if (friendship_requester_id !== userXId) {
+        return renderButton('Requested', outlineButton);
+      } else {
+        return (
+          <View style={styles.row}>
+            {renderButton('Accept', filledButton, onAcceptRequest)}
+            {renderButton('Reject', outlineButton, onRejectRequest)}
+          </View>
+        );
+      }
+    case 'no_record':
+      return renderButton('Add Friend', filledButton);
+    default:
+      return <Fragment />;
+  }
 };
 
 const styles = StyleSheet.create({
-  requestedButton: {
+  button: {
     justifyContent: 'center',
     alignItems: 'center',
     width: SCREEN_WIDTH * 0.4,
-    height: SCREEN_WIDTH * 0.075,
-    borderColor: TAGG_LIGHT_BLUE,
+    aspectRatio: 154 / 33,
     borderWidth: 2,
+    borderColor: TAGG_LIGHT_BLUE,
     borderRadius: 3,
     marginRight: '2%',
     marginLeft: '1%',
+  },
+  transparentBG: {
     backgroundColor: 'transparent',
   },
-  requestedButtonTitle: {
-    color: TAGG_LIGHT_BLUE,
-    padding: 0,
-    fontSize: 14,
+  lightBlueBG: {
+    backgroundColor: TAGG_LIGHT_BLUE,
+  },
+  label: {
+    fontSize: normalize(15),
     fontWeight: '700',
+    letterSpacing: 1,
   },
-  buttonTitle: {
+  blueLabel: {
+    color: TAGG_LIGHT_BLUE,
+  },
+  whiteLabel: {
     color: 'white',
-    padding: 0,
-    fontSize: 14,
-    fontWeight: '700',
   },
-  button: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: SCREEN_WIDTH * 0.4,
-    height: SCREEN_WIDTH * 0.075,
-    padding: 0,
-    borderWidth: 2,
-    borderColor: TAGG_LIGHT_BLUE,
-    borderRadius: 3,
-    marginRight: '2%',
-    marginLeft: '1%',
-    backgroundColor: TAGG_LIGHT_BLUE,
+  row: {
+    flex: 1,
+    flexDirection: 'row',
   },
 });