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

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

13 files changed, 293 insertions, 83 deletions

diff --git a/src/components/common/AcceptDeclineButtons.tsx b/src/components/common/AcceptDeclineButtons.tsx
index 167148f0..7bb62fd4 100644
--- a/src/components/common/AcceptDeclineButtons.tsx
+++ b/src/components/common/AcceptDeclineButtons.tsx
@@ -58,7 +58,7 @@ const styles = StyleSheet.create({
     backgroundColor: TAGG_LIGHT_BLUE,
   },
   rejectButton: {
-    borderWidth: 1,
+    borderWidth: 2,
     backgroundColor: 'white',
     borderColor: TAGG_LIGHT_BLUE,
   },
diff --git a/src/components/common/BasicButton.tsx b/src/components/common/BasicButton.tsx
new file mode 100644
index 00000000..1fe29cd9
--- /dev/null
+++ b/src/components/common/BasicButton.tsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import {StyleProp, StyleSheet, Text, View, ViewStyle} from 'react-native';
+import {TAGG_LIGHT_BLUE} from '../../constants';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import {normalize} from '../../utils';
+
+interface BasicButtonProps {
+  title: string;
+  onPress: () => void;
+  solid?: boolean;
+  externalStyles?: Record<string, StyleProp<ViewStyle>>;
+}
+const BasicButton: React.FC<BasicButtonProps> = ({
+  title,
+  onPress,
+  solid,
+  externalStyles,
+}) => {
+  return (
+    <View style={[styles.container, externalStyles?.container]}>
+      <TouchableOpacity
+        style={[
+          styles.genericButtonStyle,
+          solid ? styles.solidButton : styles.outlineButton,
+        ]}
+        onPress={onPress}>
+        <Text
+          style={[
+            styles.buttonTitle,
+            solid
+              ? styles.solidButtonTitleColor
+              : styles.outlineButtonTitleColor,
+          ]}>
+          {title}
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    height: '100%',
+    flexDirection: 'column',
+    justifyContent: 'space-around',
+  },
+  genericButtonStyle: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 3,
+    padding: 0,
+    width: '100%',
+    height: '100%',
+  },
+  solidButton: {
+    padding: 0,
+    backgroundColor: TAGG_LIGHT_BLUE,
+  },
+  outlineButton: {
+    borderWidth: 2,
+    backgroundColor: 'white',
+    borderColor: TAGG_LIGHT_BLUE,
+  },
+  solidButtonTitleColor: {
+    color: 'white',
+  },
+  outlineButtonTitleColor: {
+    color: TAGG_LIGHT_BLUE,
+  },
+  buttonTitle: {
+    fontSize: normalize(15),
+    fontWeight: '700',
+    letterSpacing: 1,
+  },
+});
+
+export default BasicButton;
diff --git a/src/components/common/FriendsButton.tsx b/src/components/common/FriendsButton.tsx
index 46421bd1..6ddad93f 100644
--- a/src/components/common/FriendsButton.tsx
+++ b/src/components/common/FriendsButton.tsx
@@ -100,7 +100,7 @@ const styles = StyleSheet.create({
   button: {
     justifyContent: 'center',
     alignItems: 'center',
-    width: SCREEN_WIDTH * 0.4,
+    width: SCREEN_WIDTH * 0.42,
     aspectRatio: 154 / 33,
     borderWidth: 2,
     borderColor: TAGG_LIGHT_BLUE,
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 8499dbfa..b5fd0542 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -23,3 +23,4 @@ export {default as AcceptDeclineButtons} from './AcceptDeclineButtons';
 export {default as FriendsButton} from './FriendsButton';
 export {default as TaggSquareButton} from './TaggSquareButton';
 export {default as GradientBorderButton} from './GradientBorderButton';
+export {default as BasicButton} from './BasicButton';
diff --git a/src/components/messages/ChatHeader.tsx b/src/components/messages/ChatHeader.tsx
index 2bc096ec..67a7f1fe 100644
--- a/src/components/messages/ChatHeader.tsx
+++ b/src/components/messages/ChatHeader.tsx
@@ -1,39 +1,71 @@
+import {useNavigation} from '@react-navigation/native';
 import React, {useContext} from 'react';
 import {Image, StyleSheet, View} from 'react-native';
 import {Text} from 'react-native-animatable';
-import {useStore} from 'react-redux';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import {useDispatch, useStore} from 'react-redux';
 import {ChatContext} from '../../App';
-import {ChatHeaderHeight, normalize, StatusBarHeight} from '../../utils';
+import {ScreenType} from '../../types';
+import {
+  ChatHeaderHeight,
+  fetchUserX,
+  normalize,
+  StatusBarHeight,
+  userXInStore,
+} from '../../utils';
 import {formatLastSeenText, getMember, isOnline} from '../../utils/messages';
 
-type ChatHeaderProps = {};
+type ChatHeaderProps = {
+  screenType: ScreenType;
+};
 
-const ChatHeader: React.FC<ChatHeaderProps> = () => {
+const ChatHeader: React.FC<ChatHeaderProps> = (props) => {
+  const {screenType} = props;
   const {channel} = useContext(ChatContext);
+  const dispatch = useDispatch();
+  const navigation = useNavigation();
   const state = useStore().getState();
   const member = getMember(channel, state);
   const online = isOnline(member?.user?.last_active);
   const lastSeen = formatLastSeenText(member?.user?.last_active);
 
+  const toProfile = async () => {
+    if (member && member.user && member.user.username) {
+      if (!userXInStore(state, screenType, member.user.id)) {
+        await fetchUserX(
+          dispatch,
+          {userId: member.user.id, username: member.user.username},
+          screenType,
+        );
+      }
+      navigation.navigate('Profile', {
+        userXId: member.user.id,
+        screenType,
+      });
+    }
+  };
+
   return (
     <View style={styles.container}>
-      <View>
-        <Image
-          style={styles.avatar}
-          source={
-            member
-              ? {uri: member.user?.thumbnail_url}
-              : require('../../assets/images/avatar-placeholder.png')
-          }
-        />
-        {online && <View style={styles.online} />}
-      </View>
-      <View style={styles.content}>
-        <Text style={styles.name} numberOfLines={1}>
-          {member?.user?.first_name} {member?.user?.last_name}
-        </Text>
-        <Text style={styles.lastSeen}>{lastSeen}</Text>
-      </View>
+      <TouchableOpacity style={styles.tappables} onPress={toProfile}>
+        <View>
+          <Image
+            style={styles.avatar}
+            source={
+              member
+                ? {uri: member.user?.thumbnail_url}
+                : require('../../assets/images/avatar-placeholder.png')
+            }
+          />
+          {online && <View style={styles.online} />}
+        </View>
+        <View style={styles.content}>
+          <Text style={styles.name} numberOfLines={1}>
+            {member?.user?.first_name} {member?.user?.last_name}
+          </Text>
+          <Text style={styles.lastSeen}>{lastSeen}</Text>
+        </View>
+      </TouchableOpacity>
     </View>
   );
 };
@@ -41,10 +73,13 @@ const ChatHeader: React.FC<ChatHeaderProps> = () => {
 const styles = StyleSheet.create({
   container: {
     height: ChatHeaderHeight - StatusBarHeight,
-    flexDirection: 'row',
-    alignItems: 'center',
     paddingLeft: '15%',
   },
+  tappables: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    width: '100%',
+  },
   avatar: {
     width: normalize(40),
     height: normalize(40),
diff --git a/src/components/messages/MessagesHeader.tsx b/src/components/messages/MessagesHeader.tsx
index 660da97d..1bd9b55a 100644
--- a/src/components/messages/MessagesHeader.tsx
+++ b/src/components/messages/MessagesHeader.tsx
@@ -1,10 +1,10 @@
-import React, {Fragment, useContext} from 'react';
+import React, {Fragment, useContext, useEffect, useState} from 'react';
 import {StyleSheet, View} from 'react-native';
 import {Text} from 'react-native-animatable';
 import {TouchableOpacity} from 'react-native-gesture-handler';
-import {normalize} from '../../utils';
-import ComposeIcon from '../../assets/icons/compose.svg';
 import {ChatContext} from '../../App';
+import ComposeIcon from '../../assets/icons/compose.svg';
+import {normalize} from '../../utils';
 
 type MessagesHeaderProps = {
   createChannel: () => void;
@@ -12,11 +12,30 @@ type MessagesHeaderProps = {
 
 const MessagesHeader: React.FC<MessagesHeaderProps> = ({createChannel}) => {
   const {chatClient} = useContext(ChatContext);
-  const unread = chatClient.user?.total_unread_count as number;
+  const [unread, setUnread] = useState(0);
+
+  useEffect(() => {
+    const newCount = chatClient.user?.total_unread_count as number;
+    if (newCount) {
+      setUnread(newCount);
+    }
+    const listener = chatClient?.on((e) => {
+      if (e.total_unread_count) {
+        setUnread(e.total_unread_count);
+      }
+    });
+
+    return () => {
+      if (listener) {
+        listener.unsubscribe();
+      }
+    };
+  }, [chatClient]);
+
   return (
     <View style={styles.header}>
       <Text style={styles.headerText}>Messages</Text>
-      {unread && unread !== 0 ? (
+      {unread !== 0 ? (
         <Text style={styles.unreadText}>
           {unread > 99 ? '99+' : unread} unread
         </Text>
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,
diff --git a/src/components/suggestedPeople/SPTaggsBar.tsx b/src/components/suggestedPeople/SPTaggsBar.tsx
index adac6dcf..29c58cce 100644
--- a/src/components/suggestedPeople/SPTaggsBar.tsx
+++ b/src/components/suggestedPeople/SPTaggsBar.tsx
@@ -70,7 +70,7 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
             setTaggsNeedUpdate={setTaggsNeedUpdate}
             setSocialDataNeedUpdate={handleSocialUpdate}
             whiteRing={true}
-            allowNavigation={allowTaggsNavigation}
+            screenType={screenType}
           />,
         );
         i++;
@@ -88,7 +88,7 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
               userXId={userXId}
               user={user}
               whiteRing={true}
-              allowNavigation={allowTaggsNavigation}
+              screenType={screenType}
             />,
           );
           i++;
diff --git a/src/components/taggs/Tagg.tsx b/src/components/taggs/Tagg.tsx
index 4e4987fb..5d26539b 100644
--- a/src/components/taggs/Tagg.tsx
+++ b/src/components/taggs/Tagg.tsx
@@ -17,13 +17,15 @@ import {
   registerNonIntegratedSocialLink,
 } from '../../services';
 import {SmallSocialIcon, SocialIcon, SocialLinkModal} from '../common';
-import {UserType} from '../../types';
+import {ScreenType, UserType} from '../../types';
 import {
   ERROR_LINK,
   ERROR_UNABLE_TO_FIND_PROFILE,
   SUCCESS_LINK,
 } from '../../constants/strings';
-import {normalize} from '../../utils';
+import {canViewProfile, normalize} from '../../utils';
+import {RootState} from '../../store/rootReducer';
+import {useStore} from 'react-redux';
 
 interface TaggProps {
   social: string;
@@ -34,7 +36,7 @@ interface TaggProps {
   userXId: string | undefined;
   user: UserType;
   whiteRing: boolean | undefined;
-  allowNavigation?: boolean;
+  screenType: ScreenType;
 }
 
 const Tagg: React.FC<TaggProps> = ({
@@ -44,11 +46,12 @@ const Tagg: React.FC<TaggProps> = ({
   setTaggsNeedUpdate,
   setSocialDataNeedUpdate,
   userXId,
+  screenType,
   user,
   whiteRing,
-  allowNavigation = true,
 }) => {
   const navigation = useNavigation();
+  const state: RootState = useStore().getState();
   const [modalVisible, setModalVisible] = useState(false);
   const youMayPass = isLinked || userXId;
 
@@ -72,19 +75,21 @@ const Tagg: React.FC<TaggProps> = ({
 
   const modalOrAuthBrowserOrPass = async () => {
     if (youMayPass) {
-      if (INTEGRATED_SOCIAL_LIST.indexOf(social) !== -1) {
-        navigation.push('SocialMediaTaggs', {
-          socialMediaType: social,
-          userXId,
-        });
-      } else {
-        getNonIntegratedURL(social, user.userId).then((socialURL) => {
-          if (socialURL) {
-            Linking.openURL(socialURL);
-          } else {
-            Alert.alert(ERROR_UNABLE_TO_FIND_PROFILE);
-          }
-        });
+      if (canViewProfile(state, userXId, screenType)) {
+        if (INTEGRATED_SOCIAL_LIST.indexOf(social) !== -1) {
+          navigation.navigate('SocialMediaTaggs', {
+            socialMediaType: social,
+            userXId,
+          });
+        } else {
+          getNonIntegratedURL(social, user.userId).then((socialURL) => {
+            if (socialURL) {
+              Linking.openURL(socialURL);
+            } else {
+              Alert.alert(ERROR_UNABLE_TO_FIND_PROFILE);
+            }
+          });
+        }
       }
     } else {
       if (isIntegrated) {
@@ -147,8 +152,7 @@ const Tagg: React.FC<TaggProps> = ({
           <View style={whiteRing ? styles.spcontainer : styles.container}>
             <TouchableOpacity
               style={styles.iconTap}
-              onPress={modalOrAuthBrowserOrPass}
-              disabled={!allowNavigation}>
+              onPress={modalOrAuthBrowserOrPass}>
               <SocialIcon style={styles.icon} social={social} whiteRing />
               {pickTheRightRingHere()}
             </TouchableOpacity>
diff --git a/src/components/taggs/TaggsBar.tsx b/src/components/taggs/TaggsBar.tsx
index a5003fbb..4d567b25 100644
--- a/src/components/taggs/TaggsBar.tsx
+++ b/src/components/taggs/TaggsBar.tsx
@@ -7,7 +7,7 @@ import Animated, {
   useDerivedValue,
 } from 'react-native-reanimated';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
-import {useDispatch, useSelector, useStore} from 'react-redux';
+import {useDispatch, useSelector} from 'react-redux';
 import {
   INTEGRATED_SOCIAL_LIST,
   PROFILE_CUTOUT_BOTTOM_Y,
@@ -17,7 +17,6 @@ import {getLinkedSocials} from '../../services';
 import {loadIndividualSocial, updateSocial} from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
 import {ScreenType} from '../../types';
-import {canViewProfile} from '../../utils';
 import Tagg from './Tagg';
 
 const {View, ScrollView} = Animated;
@@ -37,15 +36,12 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
   linkedSocials,
   onLayout,
 }) => {
+  const dispatch = useDispatch();
   let [taggs, setTaggs] = useState<Object[]>([]);
   let [taggsNeedUpdate, setTaggsNeedUpdate] = useState(true);
   const {user} = useSelector((state: RootState) =>
     userXId ? state.userX[screenType][userXId] : state.user,
   );
-  const state: RootState = useStore().getState();
-  const allowTaggsNavigation = canViewProfile(state, userXId, screenType);
-
-  const dispatch = useDispatch();
   const insetTop = useSafeAreaInsets().top;
   /**
    * Updates the individual social that needs update
@@ -80,13 +76,13 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
             key={i}
             social={social}
             userXId={userXId}
+            screenType={screenType}
             user={user}
             isLinked={true}
             isIntegrated={INTEGRATED_SOCIAL_LIST.indexOf(social) !== -1}
             setTaggsNeedUpdate={setTaggsNeedUpdate}
             setSocialDataNeedUpdate={handleSocialUpdate}
             whiteRing={false}
-            allowNavigation={allowTaggsNavigation}
           />,
         );
         i++;
@@ -102,9 +98,9 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
               setTaggsNeedUpdate={setTaggsNeedUpdate}
               setSocialDataNeedUpdate={handleSocialUpdate}
               userXId={userXId}
+              screenType={screenType}
               user={user}
               whiteRing={false}
-              allowNavigation={allowTaggsNavigation}
             />,
           );
           i++;