styles, done

3 files changed, 53 insertions, 57 deletions

diff --git a/src/components/common/BasicButton.tsx b/src/components/common/BasicButton.tsx
index 1fe29cd9..e2274dbd 100644
--- a/src/components/common/BasicButton.tsx
+++ b/src/components/common/BasicButton.tsx
@@ -1,5 +1,12 @@
 import React from 'react';
-import {StyleProp, StyleSheet, Text, View, ViewStyle} from 'react-native';
+import {
+  StyleProp,
+  StyleSheet,
+  Text,
+  TextStyle,
+  View,
+  ViewStyle,
+} from 'react-native';
 import {TAGG_LIGHT_BLUE} from '../../constants';
 import {TouchableOpacity} from 'react-native-gesture-handler';
 import {normalize} from '../../utils';
@@ -8,7 +15,7 @@ interface BasicButtonProps {
   title: string;
   onPress: () => void;
   solid?: boolean;
-  externalStyles?: Record<string, StyleProp<ViewStyle>>;
+  externalStyles?: Record<string, StyleProp<ViewStyle | TextStyle>>;
 }
 const BasicButton: React.FC<BasicButtonProps> = ({
   title,
@@ -27,6 +34,7 @@ const BasicButton: React.FC<BasicButtonProps> = ({
         <Text
           style={[
             styles.buttonTitle,
+            externalStyles?.buttonTitle,
             solid
               ? styles.solidButtonTitleColor
               : styles.outlineButtonTitleColor,
diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx
index ae884b42..179daa57 100644
--- a/src/components/notifications/Notification.tsx
+++ b/src/components/notifications/Notification.tsx
@@ -34,6 +34,7 @@ import {
 } from '../../utils';
 import {Avatar} from '../common';
 import AcceptDeclineButtons from '../common/AcceptDeclineButtons';
+import {MessageButton} from '../messages';
 
 interface NotificationProps {
   item: NotificationType;
@@ -61,6 +62,10 @@ const Notification: React.FC<NotificationProps> = (props) => {
 
   const [avatar, setAvatar] = useState<string | undefined>(undefined);
   const [momentURI, setMomentURI] = useState<string | undefined>(undefined);
+  const notification_title =
+    notification_type === 'FRD_ACPT'
+      ? `Say Hi to ${first_name}!`
+      : `${first_name} ${last_name}`;
 
   useEffect(() => {
     (async () => {
@@ -246,9 +251,7 @@ const Notification: React.FC<NotificationProps> = (props) => {
           {/* Text content: Actor name and verbage*/}
           <View style={styles.contentContainer}>
             <TouchableWithoutFeedback onPress={navigateToProfile}>
-              <Text style={styles.actorName}>
-                {first_name} {last_name}
-              </Text>
+              <Text style={styles.actorName}>{notification_title}</Text>
             </TouchableWithoutFeedback>
             <TouchableWithoutFeedback
               style={styles.textContainerStyles}
@@ -273,6 +276,29 @@ const Notification: React.FC<NotificationProps> = (props) => {
               />
             </View>
           )}
+          {notification_type === 'FRD_ACPT' && (
+            <View style={styles.buttonsContainer}>
+              <MessageButton
+                userXId={id}
+                isBlocked={false}
+                friendship_status={'friends'}
+                externalStyles={{
+                  container: {
+                    width: normalize(63),
+                    height: normalize(21),
+                  },
+                  buttonTitle: {
+                    fontSize: normalize(11),
+                    lineHeight: normalize(13.13),
+                    letterSpacing: normalize(0.5),
+                    fontWeight: '700',
+                    textAlign: 'center',
+                  },
+                }}
+                solid
+              />
+            </View>
+          )}
           {/* Moment Image Preview */}
           {(notification_type === 'CMT' ||
             notification_type === 'MOM_3+' ||
@@ -306,7 +332,7 @@ const styles = StyleSheet.create({
     flex: 1,
     alignSelf: 'center',
     alignItems: 'center',
-    paddingHorizontal: '8%',
+    paddingHorizontal: '7%',
   },
   avatarContainer: {
     height: 42,
@@ -348,9 +374,9 @@ const styles = StyleSheet.create({
     lineHeight: normalize(13.13),
   },
   timeStampStyles: {
-    fontWeight: '700',
-    fontSize: normalize(12),
-    lineHeight: normalize(14.32),
+    fontWeight: '500',
+    fontSize: normalize(11),
+    lineHeight: normalize(13.13),
     marginHorizontal: 2,
     color: '#828282',
     textAlignVertical: 'center',
diff --git a/src/components/profile/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx
index 3d654724..7557de00 100644
--- a/src/components/profile/ProfileBody.tsx
+++ b/src/components/profile/ProfileBody.tsx
@@ -1,17 +1,7 @@
-import {useNavigation} from '@react-navigation/core';
-import React, {useContext} from 'react';
-import {
-  Alert,
-  LayoutChangeEvent,
-  Linking,
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native';
+import React from 'react';
+import {LayoutChangeEvent, Linking, StyleSheet, Text, View} from 'react-native';
 import {useDispatch, useSelector, useStore} from 'react-redux';
-import {ChatContext} from '../../App';
 import {TAGG_DARK_BLUE, TOGGLE_BUTTON_TYPE} from '../../constants';
-import {ERROR_UNABLE_CONNECT_CHAT} from '../../constants/strings';
 import {
   acceptFriendRequest,
   declineFriendRequest,
@@ -22,14 +12,14 @@ import {NO_PROFILE} from '../../store/initialStates';
 import {RootState} from '../../store/rootReducer';
 import {ScreenType} from '../../types';
 import {
-  createChannel,
   getUserAsProfilePreviewType,
   normalize,
   SCREEN_HEIGHT,
   SCREEN_WIDTH,
 } from '../../utils';
 import {canViewProfile} from '../../utils/users';
-import {BasicButton, FriendsButton} from '../common';
+import {FriendsButton} from '../common';
+import {MessageButton} from '../messages';
 import ToggleButton from './ToggleButton';
 
 interface ProfileBodyProps {
@@ -47,7 +37,6 @@ const ProfileBody: React.FC<ProfileBodyProps> = ({
   screenType,
 }) => {
   const dispatch = useDispatch();
-  const navigation = useNavigation();
 
   const {profile = NO_PROFILE, user} = useSelector((state: RootState) =>
     userXId ? state.userX[screenType][userXId] : state.user,
@@ -65,10 +54,7 @@ const ProfileBody: React.FC<ProfileBodyProps> = ({
     profile,
   );
 
-  const {chatClient, setChannel} = useContext(ChatContext);
-
   const state: RootState = useStore().getState();
-  const loggedInUserId = state.user.user.userId;
 
   const handleAcceptRequest = async () => {
     await dispatch(acceptFriendRequest({id, username, first_name, last_name}));
@@ -81,32 +67,6 @@ 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>
@@ -142,10 +102,12 @@ const ProfileBody: React.FC<ProfileBodyProps> = ({
               onAcceptRequest={handleAcceptRequest}
               onRejectRequest={handleDeclineFriendRequest}
             />
-            {canMessage() && (
-              <BasicButton
-                title={'Message'}
-                onPress={onPressMessage}
+            {canViewProfile(state, userXId, screenType) && (
+              <MessageButton
+                userXId={userXId}
+                isBlocked={isBlocked}
+                friendship_status={friendship_status}
+                friendship_requester_id={friendship_requester_id}
                 externalStyles={{
                   container: {
                     width: SCREEN_WIDTH * 0.42,