maintaing local vote map

src/components/posts/container/postsContainer.js

@@ -24,6 +24,7 @@ import {
   filterSelected,
   setOtherPosts,
   setInitPosts,
+  resetLocalVoteMap,
 } from '../../../redux/actions/postsAction';
 import { hidePostsThumbnails } from '../../../redux/actions/uiAction';
 import { fetchLeaderboard, followUser, unfollowUser } from '../../../redux/actions/userAction';
@@ -86,6 +87,10 @@ const PostsContainer = ({
   const [recommendedUsers, setRecommendedUsers] = useState([]);
   const [recommendedCommunities, setRecommendedCommunities] = useState([]);
 
+  const _resetLocalVoteMap = () => {
+    dispatch(resetLocalVoteMap());
+  };
+
   const _setFeedPosts = (_posts, scrollPos = 0) => {
     if (isFeedScreen) {
       dispatch(setFeedPosts(_posts, scrollPos));
@@ -254,11 +259,7 @@ const PostsContainer = ({
   useEffect(() => {
     if (isFeedScreen) {
       _setFeedPosts(initPosts);
-      // dispatch(
+      _resetLocalVoteMap();
-      //   filterSelected(
-      //     selectedFilterValue !== 'feed' ? selectedFilterValue : selectedFeedSubfilterValue,
-      //   ),
-      // );
     } else {
       _setFeedPosts([]);
     }

src/components/upvote/container/upvoteContainer.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { connect } from 'react-redux';
+import { connect, useSelector } from 'react-redux';
 import get from 'lodash/get';
 
 // Realm
@@ -7,6 +7,7 @@ import { setUpvotePercent } from '../../../realm/realm';
 
 // Services and Actions
 import { setUpvotePercent as upvoteAction } from '../../../redux/actions/applicationActions';
+import { updateLocalVoteMap } from '../../../redux/actions/postsAction';
 
 // Utils
 import { getTimeFromNow } from '../../../utils/time';
@@ -40,11 +41,18 @@ const UpvoteContainer = (props) => {
   const [isVoted, setIsVoted] = useState(null);
   const [isDownVoted, setIsDownVoted] = useState(null);
   const [totalPayout, setTotalPayout] = useState(get(content, 'total_payout'));
+  const localVoteMap = useSelector((state) => state.posts.localVoteMap);
 
   useEffect(() => {
     _calculateVoteStatus();
   }, [activeVotes]);
 
+  useEffect(() => {
+    if (localVoteMap) {
+      _handleLocalVote();
+    }
+  }, []);
+
   const _calculateVoteStatus = async () => {
     const _isVoted = await isVotedFunc(activeVotes, get(currentAccount, 'name'));
     const _isDownVoted = await isDownVotedFunc(activeVotes, get(currentAccount, 'name'));
@@ -60,13 +68,37 @@ const UpvoteContainer = (props) => {
     }
   };
 
+  const _handleLocalVote = () => {
+    const postId = get(content, 'post_id');
+    const postFetchedAt = get(content, 'post_fetched_at', 0);
+    const localVote = localVoteMap[postId] || null;
+    if (localVote) {
+      const { votedAt, amount, isDownvote, incrementStep } = localVote;
+
+      if (postFetchedAt > votedAt) {
+        return;
+      }
+
+      setTotalPayout(totalPayout + amount);
+      if (incrementStep > 0) {
+        incrementVoteCount();
+      }
+
+      if (isDownvote) {
+        setIsDownVoted(true);
+      } else {
+        setIsVoted(true);
+      }
+    }
+  };
+
   const _onVote = (amount, isDownvote) => {
     //do all relevant processing here to show local upvote
     const amountNum = parseFloat(amount);
 
-    setTotalPayout(totalPayout + amountNum);
+    let incrementStep = 0;
-
     if (!isVoted && !isDownVoted && incrementVoteCount) {
+      incrementStep = 1;
       incrementVoteCount();
     }
 
@@ -75,6 +107,16 @@ const UpvoteContainer = (props) => {
     } else {
       setIsVoted(true);
     }
+
+    //update redux
+    const postId = get(content, 'post_id');
+    const vote = {
+      votedAt: new Date().getTime(),
+      amount: amountNum,
+      isDownvote,
+      incrementStep,
+    };
+    dispatch(updateLocalVoteMap(postId, vote));
   };
 
   const author = get(content, 'author');

src/redux/actions/postsAction.js

@@ -6,6 +6,8 @@ import {
   RESET,
   FILTER_SELECTED,
   SET_INIT_POSTS,
+  UPDATE_LOCAL_VOTE_MAP,
+  RESET_LOCAL_VOTE_MAP,
 } from '../constants/constants';
 
 export const setFeedPosts = (posts, scrollPosition = 0) => ({
@@ -26,6 +28,20 @@ export const setOtherPosts = (posts, scrollPosition = 0) => ({
   },
   type: SET_OTHER_POSTS,
 });
+export const updateLocalVoteMap = (postId, localVote) => ({
+  payload: {
+    postId,
+    localVote,
+  },
+  type: UPDATE_LOCAL_VOTE_MAP,
+});
+export const resetLocalVoteMap = (postId, localVote) => ({
+  payload: {
+    postId,
+    localVote,
+  },
+  type: RESET_LOCAL_VOTE_MAP,
+});
 export const fetchPosts = (payload) => ({
   payload,
   type: FETCH_POSTS,

src/redux/constants/constants.js

@@ -75,6 +75,8 @@ export const SUBSCRIBE_COMMUNITY_FAIL = 'SUBSCRIBE_COMMUNITY_FAIL';
 export const LEAVE_COMMUNITY = 'LEAVE_COMMUNITY';
 export const LEAVE_COMMUNITY_SUCCESS = 'LEAVE_COMMUNITY_SUCCESS';
 export const LEAVE_COMMUNITY_FAIL = 'LEAVE_COMMUNITY_FAIL';
+export const UPDATE_LOCAL_VOTE_MAP = 'UPDATE_LOCAL_VOTE_MAP';
+export const RESET_LOCAL_VOTE_MAP = 'RESET_LOCAL_VOTE_MAP';
 
 // USER
 export const FOLLOW_USER = 'FOLLOW_USER';

src/redux/reducers/postsReducer.js

@@ -6,6 +6,8 @@ import {
   FETCH_POSTS,
   FETCH_POSTS_SUCCESS,
   RESET,
+  UPDATE_LOCAL_VOTE_MAP,
+  RESET_LOCAL_VOTE_MAP,
 } from '../constants/constants';
 
 const initialState = {
@@ -15,6 +17,7 @@ const initialState = {
   posts: [],
   loading: false,
   selectedFilterValue: '',
+  localVoteMap: new Map(),
 };
 
 export default function (state = initialState, action) {
@@ -38,6 +41,21 @@ export default function (state = initialState, action) {
         otherScrollPosition: action.payload.scrollPosition,
         posts: action.payload,
       };
+    case UPDATE_LOCAL_VOTE_MAP:
+      const { postId, localVote } = action.payload;
+      const voteMap = state.localVoteMap || new Map();
+      voteMap[postId] = localVote;
+      return {
+        ...state,
+        localVoteMap: voteMap,
+      };
+
+    case RESET_LOCAL_VOTE_MAP:
+      return {
+        ...state,
+        localVoteMap: new Map(),
+      };
+
     case FILTER_SELECTED: {
       return {
         ...state,

src/utils/postParser.js

@@ -58,6 +58,9 @@ export const parsePost = (post, currentUserName, isPromoted, isList = false) =>
 
   post.total_payout = totalPayout;
 
+  //stamp posts with fetched time;
+  post.post_fetched_at = new Date().getTime();
+
   //cache image
   if (post.image) {
     FastImage.preload([{ uri: post.image }]);