Skip to content

Commit

Permalink
containers/Comments//Ideas//BaseApi: make comments deletable, also fixes
Browse files Browse the repository at this point in the history 
 #242
  • Loading branch information
rine committed Feb 2, 2022
1 parent 00817e3 commit e8f1e12
Show file tree
Hide file tree
Showing 6 changed files with 175 additions and 18 deletions.
17 changes: 16 additions & 1 deletion BaseApi.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,15 @@ const makeDeleteRequest = (url, token = null) => {
method: 'DELETE',
headers: getHeaders(token)
})
.then(response => response)
.then(response => {
const statusCode = response.status;
let data;
statusCode == 204 ? data = {} : data = response.json();
return Promise.all([ statusCode, data ]);
})
.then(values => {
return {statusCode: values[0], data: values[1]};
})
.catch(error => console.error(error));
};

Expand Down Expand Up @@ -165,6 +173,13 @@ const API = {
const ct_url = endpoints.comments.replace('$contentTypeId', contentTypeId);
const url = ct_url.replace('$objectPk', objectPk);
return makePostRequest(url, data, token);
},
deleteComment(contentTypeId, objectPk, commentPk, token = null) {
const ct_url = endpoints.comment.replace('$contentTypeId', contentTypeId);
const ct_obj_url = ct_url.replace('$objectPk', objectPk);
const url = ct_obj_url.replace('$commentPk', commentPk);
console.log(url);
return makeDeleteRequest(url, token);
}
};

Expand Down
107 changes: 105 additions & 2 deletions containers/Comments/Comment.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useState, useCallback, useEffect } from 'react';
import { View, Image } from 'react-native';
import { Alert, View, Image } from 'react-native';
import { Button } from 'react-native-elements';
import { styles } from './Comment.styles';
import { TextSourceSans } from '../../components/TextSourceSans';
Expand All @@ -19,12 +19,64 @@ export const Comment = (props) => {
const [hasExcerpt, setHasExcerpt] = useState(false);
const [processing, setProcessing] = useState(false);
const [comment, setComment] = useState(props.comment);
const [commentBeingProcessed, setCommentBeingProcessed] = useState(props.comment);
const commentMenuItems = [
{
title: 'Edit',
icon: 'pencil',
action: () => console.log('Edit comment'),
isFirst: true,
isAllowed: comment.has_changing_permission
},
{
title: 'Delete',
icon: 'trash',
action: () => props.toggleDeleteModal(),
isAllowed: comment.has_deleting_permission
},
{
title: 'Report',
icon: 'flag',
action: () => console.log('Report comment'),
isFirst: !comment.has_changing_permission && !comment.has_deleting_permission,
isLast: true,
isAllowed: true
},
{
title: 'Cancel',
action: () => props.toggleMenu(),
isCancel: true,
isAllowed: true
},
];

const commentDeleteModalItems = [
{
// space is to center the text
title: ' This comment will be deleted.\nThis action cannot be undone.',
isText: true
},
{
title: 'Delete',
action: () => deleteComment()
},
{
title: 'Cancel',
action: () => props.toggleDeleteModal(),
isCancel: true
},
];

useEffect(() => {
setComment(props.comment);
props.openSubComments && setShowSubComments(true);
}, [props.openSubComments, props.comment]);

useEffect(() => {
props.setDeleteModalItems(commentDeleteModalItems);
props.setMenuItems(commentMenuItems);
}, [commentBeingProcessed]);

const toggleSubComments = () => {
setShowSubComments(!showSubComments);
};
Expand Down Expand Up @@ -81,6 +133,46 @@ export const Comment = (props) => {
});
};

const deleteComment = () => {
AsyncStorage.getItem('authToken')
.then((token) => API.deleteComment(commentBeingProcessed.content_type, commentBeingProcessed.object_pk, commentBeingProcessed.id, token))
.then((response) => {
const {statusCode, data} = response;
props.toggleDeleteModal();
if (statusCode == 200) {
Alert.alert('Your comment was deleted.', 'Thank you for participating!', [{ text: 'Ok' }]);
fetchComment();
}
else {
const errorMessage = 'That did not work.';
let errorDetail;
if (statusCode==403) {
errorDetail = data.detail;
}
else if (statusCode == 400) {
errorDetail = 'Bad request';
}
Alert.alert(errorMessage, errorDetail, [{ text: 'Ok' }]);
}
});
};

const getCommentTextDisplay = (comment) => {
if (comment.is_removed) {
return 'Deleted by creator on ' + DateService(comment.modified);
}
else if (comment.is_censored || comment.is_blocked) {
return 'Deleted by moderation on '+ DateService(comment.modified);
}
else {
return comment.comment;
}
};

const isDisplayed = (comment) => {
return !(comment.is_deleted || comment.is_blocked);
};

const optionsIcon = (<IconSLI name='options-vertical' size={22} />);
const arrowUpIcon = (<IconSLI name='arrow-up' size={18} />);
const arrowDownIcon = (<IconSLI name='arrow-down' size={18} />);
Expand All @@ -91,18 +183,25 @@ export const Comment = (props) => {
<View style={styles.container}>
<View style={styles.top}>
<View style={styles.topLeft}>
{isDisplayed(comment) &&
<Image source={{ uri: comment.user_image }} style={styles.avatar} />
}
<View style={styles.author}>
<TextSourceSans style={styles.username}>{comment.user_name}</TextSourceSans>
{isDisplayed(comment) &&
<TextSourceSans style={styles.date}>{DateService(comment.created)}</TextSourceSans>
}
</View>
</View>
{isDisplayed(comment) &&
<TextSourceSans>
<Button
icon={optionsIcon}
type='clear'
onPress={() => {setCommentBeingProcessed(comment); props.toggleMenu();}}
/>
</TextSourceSans>
}
</View>
<View>
{!showWholeComment &&
Expand All @@ -111,7 +210,7 @@ export const Comment = (props) => {
numberOfLines={NUM_OF_LINES}
onTextLayout={onTextLayout}
>
{comment.comment}
{getCommentTextDisplay(comment)}
</TextSourceSans>
}
{showWholeComment &&
Expand Down Expand Up @@ -174,6 +273,10 @@ export const Comment = (props) => {
<SubComments
comments={comment.child_comments}
handleRate={handleRate}
setCommentBeingProcessed={setCommentBeingProcessed}
toggleMenu={props.toggleMenu}
getCommentTextDisplay={getCommentTextDisplay}
isDisplayed={isDisplayed}
/>
}
</View>
Expand Down
4 changes: 4 additions & 0 deletions containers/Comments/Comments.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@ export const Comments = (props) => {
comment={comment}
handleReply={props.handleReply}
openSubComments={(props.commentLastCommented==comment.id) ? true : false}
setMenuItems={props.setMenuItems}
toggleMenu={props.toggleMenu}
setDeleteModalItems={props.setDeleteModalItems}
toggleDeleteModal={props.toggleDeleteModal}
/>)}
</View>
);
Expand Down
9 changes: 8 additions & 1 deletion containers/Comments/SubComment.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,26 +36,33 @@ export const SubComment = (props) => {
<View style={styles.subContainer}>
<View style={styles.top}>
<View style={styles.topLeft}>
{props.isDisplayed(comment) &&
<Image source={{ uri: comment.user_image }} style={styles.avatar} />
}
<View style={styles.author}>
<TextSourceSans style={styles.username}>{comment.user_name}</TextSourceSans>
{props.isDisplayed(comment) &&
<TextSourceSans style={styles.date}>{DateService(comment.created)}</TextSourceSans>
}
</View>
</View>
{props.isDisplayed(comment) &&
<TextSourceSans>
<Button
icon={optionsIcon}
type='clear'
onPress={() => {props.setCommentBeingProcessed(comment); props.toggleMenu();}}
/>
</TextSourceSans>
}
</View>
{!showWholeComment &&
<TextSourceSans
style={styles.comment}
numberOfLines={NUM_OF_LINES}
onTextLayout={onTextLayout}
>
{comment.comment}
{props.getCommentTextDisplay(comment)}
</TextSourceSans>
}
{showWholeComment &&
Expand Down
4 changes: 4 additions & 0 deletions containers/Comments/SubComments.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@ export const SubComments = (props) => {
key={`comment-${comment.id}`}
comment={comment}
handleRate={props.handleRate}
setCommentBeingProcessed={props.setCommentBeingProcessed}
toggleMenu={props.toggleMenu}
getCommentTextDisplay={props.getCommentTextDisplay}
isDisplayed={props.isDisplayed}
/>)}
</View>
);
Expand Down
52 changes: 38 additions & 14 deletions containers/Ideas/Idea.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export const Idea = (props) => {
// be used if permission does not allow commenting
const [showCommentForm, setShowCommentForm] = useState(true);

const menuItems = [
const ideaMenuItems = [
{
title: 'Edit',
icon: 'pencil',
Expand All @@ -44,7 +44,7 @@ export const Idea = (props) => {
{
title: 'Delete',
icon: 'trash',
action: () => toggleDeleteModal(),
action: () => {setDeleteModalItems(ideaDeleteModalItems); toggleDeleteModal();},
isAllowed: ideaState.has_deleting_permission
},
{
Expand All @@ -57,16 +57,16 @@ export const Idea = (props) => {
},
{
title: 'Cancel',
action: () => setMenuVisible(false),
action: () => toggleMenu(),
isCancel: true,
isAllowed: true
},
];

const deleteModalItems = [
const ideaDeleteModalItems = [
{
// space is to center the text
title: ' This idea will be deleted.\nThis action cannot be undone',
title: ' This idea will be deleted.\nThis action cannot be undone.',
isText: true
},
{
Expand All @@ -80,19 +80,22 @@ export const Idea = (props) => {
},
];

const [menuItems, setMenuItems] = useState(ideaMenuItems);
const [deleteModalItems, setDeleteModalItems] = useState(ideaDeleteModalItems);

const getLabels = () => {
let labelsList = [];
ideaState.category && labelsList.push(ideaState.category.name);
ideaState.labels.length > 0 && labelsList.push(...ideaState.labels.map(label => label.name));
return labelsList;
};

const toggleMenu = () => setMenuVisible(!menuVisible);
const toggleMenu = () => setMenuVisible(prevState => !prevState);

const toggleDeleteModal = () => (
setDeleteModalVisible(!deleteModalVisible),
setMenuVisible(false)
);
const toggleDeleteModal = () => {
setDeleteModalVisible(prevState => !prevState);
setMenuVisible(false);
};

const handleRate = async(value) => {
if (processing) return;
Expand Down Expand Up @@ -181,9 +184,26 @@ export const Idea = (props) => {
const deleteIdea = () => {
AsyncStorage.getItem('authToken')
.then((token) => API.deleteIdea(moduleId, ideaState.pk, token))
.then(() => {
Alert.alert('Your idea was deleted.', 'Thank you for participating!', [{ text: 'Ok' }]);
props.navigation.navigate('IdeaProject');
.then((response) => {
const {statusCode, data} = response;
toggleDeleteModal();
if (statusCode == 204) {
Alert.alert('Your idea was deleted.', 'Thank you for participating!', [{ text: 'Ok' }]);
props.navigation.navigate('IdeaProject', {
project: project
});
}
else {
const errorMessage = 'That did not work.';
let errorDetail;
if (statusCode==403) {
errorDetail = data.detail;
}
else if (statusCode == 400) {
errorDetail = 'Bad request';
}
Alert.alert(errorMessage, errorDetail, [{ text: 'Ok' }]);
}
});
};

Expand Down Expand Up @@ -234,7 +254,7 @@ export const Idea = (props) => {
<Button
icon={optionsIcon}
type='clear'
onPress={toggleMenu}
onPress={() => {setMenuItems(ideaMenuItems); toggleMenu();}}
/>
</View>
<View style={styles.titleContainer}>
Expand Down Expand Up @@ -297,6 +317,10 @@ export const Idea = (props) => {
comments={comments}
handleReply={handleCommentReply}
commentLastCommented={commentLastCommented}
setMenuItems={setMenuItems}
toggleMenu={toggleMenu}
setDeleteModalItems={setDeleteModalItems}
toggleDeleteModal={toggleDeleteModal}
/>
</View>}
</ScrollView>
Expand Down

0 comments on commit e8f1e12

Please sign in to comment.