From 0b338e0c243c63fc836c7a9829ef3787045bc034 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Mon, 10 May 2021 16:28:37 -0400
Subject: added navigation to "Likes" screen

---
 src/components/comments/CommentTile.tsx       |  9 +++-
 src/components/profile/Friends.tsx            | 28 ++++++------
 src/routes/main/MainStackNavigator.tsx        | 11 ++++-
 src/routes/main/MainStackScreen.tsx           |  8 ++++
 src/screens/profile/CommentReactionScreen.tsx | 66 +++++++++++++++++++++++++++
 src/screens/profile/FriendsListScreen.tsx     |  4 --
 src/screens/profile/index.ts                  |  1 +
 7 files changed, 106 insertions(+), 21 deletions(-)
 create mode 100644 src/screens/profile/CommentReactionScreen.tsx

(limited to 'src')

diff --git a/src/components/comments/CommentTile.tsx b/src/components/comments/CommentTile.tsx
index 8074a015..688a16e6 100644
--- a/src/components/comments/CommentTile.tsx
+++ b/src/components/comments/CommentTile.tsx
@@ -169,7 +169,14 @@ const CommentTile: React.FC<CommentTileProps> = ({
               <Text style={styles.date_time}>{' ' + timePosted}</Text>
             </View>
             <View style={styles.row}>
-              <TouchableOpacity style={styles.row} onPress={() => {}}>
+              <TouchableOpacity
+                style={styles.row}
+                onPress={() => {
+                  navigation.navigate('CommentReactionScreen', {
+                    comment: commentObject,
+                    screenType: screenType,
+                  });
+                }}>
                 <Text style={[styles.date_time, styles.likeCount]}>
                   {commentObject.reaction_count}
                 </Text>
diff --git a/src/components/profile/Friends.tsx b/src/components/profile/Friends.tsx
index a7a06567..c9d8e6ae 100644
--- a/src/components/profile/Friends.tsx
+++ b/src/components/profile/Friends.tsx
@@ -21,9 +21,15 @@ interface FriendsProps {
   result: Array<ProfilePreviewType>;
   screenType: ScreenType;
   userId: string | undefined;
+  hideSubheader?: boolean;
 }
 
-const Friends: React.FC<FriendsProps> = ({result, screenType, userId}) => {
+const Friends: React.FC<FriendsProps> = ({
+  result,
+  screenType,
+  userId,
+  hideSubheader,
+}) => {
   const state: RootState = useStore().getState();
   const dispatch = useDispatch();
   const {user: loggedInUser = NO_USER} = state.user;
@@ -85,14 +91,16 @@ const Friends: React.FC<FriendsProps> = ({result, screenType, 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>
       )}
-      <Text style={[styles.subheaderText, styles.friendsSubheaderText]}>
-        Friends
-      </Text>
+      {!hideSubheader && (
+        <Text style={[styles.subheaderText, styles.friendsSubheaderText]}>
+          Friends
+        </Text>
+      )}
       <ScrollView
         keyboardShouldPersistTaps={'always'}
         style={styles.scrollView}
@@ -129,7 +137,6 @@ const styles = StyleSheet.create({
     alignSelf: 'center',
     width: SCREEN_WIDTH * 0.85,
   },
-  firstScrollView: {},
   scrollViewContent: {
     alignSelf: 'center',
     paddingBottom: SCREEN_HEIGHT / 7,
@@ -142,7 +149,6 @@ const styles = StyleSheet.create({
     marginBottom: '3%',
     marginTop: '2%',
   },
-  header: {flexDirection: 'row'},
   subheader: {
     alignSelf: 'center',
     width: SCREEN_WIDTH * 0.85,
@@ -154,20 +160,12 @@ const styles = StyleSheet.create({
     fontWeight: '600',
     lineHeight: normalize(14.32),
   },
-  findFriendsButton: {flexDirection: 'row'},
   friendsSubheaderText: {
     alignSelf: 'center',
     width: SCREEN_WIDTH * 0.85,
     marginVertical: '1%',
     marginBottom: '2%',
   },
-  findFriendsSubheaderText: {
-    marginLeft: '5%',
-    color: '#08E2E2',
-    fontSize: normalize(12),
-    fontWeight: '600',
-    lineHeight: normalize(14.32),
-  },
   container: {
     alignSelf: 'center',
     flexDirection: 'row',
diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx
index 1f173569..3b183cc0 100644
--- a/src/routes/main/MainStackNavigator.tsx
+++ b/src/routes/main/MainStackNavigator.tsx
@@ -3,7 +3,12 @@
  */
 import {createStackNavigator} from '@react-navigation/stack';
 import {Image} from 'react-native-image-crop-picker';
-import {MomentType, ScreenType, SearchCategoryType} from '../../types';
+import {
+  CommentBaseType,
+  MomentType,
+  ScreenType,
+  SearchCategoryType,
+} from '../../types';
 
 export type MainStackParams = {
   SuggestedPeople: {
@@ -46,6 +51,10 @@ export type MainStackParams = {
     screenType: ScreenType;
     comment_id?: string;
   };
+  CommentReactionScreen: {
+    comment: CommentBaseType;
+    screenType: ScreenType;
+  };
   FriendsListScreen: {
     userXId: string | undefined;
     screenType: ScreenType;
diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index f5100e58..d76f9137 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -12,6 +12,7 @@ import {
   CategorySelection,
   ChatListScreen,
   ChatScreen,
+  CommentReactionScreen,
   CreateCustomCategory,
   DiscoverUsers,
   EditProfile,
@@ -216,6 +217,13 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
             ...headerBarOptions('black', 'Comments'),
           }}
         />
+        <MainStack.Screen
+          name="CommentReactionScreen"
+          component={CommentReactionScreen}
+          options={{
+            ...headerBarOptions('black', 'Likes'),
+          }}
+        />
         <MainStack.Screen
           name="MomentUploadPrompt"
           component={MomentUploadPromptScreen}
diff --git a/src/screens/profile/CommentReactionScreen.tsx b/src/screens/profile/CommentReactionScreen.tsx
new file mode 100644
index 00000000..1bda2a65
--- /dev/null
+++ b/src/screens/profile/CommentReactionScreen.tsx
@@ -0,0 +1,66 @@
+import {RouteProp} from '@react-navigation/native';
+import React, {useEffect, useState} from 'react';
+import {ScrollView, StatusBar, StyleSheet, View} from 'react-native';
+import {SafeAreaView} from 'react-native-safe-area-context';
+import {useSelector, useStore} from 'react-redux';
+import {Friends} from '../../components';
+import {MainStackParams} from '../../routes/main';
+import {RootState} from '../../store/rootReducer';
+import {ProfilePreviewType, ScreenType} from '../../types';
+import {HeaderHeight, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+
+/**
+ * Comments Screen for an image uploaded
+ * Displays all comments for a particular moment uploaded by the user followed by a text area to add the comment.
+ * Comment is posted when return is pressed on the keypad.
+ */
+
+type CommentReactionScreenRouteProps = RouteProp<
+  MainStackParams,
+  'CommentReactionScreen'
+>;
+
+interface CommentReactionScreenProps {
+  route: CommentReactionScreenRouteProps;
+}
+
+const CommentReactionScreen: React.FC<CommentReactionScreenProps> = ({
+  route,
+}) => {
+  const {comment, screenType} = route.params;
+  // const [users, setUsers] = useState<ProfilePreviewType[]>([]);
+  const {friends: users} = useSelector((state: RootState) => state.friends);
+
+  useEffect(() => {}, []);
+
+  console.log(screenType);
+
+  return (
+    <View style={styles.background}>
+      <SafeAreaView>
+        <ScrollView style={styles.container}>
+          <Friends
+            result={users}
+            screenType={screenType}
+            userId={undefined}
+            hideSubheader
+          />
+        </ScrollView>
+      </SafeAreaView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  background: {
+    backgroundColor: 'white',
+    width: SCREEN_WIDTH,
+    height: SCREEN_HEIGHT,
+  },
+  container: {
+    marginTop: HeaderHeight,
+    height: SCREEN_HEIGHT - HeaderHeight,
+  },
+});
+
+export default CommentReactionScreen;
diff --git a/src/screens/profile/FriendsListScreen.tsx b/src/screens/profile/FriendsListScreen.tsx
index 1d10bc86..73364f3b 100644
--- a/src/screens/profile/FriendsListScreen.tsx
+++ b/src/screens/profile/FriendsListScreen.tsx
@@ -36,10 +36,6 @@ const FriendsListScreen: React.FC<FriendsListScreenProps> = ({route}) => {
 };
 
 const styles = StyleSheet.create({
-  background: {
-    backgroundColor: 'white',
-    height: '100%',
-  },
   backButton: {
     marginLeft: 10,
   },
diff --git a/src/screens/profile/index.ts b/src/screens/profile/index.ts
index d5377494..ea0505a2 100644
--- a/src/screens/profile/index.ts
+++ b/src/screens/profile/index.ts
@@ -12,3 +12,4 @@ export {default as PrivacyScreen} from './PrivacyScreen';
 export {default as AccountType} from './AccountType';
 export {default as CategorySelection} from './CategorySelection';
 export {default as CreateCustomCategory} from './CreateCustomCategory';
+export {default as CommentReactionScreen} from './CommentReactionScreen';
-- 
cgit v1.2.3-70-g09d2