Merge branch 'master' into tma538-friend-requests

9 files changed, 158 insertions, 113 deletions

diff --git a/src/components/comments/CommentsCount.tsx b/src/components/comments/CommentsCount.tsx
index 325e2788..f4f8197d 100644
--- a/src/components/comments/CommentsCount.tsx
+++ b/src/components/comments/CommentsCount.tsx
@@ -30,7 +30,7 @@ const CommentsCount: React.FC<CommentsCountProps> = ({
   };
   return (
     <>
-      <TouchableOpacity onPress={() => navigateToCommentsScreen()}>
+      <TouchableOpacity onPress={navigateToCommentsScreen}>
         <CommentIcon style={styles.image} />
         <Text style={styles.count}>
           {commentsCount !== '0' ? commentsCount : ''}
diff --git a/src/components/common/TaggPopup.tsx b/src/components/common/TaggPopup.tsx
index 86a472b1..b5ac32ec 100644
--- a/src/components/common/TaggPopup.tsx
+++ b/src/components/common/TaggPopup.tsx
@@ -7,6 +7,7 @@ import {ArrowButton} from '..';
 import {OnboardingStackParams} from '../../routes';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 import CloseIcon from '../../assets/ionicons/close-outline.svg';
+import {BlurView} from '@react-native-community/blur';
 
 type TaggPopupRouteProps = RouteProp<OnboardingStackParams, 'TaggPopup'>;
 type TaggPopupNavigationProps = StackNavigationProp<
@@ -31,41 +32,43 @@ const TaggPopup: React.FC<TaggPopupProps> = ({route, navigation}) => {
   const {messageHeader, messageBody, next} = route.params.popupProps;
 
   return (
-    <TouchableOpacity
-      style={styles.container}
-      onPressOut={() => {
-        navigation.goBack();
-      }}>
-      <View style={styles.popup}>
-        <Image
-          style={styles.icon}
-          source={require('../../assets/icons/plus-logo.png')}
-        />
-        <View style={styles.textContainer}>
-          <Text style={styles.header}>{messageHeader}</Text>
-          <Text style={styles.subtext}>{messageBody}</Text>
-        </View>
-        {!next && (
-          <TouchableOpacity
-            style={styles.closeButton}
-            onPress={() => {
-              navigation.goBack();
-            }}>
-            <CloseIcon height={'50%'} width={'50%'} color={'white'} />
-          </TouchableOpacity>
-        )}
-      </View>
-      {next && (
-        <View style={styles.footer}>
-          <ArrowButton
-            direction="forward"
-            onPress={() => {
-              navigation.navigate('TaggPopup', {popupProps: next});
-            }}
+    <BlurView blurType="light" blurAmount={2} style={styles.container}>
+      <TouchableOpacity
+        style={styles.container}
+        onPressOut={() => {
+          navigation.goBack();
+        }}>
+        <View style={styles.popup}>
+          <Image
+            style={styles.icon}
+            source={require('../../assets/icons/plus-logo.png')}
           />
+          <View style={styles.textContainer}>
+            <Text style={styles.header}>{messageHeader}</Text>
+            <Text style={styles.subtext}>{messageBody}</Text>
+          </View>
+          {!next && (
+            <TouchableOpacity
+              style={styles.closeButton}
+              onPress={() => {
+                navigation.goBack();
+              }}>
+              <CloseIcon height={'50%'} width={'50%'} color={'white'} />
+            </TouchableOpacity>
+          )}
         </View>
-      )}
-    </TouchableOpacity>
+        {next && (
+          <View style={styles.footer}>
+            <ArrowButton
+              direction="forward"
+              onPress={() => {
+                navigation.navigate('TaggPopup', {popupProps: next});
+              }}
+            />
+          </View>
+        )}
+      </TouchableOpacity>
+    </BlurView>
   );
 };
 
@@ -75,6 +78,8 @@ const styles = StyleSheet.create({
     flexDirection: 'column',
     justifyContent: 'center',
     alignItems: 'center',
+    width: '100%',
+    height: '100%',
   },
   whiteColor: {
     color: 'white',
diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx
index 623e328d..7905e8a9 100644
--- a/src/components/moments/Moment.tsx
+++ b/src/components/moments/Moment.tsx
@@ -1,27 +1,20 @@
 import {useNavigation} from '@react-navigation/native';
-import React from 'react';
-import {
-  Alert,
-  StyleProp,
-  StyleSheet,
-  View,
-  ViewProps,
-  ViewStyle,
-} from 'react-native';
+import React, {Fragment} from 'react';
+import {Alert, StyleProp, StyleSheet, View, ViewStyle} from 'react-native';
 import {Text} from 'react-native-animatable';
 import {ScrollView, TouchableOpacity} from 'react-native-gesture-handler';
+import ImagePicker from 'react-native-image-crop-picker';
 import LinearGradient from 'react-native-linear-gradient';
-import PlusIcon from '../../assets/icons/plus_icon-01.svg';
-import UpIcon from '../../assets/icons/up_icon.svg';
-import DownIcon from '../../assets/icons/down_icon.svg';
+import {MomentType, ScreenType} from 'src/types';
 import DeleteIcon from '../../assets/icons/delete-logo.svg';
+import DownIcon from '../../assets/icons/down_icon.svg';
+import PlusIcon from '../../assets/icons/plus_icon-01.svg';
 import BigPlusIcon from '../../assets/icons/plus_icon-02.svg';
+import UpIcon from '../../assets/icons/up_icon.svg';
 import {TAGG_TEXT_LIGHT_BLUE} from '../../constants';
+import {ERROR_UPLOAD_MOMENT_SHORT} from '../../constants/strings';
 import {SCREEN_WIDTH} from '../../utils';
-import ImagePicker from 'react-native-image-crop-picker';
 import MomentTile from './MomentTile';
-import {MomentType, ScreenType} from 'src/types';
-import {useDispatch} from 'react-redux';
 
 interface MomentProps {
   title: string;
@@ -49,7 +42,6 @@ const Moment: React.FC<MomentProps> = ({
   externalStyles,
 }) => {
   const navigation = useNavigation();
-  const dispatch = useDispatch();
 
   const navigateToImagePicker = () => {
     ImagePicker.openPicker({
@@ -77,7 +69,7 @@ const Moment: React.FC<MomentProps> = ({
       })
       .catch((err) => {
         if (err.code && err.code !== 'E_PICKER_CANCELLED') {
-          Alert.alert('Unable to upload moment!');
+          Alert.alert(ERROR_UPLOAD_MOMENT_SHORT);
         }
       });
   };
@@ -88,23 +80,15 @@ const Moment: React.FC<MomentProps> = ({
         <Text style={[styles.titleText, externalStyles?.titleText]}>
           {title}
         </Text>
-        <View style={styles.flexer} />
         {!userXId ? (
           <>
-            <PlusIcon
-              width={21}
-              height={21}
-              onPress={() => navigateToImagePicker()}
-              color={TAGG_TEXT_LIGHT_BLUE}
-              style={{marginRight: 10}}
-            />
             {showUpButton && move && (
               <UpIcon
                 width={19}
                 height={19}
                 onPress={() => move('up', title)}
                 color={TAGG_TEXT_LIGHT_BLUE}
-                style={{marginRight: 10}}
+                style={{marginLeft: 5}}
               />
             )}
             {showDownButton && move && (
@@ -113,9 +97,23 @@ const Moment: React.FC<MomentProps> = ({
                 height={19}
                 onPress={() => move('down', title)}
                 color={TAGG_TEXT_LIGHT_BLUE}
-                style={{marginRight: 10}}
+                style={{marginLeft: 5}}
               />
             )}
+          </>
+        ) : (
+          <Fragment />
+        )}
+        <View style={styles.flexer} />
+        {!userXId ? (
+          <>
+            <PlusIcon
+              width={21}
+              height={21}
+              onPress={() => navigateToImagePicker()}
+              color={TAGG_TEXT_LIGHT_BLUE}
+              style={{marginRight: 10}}
+            />
             {shouldAllowDeletion && (
               <DeleteIcon
                 onPress={() => handleMomentCategoryDelete(title)}
diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx
index efbda46f..e6d16f82 100644
--- a/src/components/notifications/Notification.tsx
+++ b/src/components/notifications/Notification.tsx
@@ -9,10 +9,8 @@ import {
   loadUserNotifications,
   updateUserXFriends,
 } from '../../store/actions';
-import {loadAvatar} from '../../services';
 import {acceptFriendRequest} from '../../store/actions';
-import {RootState} from '../../store/rootReducer';
-import {NotificationType, ProfilePreviewType, ScreenType} from '../../types';
+import {NotificationType, ProfilePreviewType, ScreenType, MomentType} from '../../types';
 import {
   fetchUserX,
   SCREEN_HEIGHT,
@@ -20,10 +18,13 @@ import {
   userXInStore,
 } from '../../utils';
 import AcceptDeclineButtons from '../common/AcceptDeclineButtons';
+import {loadAvatar, loadMomentThumbnail} from '../../services';
+
 
 interface NotificationProps {
   item: NotificationType;
   screenType: ScreenType;
+  moments: MomentType[];
 }
 
 const Notification: React.FC<NotificationProps> = (props) => {
@@ -36,6 +37,7 @@ const Notification: React.FC<NotificationProps> = (props) => {
       unread,
     },
     screenType,
+    moments: loggedInUserMoments,
   } = props;
 
   const navigation = useNavigation();
@@ -59,20 +61,21 @@ const Notification: React.FC<NotificationProps> = (props) => {
     };
   }, [id]);
 
-  // TODO: this should be moment thumbnail, waiting for that to complete
-  // useEffect(() => {
-  //   let mounted = true;
-  //   const loadMomentImage = async (user_id: string) => {
-  //     const response = await loadAvatar(user_id, true);
-  //     if (mounted) {
-  //       setMomentURI(response);
-  //     }
-  //   };
-  //   loadMomentImage(id);
-  //   return () => {
-  //     mounted = false;
-  //   };
-  // }, [id, notification_object]);
+  useEffect(() => {
+    let mounted = true;
+    const loadMomentImage = async (moment_id: string) => {
+      const response = await loadMomentThumbnail(moment_id);
+      if (mounted && response) {
+        setMomentURI(response);
+      }
+    };
+    if (notification_type === 'CMT' && notification_object) {
+      loadMomentImage(notification_object.moment_id);
+      return () => {
+        mounted = false;
+      };
+    }
+  }, [id, notification_object, notification_type]);
 
   const onNotificationTap = async () => {
     switch (notification_type) {
@@ -90,6 +93,25 @@ const Notification: React.FC<NotificationProps> = (props) => {
           screenType,
         });
         break;
+      case 'CMT':
+        // find the moment we need to display
+        const moment = loggedInUserMoments?.find(
+          (m) => m.moment_id === notification_object?.moment_id,
+        );
+        if (moment) {
+          navigation.push('IndividualMoment', {
+            moment,
+            userXId: undefined, // we're only viewing our own moment here
+            screenType,
+          });
+          setTimeout(() => {
+            navigation.push('MomentCommentsScreen', {
+              moment_id: moment.moment_id,
+              screenType,
+            });
+          }, 500);
+        }
+        break;
       default:
         break;
     }
@@ -136,14 +158,10 @@ const Notification: React.FC<NotificationProps> = (props) => {
             />
           </View>
         )}
+        {notification_type === 'CMT' && notification_object && (
+        <Image style={styles.moment} source={{uri: momentURI}} />
+      )}
       </TouchableWithoutFeedback>
-      {/* TODO: Still WIP */}
-      {/* {notification_type === 'CMT' && notification_object && (
-        <Image
-          style={styles.moment}
-          source={{uri: momentURI, cache: 'only-if-cached'}}
-        />
-      )} */}
     </>
   );
 };
@@ -156,7 +174,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   avatarContainer: {
-    marginLeft: '5%',
+    marginLeft: '8%',
     flex: 1,
     justifyContent: 'center',
   },
@@ -171,7 +189,7 @@ const styles = StyleSheet.create({
     height: '80%',
     flexDirection: 'column',
     justifyContent: 'space-around',
-    marginRight: SCREEN_WIDTH / 6,
+    marginRight: '15%',
   },
   actorName: {
     fontSize: 15,
diff --git a/src/components/onboarding/LinkSocialMedia.tsx b/src/components/onboarding/LinkSocialMedia.tsx
index c7b0a6b4..6cb7e9cf 100644
--- a/src/components/onboarding/LinkSocialMedia.tsx
+++ b/src/components/onboarding/LinkSocialMedia.tsx
@@ -13,6 +13,7 @@ import {
   SOCIAL_FONT_COLORS,
   TAGG_ICON_DIM,
 } from '../../constants/constants';
+import {ERROR_LINK, SUCCESS_LINK} from '../../constants/strings';
 import {
   handlePressForAuthBrowser,
   registerNonIntegratedSocialLink,
@@ -64,12 +65,12 @@ const SocialMediaLinker: React.FC<SocialMediaLinkerProps> = ({
 
   const linkNonIntegratedSocial = async (username: string) => {
     if (await registerNonIntegratedSocialLink(label, username)) {
-      Alert.alert(`Successfully linked ${label} 🎉`);
+      Alert.alert(SUCCESS_LINK(label));
       setAuthenticated(true);
     } else {
       // If we display too fast the alert will get dismissed with the modal
       setTimeout(() => {
-        Alert.alert(`Something went wrong, we can't link with ${label} 😔`);
+        Alert.alert(ERROR_LINK(label));
       }, 500);
     }
   };
diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index 9213e012..e7fb566b 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -107,10 +107,12 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
   const [shouldBounce, setShouldBounce] = useState<boolean>(true);
   const [refreshing, setRefreshing] = useState<boolean>(false);
 
-  //These two booleans are used to see if user closed the pormpt displayed to them
   const [isStageTwoPromptClosed, setIsStageTwoPromptClosed] = useState<boolean>(
     false,
   );
+  const [isStageOnePromptClosed, setIsStageOnePromptClosed] = useState<boolean>(
+    false,
+  );
   const [isStageThreePromptClosed, setIsStageThreePromptClosed] = useState<
     boolean
   >(false);
@@ -154,7 +156,7 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
   const move = (direction: 'up' | 'down', title: string) => {
     let categories = [...momentCategories];
     categories = moveCategory(categories, title, direction === 'up');
-    dispatch(updateMomentCategories(categories));
+    dispatch(updateMomentCategories(categories, false));
   };
 
   /**
@@ -173,11 +175,16 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
       const navigateToMomentUploadPrompt = () => {
         switch (profile.profile_completion_stage) {
           case 1:
-            if (momentCategories && momentCategories[0]) {
+            if (
+              momentCategories &&
+              momentCategories[0] &&
+              !isStageOnePromptClosed
+            ) {
               navigation.navigate('MomentUploadPrompt', {
                 screenType,
                 momentCategory: momentCategories[0],
               });
+              setIsStageOnePromptClosed(true);
             }
             break;
           case 2:
@@ -190,8 +197,15 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
             break;
         }
       };
-      setTimeout(navigateToMomentUploadPrompt, 2000);
-    }, [profile.profile_completion_stage, momentCategories]),
+      if (!userXId) {
+        setTimeout(navigateToMomentUploadPrompt, 2000);
+      }
+    }, [
+      profile.profile_completion_stage,
+      momentCategories,
+      userXId,
+      isStageOnePromptClosed,
+    ]),
   );
 
   useEffect(() => {
@@ -270,7 +284,7 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
                 momentCategories.filter((mc) => mc !== category),
                 false,
               ),
-            );
+            )
             dispatch(deleteUserMomentsForCategory(category));
           },
         },
@@ -379,7 +393,7 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
               />
             ),
         )}
-        {!userXId && profile.profile_completion_stage !== 1 && (
+        {!userXId && (
           <TouchableOpacity
             onPress={() =>
               navigation.push('CategorySelection', {
diff --git a/src/components/profile/MomentMoreInfoDrawer.tsx b/src/components/profile/MomentMoreInfoDrawer.tsx
index e127e05c..77c349ca 100644
--- a/src/components/profile/MomentMoreInfoDrawer.tsx
+++ b/src/components/profile/MomentMoreInfoDrawer.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import {Alert, StyleSheet, TouchableOpacity, ViewProps} from 'react-native';
 import MoreIcon from '../../assets/icons/more_horiz-24px.svg';
+import {ERROR_DELETE_MOMENT, MOMENT_DELETED_MSG} from '../../constants/strings';
 import {deleteMoment, sendReport} from '../../services';
 import {GenericMoreInfoDrawer} from '../common';
 
@@ -21,7 +22,7 @@ const MomentMoreInfoDrawer: React.FC<MomentMoreInfoDrawerProps> = (props) => {
       if (success) {
         // set time out for UI transitions
         setTimeout(() => {
-          Alert.alert('Moment deleted!', '', [
+          Alert.alert(MOMENT_DELETED_MSG, '', [
             {
               text: 'OK',
               onPress: () => dismissScreenAndUpdate(),
@@ -31,9 +32,7 @@ const MomentMoreInfoDrawer: React.FC<MomentMoreInfoDrawerProps> = (props) => {
         }, 500);
       } else {
         setTimeout(() => {
-          Alert.alert(
-            'We were unable to delete that moment 😭 , please try again later!',
-          );
+          Alert.alert(ERROR_DELETE_MOMENT);
         }, 500);
       }
     });
diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx
index 0d8d9852..e6311daa 100644
--- a/src/components/profile/ProfilePreview.tsx
+++ b/src/components/profile/ProfilePreview.tsx
@@ -21,6 +21,7 @@ import {logout} from '../../store/actions';
 import {checkIfUserIsBlocked, fetchUserX, userXInStore} from '../../utils';
 import {SearchResultsBackground} from '../search';
 import NavigationBar from 'src/routes/tabs';
+import {ERROR_UNABLE_TO_VIEW_PROFILE} from '../../constants/strings';
 
 const NO_USER: UserType = {
   userId: '',
@@ -90,7 +91,7 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
         loggedInUser,
       );
       if (isUserBlocked) {
-        Alert.alert('You cannot view this profile');
+        Alert.alert(ERROR_UNABLE_TO_VIEW_PROFILE);
         return;
       }
       if (previewType !== 'Comment') {
@@ -129,21 +130,23 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
         }
       }
 
+      const userXId =
+        loggedInUser.username === user.username ? undefined : user.id;
+
       /**
-       * Dispatch an event to Fetch the user details
-       * If the user is already present in store, do not fetch again
-       * Finally, Navigate to profile of the user selected
+       * Dispatch an event to Fetch the user details only if we're navigating to
+       * a userX's profile.
+       * If the user is already present in store, do not fetch again.
+       * Finally, Navigate to profile of the user selected.
        */
-
-      if (!userXInStore(state, screenType, user.id)) {
+      if (userXId && !userXInStore(state, screenType, user.id)) {
         await fetchUserX(
           dispatch,
           {userId: user.id, username: user.username},
           screenType,
         );
       }
-      const userXId =
-        loggedInUser.username === user.username ? undefined : user.id;
+
       navigation.push('Profile', {
         userXId,
         screenType,
diff --git a/src/components/taggs/Tagg.tsx b/src/components/taggs/Tagg.tsx
index 12172df9..82ac07df 100644
--- a/src/components/taggs/Tagg.tsx
+++ b/src/components/taggs/Tagg.tsx
@@ -17,6 +17,11 @@ import {
 } from '../../services';
 import {SmallSocialIcon, SocialIcon, SocialLinkModal} from '../common';
 import {UserType} from '../../types';
+import {
+  ERROR_LINK,
+  ERROR_UNABLE_TO_FIND_PROFILE,
+  SUCCESS_LINK,
+} from '../../constants/strings';
 
 interface TaggProps {
   social: string;
@@ -56,7 +61,7 @@ const Tagg: React.FC<TaggProps> = ({
           show auth browser
         case !integrated_social:
           show modal
-  Tagg's "Tagg" will use the Ring instead of PurpleRing 
+  Tagg's "Tagg" will use the Ring instead of PurpleRing
   */
 
   const modalOrAuthBrowserOrPass = async () => {
@@ -71,7 +76,7 @@ const Tagg: React.FC<TaggProps> = ({
           if (socialURL) {
             Linking.openURL(socialURL);
           } else {
-            Alert.alert('We were unable to find this profile 😔');
+            Alert.alert(ERROR_UNABLE_TO_FIND_PROFILE);
           }
         });
       }
@@ -79,7 +84,9 @@ const Tagg: React.FC<TaggProps> = ({
       if (isIntegrated) {
         handlePressForAuthBrowser(social).then((success) => {
           setTaggsNeedUpdate(success);
-          if (success) setSocialDataNeedUpdate(social, '');
+          if (success) {
+            setSocialDataNeedUpdate(social, '');
+          }
         });
       } else {
         setModalVisible(true);
@@ -105,13 +112,13 @@ const Tagg: React.FC<TaggProps> = ({
 
   const linkNonIntegratedSocial = async (username: string) => {
     if (await registerNonIntegratedSocialLink(social, username)) {
-      Alert.alert(`Successfully linked ${social} 🎉`);
+      Alert.alert(SUCCESS_LINK(social));
       setTaggsNeedUpdate(true);
       setSocialDataNeedUpdate(social, username);
     } else {
       // If we display too fast the alert will get dismissed with the modal
       setTimeout(() => {
-        Alert.alert(`Something went wrong, we can't link with ${social} 😔`);
+        Alert.alert(ERROR_LINK(social));
       }, 500);
     }
   };