massive friends button cleanup

2 files changed, 102 insertions, 146 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',
   },
 });
 
diff --git a/src/components/profile/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx
index 106b20a7..646be3e0 100644
--- a/src/components/profile/ProfileBody.tsx
+++ b/src/components/profile/ProfileBody.tsx
@@ -1,28 +1,24 @@
 import React from 'react';
-import {StyleSheet, View, Text, LayoutChangeEvent, Linking} from 'react-native';
-import {Button, normalize} from 'react-native-elements';
+import {LayoutChangeEvent, Linking, StyleSheet, Text, View} from 'react-native';
+import {normalize} from 'react-native-elements';
+import {useDispatch, useSelector, useStore} from 'react-redux';
 import {
   TAGG_DARK_BLUE,
   TAGG_LIGHT_BLUE,
   TOGGLE_BUTTON_TYPE,
 } from '../../constants';
-import ToggleButton from './ToggleButton';
-import {RootState} from '../../store/rootReducer';
-import {useDispatch, useSelector, useStore} from 'react-redux';
-import {ScreenType} from '../../types';
-import {NO_PROFILE, NO_USER} from '../../store/initialStates';
-import {
-  getUserAsProfilePreviewType,
-  handleFriendUnfriend,
-  SCREEN_WIDTH,
-} from '../../utils';
-import {AcceptDeclineButtons, FriendsButton} from '../common';
 import {
   acceptFriendRequest,
   declineFriendRequest,
   updateUserXFriends,
   updateUserXProfileAllScreens,
 } from '../../store/actions';
+import {NO_PROFILE, NO_USER} from '../../store/initialStates';
+import {RootState} from '../../store/rootReducer';
+import {ScreenType} from '../../types';
+import {getUserAsProfilePreviewType, SCREEN_WIDTH} from '../../utils';
+import {FriendsButton} from '../common';
+import ToggleButton from './ToggleButton';
 
 interface ProfileBodyProps {
   onLayout: (event: LayoutChangeEvent) => void;
@@ -99,37 +95,13 @@ const ProfileBody: React.FC<ProfileBodyProps> = ({
       )}
       {userXId && !isBlocked && (
         <View style={styles.buttonsContainer}>
-          <FriendsButton userXId={userXId} screenType={screenType} />
-          {(friendship_status === 'requested' &&
-            friendship_requester_id !== userXId && (
-              <Button
-                title={'Requested'}
-                buttonStyle={styles.requestedButton}
-                titleStyle={styles.requestedButtonTitle}
-                onPress={() =>
-                  handleFriendUnfriend(
-                    screenType,
-                    user,
-                    profile,
-                    dispatch,
-                    state,
-                    loggedInUser,
-                  )
-                } // delete request, no record status
-              />
-            )) ||
-            (friendship_status === 'requested' &&
-              friendship_requester_id === userXId && (
-                <AcceptDeclineButtons
-                  requester={getUserAsProfilePreviewType(
-                    {userId: userXId, username},
-                    profile,
-                  )}
-                  onAccept={handleAcceptRequest}
-                  onReject={handleDeclineFriendRequest}
-                  externalStyles={{container: styles.acceptRejectContainer}}
-                />
-              ))}
+          <FriendsButton
+            userXId={userXId}
+            screenType={screenType}
+            friendship_requester_id={friendship_requester_id}
+            onAcceptRequest={handleAcceptRequest}
+            onRejectRequest={handleDeclineFriendRequest}
+          />
         </View>
       )}
     </View>
@@ -143,11 +115,7 @@ const styles = StyleSheet.create({
     paddingTop: '3.5%',
     paddingBottom: '2%',
   },
-  acceptRejectContainer: {
-    flexDirection: 'row',
-  },
   buttonsContainer: {
-    flexDirection: 'row',
     flex: 1,
     paddingTop: '3.5%',
     paddingBottom: '2%',
@@ -171,42 +139,6 @@ const styles = StyleSheet.create({
     color: TAGG_DARK_BLUE,
     marginBottom: '1%',
   },
-  requestedButton: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: SCREEN_WIDTH * 0.4,
-    height: SCREEN_WIDTH * 0.075,
-    borderColor: TAGG_LIGHT_BLUE,
-    borderWidth: 2,
-    borderRadius: 3,
-    marginRight: '2%',
-    padding: 0,
-    backgroundColor: 'transparent',
-  },
-  requestedButtonTitle: {
-    color: TAGG_LIGHT_BLUE,
-    padding: 0,
-    fontSize: 14,
-    fontWeight: '700',
-  },
-  buttonTitle: {
-    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%',
-    backgroundColor: TAGG_LIGHT_BLUE,
-  },
 });
 
 export default ProfileBody;