Finish tagging functionality

6 files changed, 41 insertions, 50 deletions

diff --git a/src/components/common/TaggUserSelectionCell.tsx b/src/components/common/TaggUserSelectionCell.tsx
index 5424ab9b..72c98822 100644
--- a/src/components/common/TaggUserSelectionCell.tsx
+++ b/src/components/common/TaggUserSelectionCell.tsx
@@ -1,23 +1,20 @@
 import React, {useEffect, useState} from 'react';
 import {StyleSheet, View} from 'react-native';
-import {
-  TouchableOpacity,
-  TouchableWithoutFeedback,
-} from 'react-native-gesture-handler';
+import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
 import {ProfilePreview} from '..';
-import {ProfilePreviewType, ScreenType} from '../../types';
+import {MomentTagType, ProfilePreviewType, ScreenType} from '../../types';
 import {SCREEN_WIDTH} from '../../utils';
 import TaggRadioButton from './TaggRadioButton';
 
 interface TaggUserSelectionCellProps {
   item: ProfilePreviewType;
-  selectedUsers: ProfilePreviewType[];
-  setSelectedUsers: Function;
+  tags: MomentTagType[];
+  setTags: (tags: MomentTagType[]) => void;
 }
 const TaggUserSelectionCell: React.FC<TaggUserSelectionCellProps> = ({
   item,
-  selectedUsers,
-  setSelectedUsers,
+  tags,
+  setTags,
 }) => {
   const [pressed, setPressed] = useState<boolean>(false);
 
@@ -26,9 +23,7 @@ const TaggUserSelectionCell: React.FC<TaggUserSelectionCellProps> = ({
    */
   useEffect(() => {
     const updatePressed = () => {
-      const userSelected = selectedUsers.findIndex(
-        (selectedUser) => item.id === selectedUser.id,
-      );
+      const userSelected = tags.findIndex((tag) => item.id === tag.user.id);
       setPressed(userSelected !== -1);
     };
     updatePressed();
@@ -41,14 +36,20 @@ const TaggUserSelectionCell: React.FC<TaggUserSelectionCellProps> = ({
   const handlePress = () => {
     // Add to selected list of users
     if (pressed === false) {
-      setSelectedUsers([...selectedUsers, item]);
+      setTags([
+        ...tags,
+        {
+          id: '',
+          x: 50,
+          y: 50,
+          z: 1,
+          user: item,
+        },
+      ]);
     }
     // Remove item from selected list of users
     else {
-      const filteredSelection = selectedUsers.filter(
-        (user) => user.id !== item.id,
-      );
-      setSelectedUsers(filteredSelection);
+      setTags(tags.filter((tag) => tag.user.id !== item.id));
     }
   };
   return (
@@ -60,7 +61,7 @@ const TaggUserSelectionCell: React.FC<TaggUserSelectionCellProps> = ({
           screenType={ScreenType.Profile}
         />
       </View>
-      <TaggRadioButton pressed={pressed} onPress={handlePress} />
+      <TaggRadioButton pressed={pressed} onPress={() => null} />
     </TouchableWithoutFeedback>
   );
 };
diff --git a/src/components/moments/TagFriendsFoooter.tsx b/src/components/moments/TagFriendsFoooter.tsx
index 352ee49a..365d709d 100644
--- a/src/components/moments/TagFriendsFoooter.tsx
+++ b/src/components/moments/TagFriendsFoooter.tsx
@@ -41,7 +41,7 @@ const TagFriendsFooter: React.FC<TagFriendsFooterProps> = ({tags, setTags}) => {
         <Text style={styles.tagMoreLabel}>{'Tagg More'}</Text>
       </TouchableOpacity>
     ),
-    [],
+    [tags],
   );
 
   const TaggedUser = (user: ProfilePreviewType) => (
diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx
index 86915bb4..8e330d0b 100644
--- a/src/components/taggs/TaggDraggable.tsx
+++ b/src/components/taggs/TaggDraggable.tsx
@@ -40,7 +40,7 @@ const TaggDraggable: React.FC<TaggDraggableProps> = (
 
   return (
     <TouchableWithoutFeedback>
-      <View ref={draggableRef} style={{borderWidth: 1}}>
+      <View ref={draggableRef}>
         <TouchableOpacity
           style={styles.container}
           disabled={editingView}
diff --git a/src/screens/moments/TagSelectionScreen.tsx b/src/screens/moments/TagSelectionScreen.tsx
index 08e17eab..3177b638 100644
--- a/src/screens/moments/TagSelectionScreen.tsx
+++ b/src/screens/moments/TagSelectionScreen.tsx
@@ -9,7 +9,7 @@ import {SearchBar, TaggUserSelectionCell} from '../../components';
 import {SEARCH_ENDPOINT_MESSAGES} from '../../constants';
 import {MainStackParams} from '../../routes';
 import {loadSearchResults} from '../../services';
-import {ProfilePreviewType} from '../../types';
+import {MomentTagType, ProfilePreviewType} from '../../types';
 import {
   isIPhoneX,
   loadTaggUserSuggestions,
@@ -30,9 +30,7 @@ interface TagSelectionScreenProps {
 const TagSelectionScreen: React.FC<TagSelectionScreenProps> = ({route}) => {
   const navigation = useNavigation();
   const [users, setUsers] = useState<ProfilePreviewType[]>([]);
-  const [selectedUsers, setSelectedUsers] = useState<ProfilePreviewType[]>(
-    route.params.selectedTags.map((tag) => tag.user),
-  );
+  const [tags, setTags] = useState<MomentTagType[]>(route.params.selectedTags);
   const [searching, setSearching] = useState(false);
   const [query, setQuery] = useState<string>('');
   const [label, setLabel] = useState<string>('Recent');
@@ -48,13 +46,7 @@ const TagSelectionScreen: React.FC<TagSelectionScreenProps> = ({route}) => {
           onPress={() => {
             navigation.navigate('TagFriendsScreen', {
               ...route.params,
-              selectedTags: selectedUsers.map((user) => ({
-                id: '',
-                x: 50,
-                y: 50,
-                z: 1,
-                user,
-              })),
+              selectedTags: tags,
             });
           }}>
           <BackIcon
@@ -73,12 +65,12 @@ const TagSelectionScreen: React.FC<TagSelectionScreenProps> = ({route}) => {
    * that the loggedInUser might want to select
    */
   const loadUsers = async () => {
-    const data: ProfilePreviewType[] = await loadTaggUserSuggestions();
+    const data = await loadTaggUserSuggestions();
     const filteredData: ProfilePreviewType[] = data.filter((user) => {
-      const index = selectedUsers.findIndex((s) => s.id === user.id);
+      const index = tags.findIndex((tag) => tag.user.id === user.id);
       return index === -1;
     });
-    setUsers([...filteredData, ...selectedUsers]);
+    setUsers([...filteredData, ...tags.map((tag) => tag.user)]);
   };
 
   /*
@@ -89,7 +81,7 @@ const TagSelectionScreen: React.FC<TagSelectionScreenProps> = ({route}) => {
       const searchResults = await loadSearchResults(
         `${SEARCH_ENDPOINT_MESSAGES}?query=${query}`,
       );
-      setUsers(searchResults?.users);
+      setUsers(searchResults ? searchResults.users : []);
     } else {
       setUsers([]);
     }
@@ -136,8 +128,8 @@ const TagSelectionScreen: React.FC<TagSelectionScreenProps> = ({route}) => {
             <TaggUserSelectionCell
               key={item.item.id}
               item={item.item}
-              selectedUsers={selectedUsers}
-              setSelectedUsers={setSelectedUsers}
+              tags={tags}
+              setTags={setTags}
             />
           )}
         />
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index d85ffead..8bffd82b 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -116,10 +116,10 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
     const momentTagResponse = await postMomentTags(
       momentResponse.moment_id,
       tags.map((tag) => ({
-        x: tag.x,
-        y: tag.y,
-        z: tag.z,
-        user_id: tag.id,
+        x: Math.floor(tag.x),
+        y: Math.floor(tag.y),
+        z: Math.floor(tag.z),
+        user_id: tag.user.id,
       })),
     );
     if (!momentTagResponse) {
diff --git a/src/services/MomentService.ts b/src/services/MomentService.ts
index 46b55066..423d962c 100644
--- a/src/services/MomentService.ts
+++ b/src/services/MomentService.ts
@@ -147,6 +147,7 @@ export const postMomentTags = async (
   tags: {
     x: number;
     y: number;
+    z: number;
     user_id: string;
   }[],
 ) => {
@@ -155,16 +156,13 @@ export const postMomentTags = async (
     const form = new FormData();
     form.append('moment_id', moment_id);
     form.append('tags', JSON.stringify(tags));
-    const response = await fetch(
-      MOMENTTAG_ENDPOINT + `?moment_id=${moment_id}`,
-      {
-        method: 'POST',
-        headers: {
-          Authorization: 'Token ' + token,
-        },
-        body: form,
+    const response = await fetch(MOMENTTAG_ENDPOINT, {
+      method: 'POST',
+      headers: {
+        Authorization: 'Token ' + token,
       },
-    );
+      body: form,
+    });
     return response.status === 201 || response.status === 200;
   } catch (error) {
     console.error(error);