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/screens/profile/CaptionScreen.tsx | 14 ++- src/screens/profile/IndividualMoment.tsx | 162 +++++++++++++++++++++++++++++++ src/screens/profile/index.ts | 1 + 3 files changed, 169 insertions(+), 8 deletions(-) create mode 100644 src/screens/profile/IndividualMoment.tsx (limited to 'src/screens') diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index 53c47a6d..d65a8451 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -9,7 +9,7 @@ import {RouteProp} from '@react-navigation/native'; import {ProfileStackParams} from 'src/routes'; import {StackNavigationProp} from '@react-navigation/stack'; import {CaptionScreenHeader} from '../../components/profile'; -import {MOMENTS_UPLOAD_ENDPOINT} from '../../constants'; +import {MOMENTS_ENDPOINT} from '../../constants'; import {AuthContext} from '../../routes/authentication'; const NO_USER: UserType = { @@ -34,8 +34,8 @@ const CaptionScreen: React.FC = ({route, navigation}) => { const {title, image} = route.params; const { user: {userId}, + updateMoments, } = React.useContext(AuthContext); - const [user, setUser] = useState(NO_USER); const [caption, setCaption] = React.useState(''); const handleCaptionUpdate = (caption: string) => { @@ -53,11 +53,6 @@ const CaptionScreen: React.FC = ({route, navigation}) => { const handleShare = async () => { try { - const token = await AsyncStorage.getItem('token'); - if (!token) { - setUser(NO_USER); - return; - } const request = new FormData(); const uri = image.path; const name = image.filename; @@ -69,7 +64,8 @@ const CaptionScreen: React.FC = ({route, navigation}) => { request.append('moment', title); request.append('user_id', userId); request.append('captions', JSON.stringify({image: caption})); - let response = await fetch(MOMENTS_UPLOAD_ENDPOINT, { + const token = await AsyncStorage.getItem('token'); + let response = await fetch(MOMENTS_ENDPOINT, { method: 'POST', headers: { 'Content-Type': 'multipart/form-data', @@ -81,6 +77,7 @@ const CaptionScreen: React.FC = ({route, navigation}) => { let data = await response.json(); if (statusCode === 200 && checkImageUploadStatus(data)) { Alert.alert('The picture was uploaded successfully!'); + updateMoments(true); navigation.navigate('Profile'); } else { Alert.alert('An error occured while uploading. Please try again!'); @@ -89,6 +86,7 @@ const CaptionScreen: React.FC = ({route, navigation}) => { Alert.alert('An error occured during authenticaion. Please login again!'); } }; + return ( diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx new file mode 100644 index 00000000..377898c1 --- /dev/null +++ b/src/screens/profile/IndividualMoment.tsx @@ -0,0 +1,162 @@ +import React, {useEffect, useState} from 'react'; +import {StyleSheet, View, Image} from 'react-native'; +import {Button} from 'react-native-elements'; +import {SCREEN_HEIGHT, SCREEN_WIDTH, StatusBarHeight} from '../../utils'; +import {UserType} from '../../types'; +import {RouteProp} from '@react-navigation/native'; +import {StackNavigationProp} from '@react-navigation/stack'; +import {CaptionScreenHeader} from '../../components/profile'; +import {AuthContext} from '../../routes/authentication'; +import {MomentStackParams} from 'src/routes/profile/MomentStack'; +import moment from 'moment'; +import Animated from 'react-native-reanimated'; + +const NO_USER: UserType = { + userId: '', + username: '', +}; + +/** + * Individual moment view opened when user clicks on a moment tile + */ +type IndividualMomentRouteProp = RouteProp< + MomentStackParams, + 'IndividualMoment' +>; +type IndividualMomentNavigationProp = StackNavigationProp< + MomentStackParams, + 'IndividualMoment' +>; +interface IndividualMomentProps { + route: IndividualMomentRouteProp; + navigation: IndividualMomentNavigationProp; +} + +const IndividualMoment: React.FC = ({ + route, + navigation, +}) => { + const { + moment_category, + path_hash, + date_time, + moment_id, + } = route.params.moment; + const { + user: {userId}, + } = React.useContext(AuthContext); + const [user, setUser] = useState(NO_USER); + const [caption, setCaption] = React.useState(route.params.moment.caption); + const [elapsedTime, setElapsedTime] = React.useState(); + const handleCaptionUpdate = (caption: string) => { + setCaption(caption); + }; + + useEffect(() => { + if (!userId) { + setUser(NO_USER); + } + const timePeriod = async () => { + const datePosted = moment(date_time); + const now = moment(); + var time = date_time; + var difference = now.diff(datePosted, 'seconds'); + + //Creating elapsedTime string to display to user + // 0 to less than 1 minute + if (difference < 60) { + time = difference + 'seconds'; + } + // 1 minute to less than 1 hour + else if (difference >= 60 && difference < 60 * 60) { + difference = now.diff(datePosted, 'minutes'); + time = difference + (difference === 1 ? 'minute' : 'minutes'); + } + //1 hour to less than 1 day + else if (difference >= 60 * 60 && difference < 24 * 60 * 60) { + difference = now.diff(datePosted, 'hours'); + time = difference + (difference === 1 ? 'hour' : 'hours'); + } + //1 day to less than 7 days + else if (difference >= 24 * 60 * 60 && difference < 7 * 24 * 60 * 60) { + difference = now.diff(datePosted, 'days'); + time = difference + (difference === 1 ? 'day' : 'days'); + } + + setElapsedTime(time); + }; + timePeriod(); + }, [date_time, userId]); + + return ( + + +