Merge branch 'master' into tma784-style-message-input

# Conflicts:
#	src/screens/chat/ChatListScreen.tsx
#	src/screens/chat/ChatScreen.tsx

4 files changed, 102 insertions, 24 deletions

diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index 05098d14..0052b61d 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -1,4 +1,10 @@
-import React, {useCallback, useEffect, useRef, useState} from 'react';
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import {LayoutChangeEvent, RefreshControl, StyleSheet} from 'react-native';
 import Animated, {
   useSharedValue,
@@ -31,6 +37,7 @@ import ProfileCutout from './ProfileCutout';
 import ProfileHeader from './ProfileHeader';
 import PublicProfile from './PublicProfile';
 import {useScrollToTop} from '@react-navigation/native';
+import {ChatContext} from '../../App';
 
 interface ContentProps {
   userXId: string | undefined;
@@ -52,6 +59,8 @@ const Content: React.FC<ContentProps> = ({userXId, screenType}) => {
   );
   const state: RootState = useStore().getState();
 
+  const {chatClient} = useContext(ChatContext);
+
   /*
    * Used to imperatively scroll to the top when presenting the moment tutorial.
    */
diff --git a/src/components/profile/Friends.tsx b/src/components/profile/Friends.tsx
index c1dca755..b754b71a 100644
--- a/src/components/profile/Friends.tsx
+++ b/src/components/profile/Friends.tsx
@@ -191,7 +191,7 @@ const styles = StyleSheet.create({
     height: '55%',
     borderColor: TAGG_LIGHT_BLUE,
     borderWidth: 2,
-    borderRadius: 2,
+    borderRadius: 3,
     padding: 0,
     backgroundColor: TAGG_LIGHT_BLUE,
   },
@@ -212,7 +212,7 @@ const styles = StyleSheet.create({
     height: '55%',
     borderColor: TAGG_LIGHT_BLUE,
     borderWidth: 2,
-    borderRadius: 2,
+    borderRadius: 3,
     padding: 0,
   },
   unfriendButtonTitle: {
diff --git a/src/components/profile/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx
index b49e71a3..527036f6 100644
--- a/src/components/profile/ProfileBody.tsx
+++ b/src/components/profile/ProfileBody.tsx
@@ -1,5 +1,12 @@
-import React from 'react';
-import {LayoutChangeEvent, Linking, StyleSheet, Text, View} from 'react-native';
+import React, {useContext} from 'react';
+import {
+  Alert,
+  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, TOGGLE_BUTTON_TYPE} from '../../constants';
@@ -9,12 +16,23 @@ import {
   updateUserXFriends,
   updateUserXProfileAllScreens,
 } from '../../store/actions';
+import {canViewProfile} from '../../utils/users';
 import {NO_PROFILE} from '../../store/initialStates';
 import {RootState} from '../../store/rootReducer';
 import {ScreenType} from '../../types';
-import {getUserAsProfilePreviewType} from '../../utils';
-import {FriendsButton} from '../common';
+import {
+  connectChatAccount,
+  createChannel,
+  getUserAsProfilePreviewType,
+  SCREEN_HEIGHT,
+  SCREEN_WIDTH,
+} from '../../utils';
+import {FriendsButton, BasicButton} from '../common';
 import ToggleButton from './ToggleButton';
+import {ChatContext} from '../../App';
+import {useNavigation} from '@react-navigation/core';
+import {ChatListScreen} from '../../screens';
+import {ERROR_UNABLE_CONNECT_CHAT} from '../../constants/strings';
 
 interface ProfileBodyProps {
   onLayout: (event: LayoutChangeEvent) => void;
@@ -30,6 +48,9 @@ const ProfileBody: React.FC<ProfileBodyProps> = ({
   userXId,
   screenType,
 }) => {
+  const dispatch = useDispatch();
+  const navigation = useNavigation();
+
   const {profile = NO_PROFILE, user} = useSelector((state: RootState) =>
     userXId ? state.userX[screenType][userXId] : state.user,
   );
@@ -46,8 +67,10 @@ const ProfileBody: React.FC<ProfileBodyProps> = ({
     profile,
   );
 
+  const {chatClient, setChannel} = useContext(ChatContext);
+
   const state: RootState = useStore().getState();
-  const dispatch = useDispatch();
+  const loggedInUserId = state.user.user.userId;
 
   const handleAcceptRequest = async () => {
     await dispatch(acceptFriendRequest({id, username, first_name, last_name}));
@@ -60,6 +83,32 @@ const ProfileBody: React.FC<ProfileBodyProps> = ({
     dispatch(updateUserXProfileAllScreens(id, state));
   };
 
+  const canMessage = () => {
+    if (
+      userXId &&
+      !isBlocked &&
+      (friendship_status === 'no_record' ||
+        friendship_status === 'friends' ||
+        (friendship_status === 'requested' &&
+          friendship_requester_id === loggedInUserId)) &&
+      canViewProfile(state, userXId, screenType)
+    ) {
+      return true;
+    } else {
+      return false;
+    }
+  };
+
+  const onPressMessage = async () => {
+    if (chatClient.user && userXId) {
+      const channel = await createChannel(loggedInUserId, userXId, chatClient);
+      setChannel(channel);
+      navigation.navigate('Chat');
+    } else {
+      Alert.alert(ERROR_UNABLE_CONNECT_CHAT);
+    }
+  };
+
   return (
     <View onLayout={onLayout} style={styles.container}>
       <Text style={styles.username}>{`@${username}`}</Text>
@@ -85,17 +134,31 @@ const ProfileBody: React.FC<ProfileBodyProps> = ({
           />
         </View>
       )}
-      {userXId && !isBlocked && (
-        <View style={styles.buttonsContainer}>
-          <FriendsButton
-            userXId={userXId}
-            screenType={screenType}
-            friendship_requester_id={friendship_requester_id}
-            onAcceptRequest={handleAcceptRequest}
-            onRejectRequest={handleDeclineFriendRequest}
-          />
-        </View>
-      )}
+      <View style={styles.simpleRowContainer}>
+        {userXId && !isBlocked && (
+          <View style={styles.buttonsContainer}>
+            <FriendsButton
+              userXId={userXId}
+              screenType={screenType}
+              friendship_requester_id={friendship_requester_id}
+              onAcceptRequest={handleAcceptRequest}
+              onRejectRequest={handleDeclineFriendRequest}
+            />
+            {canMessage() && (
+              <BasicButton
+                title={'Message'}
+                onPress={onPressMessage}
+                externalStyles={{
+                  container: {
+                    width: SCREEN_WIDTH * 0.42,
+                    aspectRatio: 154 / 33,
+                  },
+                }}
+              />
+            )}
+          </View>
+        )}
+      </View>
     </View>
   );
 };
@@ -107,11 +170,15 @@ const styles = StyleSheet.create({
     paddingTop: '3.5%',
     paddingBottom: '2%',
   },
+  simpleRowContainer: {flexDirection: 'row'},
   buttonsContainer: {
     flex: 1,
     paddingTop: '3.5%',
     paddingBottom: '2%',
     width: '50%',
+    height: SCREEN_HEIGHT * 0.1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
   },
   container: {
     paddingVertical: '1%',
diff --git a/src/components/profile/ToggleButton.tsx b/src/components/profile/ToggleButton.tsx
index 236d811c..4697d744 100644
--- a/src/components/profile/ToggleButton.tsx
+++ b/src/components/profile/ToggleButton.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import {StyleSheet, Text} from 'react-native';
 import {TouchableOpacity} from 'react-native-gesture-handler';
 import {TAGG_LIGHT_BLUE} from '../../constants';
-import {getToggleButtonText, SCREEN_WIDTH} from '../../utils';
+import {getToggleButtonText, normalize, SCREEN_WIDTH} from '../../utils';
 
 type ToggleButtonProps = {
   toggleState: boolean;
@@ -34,15 +34,17 @@ const styles = StyleSheet.create({
   button: {
     justifyContent: 'center',
     alignItems: 'center',
-    width: SCREEN_WIDTH * 0.4,
+    width: SCREEN_WIDTH * 0.42,
     height: SCREEN_WIDTH * 0.08,
     borderColor: TAGG_LIGHT_BLUE,
-    borderWidth: 3,
-    borderRadius: 5,
+    borderWidth: 2,
+    borderRadius: 3,
     marginRight: '2%',
   },
   text: {
-    fontWeight: 'bold',
+    fontWeight: '700',
+    fontSize: normalize(15),
+    letterSpacing: 1,
   },
   buttonColor: {
     backgroundColor: TAGG_LIGHT_BLUE,