reading and rendering cached comment if comment not yet returned in api response

This commit is contained in:
noumantahir 2022-01-29 02:28:41 +05:00
parent 5eed208fe1
commit f8d4e88bda
3 changed files with 53 additions and 7 deletions

View File

@ -18,6 +18,7 @@ import ROUTES from '../../../constants/routeNames';
// Component
import CommentsView from '../view/commentsView';
import { useAppSelector } from '../../../hooks';
const CommentsContainer = ({
author,
@ -45,6 +46,9 @@ const CommentsContainer = ({
hideManyCommentsButton,
flatListProps,
}) => {
const lastCacheUpdate = useAppSelector((state) => state.cache.lastUpdate);
const cachedComments = useAppSelector((state) => state.cache.comments);
const [lcomments, setLComments] = useState([]);
const [selectedPermlink, setSelectedPermlink] = useState('');
@ -58,6 +62,19 @@ const CommentsContainer = ({
setLComments(shortedComments);
}, [commentCount, selectedFilter]);
useEffect(() => {
const postPath = `${author || ''}/${permlink || ''}`;
//this conditional makes sure on targetted already fetched post is updated
//with new cache status, this is to avoid duplicate cache merging
if (
lastCacheUpdate &&
lastCacheUpdate.postPath === postPath &&
lastCacheUpdate.type === 'comment'
) {
_handleCachedComment();
}
}, [lastCacheUpdate]);
// Component Functions
const _shortComments = (sortOrder, _comments) => {
@ -144,17 +161,46 @@ const CommentsContainer = ({
} else if (author && permlink && !comments) {
await getComments(author, permlink, name)
.then((__comments) => {
//TODO: favourable place for merging comment cache
if (selectedFilter) {
const sortComments = _shortComments(selectedFilter, __comments);
setLComments(sortComments);
} else {
setLComments(__comments);
const __comments = _shortComments(selectedFilter, __comments);
}
__comments = _handleCachedComment(__comments);
setLComments(__comments);
})
.catch(() => {});
}
};
const _handleCachedComment = (passedComments = null) => {
const comments = passedComments || lcomments;
const postPath = `${author || ''}/${permlink || ''}`;
if (cachedComments.has(postPath)) {
const cachedComment = cachedComments.get(postPath);
var blockUpdated = false;
comments.forEach((comment) => {
if (cachedComment.permlink === comment.permlink) {
blockUpdated = true;
console.log('Ignore cache as comment is now present');
}
});
if (!blockUpdated) {
console.log('updated comments with cached comment');
const newComments = [cachedComment, ...comments];
if (comments) {
return newComments;
} else {
setLComments(newComments);
}
}
}
return comments;
};
const _handleOnReplyPress = (item) => {
navigation.navigate({
routeName: ROUTES.SCREENS.EDITOR,

View File

@ -39,7 +39,7 @@ const CommentBody = ({
handleOnLongPress,
created,
commentDepth,
reputation,
reputation = 25,
isMuted
}) => {

View File

@ -139,14 +139,14 @@ const QuickReplyModal = ({}: QuickReplyModalProps, ref) => {
const createdAt = new Date();
dispatch(
updateCommentCache(
`${currentAccount.name}/${permlink}`,
`${parentAuthor}/${parentPermlink}`,
{
author:currentAccount.name,
permlink,
parent_author:parentAuthor,
parent_permlink:parentPermlink,
body: markdown2Html(commentValue, true, Platform.OS === 'android'),
created: createdAt.toString(),
created: createdAt.toISOString(),
expiresAt: createdAt.getTime() + 600000
}
)