Merge branch 'master' into chat-poc

# Conflicts:
#	src/components/profile/Content.tsx
#	src/components/taggs/TaggsBar.tsx
#	src/screens/profile/ProfileScreen.tsx
#	src/types/types.ts

12 files changed, 69 insertions, 58 deletions

diff --git a/src/components/common/TaggPrompt.tsx b/src/components/common/TaggPrompt.tsx
index 721b1eb8..5e125d00 100644
--- a/src/components/common/TaggPrompt.tsx
+++ b/src/components/common/TaggPrompt.tsx
@@ -68,7 +68,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: 'white',
-    height: isIPhoneX() ? SCREEN_HEIGHT / 6 : SCREEN_HEIGHT / 5,
+    height: SCREEN_HEIGHT / 4,
   },
   closeButton: {
     position: 'relative',
diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index dd68ab17..05098d14 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -67,6 +67,8 @@ const Content: React.FC<ContentProps> = ({userXId, screenType}) => {
    */
   const [isBlocked, setIsBlocked] = useState<boolean>(false);
   const [profileBodyHeight, setProfileBodyHeight] = useState(0);
+  const [socialsBarHeight, setSocialsBarHeight] = useState(0);
+  const [shouldBounce, setShouldBounce] = useState<boolean>(true);
   const [refreshing, setRefreshing] = useState<boolean>(false);
 
   const onRefresh = useCallback(() => {
@@ -88,6 +90,11 @@ const Content: React.FC<ContentProps> = ({userXId, screenType}) => {
     setProfileBodyHeight(height);
   };
 
+  const onSocialsBarLayout = (e: LayoutChangeEvent) => {
+    const {height} = e.nativeEvent.layout;
+    setSocialsBarHeight(height);
+  };
+
   useEffect(() => {
     const isActuallyBlocked = blockedUsers.some(
       (cur_user) => user.username === cur_user.username,
@@ -152,6 +159,7 @@ const Content: React.FC<ContentProps> = ({userXId, screenType}) => {
       />
       <TaggsBar
         {...{y, profileBodyHeight, userXId, screenType}}
+        onLayout={onSocialsBarLayout}
       />
       {canViewProfile(state, userXId, screenType) ? (
         <PublicProfile
@@ -161,6 +169,7 @@ const Content: React.FC<ContentProps> = ({userXId, screenType}) => {
             screenType,
             setScrollEnabled,
             profileBodyHeight,
+            socialsBarHeight,
             scrollViewRef,
           }}
         />
diff --git a/src/components/profile/Friends.tsx b/src/components/profile/Friends.tsx
index 44f6bb48..c1dca755 100644
--- a/src/components/profile/Friends.tsx
+++ b/src/components/profile/Friends.tsx
@@ -27,7 +27,7 @@ interface FriendsProps {
 const Friends: React.FC<FriendsProps> = ({result, screenType, userId}) => {
   const state: RootState = useStore().getState();
   const dispatch = useDispatch();
-  const {user: loggedInUser = NO_USER} = state;
+  const {user: loggedInUser = NO_USER} = state.user;
   const navigation = useNavigation();
   const [usersFromContacts, setUsersFromContacts] = useState<
     ProfilePreviewType[]
@@ -39,7 +39,7 @@ const Friends: React.FC<FriendsProps> = ({result, screenType, userId}) => {
         const permission = await checkPermission();
         if (permission === 'authorized') {
           let response = await usersFromContactsService(contacts);
-          await setUsersFromContacts(response.existing_tagg_users);
+          setUsersFromContacts(response.existing_tagg_users);
         } else {
           console.log('Authorize access to contacts');
         }
@@ -84,10 +84,10 @@ const Friends: React.FC<FriendsProps> = ({result, screenType, userId}) => {
 
   return (
     <>
-      {loggedInUser.userId === userId && (
+      {loggedInUser.userId === userId && usersFromContacts.length !== 0 && (
         <View style={styles.subheader}>
           <View style={styles.addFriendHeaderContainer}>
-            <Text style={[styles.subheaderText]}>Contacts on tagg</Text>
+            <Text style={[styles.subheaderText]}>Contacts on Tagg</Text>
           </View>
           <UsersFromContacts />
         </View>
diff --git a/src/components/profile/PublicProfile.tsx b/src/components/profile/PublicProfile.tsx
index 5f9b0b99..1c49bff5 100644
--- a/src/components/profile/PublicProfile.tsx
+++ b/src/components/profile/PublicProfile.tsx
@@ -35,6 +35,7 @@ const PublicProfile: React.FC<ContentProps> = ({
   screenType,
   setScrollEnabled,
   profileBodyHeight,
+  socialsBarHeight,
   scrollViewRef,
 }) => {
   const dispatch = useDispatch();
@@ -104,6 +105,7 @@ const PublicProfile: React.FC<ContentProps> = ({
                 screenType,
                 momentCategory: momentCategories[0],
                 profileBodyHeight,
+                socialsBarHeight,
               });
               setIsStageOnePromptClosed(true);
             }
@@ -133,6 +135,7 @@ const PublicProfile: React.FC<ContentProps> = ({
       navigation,
       screenType,
       profileBodyHeight,
+      socialsBarHeight,
       scrollViewRef,
     ]),
   );
diff --git a/src/components/taggs/TaggsBar.tsx b/src/components/taggs/TaggsBar.tsx
index 87dabc3d..a5003fbb 100644
--- a/src/components/taggs/TaggsBar.tsx
+++ b/src/components/taggs/TaggsBar.tsx
@@ -1,16 +1,17 @@
 import React, {useEffect, useState} from 'react';
-import {StyleSheet} from 'react-native';
+import {LayoutChangeEvent, StyleSheet} from 'react-native';
 import Animated, {
-  useDerivedValue,
-  interpolate,
   Extrapolate,
+  interpolate,
   useAnimatedStyle,
+  useDerivedValue,
 } from 'react-native-reanimated';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {useDispatch, useSelector, useStore} from 'react-redux';
 import {
   INTEGRATED_SOCIAL_LIST,
-  SOCIAL_LIST,
   PROFILE_CUTOUT_BOTTOM_Y,
+  SOCIAL_LIST,
 } from '../../constants';
 import {getLinkedSocials} from '../../services';
 import {loadIndividualSocial, updateSocial} from '../../store/actions';
@@ -18,7 +19,6 @@ import {RootState} from '../../store/rootReducer';
 import {ScreenType} from '../../types';
 import {canViewProfile} from '../../utils';
 import Tagg from './Tagg';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 const {View, ScrollView} = Animated;
 interface TaggsBarProps {
@@ -27,6 +27,7 @@ interface TaggsBarProps {
   userXId: string | undefined;
   screenType: ScreenType;
   linkedSocials?: string[];
+  onLayout: (event: LayoutChangeEvent) => void;
 }
 const TaggsBar: React.FC<TaggsBarProps> = ({
   y,
@@ -34,6 +35,7 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
   userXId,
   screenType,
   linkedSocials,
+  onLayout,
 }) => {
   let [taggs, setTaggs] = useState<Object[]>([]);
   let [taggsNeedUpdate, setTaggsNeedUpdate] = useState(true);
@@ -140,7 +142,7 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
   }));
 
   return taggs.length > 0 ? (
-    <View style={[styles.container, animatedStyles]}>
+    <View style={[styles.container, animatedStyles]} onLayout={onLayout}>
       <ScrollView
         horizontal
         showsHorizontalScrollIndicator={false}
diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx
index 021c0688..01b28fd4 100644
--- a/src/routes/main/MainStackNavigator.tsx
+++ b/src/routes/main/MainStackNavigator.tsx
@@ -73,6 +73,7 @@ export type MainStackParams = {
     screenType: ScreenType;
     momentCategory: string;
     profileBodyHeight: number;
+    socialsBarHeight: number;
   };
   AnimatedTutorial: {
     screenType: ScreenType;
diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx
index 8c1dc327..871d62bf 100644
--- a/src/screens/profile/IndividualMoment.tsx
+++ b/src/screens/profile/IndividualMoment.tsx
@@ -27,7 +27,7 @@ interface IndividualMomentProps {
   navigation: IndividualMomentNavigationProp;
 }
 
-const ITEM_HEIGHT = SCREEN_HEIGHT * (9 / 10);
+const ITEM_HEIGHT = SCREEN_HEIGHT * 0.9;
 
 const IndividualMoment: React.FC<IndividualMomentProps> = ({
   route,
@@ -40,13 +40,13 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({
   );
   const {
     user: {username},
-  } = userXId
-    ? useSelector((state: RootState) => state.userX[screenType][userXId])
-    : useSelector((state: RootState) => state.user);
+  } = useSelector((state: RootState) =>
+    userXId ? state.userX[screenType][userXId] : state.user,
+  );
 
-  const {moments} = userXId
-    ? useSelector((state: RootState) => state.userX[screenType][userXId])
-    : useSelector((state: RootState) => state.moments);
+  const {moments} = useSelector((state: RootState) =>
+    userXId ? state.userX[screenType][userXId] : state.moments,
+  );
 
   const isOwnProfile = username === loggedInUsername;
   const momentData = moments.filter(
diff --git a/src/screens/profile/InviteFriendsScreen.tsx b/src/screens/profile/InviteFriendsScreen.tsx
index a9fa1404..ad9e382e 100644
--- a/src/screens/profile/InviteFriendsScreen.tsx
+++ b/src/screens/profile/InviteFriendsScreen.tsx
@@ -203,7 +203,7 @@ const InviteFriendsScreen: React.FC<InviteFriendsScreenProps> = ({route}) => {
               </Animated.View>
             </View>
             <View style={styles.subheader}>
-              <Text style={styles.subheaderText}>Contacts on tagg</Text>
+              <Text style={styles.subheaderText}>Contacts on Tagg</Text>
               <UsersFromContacts />
             </View>
             <View style={styles.subheader}>
diff --git a/src/screens/profile/MomentUploadPromptScreen.tsx b/src/screens/profile/MomentUploadPromptScreen.tsx
index f79c81b4..f0aaffc4 100644
--- a/src/screens/profile/MomentUploadPromptScreen.tsx
+++ b/src/screens/profile/MomentUploadPromptScreen.tsx
@@ -8,7 +8,7 @@ import {Moment} from '../../components';
 import {Image} from 'react-native-animatable';
 import {UPLOAD_MOMENT_PROMPT_ONE_MESSAGE} from '../../constants/strings';
 import {PROFILE_CUTOUT_BOTTOM_Y} from '../../constants';
-import {isIPhoneX, normalize} from '../../utils';
+import {normalize} from '../../utils';
 
 type MomentUploadPromptScreenRouteProp = RouteProp<
   MainStackParams,
@@ -28,7 +28,12 @@ const MomentUploadPromptScreen: React.FC<MomentUploadPromptScreenProps> = ({
   route,
   navigation,
 }) => {
-  const {screenType, momentCategory, profileBodyHeight} = route.params;
+  const {
+    screenType,
+    momentCategory,
+    profileBodyHeight,
+    socialsBarHeight,
+  } = route.params;
   return (
     <View style={styles.container}>
       <CloseIcon
@@ -61,9 +66,7 @@ const MomentUploadPromptScreen: React.FC<MomentUploadPromptScreenProps> = ({
         externalStyles={{
           container: {
             ...styles.momentContainer,
-            top: isIPhoneX()
-              ? profileBodyHeight + 615
-              : profileBodyHeight + 500,
+            top: PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight + socialsBarHeight,
           },
           titleText: styles.momentHeaderText,
           header: styles.momentHeader,
@@ -103,20 +106,21 @@ const styles = StyleSheet.create({
   //Styles to adjust moment container
   momentScrollContainer: {
     backgroundColor: 'transparent',
+    marginTop: 10,
   },
   momentContainer: {
     ...StyleSheet.absoluteFillObject,
     backgroundColor: 'transparent',
-    height: 170,
+    height: 175,
   },
   momentHeaderText: {
     ...StyleSheet.absoluteFillObject,
     marginLeft: 12,
-    marginTop: 10,
+    paddingVertical: 5,
   },
   momentHeader: {
+    marginTop: 7,
     backgroundColor: 'transparent',
-    paddingVertical: 20,
   },
 });
 
diff --git a/src/screens/profile/ProfileScreen.tsx b/src/screens/profile/ProfileScreen.tsx
index a5d1e495..6d9ef020 100644
--- a/src/screens/profile/ProfileScreen.tsx
+++ b/src/screens/profile/ProfileScreen.tsx
@@ -4,11 +4,6 @@ import {Content, TabsGradient} from '../../components';
 import {RouteProp} from '@react-navigation/native';
 import {MainStackParams} from '../../routes/';
 
-/**r
- * Profile Screen for a user's profile
- * including posts, messaging, and settings
- */
-
 type ProfileScreenRouteProps = RouteProp<MainStackParams, 'Profile'>;
 
 interface ProfileOnboardingProps {
@@ -19,25 +14,6 @@ const ProfileScreen: React.FC<ProfileOnboardingProps> = ({route}) => {
   const {screenType} = route.params;
   let {userXId} = route.params;
 
-  /**
-   * This is a double safety check to avoid app crash.
-   * Checks if the required userXId is present in the store, if not userXId is set to dummy id
-   */
-  // if (userXId && !(userXId in useStore().getState().userX[screenType])) {
-  //   userXId = DUMMY_USERID;
-  // }
-
-  /**
-   * Code under useFocusEffect gets executed every time the screen comes under focus / is being viewed by the user.
-   * This is done to reset the users stored in our store for the Search screen.
-   * Read more about useFocusEffect here : https://reactnavigation.org/docs/function-after-focusing-screen/
-   */
-  // useFocusEffect(() => {
-  //   if (!userXId) {
-  //     dispatch(resetScreenType(screenType));
-  //   }
-  // });
-
   return (
     <>
       <StatusBar barStyle="dark-content" />
diff --git a/src/types/types.ts b/src/types/types.ts
index 40f2a614..1a352808 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -1,3 +1,4 @@
+import Animated from 'react-native-reanimated';
 import {Channel as ChannelType, StreamChat} from 'stream-chat';
 
 export interface UserType {
@@ -209,6 +210,15 @@ export interface CommentNotificationType {
 export interface ThreadNotificationType extends CommentNotificationType {
   parent_comment: string;
 }
+export interface ContentProps {
+  y: Animated.Value<number>;
+  userXId: string | undefined;
+  screenType: ScreenType;
+  setScrollEnabled: (enabled: boolean) => void;
+  profileBodyHeight: number;
+  socialsBarHeight: number;
+  scrollViewRef: React.MutableRefObject<null>;
+}
 
 export type NotificationType = {
   actor: ProfilePreviewType;
diff --git a/src/utils/moments.ts b/src/utils/moments.ts
index 7428b1ac..87f062af 100644
--- a/src/utils/moments.ts
+++ b/src/utils/moments.ts
@@ -1,15 +1,17 @@
 import moment from 'moment';
 
-//A util that calculates the difference between a given time and current time
-//Returns the difference in the largest possible unit of time (days > hours > minutes > seconds)
-
+/**
+ * Formats elapsed time from a given time.
+ * @param date_time given time
+ * @returns difference in the largest possible unit of time (days > hours > minutes > seconds)
+ */
 export const getTimePosted = (date_time: string) => {
   const datePosted = moment(date_time);
   const now = moment();
   var time = date_time;
   var difference = now.diff(datePosted, 'seconds');
 
-  //Creating elapsedTime string to display to user
+  // Creating elapsedTime string to display to user
   // 0 to less than 1 minute
   if (difference < 60) {
     time = difference + ' seconds';
@@ -19,15 +21,19 @@ export const getTimePosted = (date_time: string) => {
     difference = now.diff(datePosted, 'minutes');
     time = difference + (difference === 1 ? ' minute' : ' minutes');
   }
-  //1 hour to less than 1 day
+  // 1 hour to less than 1 day
   else if (difference >= 60 * 60 && difference < 24 * 60 * 60) {
     difference = now.diff(datePosted, 'hours');
     time = difference + (difference === 1 ? ' hour' : ' hours');
   }
-  //Any number of days
-  else if (difference >= 24 * 60 * 60) {
+  // Any number of days
+  else if (difference >= 24 * 60 * 60 && difference < 24 * 60 * 60 * 3) {
     difference = now.diff(datePosted, 'days');
     time = difference + (difference === 1 ? ' day' : ' days');
   }
+  // More than 3 days
+  else if (difference >= 24 * 60 * 60 * 3) {
+    time = datePosted.format('MMMM D, YYYY');
+  }
   return time;
 };