From d0237cbb61e5c4d77c7b0cefc50891639646ee91 Mon Sep 17 00:00:00 2001 From: Ashm Walia <40498934+ashmgarv@users.noreply.github.com> Date: Thu, 22 Oct 2020 15:34:21 -0700 Subject: [TMA 236] Comments PR (#64) * Added comments count and retrieve comments * Working draft * The one before cleanup * Finally * Added time icon and major refactoring * Small fix for social media taggs * Addressed review comments --- src/screens/profile/IndividualMoment.tsx | 63 +++++++------ src/screens/profile/MomentCommentsScreen.tsx | 133 +++++++++++++++++++++++++++ src/screens/profile/SocialMediaTaggs.tsx | 3 +- src/screens/profile/index.ts | 1 + 4 files changed, 169 insertions(+), 31 deletions(-) create mode 100644 src/screens/profile/MomentCommentsScreen.tsx (limited to 'src/screens') diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx index 639c0965..91f76f9b 100644 --- a/src/screens/profile/IndividualMoment.tsx +++ b/src/screens/profile/IndividualMoment.tsx @@ -1,15 +1,22 @@ 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 { + SCREEN_HEIGHT, + SCREEN_WIDTH, + StatusBarHeight, + getTimePosted, +} from '../../utils'; +import {UserType, CommentType} from '../../types'; import {RouteProp} from '@react-navigation/native'; import {StackNavigationProp} from '@react-navigation/stack'; -import {CaptionScreenHeader} from '../../components/profile'; +import {CaptionScreenHeader} from '../../components'; import {AuthContext} from '../../routes/authentication'; import {ProfileStackParams} from 'src/routes/profile/ProfileStack'; -import moment from 'moment'; import Animated from 'react-native-reanimated'; +import {CommentsCount} from '../../components'; +import AsyncStorage from '@react-native-community/async-storage'; +import {getMomentCommentsCount} from '../../services'; const NO_USER: UserType = { userId: '', @@ -45,10 +52,13 @@ const IndividualMoment: React.FC = ({ const {isProfileView} = route.params; const { user: {userId}, + logout, } = React.useContext(AuthContext); const [user, setUser] = useState(NO_USER); const [caption, setCaption] = React.useState(route.params.moment.caption); const [elapsedTime, setElapsedTime] = React.useState(); + const [comments_count, setCommentsCount] = React.useState(''); + const handleCaptionUpdate = (caption: string) => { setCaption(caption); }; @@ -58,35 +68,20 @@ const IndividualMoment: React.FC = ({ setUser(NO_USER); } const timePeriod = async () => { - const datePosted = moment(date_time); - const now = moment(); - var time = date_time; - var difference = now.diff(datePosted, 'seconds'); + setElapsedTime(getTimePosted(date_time)); + }; - //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'); + const loadComments = async () => { + const token = await AsyncStorage.getItem('token'); + if (!token) { + logout(); + return; } - //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); + getMomentCommentsCount(moment_id, setCommentsCount, token); }; + timePeriod(); + loadComments(); }, [date_time, userId]); return ( @@ -109,10 +104,16 @@ const IndividualMoment: React.FC = ({ source={{uri: path_hash}} resizeMode={'cover'} /> + - {caption} + {elapsedTime} + {caption} ); }; @@ -155,6 +156,8 @@ const styles = StyleSheet.create({ position: 'relative', paddingBottom: '1%', paddingTop: '1%', + marginLeft: '5%', + marginRight: '5%', color: '#ffffff', fontWeight: 'bold', }, diff --git a/src/screens/profile/MomentCommentsScreen.tsx b/src/screens/profile/MomentCommentsScreen.tsx new file mode 100644 index 00000000..30dde8b4 --- /dev/null +++ b/src/screens/profile/MomentCommentsScreen.tsx @@ -0,0 +1,133 @@ +import * as React from 'react'; +import {RouteProp, useNavigation} from '@react-navigation/native'; +import {ProfileStackParams} from '../../routes/profile'; +import {CenteredView, CommentTile, OverlayView} from '../../components'; +import {CommentType} from '../../types'; +import {ScrollView, StyleSheet, Text, View} from 'react-native'; +import {SCREEN_WIDTH} from '../../utils/screenDimensions'; +import {Button} from 'react-native-elements'; +import {AddComment} from '../../components/'; +import {useEffect} from 'react'; +import AsyncStorage from '@react-native-community/async-storage'; +import {AuthContext} from '../../routes/authentication'; +import {getMomentComments} from '../..//services'; + +/** + * Comments Screen for an image uploaded + * Displays all comments for a particular moment uploaded by the user followed by a text area to add the comment. + * Comment is posted when return is pressed on the keypad. + */ + +type MomentCommentsScreenRouteProps = RouteProp< + ProfileStackParams, + 'MomentCommentsScreen' +>; + +interface MomentCommentsScreenProps { + route: MomentCommentsScreenRouteProps; +} + +const MomentCommentsScreen: React.FC = ({route}) => { + const navigation = useNavigation(); + const {isProfileView, moment_id} = route.params; + const [commentsList, setCommentsList] = React.useState([]); + const [newCommentsAvailable, setNewCommentsAvailable] = React.useState(true); + const {logout} = React.useContext(AuthContext); + + useEffect(() => { + const loadComments = async () => { + const token = await AsyncStorage.getItem('token'); + if (!token) { + logout(); + return; + } + getMomentComments(moment_id, setCommentsList, token); + setNewCommentsAvailable(false); + }; + if (newCommentsAvailable) { + loadComments(); + } + }, [newCommentsAvailable]); + + return ( + + + +