modified add and delete methods

Author: aayushis12

src/api/index.js

@@ -83,8 +83,6 @@ export const v3 = {
 	performDeleteRequest: async(url, accessToken) => {
 		const response = await v3.call(url, v3.parameters(accessToken, METHOD.DELETE));
 
-		console.log('from api', response);
-
 		return response.status;
 	},
 };
@@ -109,7 +107,7 @@ export const fetchAccessToken = async({ code, state }) => {
 	return response.data;
 };
 
-export const addComments = async(payload, id, accessToken) =>
+export const requestAddComment = async(accessToken, id, payload) =>
 	v3.getDataFromPostRequest(`/gists/${id}/comments`, accessToken, { body: payload });
 
 export const getAuthUser = async accessToken => await v3.getJson('/user', accessToken);
@@ -129,3 +127,5 @@ export const requestStarGist = async(accessToken, gistId) => v3.getDataFromPutRe
 export const checkStarredGistFavoriteValue = async(accessToken, gistId) => v3.getJson(`/gists/${gistId}/star`, accessToken);
 
 export const requestUnstarGist = async(accessToken, gistId) => v3.performDeleteRequest(`/gists/${gistId}/star`, accessToken);
+
+export const requestDeleteComment = async(accessToken, gistId, commentId) => v3.performDeleteRequest(`/gists/${gistId}/comments/${commentId}`, accessToken);

src/config/colors.js

@@ -32,4 +32,5 @@ export const colors = {
 	githubDark: '#1f2327',
 	alabaster: '#f7f7f7',
 	topicLightBlue: '#f1f8ff',
+	pictonBlue: '#33B5E5',
 };

src/gists/gistoptions.screen.js

@@ -2,18 +2,26 @@ import React from 'react';
 import { View, Text, TouchableOpacity } from 'react-native';
 import { colors } from './../config';
 
-const GistOptions = () => (
+const GistOptions = ({ onDelete, onCancel }) => (
 	<View style={{
-		flex: 1, backgroundColor: colors.white, borderWidth: 5, borderColor: 'red',
+		flex: 1,
+		backgroundColor: 'rgba(0, 0, 0, 0.4)',
+		justifyContent: 'center',
+		alignItems: 'center',
 	}}>
-		<TouchableOpacity style={{ padding: '2%' }}>
-			<Text>Delete</Text>
-		</TouchableOpacity>
-		<TouchableOpacity style={{ padding: '2%' }}>
-			<Text>Cancel</Text>
-		</TouchableOpacity>
+		<View style={{ backgroundColor: colors.white, width: '85%' }}>
+			<TouchableOpacity
+				style={{ padding: '4%', borderBottomWidth: 1, borderColor: colors.grey }}
+				onPress={onDelete}>
+				<Text style={{ color: colors.red, fontSize: 18, fontStyle: '600' }}>Delete</Text>
+			</TouchableOpacity>
+			<TouchableOpacity
+				style={{ padding: '4%', fontStyle: '600' }}
+				onPress={onCancel}>
+				<Text style={{ color: colors.pictonBlue, fontSize: 18 }}>Cancel</Text>
+			</TouchableOpacity>
+		</View>
 	</View>
-
 );
 
 export default GistOptions;

src/gists/gists.actiontype.js

@@ -7,3 +7,5 @@ export const publicGistsFetch = createSagaActionSet('FETCH_PUBLIC_GISTS');
 export const starGist = createSagaActionSet('STAR_GIST');
 export const fetchInitialFavoriteValue = createSagaActionSet('INITIAL_FAVORITE_VALUE');
 export const UnstarGist = createSagaActionSet('UNSTAR_GIST');
+export const deleteComment = createSagaActionSet('DELETE_COMMENT');
+export const addComment = createSagaActionSet('ADD_COMMENT');

src/gists/gists.saga.js

@@ -8,6 +8,8 @@ import {
 	starGist,
 	fetchInitialFavoriteValue,
 	UnstarGist,
+	deleteComment,
+	addComment,
 } from './gists.actiontype';
 import {
 	requestUserGists,
@@ -17,10 +19,13 @@ import {
 	requestStarGist,
 	checkStarredGistFavoriteValue,
 	requestUnstarGist,
+	requestDeleteComment,
+	requestAddComment,
 } from '../api';
 
 const tokenSelector = state => state.auth.access_token;
 const userNameSelector = state => state.loggedInUser.userName;
+const commentsSelector = state => state.gistComments.comments;
 
 function* fetchUserGists() {
 	try {
@@ -75,16 +80,13 @@ function* fetchPublicGists() {
 
 function* fetchCommentsForGist(action) {
 	try {
-		// const hasMoreComments = yield select(state => state.gistComments.hasMoreComments);
-
-		// if (hasMoreComments) {
 		yield put(fetchGistComments.progress());
 		const token = yield select(tokenSelector);
 		const { data } = yield call(requestGistComments, token, action.payload);
 
 		yield put(fetchGistComments.success({ data }));
-		// }
 	} catch (err) {
+		console.log(err);
 		yield put(publicGistsFetch.error(err));
 	}
 }
@@ -96,8 +98,6 @@ function* starAGist(action) {
 
 		if (status === 204) {
 			yield call(fetchStarredGists, { shouldRefresh: true });
-
-			return;
 		}
 	} catch (err) {
 		console.log(err);
@@ -112,8 +112,6 @@ function* getInitialFavoriteValue(action) {
 		yield put(fetchInitialFavoriteValue.success({ value: true }));
 	} catch (err) {
 		yield put(fetchInitialFavoriteValue.success({ value: false }));
-
-		return null;
 	}
 }
 
@@ -131,6 +129,41 @@ function* unstarAGist(action) {
 	}
 }
 
+function* deleteAComment(action) {
+	try {
+		const token = yield select(tokenSelector);
+		const { gistId, commentId } = action.payload;
+		const status = yield call(requestDeleteComment, token, gistId, commentId);
+
+		if (status === 204) {
+			const comments = yield select(commentsSelector);
+			const data = comments.filter(comment => comment.id !== commentId);
+
+			yield put(fetchGistComments.success({ data }));
+		}
+	} catch (err) {
+		console.log(err);
+	}
+}
+
+function* addAComment(action) {
+	try {
+		const token = yield select(tokenSelector);
+		const { gistId, comment } = action.payload;
+
+		const data = yield call(requestAddComment, token, gistId, comment);
+
+		if (data) {
+			const comments = yield select(commentsSelector);
+			const newData = [...comments, data];
+
+			yield put(fetchGistComments.success({ data: newData }));
+		}
+	} catch (err) {
+		console.log(err);
+	}
+}
+
 export default function* gistsSaga() {
 	yield all([
 		takeLatest(userGistsFetch.actionType, fetchUserGists),
@@ -140,5 +173,7 @@ export default function* gistsSaga() {
 		takeLatest(starGist.actionType, starAGist),
 		takeLatest(fetchInitialFavoriteValue.actionType, getInitialFavoriteValue),
 		takeLatest(UnstarGist.actionType, unstarAGist),
+		takeLatest(deleteComment.actionType, deleteAComment),
+		takeLatest(addComment.actionType, addAComment),
 	]);
 }

src/gists/screens/gistComments.screen.js

@@ -7,14 +7,17 @@ import {
 	Keyboard,
 	Text,
 	ActivityIndicator,
+	TouchableOpacity,
+	Modal,
 } from 'react-native';
 import styled from 'styled-components';
 import CardView from 'react-native-cardview';
 import TimeAgo from 'time-ago';
-import { fetchGistComments } from '../gists.actiontype';
+import { fetchGistComments, deleteComment, addComment } from '../gists.actiontype';
 import ListEmptyComponent from './components/EmptyListComponent';
-import { addComments } from '../../api';
+// import { addComments } from '../../api';
 import { colors } from '../../config';
+import GistOptions from '../gistoptions.screen';
 
 const CardContainer = styled(CardView)`
 	padding: 3%;
@@ -66,7 +69,7 @@ const InputContainer = styled.View`
 const Button = styled.TouchableOpacity`
 	padding: 3%;
 	align-self: center;
-	background-color: #33B5E5;
+	background-color: ${colors.pictonBlue};
 `;
 
 const ActivityIndicatorContainer = styled.View`
@@ -80,32 +83,48 @@ class GistCommentsScreen extends React.Component {
 		super();
 		this.state = {
 			comment: '',
+			isVisible: false,
+			id: null,
 		};
-		this.timeout = null;
 	}
 	componentDidMount() {
 		this.fetchComments();
 	}
 
 	onPressItem = () => {
 		Keyboard.dismiss();
+		this.setState({ comment: '' });
 		const { id } = this.props.navigation.getParam('gistData');
 
-		addComments(this.state.comment, id, this.props.accessToken)
-			.then(() => {
-				this.setState({ comment: '' });
-				this.fetchComments();
-			})
-			.catch(console.log);
+		this.props.addThisComment({ gistId: id, comment: this.state.comment });
+	}
+
+	onCancel = () => {
+		this.setState({ isVisible: false });
+	}
+
+	openGistOptions = id => {
+		this.setState({
+			isVisible: true,
+			id,
+		});
 	}
 
 	fetchComments = () => {
 		this.props.fetchComments(this.props.navigation.getParam('gistData').id);
 	}
 
+	deleteComment = () => {
+		this.onCancel();
+		this.props.deleteThisComment({
+			gistId: this.props.navigation.getParam('gistData').id,
+			commentId: this.state.id,
+		});
+	}
+
   renderItem = ({ item }) => {
   	return (
-  		<View style={{ flex: 1 }}>
+  		<TouchableOpacity style={{ flex: 1 }} onLongPress={() => this.openGistOptions(item.id)}>
   			<CardContainer
   				cardElevation={2}
   				cardMaxElevation={2}
@@ -120,7 +139,7 @@ class GistCommentsScreen extends React.Component {
   				</UserProfile>
   				<Comment>{item.body}</Comment>
   			</CardContainer>
-  		</View>
+  		</TouchableOpacity>
   	);
   }
 
@@ -160,12 +179,20 @@ class GistCommentsScreen extends React.Component {
   					<Text style={{ color: colors.white, fontWeight: '600' }}>Submit</Text>
   				</Button>
   			</InputContainer>
+  			<Modal
+  				onRequestClose={() => {}}
+  				visible={this.state.isVisible}
+				 	transparent>
+  				<GistOptions onDelete={this.deleteComment} onCancel={this.onCancel} />
+  			</Modal>
   		</React.Fragment>
   	);
   }
 }
 const mapDispatchToProps = dispatch => ({
 	fetchComments: id => dispatch(fetchGistComments.action(id)),
+	deleteThisComment: data => dispatch(deleteComment.action(data)),
+	addThisComment: data => dispatch(addComment.action(data)),
 });
 const mapStateToProps = ({ gistComments, auth }) => ({
 	comments: gistComments.comments,