From 768c826897d8988f5e91456f213a836a7ba59f4b Mon Sep 17 00:00:00 2001 From: George Rusu Date: Fri, 21 May 2021 15:57:00 -0700 Subject: Fetch momentTag objects from the backend --- src/constants/api.ts | 1 + src/screens/profile/IndividualMoment.tsx | 23 ++++++++++++++++++++++- 2 files changed, 23 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/constants/api.ts b/src/constants/api.ts index 6cc357f5..d52fc203 100644 --- a/src/constants/api.ts +++ b/src/constants/api.ts @@ -31,6 +31,7 @@ export const SEARCH_ENDPOINT: string = API_URL + 'search/'; export const SEARCH_ENDPOINT_MESSAGES: string = API_URL + 'search/messages/'; export const SEARCH_ENDPOINT_SUGGESTED: string = API_URL + 'search/suggested/'; export const MOMENTS_ENDPOINT: string = API_URL + 'moments/'; +export const MOMENT_TAGS_ENDPOINT: string = API_URL + 'moments/tags/'; export const MOMENT_THUMBNAIL_ENDPOINT: string = API_URL + 'moment-thumbnail/'; export const VERIFY_INVITATION_CODE_ENDPOUNT: string = API_URL + 'verify-code/'; export const COMMENTS_ENDPOINT: string = API_URL + 'comments/'; diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx index 515cbacf..f7eb9c96 100644 --- a/src/screens/profile/IndividualMoment.tsx +++ b/src/screens/profile/IndividualMoment.tsx @@ -1,9 +1,12 @@ +import AsyncStorage from '@react-native-community/async-storage'; import {BlurView} from '@react-native-community/blur'; import {RouteProp} from '@react-navigation/native'; import {StackNavigationProp} from '@react-navigation/stack'; import React from 'react'; -import {FlatList, StyleSheet, View} from 'react-native'; +import {Alert, FlatList, StyleSheet, View} from 'react-native'; import {useSelector} from 'react-redux'; +import {MOMENT_TAGS_ENDPOINT} from 'src/constants/api'; +import {ERROR_SOMETHING_WENT_WRONG_REFRESH} from 'src/constants/strings'; import { IndividualMomentTitleBar, MomentPostContent, @@ -54,6 +57,24 @@ const IndividualMoment: React.FC = ({ ); const initialIndex = momentData.findIndex((m) => m.moment_id === moment_id); + const loadMomentTags = async () => { + try { + const token = await AsyncStorage.getItem('token'); + const response = await fetch(MOMENT_TAGS_ENDPOINT + `/${moment_id}/`, { + method: 'GET', + headers: { + Authorization: 'Token ' + token, + }, + }); + const status = response.status; + if (status === 201) { + //create TaggDraggables with + } + } catch (error) { + Alert.alert(ERROR_SOMETHING_WENT_WRONG_REFRESH); + } + }; + const renderMomentPost = ({item}: {item: MomentType}) => ( Date: Fri, 21 May 2021 19:18:30 -0400 Subject: Change imports --- src/screens/profile/IndividualMoment.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx index f7eb9c96..0c50a642 100644 --- a/src/screens/profile/IndividualMoment.tsx +++ b/src/screens/profile/IndividualMoment.tsx @@ -5,13 +5,13 @@ import {StackNavigationProp} from '@react-navigation/stack'; import React from 'react'; import {Alert, FlatList, StyleSheet, View} from 'react-native'; import {useSelector} from 'react-redux'; -import {MOMENT_TAGS_ENDPOINT} from 'src/constants/api'; -import {ERROR_SOMETHING_WENT_WRONG_REFRESH} from 'src/constants/strings'; import { IndividualMomentTitleBar, MomentPostContent, MomentPostHeader, } from '../../components'; +import {MOMENT_TAGS_ENDPOINT} from '../../constants'; +import {ERROR_SOMETHING_WENT_WRONG_REFRESH} from '../../constants/strings'; import {MainStackParams} from '../../routes'; import {RootState} from '../../store/rootreducer'; import {MomentType} from '../../types'; -- cgit v1.2.3-70-g09d2 From 1a298f4b0db4a2e598f62d0651dc36466c6508be Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 21 May 2021 19:20:16 -0400 Subject: Update import --- src/components/taggs/TaggDraggable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx index a6ffb1ef..e4448642 100644 --- a/src/components/taggs/TaggDraggable.tsx +++ b/src/components/taggs/TaggDraggable.tsx @@ -9,8 +9,8 @@ import { View, } from 'react-native'; import {useDispatch, useSelector} from 'react-redux'; -import {RootState} from 'src/store/rootReducer'; import Avatar from '../../components/common/Avatar'; +import {RootState} from '../../store/rootReducer'; import {ProfilePreviewType, ScreenType, UserType} from '../../types'; import {normalize} from '../../utils'; import {navigateToProfile} from '../../utils/users'; -- cgit v1.2.3-70-g09d2 From 494677881ac50438af19009b5996cb8548026d61 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 21 May 2021 19:33:48 -0400 Subject: Add MomentTagType, Add logic to fetch tags for each moment --- src/components/moments/MomentPostContent.tsx | 22 +++++++++++++++----- src/screens/profile/IndividualMoment.tsx | 18 ----------------- src/services/MomentService.ts | 30 ++++++++++++++++++++++++++-- src/types/types.ts | 8 ++++++++ 4 files changed, 53 insertions(+), 25 deletions(-) (limited to 'src') diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx index 193bf40c..9a174e73 100644 --- a/src/components/moments/MomentPostContent.tsx +++ b/src/components/moments/MomentPostContent.tsx @@ -1,10 +1,11 @@ import {useNavigation} from '@react-navigation/native'; -import React, {useEffect} from 'react'; +import React, {useEffect, useState} from 'react'; import {Image, StyleSheet, Text, View, ViewProps} from 'react-native'; import {useDispatch, useStore} from 'react-redux'; -import {getCommentsCount} from '../../services'; +import {getCommentsCount, loadMomentTags} from '../../services'; +import {userMomentsFetched} from '../../store/reducers'; import {RootState} from '../../store/rootReducer'; -import {ScreenType, UserType} from '../../types'; +import {MomentTagType, ScreenType, UserType} from '../../types'; import { getTimePosted, navigateToProfile, @@ -30,12 +31,23 @@ const MomentPostContent: React.FC = ({ dateTime, style, }) => { - const [elapsedTime, setElapsedTime] = React.useState(); - const [comments_count, setCommentsCount] = React.useState(''); + const [elapsedTime, setElapsedTime] = useState(''); + const [comments_count, setCommentsCount] = useState(''); + const [tags, setTags] = useState([]); const state: RootState = useStore().getState(); const navigation = useNavigation(); const dispatch = useDispatch(); + useEffect(() => { + const loadTags = async () => { + const response = await loadMomentTags(momentId); + if (response) { + setTags(response); + } + }; + loadTags(); + }, []); + useEffect(() => { const fetchCommentsCount = async () => { const count = await getCommentsCount(momentId, false); diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx index 0c50a642..4baca5b2 100644 --- a/src/screens/profile/IndividualMoment.tsx +++ b/src/screens/profile/IndividualMoment.tsx @@ -57,24 +57,6 @@ const IndividualMoment: React.FC = ({ ); const initialIndex = momentData.findIndex((m) => m.moment_id === moment_id); - const loadMomentTags = async () => { - try { - const token = await AsyncStorage.getItem('token'); - const response = await fetch(MOMENT_TAGS_ENDPOINT + `/${moment_id}/`, { - method: 'GET', - headers: { - Authorization: 'Token ' + token, - }, - }); - const status = response.status; - if (status === 201) { - //create TaggDraggables with - } - } catch (error) { - Alert.alert(ERROR_SOMETHING_WENT_WRONG_REFRESH); - } - }; - const renderMomentPost = ({item}: {item: MomentType}) => ( { return undefined; } }; + +export const loadMomentTags = async (moment_id: string) => { + try { + const token = await AsyncStorage.getItem('token'); + const response = await fetch( + MOMENT_TAGS_ENDPOINT + `?moment_id=${moment_id}`, + { + method: 'GET', + headers: { + Authorization: 'Token ' + token, + }, + }, + ); + if (response.status === 200) { + const tags: MomentTagType[] = await response.json(); + return tags; + } + } catch (error) { + console.error(error); + return []; + } +}; diff --git a/src/types/types.ts b/src/types/types.ts index e1935d26..1b4b7ecf 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -117,6 +117,14 @@ export interface MomentType { moment_url: string; thumbnail_url: string; } + +export interface MomentTagType { + id: string; + user: ProfilePreviewType; + x: number; + y: number; +} + export interface CommentBaseType { comment_id: string; comment: string; -- cgit v1.2.3-70-g09d2 From 9895bd4c52854767657f4d70dba4018cba2b8751 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 21 May 2021 20:04:12 -0400 Subject: Refactor code --- src/components/common/MomentTags.tsx | 79 ++++++++++++++++++++++++++++ src/components/common/index.ts | 1 + src/components/moments/MomentPostContent.tsx | 9 ++-- src/screens/profile/CaptionScreen.tsx | 53 ++++++------------- 4 files changed, 101 insertions(+), 41 deletions(-) create mode 100644 src/components/common/MomentTags.tsx (limited to 'src') diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx new file mode 100644 index 00000000..f6f475bc --- /dev/null +++ b/src/components/common/MomentTags.tsx @@ -0,0 +1,79 @@ +import React, {MutableRefObject, useEffect, useState} from 'react'; +import {MomentTagType, ProfilePreviewType} from '../../types'; +import TaggDraggable from '../taggs/TaggDraggable'; +import Draggable from './Draggable'; + +interface MomentTagsProps { + editing: boolean; + tags: MomentTagType[]; + imageRef: MutableRefObject; + deleteFromList?: (user: ProfilePreviewType) => void; +} + +const MomentTags: React.FC = ({ + editing, + tags, + imageRef, + deleteFromList, +}) => { + const [offset, setOffset] = useState([0, 0]); + const [curStart, setCurStart] = useState([0, 0]); + const [imageDimensions, setImageDimensions] = useState([0, 0]); + + useEffect(() => { + imageRef.current.measure((fx, fy, width, height, px, py) => { + console.log(px, py); + console.log(width, height); + setOffset([px, py]); + setImageDimensions([width, height]); + }); + }, []); + + if (!tags) { + return null; + } + + return editing && deleteFromList ? ( + <> + {tags.map((tag) => ( + null}> + deleteFromList(tag.user)} + setStart={setCurStart} + /> + + ))} + + ) : ( + <> + {tags.map((tag) => ( + null}> + null} + setStart={setCurStart} + /> + + ))} + + ); +}; + +export default MomentTags; diff --git a/src/components/common/index.ts b/src/components/common/index.ts index 48abb8b8..692c9f8a 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -27,3 +27,4 @@ export {default as Avatar} from './Avatar'; export {default as TaggTypeahead} from './TaggTypeahead'; export {default as TaggUserRowCell} from './TaggUserRowCell'; export {default as LikeButton} from './LikeButton'; +export {default as MomentTags} from './MomentTags'; diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx index 9a174e73..e702cb68 100644 --- a/src/components/moments/MomentPostContent.tsx +++ b/src/components/moments/MomentPostContent.tsx @@ -1,20 +1,20 @@ import {useNavigation} from '@react-navigation/native'; -import React, {useEffect, useState} from 'react'; +import React, {useEffect, useRef, useState} from 'react'; import {Image, StyleSheet, Text, View, ViewProps} from 'react-native'; import {useDispatch, useStore} from 'react-redux'; import {getCommentsCount, loadMomentTags} from '../../services'; -import {userMomentsFetched} from '../../store/reducers'; import {RootState} from '../../store/rootReducer'; import {MomentTagType, ScreenType, UserType} from '../../types'; import { getTimePosted, navigateToProfile, + normalize, SCREEN_HEIGHT, SCREEN_WIDTH, - normalize, } from '../../utils'; import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments'; import {CommentsCount} from '../comments'; +import {MomentTags} from '../common'; interface MomentPostContentProps extends ViewProps { screenType: ScreenType; @@ -37,6 +37,7 @@ const MomentPostContent: React.FC = ({ const state: RootState = useStore().getState(); const navigation = useNavigation(); const dispatch = useDispatch(); + const imageRef = useRef(null); useEffect(() => { const loadTags = async () => { @@ -60,10 +61,12 @@ const MomentPostContent: React.FC = ({ return ( + = ({route, navigation}) => { const [loading, setLoading] = useState(false); const imageRef = useRef(null); - // state variables used to position draggables - const [offset, setOffset] = useState([0, 0]); - const [curStart, setCurStart] = useState([0, 0]); - const [imageDimensions, setImageDimensions] = useState([0, 0]); - const [taggList, setTaggList] = useState([ { first_name: 'Ivan', @@ -94,16 +87,6 @@ const CaptionScreen: React.FC = ({route, navigation}) => { }); }; - /** - * need a handler to take care of creating a tagged user object, append that object to the taggList state variable. - */ - useEffect(() => { - imageRef.current.measure((fx, fy, width, height, px, py) => { - setOffset([px, py]); - setImageDimensions([width, height]); - }); - }, []); - const handleShare = async () => { setLoading(true); if (!image.filename) { @@ -165,25 +148,19 @@ const CaptionScreen: React.FC = ({route, navigation}) => { onChange={setCaption} partTypes={mentionPartTypes('blue')} /> - {taggList.map((user) => ( - null}> - - setTaggList(taggList.filter((u) => u.id !== user.id)) - } - setStart={setCurStart} - /> - - ))} + ({ + id: '', + x: 0, + y: 0, + user, + }))} + imageRef={imageRef} + deleteFromList={(user) => + setTaggList(taggList.filter((u) => u.id !== user.id)) + } + /> -- cgit v1.2.3-70-g09d2 From 4434d06df897f844832a92d66956825ea58c2b01 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 21 May 2021 20:06:11 -0400 Subject: Clean up code --- src/components/common/MomentTags.tsx | 2 -- 1 file changed, 2 deletions(-) (limited to 'src') diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx index f6f475bc..fb9ef5be 100644 --- a/src/components/common/MomentTags.tsx +++ b/src/components/common/MomentTags.tsx @@ -22,8 +22,6 @@ const MomentTags: React.FC = ({ useEffect(() => { imageRef.current.measure((fx, fy, width, height, px, py) => { - console.log(px, py); - console.log(width, height); setOffset([px, py]); setImageDimensions([width, height]); }); -- cgit v1.2.3-70-g09d2