From 755f4f540d3e759ff9ad3bc35c64b6f7fc83998b Mon Sep 17 00:00:00 2001 From: Ashm Walia Date: Mon, 25 Jan 2021 18:00:44 -0800 Subject: Add provision to show and hide replies --- src/assets/icons/back-arrow-colored.svg | 1 + src/components/comments/AddComment.tsx | 4 +- src/components/comments/CommentTile.tsx | 122 +++++++++++++++++++++----- src/components/comments/CommentsContainer.tsx | 83 ++++++++++++++++++ src/constants/constants.ts | 1 + src/screens/profile/MomentCommentsScreen.tsx | 67 ++++---------- src/services/MomentServices.ts | 9 +- src/types/types.ts | 2 + 8 files changed, 215 insertions(+), 74 deletions(-) create mode 100644 src/assets/icons/back-arrow-colored.svg create mode 100644 src/components/comments/CommentsContainer.tsx (limited to 'src') diff --git a/src/assets/icons/back-arrow-colored.svg b/src/assets/icons/back-arrow-colored.svg new file mode 100644 index 00000000..123426d7 --- /dev/null +++ b/src/assets/icons/back-arrow-colored.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 24b3473c..7b04085d 100644 --- a/src/components/comments/AddComment.tsx +++ b/src/components/comments/AddComment.tsx @@ -24,11 +24,13 @@ import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; export interface AddCommentProps { setNewCommentsAvailable: Function; moment_id: string; + placeholderText: string; } const AddComment: React.FC = ({ setNewCommentsAvailable, moment_id, + placeholderText, }) => { const [comment, setComment] = React.useState(''); const [keyboardVisible, setKeyboardVisible] = React.useState(false); @@ -83,7 +85,7 @@ const AddComment: React.FC = ({ /> = ({ comment_object, screenType, + typeOfComment, }) => { const timePosted = getTimePosted(comment_object.date_created); + const [showReplies, setShowReplies] = useState(false); + + const isThread = typeOfComment === 'Thread'; + return ( - - - - {comment_object.comment} - - - {' ' + timePosted} + <> + + + + {comment_object.comment} + + + {' ' + timePosted} + {typeOfComment === 'Comment' && ( + <> + { + setShowReplies(!showReplies); + }}> + + + {showReplies ? 'Hide' : 'Replies'} + + + + + + )} + - + {/* {showReplies && ( + + { + console.log(value); + }} + newCommentsAvailable={true} + typeOfComment={'Thread'} + /> + + )} */} + ); }; @@ -61,6 +115,7 @@ const styles = StyleSheet.create({ }, date_time: { color: 'gray', + fontSize: normalize(12), }, clockIcon: { width: 12, @@ -71,6 +126,33 @@ const styles = StyleSheet.create({ flexDirection: 'row', marginBottom: '3%', }, + + repliesTextAndIconContainer: { + marginLeft: SCREEN_WIDTH * 0.37, + flexDirection: 'row', + }, + + repliesText: { + color: COMMENT_REPLIES, + fontWeight: '500', + fontSize: normalize(12), + marginRight: '3%', + }, + + repliesBody: { + width: SCREEN_WIDTH, + height: SCREEN_HEIGHT * 0.8, + }, + + repliesDownArrow: { + transform: [{rotate: '270deg'}], + marginTop: '7%', + }, + + repliesUpArrow: { + transform: [{rotate: '90deg'}], + marginTop: '7%', + }, }); export default CommentTile; diff --git a/src/components/comments/CommentsContainer.tsx b/src/components/comments/CommentsContainer.tsx new file mode 100644 index 00000000..81ae8e1e --- /dev/null +++ b/src/components/comments/CommentsContainer.tsx @@ -0,0 +1,83 @@ +import React, {useRef, useEffect, useState} from 'react'; +import {StyleSheet} from 'react-native'; +import {ScrollView} from 'react-native-gesture-handler'; +import {useDispatch} from 'react-redux'; +import {CommentTile} from '.'; +import {getMomentComments} from '../../services'; +import {CommentType, ScreenType, TypeOfComment} from '../../types'; +export type CommentsContainerProps = { + screenType: ScreenType; + moment_id: string; + setCommentsLength?: (count: number) => void; + newCommentsAvailable: boolean; + setNewCommentsAvailable: (value: boolean) => void; + typeOfComment: TypeOfComment; +}; + +const CommentsContainer: React.FC = ({ + screenType, + moment_id, + setCommentsLength, + newCommentsAvailable, + setNewCommentsAvailable, + typeOfComment, +}) => { + const [commentsList, setCommentsList] = useState([]); + const dispatch = useDispatch(); + const ref = useRef(null); + + useEffect(() => { + const loadComments = async () => { + console.log(moment_id); + const comments = await getMomentComments(moment_id); + setCommentsList(comments); + if (setCommentsLength) { + setCommentsLength(comments.length); + } + console.log(comments); + setNewCommentsAvailable(false); + }; + if (newCommentsAvailable) { + loadComments(); + setTimeout(() => { + ref.current?.scrollToEnd({ + animated: true, + }); + }, 500); + } + }, [ + dispatch, + moment_id, + newCommentsAvailable, + setNewCommentsAvailable, + setCommentsLength, + ]); + + return ( + + {commentsList && + commentsList.map((comment: CommentType) => ( + + ))} + + ); +}; + +const styles = StyleSheet.create({ + scrollView: { + paddingHorizontal: 20, + }, + scrollViewContent: { + justifyContent: 'center', + }, +}); + +export default CommentsContainer; diff --git a/src/constants/constants.ts b/src/constants/constants.ts index ad43c337..6a94f51f 100644 --- a/src/constants/constants.ts +++ b/src/constants/constants.ts @@ -63,6 +63,7 @@ export const YOUTUBE_FONT_COLOR: string = '#FCA4A4'; export const TAGG_DARK_BLUE = '#4E699C'; export const TAGG_LIGHT_BLUE: string = '#698DD3'; export const TAGG_LIGHT_PURPLE = '#F4DDFF'; +export const COMMENT_REPLIES = '#698DD3'; export const TAGGS_GRADIENT = { start: '#9F00FF', diff --git a/src/screens/profile/MomentCommentsScreen.tsx b/src/screens/profile/MomentCommentsScreen.tsx index 2bceafc9..9fd5aaa0 100644 --- a/src/screens/profile/MomentCommentsScreen.tsx +++ b/src/screens/profile/MomentCommentsScreen.tsx @@ -1,20 +1,12 @@ import {RouteProp, useNavigation} from '@react-navigation/native'; -import React, {useEffect, useRef} from 'react'; -import { - ScrollView, - StyleSheet, - Text, - TouchableOpacity, - View, -} from 'react-native'; +import React, {useState} from 'react'; +import {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 {TabsGradient} from '../../components'; import {AddComment} from '../../components/'; -import {ProfileStackParams} from '../../routes/main'; -import {CommentType} from '../../types'; +import CommentsContainer from '../../components/comments/CommentsContainer'; +import {MainStackParams} from '../../routes/main'; import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; /** @@ -24,7 +16,7 @@ import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; */ type MomentCommentsScreenRouteProps = RouteProp< - ProfileStackParams, + MainStackParams, 'MomentCommentsScreen' >; @@ -35,25 +27,8 @@ interface MomentCommentsScreenProps { const MomentCommentsScreen: React.FC = ({route}) => { const navigation = useNavigation(); const {moment_id, screenType} = route.params; - const [commentsList, setCommentsList] = React.useState([]); - const [newCommentsAvailable, setNewCommentsAvailable] = React.useState(true); - const dispatch = useDispatch(); - const ref = useRef(null); - - useEffect(() => { - const loadComments = async () => { - getMomentComments(moment_id, setCommentsList); - setNewCommentsAvailable(false); - }; - if (newCommentsAvailable) { - loadComments(); - setTimeout(() => { - ref.current?.scrollToEnd({ - animated: true, - }); - }, 500); - } - }, [dispatch, moment_id, newCommentsAvailable]); + const [newCommentsAvailable, setNewCommentsAvailable] = useState(true); + const [commentsLength, setCommentsLength] = useState(0); return ( @@ -66,25 +41,19 @@ const MomentCommentsScreen: React.FC = ({route}) => { }}> - - {commentsList.length + ' Comments'} - + {commentsLength + ' Comments'} - - {commentsList && - commentsList.map((comment: CommentType) => ( - - ))} - + diff --git a/src/services/MomentServices.ts b/src/services/MomentServices.ts index 7bad6d4c..77740e7e 100644 --- a/src/services/MomentServices.ts +++ b/src/services/MomentServices.ts @@ -1,3 +1,4 @@ +import {CommentType} from './../types/types'; import AsyncStorage from '@react-native-community/async-storage'; import {Alert} from 'react-native'; import RNFetchBlob from 'rn-fetch-blob'; @@ -13,8 +14,8 @@ import {checkImageUploadStatus} from '../utils'; //Get all comments for a moment export const getMomentComments = async ( momentId: string, - callback: Function, -) => { +): Promise => { + let comments: CommentType[] = []; try { const token = await AsyncStorage.getItem('token'); const response = await fetch(COMMENTS_ENDPOINT + '?moment_id=' + momentId, { @@ -25,14 +26,14 @@ export const getMomentComments = async ( }); const status = response.status; if (status === 200) { - const comments = await response.json(); - callback(comments); + comments = await response.json(); } else { console.log('Could not load comments'); } } catch (error) { console.log('Could not load comments', error); } + return comments; }; export const postMomentComment = async ( diff --git a/src/types/types.ts b/src/types/types.ts index d9d0b56b..b29ecbd9 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -174,3 +174,5 @@ export type NotificationType = { timestamp: string; unread: boolean; }; + +export type TypeOfComment = 'Comment' | 'Thread'; -- cgit v1.2.3-70-g09d2