From 5f2159489e75a05dbe6bede792cb8a97971b824a Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 22 Jan 2021 16:31:35 -0500 Subject: finished styling the input box --- src/assets/icons/up_arrow.svg | 1 + src/components/comments/AddComment.tsx | 153 +++++++++++++++------------ src/screens/profile/MomentCommentsScreen.tsx | 46 ++++---- src/services/MomentServices.ts | 7 +- 4 files changed, 114 insertions(+), 93 deletions(-) create mode 100644 src/assets/icons/up_arrow.svg (limited to 'src') diff --git a/src/assets/icons/up_arrow.svg b/src/assets/icons/up_arrow.svg new file mode 100644 index 00000000..fc92b551 --- /dev/null +++ b/src/assets/icons/up_arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx index c6c816b9..24b3473c 100644 --- a/src/components/comments/AddComment.tsx +++ b/src/components/comments/AddComment.tsx @@ -1,16 +1,17 @@ -import * as React from 'react'; +import React, {useEffect} from 'react'; import { Image, + Keyboard, KeyboardAvoidingView, Platform, StyleSheet, View, } from 'react-native'; -import AsyncStorage from '@react-native-community/async-storage'; -import {TaggBigInput} from '../onboarding'; +import {TextInput, TouchableOpacity} from 'react-native-gesture-handler'; +import {useSelector} from 'react-redux'; +import UpArrowIcon from '../../assets/icons/up_arrow.svg'; +import {TAGG_LIGHT_BLUE} from '../../constants'; import {postMomentComment} from '../../services'; -import {logout} from '../../store/actions'; -import {useSelector, useDispatch} from 'react-redux'; import {RootState} from '../../store/rootreducer'; import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; @@ -30,98 +31,114 @@ const AddComment: React.FC = ({ moment_id, }) => { const [comment, setComment] = React.useState(''); + const [keyboardVisible, setKeyboardVisible] = React.useState(false); - const dispatch = useDispatch(); const { avatar, user: {userId}, } = useSelector((state: RootState) => state.user); - const handleCommentUpdate = (comment: string) => { - setComment(comment); - }; - const postComment = async () => { - try { - const token = await AsyncStorage.getItem('token'); - if (!token) { - dispatch(logout()); - return; - } - const postedComment = await postMomentComment( - userId, - comment, - moment_id, - token, - ); - - if (postedComment) { - //Set the current comment to en empty string if the comment was posted successfully. - handleCommentUpdate(''); + const postedComment = await postMomentComment( + userId, + comment.trim(), + moment_id, + ); - //Indicate the MomentCommentsScreen that it needs to download the new comments again - setNewCommentsAvailable(true); - } - } catch (err) { - console.log('Error while posting comment!'); + if (postedComment) { + setComment(''); + setNewCommentsAvailable(true); } }; + useEffect(() => { + const showKeyboard = () => setKeyboardVisible(true); + Keyboard.addListener('keyboardWillShow', showKeyboard); + return () => Keyboard.removeListener('keyboardWillShow', showKeyboard); + }, []); + + useEffect(() => { + const hideKeyboard = () => setKeyboardVisible(false); + Keyboard.addListener('keyboardWillHide', hideKeyboard); + return () => Keyboard.removeListener('keyboardWillHide', hideKeyboard); + }, []); + return ( - - - - + keyboardVerticalOffset={SCREEN_HEIGHT * 0.1}> + + + + + + + + + + ); }; const styles = StyleSheet.create({ container: { - flexDirection: 'row', - justifyContent: 'flex-start', + backgroundColor: '#f7f7f7', + alignItems: 'center', width: SCREEN_WIDTH, - marginTop: '5%', }, textContainer: { - width: '100%', - alignItems: 'flex-start', - marginVertical: 11, + width: '95%', + flexDirection: 'row', + backgroundColor: '#e8e8e8', + alignItems: 'center', + justifyContent: 'space-between', + margin: '3%', + borderRadius: 25, }, text: { - backgroundColor: 'white', - width: '70%', - paddingLeft: '2%', - paddingRight: '2%', - paddingBottom: '1%', - paddingTop: '1%', - height: 60, + flex: 1, + padding: '1%', + marginHorizontal: '1%', }, avatar: { - height: 40, - width: 40, + height: 35, + width: 35, borderRadius: 30, marginRight: 10, - marginLeft: 20, + marginLeft: '3%', + marginVertical: '2%', + alignSelf: 'flex-end', + }, + submitButton: { + height: 35, + width: 35, + backgroundColor: TAGG_LIGHT_BLUE, + borderRadius: 999, + justifyContent: 'center', + alignItems: 'center', + marginRight: '3%', + marginVertical: '2%', + alignSelf: 'flex-end', }, }); diff --git a/src/screens/profile/MomentCommentsScreen.tsx b/src/screens/profile/MomentCommentsScreen.tsx index b2611b62..6434477e 100644 --- a/src/screens/profile/MomentCommentsScreen.tsx +++ b/src/screens/profile/MomentCommentsScreen.tsx @@ -1,19 +1,21 @@ -import * as React from 'react'; import {RouteProp, useNavigation} from '@react-navigation/native'; -import {ProfileStackParams} from '../../routes/main'; +import React, {useEffect, useRef} from 'react'; +import { + ScrollView, + StyleSheet, + Text, + TouchableOpacity, + View, +} from 'react-native'; +import {SafeAreaView} from 'react-native-safe-area-context'; +import {useDispatch} from 'react-redux'; +import {getMomentComments} from '../..//services'; +import BackIcon from '../../assets/icons/back-arrow.svg'; import {CommentTile, TabsGradient} from '../../components'; +import {AddComment} from '../../components/'; +import {ProfileStackParams} from '../../routes/main'; import {CommentType} from '../../types'; -import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'; import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils/screenDimensions'; -import {AddComment} from '../../components/'; -import {useEffect} from 'react'; -import AsyncStorage from '@react-native-community/async-storage'; -import {getMomentComments} from '../..//services'; -import {useDispatch} from 'react-redux'; -import {logout} from '../../store/actions'; -import {SafeAreaView} from 'react-native-safe-area-context'; -import Animated from 'react-native-reanimated'; -import BackIcon from '../../assets/icons/back-arrow.svg'; /** * Comments Screen for an image uploaded @@ -36,19 +38,20 @@ const MomentCommentsScreen: React.FC = ({route}) => { const [commentsList, setCommentsList] = React.useState([]); const [newCommentsAvailable, setNewCommentsAvailable] = React.useState(true); const dispatch = useDispatch(); + const ref = useRef(null); useEffect(() => { const loadComments = async () => { - const token = await AsyncStorage.getItem('token'); - if (!token) { - dispatch(logout()); - return; - } - getMomentComments(moment_id, setCommentsList, token); + getMomentComments(moment_id, setCommentsList); setNewCommentsAvailable(false); }; if (newCommentsAvailable) { loadComments(); + setTimeout(() => { + ref.current?.scrollToEnd({ + animated: true, + }); + }, 500); } }, [dispatch, moment_id, newCommentsAvailable]); @@ -68,7 +71,8 @@ const MomentCommentsScreen: React.FC = ({route}) => { - {commentsList && @@ -79,7 +83,7 @@ const MomentCommentsScreen: React.FC = ({route}) => { screenType={screenType} /> ))} - + { try { + const token = await AsyncStorage.getItem('token'); const response = await fetch(COMMENTS_ENDPOINT + '?moment_id=' + momentId, { method: 'GET', headers: { @@ -35,14 +35,13 @@ export const getMomentComments = async ( } }; -//Post a comment on a moment export const postMomentComment = async ( commenter: string, comment: string, momentId: string, - token: string, ) => { try { + const token = await AsyncStorage.getItem('token'); const request = new FormData(); request.append('moment_id', momentId); request.append('commenter', commenter); @@ -60,7 +59,7 @@ export const postMomentComment = async ( return await response.json(); } catch (error) { Alert.alert(ERROR_FAILED_TO_COMMENT); - return {}; + return undefined; } }; -- cgit v1.2.3-70-g09d2