Finish logic for draggables, Caption screen logic is done

7 files changed, 105 insertions, 84 deletions

diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx
index 12a7d70a..d1bb03ff 100644
--- a/src/components/common/MomentTags.tsx
+++ b/src/components/common/MomentTags.tsx
@@ -6,7 +6,7 @@ import Draggable from './Draggable';
 interface MomentTagsProps {
   editing: boolean;
   tags: MomentTagType[];
-  // setTags: (tag: MomentTagType[]) => void;
+  setTags: (tag: MomentTagType[]) => void;
   imageRef: MutableRefObject<null>;
   deleteFromList?: (user: ProfilePreviewType) => void;
 }
@@ -14,7 +14,7 @@ interface MomentTagsProps {
 const MomentTags: React.FC<MomentTagsProps> = ({
   editing,
   tags,
-  // setTags,
+  setTags,
   imageRef,
   deleteFromList,
 }) => {
@@ -39,9 +39,21 @@ const MomentTags: React.FC<MomentTagsProps> = ({
           px: number, // location of ref relative to entire screen
           py: number,
         ) => {
-          const x = Math.floor(((px - offset[0]) / imageDimensions[0]) * 100);
-          const y = Math.floor(((py - offset[1]) / imageDimensions[1]) * 100);
-          console.log(x, y);
+          const x = ((px - offset[0]) / imageDimensions[0]) * 100;
+          const y = ((py - offset[1]) / imageDimensions[1]) * 100;
+          setTags(
+            tags.map((tag) =>
+              tag.user.id === userId
+                ? {
+                    id: '',
+                    x,
+                    y,
+                    z: maxZIndex - 1, // TODO: change this
+                    user: tag.user,
+                  }
+                : tag,
+            ),
+          );
         },
       );
     }
@@ -80,7 +92,7 @@ const MomentTags: React.FC<MomentTagsProps> = ({
     <>
       {tags.map((tag, index) => (
         <Draggable
-          key={tag.user.id}
+          key={tag.user.id + tag.x + tag.y}
           x={(imageDimensions[0] * tag.x) / 100 + offset[0]}
           y={(imageDimensions[1] * tag.y) / 100 + offset[1]}
           z={tag.z}
diff --git a/src/components/moments/TagFriendsFoooter.tsx b/src/components/moments/TagFriendsFoooter.tsx
index 2a844680..16158612 100644
--- a/src/components/moments/TagFriendsFoooter.tsx
+++ b/src/components/moments/TagFriendsFoooter.tsx
@@ -1,5 +1,5 @@
 import {useNavigation} from '@react-navigation/native';
-import React, {Dispatch, SetStateAction} from 'react';
+import React, {Dispatch, SetStateAction, useMemo} from 'react';
 import {
   Image,
   ScrollView,
@@ -27,20 +27,25 @@ const TagFriendsFooter: React.FC<TagFriendsFooterProps> = ({
     setTaggedUsers(filteredSelection);
   };
 
-  const TaggMoreButton = () => (
-    <TouchableOpacity
-      onPress={() =>
-        navigation.navigate('TagSelectionScreen', {
-          selectedUsers: taggedUsers,
-        })
-      }
-      style={styles.tagMoreContainer}>
-      <Image
-        source={require('../../assets/icons/tagging/white-plus-icon.png')}
-        style={styles.tagMoreIcon}
-      />
-      <Text style={styles.tagMoreLabel}>{'Tagg More'}</Text>
-    </TouchableOpacity>
+  const goToSelectionScreen = () => {
+    navigation.navigate('TagSelectionScreen', {
+      selectedUsers: taggedUsers,
+    });
+  };
+
+  const taggMoreButton = useMemo(
+    () => (
+      <TouchableOpacity
+        onPress={goToSelectionScreen}
+        style={styles.tagMoreContainer}>
+        <Image
+          source={require('../../assets/icons/tagging/white-plus-icon.png')}
+          style={styles.tagMoreIcon}
+        />
+        <Text style={styles.tagMoreLabel}>{'Tagg More'}</Text>
+      </TouchableOpacity>
+    ),
+    [],
   );
 
   const TaggedUser = (user: ProfilePreviewType) => (
@@ -66,32 +71,35 @@ const TagFriendsFooter: React.FC<TagFriendsFooterProps> = ({
    * If taggUsers is empty, title acts as a button
    * Else, gets disabled and TaggMore button appears
    */
-  const TagFriendsTitle = () => (
-    <TouchableOpacity
-      style={styles.tagFriendsTitleContainer}
-      disabled={taggedUsers.length !== 0}
-      onPress={() =>
-        navigation.navigate('TagSelectionScreen', {
-          selectedUsers: taggedUsers,
-        })
-      }>
-      <Image
-        source={require('../../assets/icons/tagging/tag-icon.png')}
-        style={styles.tagIcon}
-      />
-      <Text style={styles.tagFriendsTitle}>Tag Friends</Text>
-    </TouchableOpacity>
+  const tagFriendsTitle = useMemo(
+    () => (
+      <TouchableOpacity
+        style={styles.tagFriendsTitleContainer}
+        disabled={taggedUsers.length !== 0}
+        onPress={() =>
+          navigation.navigate('TagSelectionScreen', {
+            selectedUsers: taggedUsers,
+          })
+        }>
+        <Image
+          source={require('../../assets/icons/tagging/tag-icon.png')}
+          style={styles.tagIcon}
+        />
+        <Text style={styles.tagFriendsTitle}>Tag Friends</Text>
+      </TouchableOpacity>
+    ),
+    [taggedUsers.length],
   );
 
   return (
     <>
-      <TagFriendsTitle />
+      {tagFriendsTitle}
       <View style={styles.tagFriendsContainer}>
         <ScrollView horizontal>
           {taggedUsers.map((user) => (
-            <TaggedUser {...user} />
+            <TaggedUser key={user.id} {...user} />
           ))}
-          {taggedUsers.length !== 0 && <TaggMoreButton />}
+          {taggedUsers.length !== 0 && taggMoreButton}
         </ScrollView>
       </View>
     </>
diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx
index 06825641..86915bb4 100644
--- a/src/components/taggs/TaggDraggable.tsx
+++ b/src/components/taggs/TaggDraggable.tsx
@@ -26,10 +26,10 @@ interface TaggDraggableProps extends ViewProps {
 const TaggDraggable: React.FC<TaggDraggableProps> = (
   props: TaggDraggableProps,
 ) => {
+  const {draggableRef, taggedUser, editingView, deleteFromList} = props;
   const navigation = useNavigation();
   const dispatch = useDispatch();
   const state = useSelector((rs: RootState) => rs);
-  const {draggableRef, taggedUser, editingView, deleteFromList} = props;
   let uriX = require('../../assets/images/draggableX.png');
   let uriTip = require('../../assets/images/Tagg-Triangle.png');
 
diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx
index aeead38d..9ca11458 100644
--- a/src/routes/main/MainStackNavigator.tsx
+++ b/src/routes/main/MainStackNavigator.tsx
@@ -5,6 +5,7 @@ import {createStackNavigator} from '@react-navigation/stack';
 import {Image} from 'react-native-image-crop-picker';
 import {
   CommentBaseType,
+  MomentTagType,
   MomentType,
   ProfilePreviewType,
   ScreenType,
@@ -40,7 +41,15 @@ export type MainStackParams = {
     title: string;
     image: Image;
     screenType: ScreenType;
-    selectedUsers?: ProfilePreviewType[];
+    selectedTags?: MomentTagType[];
+  };
+  TagFriendsScreen: {
+    image: Image;
+    screenType: ScreenType;
+    selectedTags?: MomentTagType[];
+  };
+  TagSelectionScreen: {
+    selectedUsers: ProfilePreviewType[];
   };
   IndividualMoment: {
     moment: MomentType;
@@ -99,14 +108,6 @@ export type MainStackParams = {
   ChatList: undefined;
   Chat: undefined;
   NewChatModal: undefined;
-  TagSelectionScreen: {
-    selectedUsers: ProfilePreviewType[];
-  };
-  TagFriendsScreen: {
-    image: Image;
-    screenType: ScreenType;
-    selectedUsers?: ProfilePreviewType[];
-  };
 };
 
 export const MainStack = createStackNavigator<MainStackParams>();
diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index b9b35742..30a7015f 100644
--- a/src/screens/moments/TagFriendsScreen.tsx
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -19,7 +19,7 @@ import {
 } from '../../components';
 import {TagFriendsFooter} from '../../components/moments';
 import {TAGG_LIGHT_BLUE_2} from '../../constants';
-import {ProfilePreviewType} from '../../types';
+import {MomentTagType} from '../../types';
 import {SCREEN_WIDTH, StatusBarHeight} from '../../utils';
 
 type TagFriendsScreenRouteProps = RouteProp<
@@ -30,19 +30,17 @@ interface TagFriendsScreenProps {
   route: TagFriendsScreenRouteProps;
 }
 const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
-  const {image, selectedUsers} = route.params;
+  const {image, selectedTags} = route.params;
   const navigation = useNavigation();
   const imageRef = useRef(null);
-  const [taggedUsers, setTaggedUsers] = useState<ProfilePreviewType[]>([]);
+  const [tags, setTags] = useState<MomentTagType[]>([]);
 
   /*
    * Update list of tagged users from route params
    */
   useEffect(() => {
-    if (selectedUsers !== undefined) {
-      setTaggedUsers(selectedUsers);
-    }
-  }, [selectedUsers]);
+    setTags(selectedTags ? selectedTags : []);
+  }, [selectedTags]);
 
   /*
    * Navigate back to Tag Users Screen, send selected users
@@ -50,7 +48,7 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
   const handleDone = () => {
     navigation.navigate('CaptionScreen', {
       ...route.params,
-      selectedUsers: taggedUsers,
+      selectedTags: tags,
     });
   };
 
@@ -79,7 +77,7 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
               title={'Tap on photo to Tag friends!'}
             />
             <TouchableWithoutFeedback
-              disabled={taggedUsers.length > 0}
+              disabled={tags.length > 0}
               onPress={() =>
                 navigation.navigate('TagSelectionScreen', {
                   selectedUsers: [],
@@ -92,27 +90,23 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
                 resizeMode={'cover'}
               />
             </TouchableWithoutFeedback>
-            {taggedUsers.length !== 0 && (
+            {tags.length !== 0 && (
               <MomentTags
+                tags={tags}
+                setTags={setTags}
                 editing={true}
-                tags={taggedUsers.map((user) => ({
-                  id: '',
-                  x: 50,
-                  y: 50,
-                  z: 1,
-                  user,
-                }))}
                 imageRef={imageRef}
                 deleteFromList={(user) =>
-                  setTaggedUsers(taggedUsers.filter((u) => u.id !== user.id))
+                  setTags(tags.filter((tag) => tag.user.id !== user.id))
                 }
               />
             )}
             <View style={styles.footerContainer}>
               <TagFriendsFooter
-                taggedUsers={taggedUsers}
-                setTaggedUsers={setTaggedUsers}
+                taggedUsers={tags.map((tag) => tag.user)}
+                setTaggedUsers={(users) => null}
               />
+              {/* <TagFriendsFooter tags={tags} setTags={setTags} /> */}
             </View>
           </View>
         </KeyboardAvoidingView>
diff --git a/src/screens/moments/TagSelectionScreen.tsx b/src/screens/moments/TagSelectionScreen.tsx
index a698a07b..6a4006e8 100644
--- a/src/screens/moments/TagSelectionScreen.tsx
+++ b/src/screens/moments/TagSelectionScreen.tsx
@@ -48,7 +48,13 @@ const TagSelectionScreen: React.FC<TagSelectionScreenProps> = ({route}) => {
           onPress={() => {
             navigation.navigate('TagFriendsScreen', {
               ...route.params,
-              selectedUsers: selectedUsers,
+              selectedTags: selectedUsers.map((user) => ({
+                id: '',
+                x: 50,
+                y: 50,
+                z: 1,
+                user,
+              })),
             });
           }}>
           <BackIcon
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 69f4b3d9..d85ffead 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -29,7 +29,7 @@ import {
   updateProfileCompletionStage,
 } from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
-import {ProfilePreviewType} from '../../types';
+import {MomentTagType} from '../../types';
 import {SCREEN_WIDTH, StatusBarHeight} from '../../utils';
 import {mentionPartTypes} from '../../utils/comments';
 
@@ -47,26 +47,26 @@ interface CaptionScreenProps {
 }
 
 const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
-  const {title, image, screenType, selectedUsers} = route.params;
+  const {title, image, screenType, selectedTags} = route.params;
   const {
     user: {userId},
   } = useSelector((state: RootState) => state.user);
   const dispatch = useDispatch();
   const [caption, setCaption] = useState('');
   const [loading, setLoading] = useState(false);
-  const [taggedUsers, setTaggedUsers] = useState<ProfilePreviewType[]>([]);
+  const [tags, setTags] = useState<MomentTagType[]>([]);
   const [taggedList, setTaggedList] = useState<string>('');
 
   useEffect(() => {
-    setTaggedUsers(selectedUsers ? selectedUsers : []);
-  }, [route.params]);
+    setTags(selectedTags ? selectedTags : []);
+  }, [selectedTags]);
 
   useEffect(() => {
     const getTaggedUsersListString = () => {
       let listString = '';
-      for (let i = 0; i < taggedUsers.length; i++) {
+      for (let i = 0; i < tags.length; i++) {
         if (listString.length < 21) {
-          listString = listString.concat(`@${taggedUsers[i].username} `);
+          listString = listString.concat(`@${tags[i].user.username} `);
         } else {
           break;
         }
@@ -74,7 +74,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
       setTaggedList(listString);
     };
     getTaggedUsersListString();
-  }, [taggedUsers]);
+  }, [tags]);
 
   const navigateToProfile = () => {
     //Since the logged In User is navigating to own profile, useXId is not required
@@ -115,11 +115,11 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
     }
     const momentTagResponse = await postMomentTags(
       momentResponse.moment_id,
-      taggedUsers.map((u, index) => ({
-        x: index * 50,
-        y: index * 50,
-        z: 1,
-        user_id: u.id,
+      tags.map((tag) => ({
+        x: tag.x,
+        y: tag.y,
+        z: tag.z,
+        user_id: tag.id,
       })),
     );
     if (!momentTagResponse) {
@@ -174,7 +174,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
                 navigation.navigate('TagFriendsScreen', {
                   image: image,
                   screenType: screenType,
-                  selectedUsers: taggedUsers,
+                  selectedTags: tags,
                 })
               }
               style={styles.tagFriendsContainer}>