From d6714bec669becb4132035ffdf7b9b87e9c6ce7b Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Thu, 21 Jan 2021 16:59:30 -0500
Subject: normalize function and normalized all fonts on profile page

---
 src/components/moments/Moment.tsx | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

(limited to 'src/components/moments')

diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx
index 7905e8a9..b08eb574 100644
--- a/src/components/moments/Moment.tsx
+++ b/src/components/moments/Moment.tsx
@@ -13,7 +13,7 @@ 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 {normalize, SCREEN_WIDTH} from '../../utils';
 import MomentTile from './MomentTile';
 
 interface MomentProps {
@@ -171,15 +171,10 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   titleText: {
-    fontSize: 16,
+    fontSize: normalize(16),
     fontWeight: 'bold',
     color: TAGG_TEXT_LIGHT_BLUE,
   },
-  // titleContainer: {
-  //   flex: 1,
-  //   flexDirection: 'row',
-  //   justifyContent: 'flex-end',
-  // },
   flexer: {
     flex: 1,
   },
-- 
cgit v1.2.3-70-g09d2


From d667654caf1aa4e5f4814fa927e835f13efc0650 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Fri, 22 Jan 2021 16:30:46 -0500
Subject: changed constant name

---
 src/components/common/AcceptDeclineButtons.tsx   |  8 +--
 src/components/common/GenericMoreInfoDrawer.tsx  |  4 +-
 src/components/common/SocialLinkModal.tsx        |  4 +-
 src/components/moments/Moment.tsx                | 10 ++--
 src/components/moments/MomentPostContent.tsx     |  1 +
 src/components/onboarding/TaggBigInput.tsx       |  4 +-
 src/components/profile/Content.tsx               | 68 +++++++++++-------------
 src/components/profile/ProfileBody.tsx           |  8 +--
 src/components/profile/ProfileMoreInfoDrawer.tsx |  4 +-
 src/components/profile/ToggleButton.tsx          |  8 +--
 src/components/search/RecentSearches.tsx         |  4 +-
 src/components/taggs/TwitterTaggPost.tsx         |  4 +-
 src/constants/constants.ts                       |  2 +-
 src/screens/search/SearchScreen.tsx              |  4 +-
 14 files changed, 63 insertions(+), 70 deletions(-)

(limited to 'src/components/moments')

diff --git a/src/components/common/AcceptDeclineButtons.tsx b/src/components/common/AcceptDeclineButtons.tsx
index 221056c0..9caaffca 100644
--- a/src/components/common/AcceptDeclineButtons.tsx
+++ b/src/components/common/AcceptDeclineButtons.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {StyleProp, StyleSheet, Text, View, ViewStyle} from 'react-native';
-import {TAGG_TEXT_LIGHT_BLUE} from '../../constants';
+import {TAGG_LIGHT_BLUE} from '../../constants';
 import {ProfilePreviewType} from '../../types';
 import {SCREEN_WIDTH} from '../../utils';
 import {TouchableOpacity} from 'react-native-gesture-handler';
@@ -55,18 +55,18 @@ const styles = StyleSheet.create({
   },
   acceptButton: {
     padding: 0,
-    backgroundColor: TAGG_TEXT_LIGHT_BLUE,
+    backgroundColor: TAGG_LIGHT_BLUE,
   },
   rejectButton: {
     borderWidth: 1,
     backgroundColor: 'white',
-    borderColor: TAGG_TEXT_LIGHT_BLUE,
+    borderColor: TAGG_LIGHT_BLUE,
   },
   acceptButtonTitleColor: {
     color: 'white',
   },
   rejectButtonTitleColor: {
-    color: TAGG_TEXT_LIGHT_BLUE,
+    color: TAGG_LIGHT_BLUE,
   },
   buttonTitle: {
     padding: 0,
diff --git a/src/components/common/GenericMoreInfoDrawer.tsx b/src/components/common/GenericMoreInfoDrawer.tsx
index 098482ae..a23d7736 100644
--- a/src/components/common/GenericMoreInfoDrawer.tsx
+++ b/src/components/common/GenericMoreInfoDrawer.tsx
@@ -10,7 +10,7 @@ import {
 } from 'react-native';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {BottomDrawer} from '.';
-import {TAGG_TEXT_LIGHT_BLUE} from '../../constants';
+import {TAGG_LIGHT_BLUE} from '../../constants';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 
 // conforms the JSX onPress attribute type
@@ -87,7 +87,7 @@ const styles = StyleSheet.create({
   panelButtonTitleCancel: {
     fontSize: 18,
     fontWeight: 'bold',
-    color: TAGG_TEXT_LIGHT_BLUE,
+    color: TAGG_LIGHT_BLUE,
   },
   divider: {height: 1, borderWidth: 1, borderColor: '#e7e7e7'},
 });
diff --git a/src/components/common/SocialLinkModal.tsx b/src/components/common/SocialLinkModal.tsx
index b307a62c..41b044fe 100644
--- a/src/components/common/SocialLinkModal.tsx
+++ b/src/components/common/SocialLinkModal.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {Modal, StyleSheet, Text, TouchableHighlight, View} from 'react-native';
 import {TextInput} from 'react-native-gesture-handler';
-import { TAGG_TEXT_LIGHT_BLUE } from '../../constants';
+import { TAGG_LIGHT_BLUE } from '../../constants';
 import {SCREEN_WIDTH} from '../../utils';
 
 interface SocialLinkModalProps {
@@ -105,7 +105,7 @@ const styles = StyleSheet.create({
     fontSize: 14,
     /* identical to box height */
     textAlign: 'center',
-    color: TAGG_TEXT_LIGHT_BLUE,
+    color: TAGG_LIGHT_BLUE,
   },
   textInput: {
     height: 20,
diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx
index 7905e8a9..c591d973 100644
--- a/src/components/moments/Moment.tsx
+++ b/src/components/moments/Moment.tsx
@@ -11,7 +11,7 @@ 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 {TAGG_LIGHT_BLUE} from '../../constants';
 import {ERROR_UPLOAD_MOMENT_SHORT} from '../../constants/strings';
 import {SCREEN_WIDTH} from '../../utils';
 import MomentTile from './MomentTile';
@@ -87,7 +87,7 @@ const Moment: React.FC<MomentProps> = ({
                 width={19}
                 height={19}
                 onPress={() => move('up', title)}
-                color={TAGG_TEXT_LIGHT_BLUE}
+                color={TAGG_LIGHT_BLUE}
                 style={{marginLeft: 5}}
               />
             )}
@@ -96,7 +96,7 @@ const Moment: React.FC<MomentProps> = ({
                 width={19}
                 height={19}
                 onPress={() => move('down', title)}
-                color={TAGG_TEXT_LIGHT_BLUE}
+                color={TAGG_LIGHT_BLUE}
                 style={{marginLeft: 5}}
               />
             )}
@@ -111,7 +111,7 @@ const Moment: React.FC<MomentProps> = ({
               width={21}
               height={21}
               onPress={() => navigateToImagePicker()}
-              color={TAGG_TEXT_LIGHT_BLUE}
+              color={TAGG_LIGHT_BLUE}
               style={{marginRight: 10}}
             />
             {shouldAllowDeletion && (
@@ -173,7 +173,7 @@ const styles = StyleSheet.create({
   titleText: {
     fontSize: 16,
     fontWeight: 'bold',
-    color: TAGG_TEXT_LIGHT_BLUE,
+    color: TAGG_LIGHT_BLUE,
   },
   // titleContainer: {
   //   flex: 1,
diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx
index 93271fa1..508b6d9f 100644
--- a/src/components/moments/MomentPostContent.tsx
+++ b/src/components/moments/MomentPostContent.tsx
@@ -27,6 +27,7 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
     setElapsedTime(getTimePosted(dateTime));
     getMomentCommentsCount(momentId, setCommentsCount);
   }, [dateTime, momentId]);
+
   return (
     <View style={[styles.container, style]}>
       <Image
diff --git a/src/components/onboarding/TaggBigInput.tsx b/src/components/onboarding/TaggBigInput.tsx
index 4212afd1..0e42bd13 100644
--- a/src/components/onboarding/TaggBigInput.tsx
+++ b/src/components/onboarding/TaggBigInput.tsx
@@ -7,7 +7,7 @@ import {
   ViewStyle,
 } from 'react-native';
 import * as Animatable from 'react-native-animatable';
-import { TAGG_LIGHT_PURPLE } from '../../constants';
+import {TAGG_LIGHT_PURPLE} from '../../constants';
 
 interface TaggBigInputProps extends TextInputProps {
   valid?: boolean;
@@ -24,7 +24,7 @@ const TaggBigInput = React.forwardRef((props: TaggBigInputProps, ref: any) => {
     <View
       style={props.containerStyle ? props.containerStyle : styles.container}>
       <TextInput
-        style={[{ width: props.width }, styles.input]}
+        style={[{width: props.width}, styles.input]}
         placeholderTextColor="#ddd"
         clearButtonMode="while-editing"
         ref={ref}
diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index e7fb566b..104d63fa 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -1,3 +1,4 @@
+import {useFocusEffect, useNavigation} from '@react-navigation/native';
 import React, {useCallback, useEffect, useState} from 'react';
 import {
   Alert,
@@ -9,18 +10,29 @@ import {
   Text,
   View,
 } from 'react-native';
+import {TouchableOpacity} from 'react-native-gesture-handler';
 import Animated from 'react-native-reanimated';
+import {useDispatch, useSelector, useStore} from 'react-redux';
+import {Cover} from '.';
+import GreyPlusLogo from '../../assets/icons/grey-plus-logo.svg';
+import {COVER_HEIGHT, TAGG_LIGHT_BLUE} from '../../constants';
 import {
-  CategorySelectionScreenType,
-  FriendshipStatusType,
-  MomentCategoryType,
-  MomentType,
-  ProfilePreviewType,
-  ProfileType,
-  ScreenType,
-  UserType,
-} from '../../types';
-import {COVER_HEIGHT, TAGG_TEXT_LIGHT_BLUE} from '../../constants';
+  blockUnblockUser,
+  deleteUserMomentsForCategory,
+  friendUnfriendUser,
+  loadFriendsData,
+  updateMomentCategories,
+  updateUserXFriends,
+  updateUserXProfileAllScreens,
+} from '../../store/actions';
+import {
+  EMPTY_MOMENTS_LIST,
+  EMPTY_PROFILE_PREVIEW_LIST,
+  NO_PROFILE,
+  NO_USER,
+} from '../../store/initialStates';
+import {RootState} from '../../store/rootreducer';
+import {CategorySelectionScreenType, MomentType, ScreenType} from '../../types';
 import {
   fetchUserX,
   getUserAsProfilePreviewType,
@@ -28,33 +40,12 @@ import {
   SCREEN_HEIGHT,
   userLogin,
 } from '../../utils';
-import TaggsBar from '../taggs/TaggsBar';
+import {TaggPrompt} from '../common';
 import {Moment} from '../moments';
+import TaggsBar from '../taggs/TaggsBar';
 import ProfileBody from './ProfileBody';
 import ProfileCutout from './ProfileCutout';
 import ProfileHeader from './ProfileHeader';
-import {useDispatch, useSelector, useStore} from 'react-redux';
-import {RootState} from '../../store/rootreducer';
-import {
-  friendUnfriendUser,
-  blockUnblockUser,
-  loadFriendsData,
-  updateUserXFriends,
-  updateMomentCategories,
-  deleteUserMomentsForCategory,
-  updateUserXProfileAllScreens,
-} from '../../store/actions';
-import {
-  NO_USER,
-  NO_PROFILE,
-  EMPTY_PROFILE_PREVIEW_LIST,
-  EMPTY_MOMENTS_LIST,
-} from '../../store/initialStates';
-import {Cover} from '.';
-import {TouchableOpacity} from 'react-native-gesture-handler';
-import {useFocusEffect, useNavigation} from '@react-navigation/native';
-import GreyPlusLogo from '../../assets/icons/grey-plus-logo.svg';
-import {TaggPrompt} from '../common';
 
 interface ContentProps {
   y: Animated.Value<number>;
@@ -113,9 +104,10 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
   const [isStageOnePromptClosed, setIsStageOnePromptClosed] = useState<boolean>(
     false,
   );
-  const [isStageThreePromptClosed, setIsStageThreePromptClosed] = useState<
-    boolean
-  >(false);
+  const [
+    isStageThreePromptClosed,
+    setIsStageThreePromptClosed,
+  ] = useState<boolean>(false);
 
   const onRefresh = useCallback(() => {
     const refrestState = async () => {
@@ -284,7 +276,7 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
                 momentCategories.filter((mc) => mc !== category),
                 false,
               ),
-            )
+            );
             dispatch(deleteUserMomentsForCategory(category));
           },
         },
@@ -423,7 +415,7 @@ const styles = StyleSheet.create({
     flexDirection: 'column',
   },
   createCategoryButton: {
-    backgroundColor: TAGG_TEXT_LIGHT_BLUE,
+    backgroundColor: TAGG_LIGHT_BLUE,
     justifyContent: 'center',
     alignItems: 'center',
     width: '70%',
diff --git a/src/components/profile/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx
index 6284ff59..a45e9e43 100644
--- a/src/components/profile/ProfileBody.tsx
+++ b/src/components/profile/ProfileBody.tsx
@@ -3,7 +3,7 @@ import {StyleSheet, View, Text, LayoutChangeEvent, Linking} from 'react-native';
 import {Button} from 'react-native-elements';
 import {
   TAGG_DARK_BLUE,
-  TAGG_TEXT_LIGHT_BLUE,
+  TAGG_LIGHT_BLUE,
   TOGGLE_BUTTON_TYPE,
 } from '../../constants';
 import ToggleButton from './ToggleButton';
@@ -178,7 +178,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     width: SCREEN_WIDTH * 0.4,
     height: SCREEN_WIDTH * 0.09,
-    borderColor: TAGG_TEXT_LIGHT_BLUE,
+    borderColor: TAGG_LIGHT_BLUE,
     borderWidth: 3,
     borderRadius: 5,
     marginRight: '2%',
@@ -186,7 +186,7 @@ const styles = StyleSheet.create({
     backgroundColor: 'transparent',
   },
   requestedButtonTitle: {
-    color: TAGG_TEXT_LIGHT_BLUE,
+    color: TAGG_LIGHT_BLUE,
     padding: 0,
     fontSize: 14,
     fontWeight: '700',
@@ -205,7 +205,7 @@ const styles = StyleSheet.create({
     padding: 0,
     borderRadius: 5,
     marginRight: '2%',
-    backgroundColor: TAGG_TEXT_LIGHT_BLUE,
+    backgroundColor: TAGG_LIGHT_BLUE,
   },
 });
 
diff --git a/src/components/profile/ProfileMoreInfoDrawer.tsx b/src/components/profile/ProfileMoreInfoDrawer.tsx
index 76f0f27f..9fe36ae1 100644
--- a/src/components/profile/ProfileMoreInfoDrawer.tsx
+++ b/src/components/profile/ProfileMoreInfoDrawer.tsx
@@ -4,7 +4,7 @@ import {StyleSheet, TouchableOpacity} from 'react-native';
 import {useSelector} from 'react-redux';
 import MoreIcon from '../../assets/icons/more_horiz-24px.svg';
 import PersonOutline from '../../assets/ionicons/person-outline.svg';
-import {TAGG_DARK_BLUE, TAGG_TEXT_LIGHT_BLUE} from '../../constants';
+import {TAGG_DARK_BLUE, TAGG_LIGHT_BLUE} from '../../constants';
 import {RootState} from '../../store/rootreducer';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 import {GenericMoreInfoDrawer} from '../common';
@@ -101,7 +101,7 @@ const styles = StyleSheet.create({
   panelButtonTitleCancel: {
     fontSize: 18,
     fontWeight: 'bold',
-    color: TAGG_TEXT_LIGHT_BLUE,
+    color: TAGG_LIGHT_BLUE,
   },
   divider: {height: 1, borderWidth: 1, borderColor: '#e7e7e7'},
   more: {
diff --git a/src/components/profile/ToggleButton.tsx b/src/components/profile/ToggleButton.tsx
index 5d8f7874..236d811c 100644
--- a/src/components/profile/ToggleButton.tsx
+++ b/src/components/profile/ToggleButton.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {StyleSheet, Text} from 'react-native';
 import {TouchableOpacity} from 'react-native-gesture-handler';
-import {TAGG_TEXT_LIGHT_BLUE} from '../../constants';
+import {TAGG_LIGHT_BLUE} from '../../constants';
 import {getToggleButtonText, SCREEN_WIDTH} from '../../utils';
 
 type ToggleButtonProps = {
@@ -36,7 +36,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     width: SCREEN_WIDTH * 0.4,
     height: SCREEN_WIDTH * 0.08,
-    borderColor: TAGG_TEXT_LIGHT_BLUE,
+    borderColor: TAGG_LIGHT_BLUE,
     borderWidth: 3,
     borderRadius: 5,
     marginRight: '2%',
@@ -45,10 +45,10 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
   },
   buttonColor: {
-    backgroundColor: TAGG_TEXT_LIGHT_BLUE,
+    backgroundColor: TAGG_LIGHT_BLUE,
   },
   textColor: {color: 'white'},
   buttonColorToggled: {backgroundColor: 'white'},
-  textColorToggled: {color: TAGG_TEXT_LIGHT_BLUE},
+  textColorToggled: {color: TAGG_LIGHT_BLUE},
 });
 export default ToggleButton;
diff --git a/src/components/search/RecentSearches.tsx b/src/components/search/RecentSearches.tsx
index 8a06017c..bdbd5773 100644
--- a/src/components/search/RecentSearches.tsx
+++ b/src/components/search/RecentSearches.tsx
@@ -7,7 +7,7 @@ import {
   TouchableOpacityProps,
 } from 'react-native';
 import {PreviewType, ProfilePreviewType, ScreenType} from 'src/types';
-import {TAGG_TEXT_LIGHT_BLUE} from '../../constants';
+import {TAGG_LIGHT_BLUE} from '../../constants';
 import SearchResults from './SearchResults';
 
 interface RecentSearchesProps extends TouchableOpacityProps {
@@ -55,7 +55,7 @@ const styles = StyleSheet.create({
   clear: {
     fontSize: 18,
     fontWeight: 'bold',
-    color: TAGG_TEXT_LIGHT_BLUE,
+    color: TAGG_LIGHT_BLUE,
   },
 });
 
diff --git a/src/components/taggs/TwitterTaggPost.tsx b/src/components/taggs/TwitterTaggPost.tsx
index c971a82c..0cfde857 100644
--- a/src/components/taggs/TwitterTaggPost.tsx
+++ b/src/components/taggs/TwitterTaggPost.tsx
@@ -6,7 +6,7 @@ import LinearGradient from 'react-native-linear-gradient';
 import {
   AVATAR_DIM,
   TAGGS_GRADIENT,
-  TAGG_TEXT_LIGHT_BLUE,
+  TAGG_LIGHT_BLUE,
 } from '../../constants';
 import {TwitterPostType} from '../../types';
 import {handleOpenSocialUrlOnBrowser, SCREEN_WIDTH} from '../../utils';
@@ -237,7 +237,7 @@ const styles = StyleSheet.create({
   },
   replyShowThisThread: {
     fontSize: 15,
-    color: TAGG_TEXT_LIGHT_BLUE,
+    color: TAGG_LIGHT_BLUE,
   },
 });
 
diff --git a/src/constants/constants.ts b/src/constants/constants.ts
index b96d9438..37b6e038 100644
--- a/src/constants/constants.ts
+++ b/src/constants/constants.ts
@@ -59,7 +59,7 @@ export const SNAPCHAT_FONT_COLOR: string = '#FFFC00';
 export const YOUTUBE_FONT_COLOR: string = '#FCA4A4';
 
 export const TAGG_DARK_BLUE = '#4E699C';
-export const TAGG_TEXT_LIGHT_BLUE: string = '#698DD3';
+export const TAGG_LIGHT_BLUE: string = '#698DD3';
 export const TAGG_LIGHT_PURPLE = '#F4DDFF';
 
 export const TAGGS_GRADIENT = {
diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx
index 9f98b4d7..f231cb78 100644
--- a/src/screens/search/SearchScreen.tsx
+++ b/src/screens/search/SearchScreen.tsx
@@ -20,7 +20,7 @@ import {
   SearchResultsBackground,
   TabsGradient,
 } from '../../components';
-import {SEARCH_ENDPOINT, TAGG_TEXT_LIGHT_BLUE} from '../../constants';
+import {SEARCH_ENDPOINT, TAGG_LIGHT_BLUE} from '../../constants';
 import {loadRecentlySearched, resetScreenType} from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
 import {ProfilePreviewType, ScreenType, UserType} from '../../types';
@@ -213,7 +213,7 @@ const styles = StyleSheet.create({
   clear: {
     fontSize: 17,
     fontWeight: 'bold',
-    color: TAGG_TEXT_LIGHT_BLUE,
+    color: TAGG_LIGHT_BLUE,
   },
   image: {
     width: SCREEN_WIDTH,
-- 
cgit v1.2.3-70-g09d2


From befc480c50d90d829c53953476ccfe99e26c9260 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Tue, 26 Jan 2021 18:10:23 -0500
Subject: thumbnail for profile preview and moments

---
 src/components/moments/MomentTile.tsx     |  3 +--
 src/components/profile/ProfilePreview.tsx | 43 +++++++++++--------------------
 2 files changed, 16 insertions(+), 30 deletions(-)

(limited to 'src/components/moments')

diff --git a/src/components/moments/MomentTile.tsx b/src/components/moments/MomentTile.tsx
index 16e91c82..69701192 100644
--- a/src/components/moments/MomentTile.tsx
+++ b/src/components/moments/MomentTile.tsx
@@ -15,7 +15,6 @@ const MomentTile: React.FC<MomentTileProps> = ({
 }) => {
   const navigation = useNavigation();
 
-  const {path_hash} = moment;
   return (
     <TouchableOpacity
       onPress={() => {
@@ -26,7 +25,7 @@ const MomentTile: React.FC<MomentTileProps> = ({
         });
       }}>
       <View style={styles.image}>
-        <Image style={styles.image} source={{uri: path_hash}} />
+        <Image style={styles.image} source={{uri: moment.thumbnail_url}} />
       </View>
     </TouchableOpacity>
   );
diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx
index 389ca367..000dd5c5 100644
--- a/src/components/profile/ProfilePreview.tsx
+++ b/src/components/profile/ProfilePreview.tsx
@@ -12,21 +12,11 @@ import {
 } from 'react-native';
 import {useDispatch, useSelector, useStore} from 'react-redux';
 import {ERROR_UNABLE_TO_VIEW_PROFILE} from '../../constants/strings';
-import {loadAvatar} from '../../services';
+import {loadImageFromURL} from '../../services';
 import {RootState} from '../../store/rootreducer';
-import {
-  PreviewType,
-  ProfilePreviewType,
-  ScreenType,
-  UserType,
-} from '../../types';
+import {PreviewType, ProfilePreviewType, ScreenType} from '../../types';
 import {checkIfUserIsBlocked, fetchUserX, userXInStore} from '../../utils';
 
-const NO_USER: UserType = {
-  userId: '',
-  username: '',
-};
-
 /**
  * This component returns user's profile picture friended by username as a touchable component.
  * What happens when someone clicks on this component is partly decided by the prop isComment.
@@ -43,28 +33,24 @@ interface ProfilePreviewProps extends ViewProps {
 }
 
 const ProfilePreview: React.FC<ProfilePreviewProps> = ({
-  profilePreview: {username, first_name, last_name, id},
+  profilePreview: {username, first_name, last_name, id, thumbnail_url},
   previewType,
   screenType,
 }) => {
   const navigation = useNavigation();
   const {user: loggedInUser} = useSelector((state: RootState) => state.user);
-  const [avatarURI, setAvatarURI] = useState<string | null>(null);
-  const [user, setUser] = useState<UserType>(NO_USER);
+  const [avatar, setAvatar] = useState<string | null>(null);
   const dispatch = useDispatch();
+
   useEffect(() => {
-    let mounted = true;
-    const loadAvatarImage = async () => {
-      const response = await loadAvatar(id, true);
-      if (mounted) {
-        setAvatarURI(response);
+    (async () => {
+      console.log(thumbnail_url);
+      const response = await loadImageFromURL(thumbnail_url);
+      if (response) {
+        setAvatar(response);
       }
-    };
-    loadAvatarImage();
-    return () => {
-      mounted = false;
-    };
-  }, [id]);
+    })();
+  }, []);
 
   /**
    * Adds a searched user to the recently searched cache if they're tapped on.
@@ -80,6 +66,7 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
       username,
       first_name,
       last_name,
+      thumbnail_url,
     };
 
     try {
@@ -211,8 +198,8 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
       <Image
         style={avatarStyle}
         source={
-          avatarURI
-            ? {uri: avatarURI}
+          avatar
+            ? {uri: avatar}
             : require('../../assets/images/avatar-placeholder.png')
         }
       />
-- 
cgit v1.2.3-70-g09d2


From 85c0f668665696ba8127ee1ea436d10ec0af955f Mon Sep 17 00:00:00 2001
From: Ashm Walia <ashmwalia@outlook.com>
Date: Wed, 27 Jan 2021 08:24:43 -0800
Subject: Pre-final

---
 src/components/comments/AddComment.tsx       |  34 +++++---
 src/components/comments/CommentTile.tsx      | 113 +++++++++++++++------------
 src/components/moments/MomentPostContent.tsx |   8 +-
 src/constants/api.ts                         |   1 +
 src/routes/Routes.tsx                        |   2 +-
 src/screens/profile/MomentCommentsScreen.tsx |  23 +++++-
 src/services/MomentServices.ts               |   8 ++
 src/services/index.ts                        |   1 +
 src/types/types.ts                           |   1 +
 9 files changed, 122 insertions(+), 69 deletions(-)

(limited to 'src/components/moments')

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index 7b04085d..86f4170c 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react';
+import React, {useEffect, useRef} from 'react';
 import {
   Image,
   Keyboard,
@@ -11,7 +11,7 @@ import {TextInput, TouchableOpacity} from 'react-native-gesture-handler';
 import {useSelector} from 'react-redux';
 import UpArrowIcon from '../../assets/icons/up_arrow.svg';
 import {TAGG_LIGHT_BLUE} from '../../constants';
-import {postMomentComment} from '../../services';
+import {postComment} from '../../services';
 import {RootState} from '../../store/rootreducer';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 
@@ -23,28 +23,27 @@ import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 
 export interface AddCommentProps {
   setNewCommentsAvailable: Function;
-  moment_id: string;
+  objectId: string;
   placeholderText: string;
+  isThreadInFocus: boolean;
 }
 
 const AddComment: React.FC<AddCommentProps> = ({
   setNewCommentsAvailable,
-  moment_id,
+  objectId,
   placeholderText,
+  isThreadInFocus,
 }) => {
   const [comment, setComment] = React.useState('');
   const [keyboardVisible, setKeyboardVisible] = React.useState(false);
 
-  const {
-    avatar,
-    user: {userId},
-  } = useSelector((state: RootState) => state.user);
+  const {avatar} = useSelector((state: RootState) => state.user);
 
-  const postComment = async () => {
-    const postedComment = await postMomentComment(
-      userId,
+  const addComment = async () => {
+    const postedComment = await postComment(
       comment.trim(),
-      moment_id,
+      objectId,
+      isThreadInFocus,
     );
 
     if (postedComment) {
@@ -65,6 +64,13 @@ const AddComment: React.FC<AddCommentProps> = ({
     return () => Keyboard.removeListener('keyboardWillHide', hideKeyboard);
   }, []);
 
+  const ref = useRef<TextInput>(null);
+  useEffect(() => {
+    if (isThreadInFocus) {
+      ref.current?.focus();
+    }
+  }, [isThreadInFocus]);
+
   return (
     <KeyboardAvoidingView
       behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
@@ -91,9 +97,10 @@ const AddComment: React.FC<AddCommentProps> = ({
             value={comment}
             autoCorrect={false}
             multiline={true}
+            ref={ref}
           />
           <View style={styles.submitButton}>
-            <TouchableOpacity style={styles.submitButton} onPress={postComment}>
+            <TouchableOpacity style={styles.submitButton} onPress={addComment}>
               <UpArrowIcon width={35} height={35} color={'white'} />
             </TouchableOpacity>
           </View>
@@ -102,6 +109,7 @@ const AddComment: React.FC<AddCommentProps> = ({
     </KeyboardAvoidingView>
   );
 };
+
 const styles = StyleSheet.create({
   container: {
     backgroundColor: '#f7f7f7',
diff --git a/src/components/comments/CommentTile.tsx b/src/components/comments/CommentTile.tsx
index 4221fd54..f11c5e33 100644
--- a/src/components/comments/CommentTile.tsx
+++ b/src/components/comments/CommentTile.tsx
@@ -3,17 +3,12 @@ import {Text, View} from 'react-native-animatable';
 import {ProfilePreview} from '../profile';
 import {CommentType, ScreenType, TypeOfComment} from '../../types';
 import {StyleSheet} from 'react-native';
-import {
-  getTimePosted,
-  normalize,
-  SCREEN_HEIGHT,
-  SCREEN_WIDTH,
-} from '../../utils';
 import ClockIcon from '../../assets/icons/clock-icon-01.svg';
 import {COMMENT_REPLIES} from '../../constants';
-import BackIcon from '../../assets/icons/back-arrow-colored.svg';
 import {TouchableOpacity} from 'react-native-gesture-handler';
-// import CommentsContainer from './CommentsContainer';
+import {getTimePosted, normalize, SCREEN_WIDTH} from '../../utils';
+import Arrow from '../../assets/icons/back-arrow-colored.svg';
+import CommentsContainer from './CommentsContainer';
 
 /**
  * Displays users's profile picture, comment posted by them and the time difference between now and when a comment was posted.
@@ -23,21 +18,43 @@ interface CommentTileProps {
   comment_object: CommentType;
   screenType: ScreenType;
   typeOfComment: TypeOfComment;
+  setCommentObjectInFocus?: (comment: CommentType | undefined) => void;
 }
 
 const CommentTile: React.FC<CommentTileProps> = ({
   comment_object,
   screenType,
   typeOfComment,
+  setCommentObjectInFocus,
 }) => {
   const timePosted = getTimePosted(comment_object.date_created);
   const [showReplies, setShowReplies] = useState<boolean>(false);
 
-  const isThread = typeOfComment === 'Thread';
+  const toggleReplies = () => {
+    if (setCommentObjectInFocus) {
+      if (!showReplies) {
+        setCommentObjectInFocus(comment_object);
+      } else {
+        setCommentObjectInFocus(undefined);
+      }
+    }
+    setShowReplies(!showReplies);
+  };
+
+  const getRepliesText = () =>
+    showReplies
+      ? 'Hide'
+      : comment_object.replies_count > 0
+      ? `Replies (${comment_object.replies_count})`
+      : 'Replies';
 
   return (
     <>
-      <View style={styles.container}>
+      <View
+        style={[
+          styles.container,
+          typeOfComment === 'Thread' ? styles.moreMarginWithThread : {},
+        ]}>
         <ProfilePreview
           profilePreview={{
             id: comment_object.commenter.id,
@@ -48,70 +65,66 @@ const CommentTile: React.FC<CommentTileProps> = ({
           previewType={'Comment'}
           screenType={screenType}
         />
-        <View style={styles.body}>
+        <TouchableOpacity style={styles.body} onPress={toggleReplies}>
           <Text style={styles.comment}>{comment_object.comment}</Text>
           <View style={styles.clockIconAndTime}>
             <ClockIcon style={styles.clockIcon} />
             <Text style={styles.date_time}>{' ' + timePosted}</Text>
-            {typeOfComment === 'Comment' && (
-              <>
-                <TouchableOpacity
-                  onPress={() => {
-                    setShowReplies(!showReplies);
-                  }}>
-                  <View style={styles.repliesTextAndIconContainer}>
-                    <Text style={styles.repliesText}>
-                      {showReplies ? 'Hide' : 'Replies'}
-                    </Text>
-                    <BackIcon
-                      width={12}
-                      height={11}
-                      color={COMMENT_REPLIES}
-                      style={
-                        !showReplies
-                          ? styles.repliesDownArrow
-                          : styles.repliesUpArrow
-                      }
-                    />
-                  </View>
-                </TouchableOpacity>
-              </>
+            <View style={styles.flexer} />
+            {typeOfComment === 'Comment' && comment_object.replies_count > 0 && (
+              <View style={styles.repliesTextAndIconContainer}>
+                <Text style={styles.repliesText}>{getRepliesText()}</Text>
+                <Arrow
+                  width={12}
+                  height={11}
+                  color={COMMENT_REPLIES}
+                  style={
+                    !showReplies
+                      ? styles.repliesDownArrow
+                      : styles.repliesUpArrow
+                  }
+                />
+              </View>
             )}
           </View>
-        </View>
+        </TouchableOpacity>
       </View>
-      {/* {showReplies && (
-        <View style={styles.repliesBody}>
+      {showReplies && (
+        <View
+          style={{
+            width: SCREEN_WIDTH,
+          }}>
           <CommentsContainer
-            moment_id={'5a9d6023-bc62-4588-a3dc-8de2c9c370e0'}
+            objectId={comment_object.comment_id}
             screenType={screenType}
-            setNewCommentsAvailable={(value: boolean) => {
-              console.log(value);
-            }}
+            setNewCommentsAvailable={() => {}}
             newCommentsAvailable={true}
             typeOfComment={'Thread'}
           />
         </View>
-      )} */}
+      )}
     </>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
-    marginLeft: '3%',
-    marginRight: '3%',
+    marginHorizontal: '3%',
     borderBottomWidth: 1,
     borderColor: 'lightgray',
     marginBottom: '3%',
+    flexDirection: 'column',
+    flex: 1,
+  },
+  moreMarginWithThread: {
+    marginHorizontal: '7%',
   },
   body: {
     marginLeft: 56,
   },
   comment: {
-    position: 'relative',
-    top: -5,
     marginBottom: '2%',
+    top: -5,
   },
   date_time: {
     color: 'gray',
@@ -127,9 +140,13 @@ const styles = StyleSheet.create({
     marginBottom: '3%',
   },
 
+  flexer: {
+    flex: 1,
+  },
+
   repliesTextAndIconContainer: {
-    marginLeft: SCREEN_WIDTH * 0.37,
     flexDirection: 'row',
+    alignItems: 'center',
   },
 
   repliesText: {
@@ -138,10 +155,8 @@ const styles = StyleSheet.create({
     fontSize: normalize(12),
     marginRight: '3%',
   },
-
   repliesBody: {
     width: SCREEN_WIDTH,
-    height: SCREEN_HEIGHT * 0.8,
   },
 
   repliesDownArrow: {
diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx
index 508b6d9f..d68ceaa3 100644
--- a/src/components/moments/MomentPostContent.tsx
+++ b/src/components/moments/MomentPostContent.tsx
@@ -1,6 +1,6 @@
 import React, {useEffect} from 'react';
 import {Image, StyleSheet, Text, View, ViewProps} from 'react-native';
-import {getMomentCommentsCount} from '../../services';
+import {getCommentsCount} from '../../services';
 import {ScreenType} from '../../types';
 import {getTimePosted, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 import {CommentsCount} from '../comments';
@@ -24,8 +24,12 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
   const [comments_count, setCommentsCount] = React.useState('');
 
   useEffect(() => {
+    const fetchCommentsCount = async () => {
+      const count = await getCommentsCount(momentId, false);
+      setCommentsCount(count);
+    };
     setElapsedTime(getTimePosted(dateTime));
-    getMomentCommentsCount(momentId, setCommentsCount);
+    fetchCommentsCount();
   }, [dateTime, momentId]);
 
   return (
diff --git a/src/constants/api.ts b/src/constants/api.ts
index 701070eb..32631be0 100644
--- a/src/constants/api.ts
+++ b/src/constants/api.ts
@@ -30,6 +30,7 @@ export const MOMENT_CATEGORY_ENDPOINT: string = API_URL + 'moment-category/';
 export const NOTIFICATIONS_ENDPOINT: string = API_URL + 'notifications/';
 export const DISCOVER_ENDPOINT: string = API_URL + 'discover/';
 export const WAITLIST_USER_ENDPOINT: string = API_URL + 'waitlist-user/';
+export const COMMENT_THREAD_ENDPOINT: string = API_URL + 'reply/';
 
 // Register as FCM device
 export const FCM_ENDPOINT: string = API_URL + 'fcm/';
diff --git a/src/routes/Routes.tsx b/src/routes/Routes.tsx
index a14f1576..536c7d04 100644
--- a/src/routes/Routes.tsx
+++ b/src/routes/Routes.tsx
@@ -33,7 +33,7 @@ const Routes: React.FC = () => {
     });
 
     if (!userId) {
-      userLogin(dispatch, {userId: '', username: ''});
+      // userLogin(dispatch, {userId: '', username: ''});
     } else {
       SplashScreen.hide();
     }
diff --git a/src/screens/profile/MomentCommentsScreen.tsx b/src/screens/profile/MomentCommentsScreen.tsx
index 9fd5aaa0..764b9228 100644
--- a/src/screens/profile/MomentCommentsScreen.tsx
+++ b/src/screens/profile/MomentCommentsScreen.tsx
@@ -6,7 +6,9 @@ import BackIcon from '../../assets/icons/back-arrow.svg';
 import {TabsGradient} from '../../components';
 import {AddComment} from '../../components/';
 import CommentsContainer from '../../components/comments/CommentsContainer';
+import {ADD_COMMENT_TEXT} from '../../constants/strings';
 import {MainStackParams} from '../../routes/main';
+import {CommentType} from '../../types';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 
 /**
@@ -27,8 +29,12 @@ interface MomentCommentsScreenProps {
 const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => {
   const navigation = useNavigation();
   const {moment_id, screenType} = route.params;
-  const [newCommentsAvailable, setNewCommentsAvailable] = useState(true);
+
   const [commentsLength, setCommentsLength] = useState<number>(0);
+  const [newCommentsAvailable, setNewCommentsAvailable] = React.useState(true);
+  const [commentObjectInFocus, setCommentObjectInFocus] = useState<
+    CommentType | undefined
+  >(undefined);
 
   return (
     <View style={styles.background}>
@@ -45,17 +51,26 @@ const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => {
         </View>
         <View style={styles.body}>
           <CommentsContainer
-            moment_id={moment_id}
+            objectId={moment_id}
             screenType={screenType}
             setCommentsLength={setCommentsLength}
             newCommentsAvailable={newCommentsAvailable}
             setNewCommentsAvailable={setNewCommentsAvailable}
+            setCommentObjectInFocus={setCommentObjectInFocus}
+            commentObjectInFocus={commentObjectInFocus}
             typeOfComment={'Comment'}
           />
           <AddComment
-            placeholderText={'Add a comment..'}
+            placeholderText={
+              commentObjectInFocus
+                ? ADD_COMMENT_TEXT(commentObjectInFocus.commenter.username)
+                : ADD_COMMENT_TEXT()
+            }
             setNewCommentsAvailable={setNewCommentsAvailable}
-            moment_id={moment_id}
+            objectId={
+              commentObjectInFocus ? commentObjectInFocus.comment_id : moment_id
+            }
+            isThreadInFocus={commentObjectInFocus ? true : false}
           />
         </View>
       </SafeAreaView>
diff --git a/src/services/MomentServices.ts b/src/services/MomentServices.ts
index 77740e7e..8399eea3 100644
--- a/src/services/MomentServices.ts
+++ b/src/services/MomentServices.ts
@@ -1,5 +1,6 @@
 import {CommentType} from './../types/types';
 import AsyncStorage from '@react-native-community/async-storage';
+<<<<<<< Updated upstream
 import {Alert} from 'react-native';
 import RNFetchBlob from 'rn-fetch-blob';
 import {
@@ -96,6 +97,13 @@ export const getMomentCommentsCount = async (
   }
 };
 
+=======
+import RNFetchBlob from 'rn-fetch-blob';
+import {MOMENTS_ENDPOINT, MOMENT_THUMBNAIL_ENDPOINT} from '../constants';
+import {MomentType} from '../types';
+import {checkImageUploadStatus} from '../utils';
+
+>>>>>>> Stashed changes
 export const postMoment: (
   fileName: string,
   uri: string,
diff --git a/src/services/index.ts b/src/services/index.ts
index 56cefddd..f558247f 100644
--- a/src/services/index.ts
+++ b/src/services/index.ts
@@ -9,3 +9,4 @@ export * from './MomentCategoryService';
 export * from './NotificationService';
 export * from './FCMService';
 export * from './WaitlistUserService';
+export * from './CommentService';
diff --git a/src/types/types.ts b/src/types/types.ts
index b29ecbd9..0c0f9d8b 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -91,6 +91,7 @@ export interface CommentType {
   comment: string;
   date_created: string;
   moment_id: string;
+  replies_count: number;
   commenter: ProfilePreviewType;
 }
 
-- 
cgit v1.2.3-70-g09d2