Merge pull request #212 from shravyaramesh/tma590-friendslist-buttons

[TMA-590] New Friends Screen

2 files changed, 112 insertions, 0 deletions

diff --git a/src/components/common/FriendsButton.tsx b/src/components/common/FriendsButton.tsx
new file mode 100644
index 00000000..6ef23a96
--- /dev/null
+++ b/src/components/common/FriendsButton.tsx
@@ -0,0 +1,111 @@
+import React from 'react';
+import {StyleSheet} from 'react-native';
+import {Button} from 'react-native-elements';
+import {ScreenType} from '../../types';
+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';
+
+interface ProfileBodyProps {
+  userXId: string | undefined;
+  screenType: ScreenType;
+}
+const FriendsButton: React.FC<ProfileBodyProps> = ({userXId, screenType}) => {
+  const dispatch = useDispatch();
+
+  const {user = NO_USER, profile = NO_PROFILE} = userXId
+    ? useSelector((state: RootState) => state.userX[screenType][userXId])
+    : useSelector((state: RootState) => state.user);
+
+  const {user: loggedInUser = NO_USER} = useSelector(
+    (state: RootState) => state.user,
+  );
+
+  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(
+              screenType,
+              user,
+              profile,
+              dispatch,
+              state,
+              loggedInUser,
+            )
+          } // unfriend, no record status
+        />
+      )}
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  requestedButton: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: SCREEN_WIDTH * 0.4,
+    height: SCREEN_WIDTH * 0.075,
+    borderColor: TAGG_LIGHT_BLUE,
+    borderWidth: 2,
+    borderRadius: 0,
+    marginRight: '2%',
+    marginLeft: '1%',
+    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: 0,
+    marginRight: '2%',
+    marginLeft: '1%',
+    backgroundColor: TAGG_LIGHT_BLUE,
+  },
+});
+
+export default FriendsButton;
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index a5718c1e..95854ba8 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -20,4 +20,5 @@ export {default as GenericMoreInfoDrawer} from './GenericMoreInfoDrawer';
 export {default as TaggPopUp} from './TaggPopup';
 export {default as TaggPrompt} from './TaggPrompt';
 export {default as AcceptDeclineButtons} from './AcceptDeclineButtons';
+export {default as FriendsButton} from './FriendsButton';
 export {default as TaggSquareButton} from './TaggSquareButton';