till adding comments

Author: aayushis12

src/api/index.js

@@ -93,6 +93,24 @@ export const fetchAccessToken = async({ code, state }) => {
 	return response.data;
 };
 
+export const addComments = async(payload, id, accessToken) => {
+	console.log('here------------------------', payload, id, accessToken);
+	const ADD_COMMENTS_URL = `https://api.github.com/gists/${id}/comments`;
+
+	const response = await axios.post(ADD_COMMENTS_URL, { body: payload }, {
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			Authorization: `token ${accessToken}`,
+		},
+	})
+		.then(data => data);
+
+	console.log('oooooooooooooooooooo', response);
+
+	return response;
+};
+
 export const getAuthUser = async accessToken => await v3.getJson('/user', accessToken);
 
 export const requestUserGists = async(accessToken, userName, pageNo) => await v3.getJsonWithHeader(`/users/${userName}/gists?page=${pageNo}`, accessToken);

src/assets/default_user_image.png

@@ -13,7 +13,6 @@ function* loginAndFetchUser() {
 			yield put(logIn.progress());
 			const loginResponse = yield call(fetchAccessToken, payload);
 
-			console.log('pppppppppppp', loginResponse);
 			yield put(logIn.success(loginResponse));
 			yield put(fetchAuthUser.action());
 		} catch (error) {

src/auth/auth.saga.js

@@ -40,12 +40,15 @@ const clearCache = () => ({
 
 const setGistComments = (state, { payload }) => {
 	console.log('---------------------', payload.data);
+	const { data, error } = payload;
+	//	const initialComments = payload.data.slice(key - 6, key);
 
 	return {
 		...state,
 		inProgress: false,
-		error: payload.error,
-		comments: payload.data,
+		error,
+		comments: data, // initialComments,
+	//	hasMoreComments: key !== data.length,
 	};
 };
 
@@ -81,7 +84,7 @@ export default {
 			[fetchGistComments.errorType]: setError,
 		},
 		{
-			comments: [], inProgress: false,
+			comments: [], inProgress: false, // hasMoreComments: true,
 		}
 	),
 };

src/gists/gists.reducer.js

@@ -58,13 +58,16 @@ function* fetchPublicGists() {
 }
 
 function* fetchCommentsForGist(action) {
-	console.log('here');
 	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) {
 		yield put(publicGistsFetch.error(err));
 	}

src/gists/gists.saga.js

@@ -5,6 +5,7 @@ import { Text, Image } from 'react-native';
 import moment from 'moment';
 import fileSize from 'filesize';
 import { colors, normalizeFont } from '../../../config';
+import defaultUserImage from '~/src/assets/default_user_image.png';
 
 const Container = styled.View`
 	display: flex;
@@ -46,7 +47,7 @@ export default GistDetailsHeader = ({
 }) => {
 	return (
 		<Container>
-			<Avatar source={{ uri: userImage }} />
+			<Avatar source={userImage ? { uri: userImage } : defaultUserImage} />
 			<DetailsContainer>
 				<Title numberOfLines={2}>
 					{userName}

src/gists/screens/components/GistDetailHeader.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { FlatList } from 'react-native';
+import { FlatList, TextInput, Button, View, KeyboardAvoidingView } 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 ListEmptyComponent from './components/EmptyListComponent';
+import { addComments } from '~/src/api';
 
 const CardContainer = styled(CardView)`
 	padding: 3%;
@@ -44,12 +45,33 @@ const CommentDate = styled.Text`
 	font-size: 14;
 `;
 
+// const CommentBox = styled.TextInput`
+// `;
+
 class GistCommentsScreen extends React.Component {
+	state = {
+		comment: '',
+	}
 	componentDidMount() {
+		console.log('id---------------------------', this.props.navigation.getParam('gistData').id);
 		this.props.fetchComments(this.props.navigation.getParam('gistData').id);
 	}
 
-  renderItem = ({ item }) => (
+	// onEndReachedThreshold = () => {
+	// 	this.setState({
+	// 		i: this.state.i + 6,
+	// 	}, () => {
+	// 		this.props.fetchComments(this.props.navigation.getParam('gistData').id, this.state.i);
+	// 	});
+	// }
+
+
+	onPressItem = () => {
+		addComments(this.state.comment, this.props.navigation.getParam('gistData').id, this.props.accessToken);
+	}
+
+  renderItem = ({ item }) => {
+  	return (
   	<CardContainer
   		cardElevation={2}
   		cardMaxElevation={2}
@@ -64,25 +86,51 @@ class GistCommentsScreen extends React.Component {
   		</UserProfile>
   	  <Comment>{item.body}</Comment>
   	</CardContainer>
-  )
+  	);
+  }
 
   render() {
+  	const { comments } = this.props;
+
   	return (
-  		<FlatList
-  			keyExtractor={item => item.id}
-  			data={this.props.comments}
-  			renderItem={this.renderItem}
-  			ListEmptyComponent={() => <ListEmptyComponent message="No comments found" />}
-  		/>
+  		<React.Fragment>
+  			<FlatList
+  				keyExtractor={item => item.id}
+  				data={this.props.comments}
+  				renderItem={this.renderItem}
+  				ListEmptyComponent={() => <ListEmptyComponent message="No comments found" />}
+  				// onEndReachedThreshold={0.2}
+  				// onEndReachedThreshold={this.onEndReachedThreshold}
+  			/>
+  			<View style={{
+  				flex: 1,
+  				flexDirection: 'row',
+  				alignItems: 'flex-end',
+  				marginHorizontal: 2,
+  				borderColor: 'red',
+  				borderRadius: 5,
+  			}}>
+  			<TextInput
+  				style={{
+  					width: '88%',
+  				}}
+  					placeholder="Add comment here"
+  					value={this.state.comment}
+  					onChangeText={comment => this.setState({ comment })}
+  			/>
+  			<Button title="Add" onPress={this.onPressItem} />
+  			</View>
+  		</React.Fragment>
   	);
   }
 }
-
+// style={{ position: 'absolute', bottom: 0, right: 0 }} />
 const mapDispatchToProps = dispatch => ({
 	fetchComments: id => dispatch(fetchGistComments.action(id)),
 });
-const mapStateToProps = ({ gistComments }) => ({
+const mapStateToProps = ({ gistComments, auth }) => ({
 	comments: gistComments.comments,
+	accessToken: auth.access_token,
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(GistCommentsScreen);

src/gists/screens/gistComments.screen.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { View, FlatList, Text } from 'react-native';
-import pick from 'lodash/pick';
-import forOwn from 'lodash/forOwn';
+import isEmpty from 'lodash/isEmpty';
 import styled from 'styled-components';
 import Header from './components/GistDetailHeader';
 import Toolbar from './components/Toolbar';
@@ -64,14 +63,14 @@ export default class GistDetails extends React.Component {
 	render() {
 		const { navigation } = this.props;
 		const gistData = navigation.getParam('gistData', {});
-		const { owner } = gistData;
+		const { owner = {} } = gistData;
 		const { totalFileSize } = processFiles(gistData.files);
 
 		return (
 			<View>
 				<Header
-					userImage={owner.avatar_url}
-					userName={owner.login}
+					userImage={!isEmpty(owner) && owner.avatar_url}
+					userName={isEmpty(owner) ? 'Anonymous' : owner.login}
 					description={gistData.description}
 					createdAt={gistData.created_At}
 					gistSize={totalFileSize} />

src/gists/screens/gistContents.screen.js renamed to src/gists/screens/gistContentList.screen.js

@@ -9,7 +9,7 @@ import StarredGistsScreen from './gists/screens/starredgists.screen';
 import ClearCacheScreen from './cache/screens/cache.screen.js';
 import GistDetailsScreen from './gists/screens/gistdetails.screen';
 import GistFileContentScreen from './gists/screens/gistfilecontent.screen';
-import GistContentsScreen from './gists/screens/gistContents.screen';
+import GistContentListScreen from './gists/screens/gistContentList.screen';
 import GistCommentsScreen from './gists/screens/gistComments.screen';
 
 const styles = StyleSheet.create({
@@ -55,7 +55,7 @@ const MainTabsScreen = TabNavigator({
 
 const GistFileContentAndCommentsScreen = TabNavigator({
 	GistContent: {
-		screen: GistContentsScreen,
+		screen: GistContentListScreen,
 		navigationOptions: {
 			tabBarLabel: 'Content',
 		},