From 1b7fef188ec2aee0706fc1204432315db3d4fec6 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh <37447613+shravyaramesh@users.noreply.github.com> Date: Mon, 19 Oct 2020 12:42:15 -0700 Subject: Tma235/231 Individual view and horizontal view (#59) * Implemented modal stack navigation for moment view, created a rough UI for individual moment view [incl: title, image(not displayed)] * bare bones beginnning * Created individual moment screen, moment tile for horizontal view * Alert * Fix initial route Co-authored-by: Ashm Walia Co-authored-by: Ashm Walia <40498934+ashmgarv@users.noreply.github.com> --- src/components/profile/Content.tsx | 79 +++++++++++++++++++++++++++++++---- src/components/profile/Moment.tsx | 41 +++++++++++------- src/components/profile/MomentTile.tsx | 33 +++++++++++++++ 3 files changed, 130 insertions(+), 23 deletions(-) create mode 100644 src/components/profile/MomentTile.tsx (limited to 'src/components') diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx index 8d368747..d52696a7 100644 --- a/src/components/profile/Content.tsx +++ b/src/components/profile/Content.tsx @@ -1,8 +1,11 @@ -import React, {useState} from 'react'; -import {LayoutChangeEvent, StyleSheet, View} from 'react-native'; -import {Text} from 'react-native-animatable'; +import AsyncStorage from '@react-native-community/async-storage'; +import React, {useCallback, useEffect, useState} from 'react'; +import {Alert, LayoutChangeEvent, StyleSheet, View} from 'react-native'; + import Animated from 'react-native-reanimated'; -import {defaultMoments} from '../../constants'; +import {AuthContext} from '../../routes/authentication'; +import {MomentType, UserType} from 'src/types'; +import {defaultMoments, MOMENTS_ENDPOINT} from '../../constants'; import {SCREEN_HEIGHT} from '../../utils'; import TaggsBar from '../taggs/TaggsBar'; import Moment from './Moment'; @@ -14,12 +17,70 @@ interface ContentProps { y: Animated.Value; isProfileView: boolean; } + const Content: React.FC = ({y, isProfileView}) => { const [profileBodyHeight, setProfileBodyHeight] = useState(0); + const {newMomentsAvailable, updateMoments} = React.useContext(AuthContext); + + const [imagesList, setImagesList] = useState([]); + const [imagesMap, setImagesMap] = useState>( + new Map(), + ); const onLayout = (e: LayoutChangeEvent) => { const {height} = e.nativeEvent.layout; setProfileBodyHeight(height); }; + + const {userId, username} = user; + + const createImagesMap = useCallback(() => { + var map = new Map(); + imagesList.forEach(function (imageObject) { + var moment_category = imageObject.moment_category; + if (map.has(moment_category)) { + map.get(moment_category).push(imageObject); + } else { + map.set(moment_category, [imageObject]); + } + }); + + setImagesMap(map); + console.log(map); + }, [imagesList]); + + useEffect(() => { + if (!userId) { + return; + } + + const retrieveMoments = async () => { + try { + const token = await AsyncStorage.getItem('token'); + const response = await fetch(MOMENTS_ENDPOINT + `${userId}/`, { + method: 'GET', + headers: { + Authorization: 'Token ' + token, + }, + }); + const status = response.status; + if (status === 200) { + const data = await response.json(); + setImagesList(data); + updateMoments(!newMomentsAvailable); + } else { + Alert.alert('Could not load moments!'); + } + } catch (err) { + Alert.alert('Could not load moments!'); + } + }; + + if (newMomentsAvailable) { + retrieveMoments(); + createImagesMap(); + } + }, [userId, createImagesMap, updateMoments, newMomentsAvailable]); + return ( = ({y, isProfileView}) => { + + {!isProfileView ? ( - {defaultMoments.map((title, index) => ( - - ))} - + {defaultMoments.map((title, index) => ( + + ))} + ) : ( )} diff --git a/src/components/profile/Moment.tsx b/src/components/profile/Moment.tsx index 6ae8d38e..be7cbfba 100644 --- a/src/components/profile/Moment.tsx +++ b/src/components/profile/Moment.tsx @@ -1,6 +1,6 @@ import {useNavigation} from '@react-navigation/native'; import React from 'react'; -import {StyleSheet, View} from 'react-native'; +import {Alert, StyleSheet, View} from 'react-native'; import {Text} from 'react-native-animatable'; import {ScrollView, TouchableOpacity} from 'react-native-gesture-handler'; import LinearGradient from 'react-native-linear-gradient'; @@ -9,10 +9,12 @@ import BigPlusIcon from '../../assets/icons/plus_icon-02.svg'; import {MOMENTS_TITLE_COLOR} from '../../constants'; import {SCREEN_WIDTH} from '../../utils'; import ImagePicker from 'react-native-image-crop-picker'; +import MomentTile from './MomentTile'; +import {MomentType} from 'src/types'; interface MomentProps { title: string; - images: Array; + images: MomentType[] | undefined; } const Moment: React.FC = ({title, images}) => { @@ -28,10 +30,13 @@ const Moment: React.FC = ({title, images}) => { }) .then((picture) => { if ('path' in picture) { - navigation.navigate('CaptionScreen', {title: title, image: picture}); + navigation.navigate('CaptionScreen', { + title: title, + image: picture, + }); } }) - .catch(() => {}); + .catch((err) => {Alert.alert('Unable to upload moment!');}); }; return ( @@ -47,17 +52,23 @@ const Moment: React.FC = ({title, images}) => { horizontal showsHorizontalScrollIndicator={false} style={styles.scrollContainer}> - navigateToImagePicker()}> - - - - - Add a moment of your {title.toLowerCase()}! - - - - + {images && + images.map((imageObj: MomentType) => ( + + ))} + {(images === undefined || images.length === 0) && ( + navigateToImagePicker()}> + + + + + Add a moment of your {title.toLowerCase()}! + + + + + )} ); diff --git a/src/components/profile/MomentTile.tsx b/src/components/profile/MomentTile.tsx new file mode 100644 index 00000000..70b20d40 --- /dev/null +++ b/src/components/profile/MomentTile.tsx @@ -0,0 +1,33 @@ +import {useNavigation} from '@react-navigation/native'; +import React from 'react'; +import {StyleSheet, View, Image, TouchableOpacity} from 'react-native'; +import {MomentType} from 'src/types'; + +interface MomentTileProps { + moment: MomentType; +} +const MomentTile: React.FC = ({moment}) => { + const navigation = useNavigation(); + const {path_hash} = moment; + return ( + { + navigation.navigate('IndividualMoment', {moment}); + }}> + + + + + ); +}; + +const styles = StyleSheet.create({ + image: { + aspectRatio: 1, + height: '100%', + alignItems: 'center', + justifyContent: 'center', + flexDirection: 'column', + }, +}); +export default MomentTile; -- cgit v1.2.3-70-g09d2