performance: debloat redux store

4 years ago · bc7fdf8089
12 changed files with 90 additions and 62 deletions
--- a/packages/concordia-app/package.json
+++ b/packages/concordia-app/package.json
@ -25,7 +25,7 @@
  },
  "dependencies": {
    "@ezerous/breeze": "~0.7.0",
-    "@ezerous/drizzle": "~0.4.3",
+    "@ezerous/drizzle": "~0.5.0",
    "@ezerous/eth-identity-provider": "~0.1.2",
    "@reduxjs/toolkit": "~1.4.0",
    "@welldone-software/why-did-you-render": "~6.0.5",
--- a/packages/concordia-app/src/components/PostList/PostListRow/index.jsx
+++ b/packages/concordia-app/src/components/PostList/PostListRow/index.jsx
@ -13,7 +13,7 @@ import { Link } from 'react-router-dom';
 import { FORUM_CONTRACT } from 'concordia-shared/src/constants/contracts/ContractNames';
 import { POSTS_DATABASE, USER_DATABASE } from 'concordia-shared/src/constants/orbit/OrbitDatabases';
 import { FETCH_USER_DATABASE } from '../../../redux/actions/peerDbReplicationActions';
-import { breeze } from '../../../redux/store';
+import { breeze, drizzle } from '../../../redux/store';
 import determineKVAddress from '../../../utils/orbitUtils';
 import { POST_CONTENT } from '../../../constants/orbit/PostsDatabaseKeys';
 import ProfileImage from '../../ProfileImage';
@ -23,6 +23,8 @@ import './styles.css';

 const { orbit } = breeze;

+const { contracts: { [FORUM_CONTRACT]: { methods: { getPost: { clearCacheCall: clearGetPostChainData } } } } } = drizzle;
+
 const PostListRow = (props) => {
  const {
    id: postId, postIndex, postCallHash, loading, focus,
@ -99,6 +101,8 @@ const PostListRow = (props) => {
    }
  }, [focus]);

+  useEffect(() => () => clearGetPostChainData(postId), [postId]);
+
  return useMemo(() => (
      <Dimmer.Dimmable
        as={Feed.Event}
--- a/packages/concordia-app/src/components/PostList/PostVoting/index.jsx
+++ b/packages/concordia-app/src/components/PostList/PostVoting/index.jsx
@ -17,7 +17,7 @@ const {
  contracts: {
    [POST_VOTING_CONTRACT]: {
      methods: {
-        getVoteInfo: { cacheCall: getVoteInfoChainData },
+        getVoteInfo: { cacheCall: getVoteInfoChainData, clearCacheCall: clearGetVoteInfoChainData },
        upvote, downvote, unvote,
      },
    },
@ -84,6 +84,10 @@ const PostVoting = (props) => {
  }, [ownVote, postId, userAccount, voting]);

  const disableVoting = userAccount === null || !hasSignedUp || postAuthorAddress === null || userAccount === postAuthorAddress;
+
+  // Clear when unmounting
+  useEffect(() => () => clearGetVoteInfoChainData(postId), [postId]);
+
  return useMemo(() => (
      <div className="post-voting">
          <Button
--- a/packages/concordia-app/src/components/TopicList/TopicListRow/index.jsx
+++ b/packages/concordia-app/src/components/TopicList/TopicListRow/index.jsx
@ -15,7 +15,7 @@ import { FORUM_CONTRACT } from 'concordia-shared/src/constants/contracts/Contrac
 import { TOPICS_DATABASE, USER_DATABASE } from 'concordia-shared/src/constants/orbit/OrbitDatabases';
 import ProfileImage from '../../ProfileImage';
 import { FETCH_USER_DATABASE } from '../../../redux/actions/peerDbReplicationActions';
-import { breeze } from '../../../redux/store';
+import { breeze, drizzle } from '../../../redux/store';
 import './styles.css';
 import determineKVAddress from '../../../utils/orbitUtils';
 import { TOPIC_SUBJECT } from '../../../constants/orbit/TopicsDatabaseKeys';
@ -23,6 +23,8 @@ import targetBlank from '../../../utils/markdownUtils';

 const { orbit } = breeze;

+const { contracts: { [FORUM_CONTRACT]: { methods: { getTopic: { clearCacheCall: clearGetTopicChainData } } } } } = drizzle;
+
 const TopicListRow = (props) => {
  const { id: topicId, topicCallHash, loading } = props;
  const getTopicResults = useSelector((state) => state.contracts[FORUM_CONTRACT].getTopic);
@ -96,6 +98,8 @@ const TopicListRow = (props) => {
    event.stopPropagation();
  };

+  useEffect(() => () => clearGetTopicChainData(topicId), [topicId]);
+
  return useMemo(() => {
    const handleTopicClick = () => {
      history.push(`/topics/${topicId}`);
--- a/packages/concordia-app/src/components/UsernameSelector.jsx
+++ b/packages/concordia-app/src/components/UsernameSelector.jsx
@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 import { FORUM_CONTRACT } from 'concordia-shared/src/constants/contracts/ContractNames';
 import { drizzle } from '../redux/store';

-const { contracts: { [FORUM_CONTRACT]: { methods: { isUserNameTaken } } } } = drizzle;
+const { contracts: { [FORUM_CONTRACT]: { methods: { isUserNameTaken: { cacheCall: isUserNameTakenChainData, clearCacheCall: clearIsUserNameTakenChainData } } } } } = drizzle;

 const UsernameSelector = (props) => {
  const {
@ -65,7 +65,7 @@ const UsernameSelector = (props) => {

  const checkUsernameTaken = useMemo(() => throttle(
    (usernameToCheck) => {
-      isUserNameTaken.cacheCall(usernameToCheck);
+      isUserNameTakenChainData(usernameToCheck);
    }, 200,
  ), []);

@ -77,6 +77,8 @@ const UsernameSelector = (props) => {
    }
  }, [checkUsernameTaken, onChangeCallback]);

+  useEffect(() => () => clearIsUserNameTakenChainData(), []);
+
  return (
      <Form.Field required>
          <label htmlFor="form-field-username-selector">
--- a/packages/concordia-app/src/layouts/MainLayout/MainLayoutConcordiaStatus/index.jsx
+++ b/packages/concordia-app/src/layouts/MainLayout/MainLayoutConcordiaStatus/index.jsx
@ -12,9 +12,7 @@ const MainLayoutConcordiaStatus = () => {
    contracts: {
      [FORUM_CONTRACT]: {
        methods: {
-          numUsers: { cacheCall: numUsersChainData },
-          numTopics: { cacheCall: numTopicsChainData },
-          numPosts: { cacheCall: numPostsChainData },
+          getStats: { cacheCall: getStatsChainData },
        },
      },
    },
@ -23,48 +21,22 @@ const MainLayoutConcordiaStatus = () => {
  const [numUsers, setNumUsers] = useState(null);
  const [numTopics, setNumTopics] = useState(null);
  const [numPosts, setNumPosts] = useState(null);
-  const [numUsersCallHash, setNumUsersCallHash] = useState(null);
-  const [numTopicsCallHash, setNumTopicsCallHash] = useState(null);
-  const [numPostsCallHash, setNumPostsCallHash] = useState(null);
-  const numUsersResult = useSelector((state) => state.contracts[FORUM_CONTRACT].numUsers[numUsersCallHash]);
-  const numTopicsResult = useSelector((state) => state.contracts[FORUM_CONTRACT].numTopics[numTopicsCallHash]);
-  const numPostsResult = useSelector((state) => state.contracts[FORUM_CONTRACT].numPosts[numPostsCallHash]);
+  const [getStatsCallHash, setGetStatsCallHash] = useState(null);
+  const getStatsResult = useSelector((state) => state.contracts[FORUM_CONTRACT].getStats[getStatsCallHash]);

  useEffect(() => {
-    if (numUsersCallHash === null) {
-      setNumUsersCallHash(numUsersChainData());
+    if (getStatsCallHash === null) {
+      setGetStatsCallHash(getStatsChainData());
    }
-  }, [numUsersCallHash, numUsersChainData]);
+  }, [getStatsCallHash, getStatsChainData]);

  useEffect(() => {
-    if (numTopicsCallHash === null) {
-      setNumTopicsCallHash(numTopicsChainData());
+    if (getStatsResult) {
+      setNumUsers(parseInt(getStatsResult.value[0], 10));
+      setNumTopics(parseInt(getStatsResult.value[1], 10));
+      setNumPosts(parseInt(getStatsResult.value[2], 10));
    }
-  }, [numTopicsCallHash, numTopicsChainData]);
-
-  useEffect(() => {
-    if (numPostsCallHash === null) {
-      setNumPostsCallHash(numPostsChainData());
-    }
-  }, [numPostsCallHash, numPostsChainData]);
-
-  useEffect(() => {
-    if (numUsersResult) {
-      setNumUsers(parseInt(numUsersResult.value, 10));
-    }
-  }, [numUsersResult]);
-
-  useEffect(() => {
-    if (numTopicsResult) {
-      setNumTopics(parseInt(numTopicsResult.value, 10));
-    }
-  }, [numTopicsResult]);
-
-  useEffect(() => {
-    if (numPostsResult) {
-      setNumPosts(parseInt(numPostsResult.value, 10));
-    }
-  }, [numPostsResult]);
+  }, [getStatsResult]);

  return (
      <StatusSegment
--- a/packages/concordia-app/src/views/Home/index.jsx
+++ b/packages/concordia-app/src/views/Home/index.jsx
@ -10,7 +10,19 @@ import HomeScreenTopicList from './HomeTopicList';
 import './styles.css';
 import { drizzle } from '../../redux/store';

-const { contracts: { [FORUM_CONTRACT]: { methods: { numTopics } } } } = drizzle;
+const {
+  contracts: {
+    [FORUM_CONTRACT]: {
+      methods: {
+        numTopics:
+    {
+      cacheCall: numTopicsChainData,
+      clearCacheCall: clearNumTopicsChainData,
+    },
+      },
+    },
+  },
+} = drizzle;

 const Home = () => {
  const [numberOfTopicsCallHash, setNumberOfTopicsCallHash] = useState('');
@ -20,7 +32,7 @@ const Home = () => {
  const { t } = useTranslation();

  useEffect(() => {
-    setNumberOfTopicsCallHash(numTopics.cacheCall());
+    setNumberOfTopicsCallHash(numTopicsChainData());
  }, []);

  const numberOfTopics = useMemo(() => (numTopicsResults[numberOfTopicsCallHash] !== undefined
@ -28,6 +40,8 @@ const Home = () => {
    : null),
  [numTopicsResults, numberOfTopicsCallHash]);

+  useEffect(() => () => clearNumTopicsChainData(), []);
+
  return useMemo(() => (
      <Container id="home-container" textAlign="center">
          {numberOfTopics !== null && (
--- a/packages/concordia-app/src/views/Profile/index.jsx
+++ b/packages/concordia-app/src/views/Profile/index.jsx
@ -14,7 +14,19 @@ import GeneralTab from './GeneralTab';
 import { GENERAL_TAB, POSTS_TAB, TOPICS_TAB } from '../../constants/ProfileTabs';
 import './styles.css';

-const { contracts: { [FORUM_CONTRACT]: { methods: { getUser } } } } = drizzle;
+const {
+  contracts: {
+    [FORUM_CONTRACT]: {
+      methods: {
+        getUser: { cacheCall: getUserChainData, clearCacheCall: clearGetUserChainData },
+        getUserTopicCount: { clearCacheCall: clearGetUserTopicCountChainData },
+        getUserTopics: { clearCacheCall: clearGetUserTopicsChainData },
+        getUserPostCount: { clearCacheCall: clearGetUserPostCountChainData },
+        getUserPosts: { clearCacheCall: clearGetUserPostsChainData },
+      },
+    },
+  },
+} = drizzle;

 const Profile = () => {
  const [userCallHash, setUserCallHash] = useState('');
@ -46,7 +58,7 @@ const Profile = () => {

  useEffect(() => {
    if (profileAddress) {
-      setUserCallHash(getUser.cacheCall(profileAddress));
+      setUserCallHash(getUserChainData(profileAddress));
    }
  }, [profileAddress]);

@ -96,6 +108,14 @@ const Profile = () => {
    ]);
  }, [generalTab, loading, postsTab, t, topicsTab]);

+  useEffect(() => () => {
+    clearGetUserChainData();
+    clearGetUserTopicCountChainData();
+    clearGetUserTopicsChainData();
+    clearGetUserPostCountChainData();
+    clearGetUserPostsChainData();
+  }, []);
+
  return useMemo(() => (
      <Container id="profile-container" textAlign="center">
          <Tab panes={panes} />
--- a/packages/concordia-app/src/views/Topic/TopicView/TopicPostList/index.jsx
+++ b/packages/concordia-app/src/views/Topic/TopicView/TopicPostList/index.jsx
@ -11,8 +11,8 @@ const {
  contracts: {
    [FORUM_CONTRACT]: {
      methods: {
-        getTopicPostCount: { cacheCall: getTopicPostCountChainData },
-        getTopicPosts: { cacheCall: getTopicPostsChainData },
+        getTopicPostCount: { cacheCall: getTopicPostCountChainData, clearCacheCall: clearGetTopicPostCountChainData },
+        getTopicPosts: { cacheCall: getTopicPostsChainData, clearCacheCall: clearGetTopicPostsChainData },
      },
    },
  },
@ -65,6 +65,8 @@ const TopicPostList = (props) => {
    setPageNumber(data.activePage);
  };

+  useEffect(() => () => { clearGetTopicPostCountChainData(); clearGetTopicPostsChainData(); }, []);
+
  return useMemo(() => {
    if (postIds.length && postIds.length !== 0) {
      return (
--- a/packages/concordia-contracts/contracts/Forum.sol
+++ b/packages/concordia-contracts/contracts/Forum.sol
@ -225,4 +225,13 @@ contract Forum {
        require(postExists(postID), POST_DOES_NOT_EXIST);
        return posts[postID].author;
    }
+
+    //----------------------------------------MISC----------------------------------------
+    function getStats() public view returns (uint, uint, uint) {
+        return (
+            numUsers,
+            numTopics,
+            numPosts
+        );
+    }
 }
--- a/packages/concordia-contracts/contracts/PostVoting.sol
+++ b/packages/concordia-contracts/contracts/PostVoting.sol
@ -21,7 +21,7 @@ contract PostVoting {

    event UserVotedPost(address userAddress, uint postID, Option option);

-    function getVote(uint postID, address voter) public view returns (Option) {
+    function getVote(uint postID, address voter) private view returns (Option) {
        require(forum.postExists(postID), forum.POST_DOES_NOT_EXIST());
        return postBallots[postID].votes[voter];
    }
@ -32,15 +32,15 @@ contract PostVoting {
        return (postBallots[postID].voters[option].length);
    }

-    function getUpvoteCount(uint postID) public view returns (uint) {
+    function getUpvoteCount(uint postID) private view returns (uint) {
        return (getVoteCount(postID, Option.UP));
    }

-    function getDownvoteCount(uint postID) public view returns (uint) {
+    function getDownvoteCount(uint postID) private view returns (uint) {
        return (getVoteCount(postID, Option.DOWN));
    }

-    function getTotalVoteCount(uint postID) public view returns (int) {
+    function getTotalVoteCount(uint postID) private view returns (int) {
        int upvoteCount = int(getUpvoteCount(postID));
        int downvoteCount = int(getDownvoteCount(postID));
        return upvoteCount - downvoteCount;
--- a/yarn.lock
+++ b/yarn.lock
@ -1527,10 +1527,10 @@
    orbit-db-identity-provider "~0.3.1"
    redux-saga "~1.1.3"

-"@ezerous/drizzle@~0.4.3":
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/@ezerous/drizzle/-/drizzle-0.4.3.tgz#ee28dfe2cf7d8773087e190281ba5f6629cd1b48"
-  integrity sha512-PqjqcQfYfy6YyLT7gtVo43jEJXDxxot1chIUFqJ5belcfFWBsa6pzPhJP52DXfyOQsTkx4Q0QF5l6N/p0asrdg==
+"@ezerous/drizzle@~0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@ezerous/drizzle/-/drizzle-0.5.0.tgz#21bad9d9d678cc8dfb4a79e571e131719f5420c4"
+  integrity sha512-gnSQiYAaIx8chXNv8RCpuYWtUb22JuqNeMOVAGoxU4g33BpkLX6N6AXYuLmQc4ydrzd3/hLn3g8uMpoYD9qcuw==
  dependencies:
    deepmerge "~4.2.2"
    is-plain-object "~5.0.0"
@ -16469,9 +16469,6 @@ snake-case@^3.0.4:
  version "3.0.4"
  resolved "https://registry.yarnpkg.com/snake-case/-/snake-case-3.0.4.tgz#4f2bbd568e9935abdfd593f34c691dadb49c452c"
  integrity sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==
-  dependencies:
-    dot-case "^3.0.4"
-    tslib "^2.0.3"

 snapdragon-node@^2.0.1:
  version "2.1.1"