From 35fb2a6b1cb81f518b1f20fbede5230c2ac9e6b3 Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Sat, 20 Mar 2021 19:00:10 +0100 Subject: [PATCH] Optimize society member queries (#4880) * Optimize society member queries * wrapping * wrapping 2 --- package.json | 6 +- packages/page-contracts/package.json | 2 +- packages/page-society/src/Overview/Member.tsx | 44 ++------ packages/page-society/src/index.tsx | 6 +- packages/page-society/src/types.ts | 2 +- packages/page-society/src/useMembers.ts | 4 +- packages/react-api/package.json | 2 +- yarn.lock | 106 +++++++++--------- 8 files changed, 74 insertions(+), 98 deletions(-) diff --git a/package.json b/package.json index 2939845a4f..b669ab847e 100644 --- a/package.json +++ b/package.json @@ -12,13 +12,13 @@ "packages/*" ], "resolutions": { - "@polkadot/api": "^4.1.2-6", - "@polkadot/api-contract": "^4.1.2-6", + "@polkadot/api": "^4.1.2-7", + "@polkadot/api-contract": "^4.1.2-7", "@polkadot/hw-ledger": "^6.0.5", "@polkadot/keyring": "^6.0.5", "@polkadot/networks": "^6.0.5", "@polkadot/phishing": "^0.6.31", - "@polkadot/types": "^4.1.2-6", + "@polkadot/types": "^4.1.2-7", "@polkadot/util": "^6.0.5", "@polkadot/util-crypto": "^6.0.5", "@polkadot/wasm-crypto": "^4.0.2", diff --git a/packages/page-contracts/package.json b/packages/page-contracts/package.json index 081b1bc481..5ebafd2ea6 100644 --- a/packages/page-contracts/package.json +++ b/packages/page-contracts/package.json @@ -10,6 +10,6 @@ "license": "Apache-2.0", "dependencies": { "@babel/runtime": "^7.13.10", - "@polkadot/api-contract": "^4.1.2-6" + "@polkadot/api-contract": "^4.1.2-7" } } diff --git a/packages/page-society/src/Overview/Member.tsx b/packages/page-society/src/Overview/Member.tsx index 825a4076f1..583f276669 100644 --- a/packages/page-society/src/Overview/Member.tsx +++ b/packages/page-society/src/Overview/Member.tsx @@ -2,8 +2,6 @@ // SPDX-License-Identifier: Apache-2.0 import type BN from 'bn.js'; -import type { bool } from '@polkadot/types'; -import type { BalanceOf, BlockNumber } from '@polkadot/types/interfaces'; import type { MapMember } from '../types'; import React, { useCallback, useEffect, useRef, useState } from 'react'; @@ -11,7 +9,7 @@ import styled from 'styled-components'; import { KUSAMA_GENESIS } from '@polkadot/apps-config'; import { AddressSmall, Columar, Expander, Icon, Modal, Tag } from '@polkadot/react-components'; -import { useApi, useCallMulti, useToggle } from '@polkadot/react-hooks'; +import { useApi, useToggle } from '@polkadot/react-hooks'; import { BlockToTime, FormatBalance } from '@polkadot/react-query'; import { formatNumber } from '@polkadot/util'; @@ -21,46 +19,23 @@ import { useTranslation } from '../translate'; interface Props { bestNumber?: BN; className?: string; - isFounder?: boolean; - isHead?: boolean; - isSkeptic?: boolean; value: MapMember; } -interface MultiState { - isSuspended: boolean; - payouts: [BlockNumber, BalanceOf][]; -} - const CANVAS_STYLE = { display: 'block', margin: '0 auto' }; -const optMulti = { - defaultValue: { - isSuspended: false, - payouts: [] as [BlockNumber, BalanceOf][] - }, - transform: ([suspended, payouts]: [bool, [BlockNumber, BalanceOf][]]): MultiState => ({ - isSuspended: suspended.isTrue, - payouts - }) -}; - -function Member ({ bestNumber, className = '', value: { isFounder, isHead, isSkeptic, isVoter, member: { accountId, strikes } } }: Props): React.ReactElement { +function Member ({ bestNumber, className = '', value: { isCandidateVoter, isFounder, isHead, isSkeptic, member: { accountId, isDefenderVoter, isSuspended, payouts, strikes } } }: Props): React.ReactElement { const { t } = useTranslation(); const { api } = useApi(); const canvasRef = useRef(null); const [canInk] = useState(() => api.genesisHash.eq(KUSAMA_GENESIS)); const [isInkShowing, toggleInk] = useToggle(); - const { isSuspended, payouts } = useCallMulti([ - [api.query.society.suspendedMembers, accountId], - [api.query.society.payouts, accountId] - ], optMulti); const renderPayouts = useCallback( - () => bestNumber && payouts.map(([bn, value], index) => ( + () => bestNumber && payouts?.map(([bn, value], index) => (

@@ -94,7 +69,7 @@ function Member ({ bestNumber, className = '', value: { isFounder, isHead, isSke - + {isHead && ( ('skeptic')} /> )} - {isVoter && ( + {(isCandidateVoter || isDefenderVoter) && ( ('voted')} @@ -126,8 +101,8 @@ function Member ({ bestNumber, className = '', value: { isFounder, isHead, isSke /> )} - - {payouts.length !== 0 && ( + + {!!payouts?.length && ( ('Payouts ({{count}})', { replace: { count: formatNumber(payouts.length) } })} @@ -170,13 +145,14 @@ function Member ({ bestNumber, className = '', value: { isFounder, isHead, isSke export default React.memo(styled(Member)` .ui--Column { + min-width: 14ch; + &:first-child { max-width: 100% !important; } &:last-child { - max-width: 13ch; - min-width: 13ch; + max-width: 14ch; white-space: nowrap; } } diff --git a/packages/page-society/src/index.tsx b/packages/page-society/src/index.tsx index 0bfee257da..da08159617 100644 --- a/packages/page-society/src/index.tsx +++ b/packages/page-society/src/index.tsx @@ -29,10 +29,10 @@ function getMapMembers (members: DeriveSocietyMember[], skeptics: string[], vote return members .filter((member) => !info.hasDefender || !member.accountId.eq(info.defender)) .map((member): MapMember => ({ + isCandidateVoter: voters.includes(member.accountId.toString()), isFounder: info.founder?.eq(member.accountId), isHead: info.head?.eq(member.accountId), isSkeptic: skeptics.includes(member.accountId.toString()), - isVoter: voters.includes(member.accountId.toString()), key: member.accountId.toString(), member })) @@ -45,9 +45,9 @@ function getMapMembers (members: DeriveSocietyMember[], skeptics: string[], vote ? -1 : b.isSkeptic ? 1 - : a.isVoter + : a.isCandidateVoter || a.member.isDefenderVoter ? -1 - : b.isVoter + : b.isCandidateVoter || b.member.isDefenderVoter ? 1 : a.isFounder ? 1 diff --git a/packages/page-society/src/types.ts b/packages/page-society/src/types.ts index 45a9438cf3..304675dec8 100644 --- a/packages/page-society/src/types.ts +++ b/packages/page-society/src/types.ts @@ -5,10 +5,10 @@ import type { DeriveSocietyCandidate, DeriveSocietyMember } from '@polkadot/api- import type { SocietyVote } from '@polkadot/types/interfaces'; export interface MapMember { + isCandidateVoter?: boolean; isFounder?: boolean; isHead?: boolean; isSkeptic?: boolean; - isVoter?: boolean; key: string; member: DeriveSocietyMember; } diff --git a/packages/page-society/src/useMembers.ts b/packages/page-society/src/useMembers.ts index bd7d9587ee..e56fe401ee 100644 --- a/packages/page-society/src/useMembers.ts +++ b/packages/page-society/src/useMembers.ts @@ -10,10 +10,10 @@ import { useAccounts, useApi, useCall } from '@polkadot/react-hooks'; function transform (allAccounts: string[], members: DeriveSocietyMember[]): OwnMembers { const allMembers = members - .filter((member): boolean => !member.isSuspended) + .filter((member) => !member.isSuspended) .map((member): string => member.accountId.toString()); const ownMembers = allMembers - .filter((address): boolean => allAccounts.includes(address)); + .filter((address) => allAccounts.includes(address)); return { allMembers, isMember: ownMembers.length !== 0, ownMembers }; } diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 6cc2bf407e..39b602d9bb 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -15,7 +15,7 @@ "homepage": "https://github.com/polkadot-js/apps/tree/master/packages/react-api#readme", "dependencies": { "@babel/runtime": "^7.13.10", - "@polkadot/api": "^4.1.2-6", + "@polkadot/api": "^4.1.2-7", "@polkadot/extension-dapp": "^0.37.3-8", "@polkadot/x-rxjs": "^6.0.5", "fflate": "^0.6.7" diff --git a/yarn.lock b/yarn.lock index ad09e2264d..55cc653a67 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2102,54 +2102,54 @@ __metadata: languageName: node linkType: hard -"@polkadot/api-contract@npm:^4.1.2-6": - version: 4.1.2-6 - resolution: "@polkadot/api-contract@npm:4.1.2-6" +"@polkadot/api-contract@npm:^4.1.2-7": + version: 4.1.2-7 + resolution: "@polkadot/api-contract@npm:4.1.2-7" dependencies: "@babel/runtime": ^7.13.10 - "@polkadot/api": 4.1.2-6 - "@polkadot/types": 4.1.2-6 + "@polkadot/api": 4.1.2-7 + "@polkadot/types": 4.1.2-7 "@polkadot/util": ^6.0.5 "@polkadot/x-rxjs": ^6.0.5 bn.js: ^4.11.9 - checksum: b0bf8d27da514ad3ddfc7976c3dfe937a8dca43f2a39261c9694878df2c16189fd79ab06659155686782e6fc51cc6a72351af30a96260de239d855b76ad0f931 + checksum: 533c08498f3782dfb244bd9d72b28533c92d72960f20720c49a3c7307a4c6fbd54f57000185a10e04001635aab09e704d2577cbdd4fdd0af181a1a6b1b39fd18 languageName: node linkType: hard -"@polkadot/api-derive@npm:4.1.2-6": - version: 4.1.2-6 - resolution: "@polkadot/api-derive@npm:4.1.2-6" +"@polkadot/api-derive@npm:4.1.2-7": + version: 4.1.2-7 + resolution: "@polkadot/api-derive@npm:4.1.2-7" dependencies: "@babel/runtime": ^7.13.10 - "@polkadot/api": 4.1.2-6 - "@polkadot/rpc-core": 4.1.2-6 - "@polkadot/types": 4.1.2-6 + "@polkadot/api": 4.1.2-7 + "@polkadot/rpc-core": 4.1.2-7 + "@polkadot/types": 4.1.2-7 "@polkadot/util": ^6.0.5 "@polkadot/util-crypto": ^6.0.5 "@polkadot/x-rxjs": ^6.0.5 bn.js: ^4.11.9 - checksum: 301b2d4825e04deeefd8c7b1bf7cdfa60caae4d8747b5e36d6fe3214ec987335390052113ead5bde0da4dee869f0560b1b3b1c8bc5acce18d44bf78cb3d3b7a3 + checksum: 948501d9a988c56eaeeb1355d4aafe6f5ff9decdf2d727229c374c6eae1a63c8771f69a3f5b9367c7c0414b1043820c82e3df67de41401285c70d75e1e4430dc languageName: node linkType: hard -"@polkadot/api@npm:^4.1.2-6": - version: 4.1.2-6 - resolution: "@polkadot/api@npm:4.1.2-6" +"@polkadot/api@npm:^4.1.2-7": + version: 4.1.2-7 + resolution: "@polkadot/api@npm:4.1.2-7" dependencies: "@babel/runtime": ^7.13.10 - "@polkadot/api-derive": 4.1.2-6 + "@polkadot/api-derive": 4.1.2-7 "@polkadot/keyring": ^6.0.5 - "@polkadot/metadata": 4.1.2-6 - "@polkadot/rpc-core": 4.1.2-6 - "@polkadot/rpc-provider": 4.1.2-6 - "@polkadot/types": 4.1.2-6 - "@polkadot/types-known": 4.1.2-6 + "@polkadot/metadata": 4.1.2-7 + "@polkadot/rpc-core": 4.1.2-7 + "@polkadot/rpc-provider": 4.1.2-7 + "@polkadot/types": 4.1.2-7 + "@polkadot/types-known": 4.1.2-7 "@polkadot/util": ^6.0.5 "@polkadot/util-crypto": ^6.0.5 "@polkadot/x-rxjs": ^6.0.5 bn.js: ^4.11.9 eventemitter3: ^4.0.7 - checksum: 2b6bd6511d26e4b6e80da9f61980c211de264f3a09775a2faabe6b97ed719d581f6e79af30f20be848680ecfce532d05434b25ecad053e9399d1a0fc80a1284f + checksum: 6c063bd9a84e96f62aee1a9aae0bb912f162b19fa2710e4900a8f0461a51f77bd8c0ca46ec567a4955b59440efc767e46b75e502b590cc0caeca3e558d206213 languageName: node linkType: hard @@ -2213,7 +2213,7 @@ __metadata: resolution: "@polkadot/app-contracts@workspace:packages/page-contracts" dependencies: "@babel/runtime": ^7.13.10 - "@polkadot/api-contract": ^4.1.2-6 + "@polkadot/api-contract": ^4.1.2-7 languageName: unknown linkType: soft @@ -2620,17 +2620,17 @@ __metadata: languageName: node linkType: hard -"@polkadot/metadata@npm:4.1.2-6": - version: 4.1.2-6 - resolution: "@polkadot/metadata@npm:4.1.2-6" +"@polkadot/metadata@npm:4.1.2-7": + version: 4.1.2-7 + resolution: "@polkadot/metadata@npm:4.1.2-7" dependencies: "@babel/runtime": ^7.13.10 - "@polkadot/types": 4.1.2-6 - "@polkadot/types-known": 4.1.2-6 + "@polkadot/types": 4.1.2-7 + "@polkadot/types-known": 4.1.2-7 "@polkadot/util": ^6.0.5 "@polkadot/util-crypto": ^6.0.5 bn.js: ^4.11.9 - checksum: 4f6955f0d2d4a535207fb48383e7cbc622122ee7de14f084845ab1c5071e30ef69f3b1bd1708acfa884dfe1cc6b36e470bc590fc01874cd19a0fc1964bdd3bc3 + checksum: c572d1b4a3acb056959eeb09566f702620818f3c4862f4a9edc8b5bc526b001dcfab48b1d3912244029b17b182f9e00a8c31ea292d6369d5df3f3ea06d06e853 languageName: node linkType: hard @@ -2660,7 +2660,7 @@ __metadata: resolution: "@polkadot/react-api@workspace:packages/react-api" dependencies: "@babel/runtime": ^7.13.10 - "@polkadot/api": ^4.1.2-6 + "@polkadot/api": ^4.1.2-7 "@polkadot/extension-dapp": ^0.37.3-8 "@polkadot/x-rxjs": ^6.0.5 fflate: ^0.6.7 @@ -2791,26 +2791,26 @@ __metadata: languageName: unknown linkType: soft -"@polkadot/rpc-core@npm:4.1.2-6": - version: 4.1.2-6 - resolution: "@polkadot/rpc-core@npm:4.1.2-6" +"@polkadot/rpc-core@npm:4.1.2-7": + version: 4.1.2-7 + resolution: "@polkadot/rpc-core@npm:4.1.2-7" dependencies: "@babel/runtime": ^7.13.10 - "@polkadot/metadata": 4.1.2-6 - "@polkadot/rpc-provider": 4.1.2-6 - "@polkadot/types": 4.1.2-6 + "@polkadot/metadata": 4.1.2-7 + "@polkadot/rpc-provider": 4.1.2-7 + "@polkadot/types": 4.1.2-7 "@polkadot/util": ^6.0.5 "@polkadot/x-rxjs": ^6.0.5 - checksum: 387c9d7170e92da2a95f4bef172c5aa9c7e0fe71724ade3aa7812ba6c8e51ff22406c3249547525a18a6f876cf20b5ff79212cde8999f1e04b8d2cc0d677941f + checksum: 33823c1450e4421eea7572eb6c3ea3111c40f0732699445dec516c44188d16187b89b1008d5d57134836306ebe6fefa2a0cfa6725e7b1359b8451befc5c46db2 languageName: node linkType: hard -"@polkadot/rpc-provider@npm:4.1.2-6": - version: 4.1.2-6 - resolution: "@polkadot/rpc-provider@npm:4.1.2-6" +"@polkadot/rpc-provider@npm:4.1.2-7": + version: 4.1.2-7 + resolution: "@polkadot/rpc-provider@npm:4.1.2-7" dependencies: "@babel/runtime": ^7.13.10 - "@polkadot/types": 4.1.2-6 + "@polkadot/types": 4.1.2-7 "@polkadot/util": ^6.0.5 "@polkadot/util-crypto": ^6.0.5 "@polkadot/x-fetch": ^6.0.5 @@ -2818,7 +2818,7 @@ __metadata: "@polkadot/x-ws": ^6.0.5 bn.js: ^4.11.9 eventemitter3: ^4.0.7 - checksum: b4cd41c89aa46278f40ccdbd8d9889740d675907c37ca90bcaa88de5b670989bbabf92f790646370427dafcb72d84fe5320d7ea72de261cd0dd2edd2a5b0fa76 + checksum: 1cf4107e74790c848b8e855fd61a3af7c47cf999dc7effe51005a37347e4a4028bdbd714c10d42f3ad2fa1f4601ae59aa998c38a1bfe410494e38d800bd89c5f languageName: node linkType: hard @@ -2843,31 +2843,31 @@ __metadata: languageName: node linkType: hard -"@polkadot/types-known@npm:4.1.2-6": - version: 4.1.2-6 - resolution: "@polkadot/types-known@npm:4.1.2-6" +"@polkadot/types-known@npm:4.1.2-7": + version: 4.1.2-7 + resolution: "@polkadot/types-known@npm:4.1.2-7" dependencies: "@babel/runtime": ^7.13.10 "@polkadot/networks": ^6.0.5 - "@polkadot/types": 4.1.2-6 + "@polkadot/types": 4.1.2-7 "@polkadot/util": ^6.0.5 bn.js: ^4.11.9 - checksum: 2ba731d5c85f1c9cfb91c83e08b6bd140f8edde3deec3babb4c8f202214cb2ac926bfd529f2d65f6a8cd82cef572da0053d7dada2c297d9267d37a5244710edb + checksum: 2af9bb8adc1887e3b8170c512685f6c85ebdef549f43e59634e6d88d43027acb88e25ae5396650de8450a2cc48e1e23dd92d5b0220079097ede466d2bd13193c languageName: node linkType: hard -"@polkadot/types@npm:^4.1.2-6": - version: 4.1.2-6 - resolution: "@polkadot/types@npm:4.1.2-6" +"@polkadot/types@npm:^4.1.2-7": + version: 4.1.2-7 + resolution: "@polkadot/types@npm:4.1.2-7" dependencies: "@babel/runtime": ^7.13.10 - "@polkadot/metadata": 4.1.2-6 + "@polkadot/metadata": 4.1.2-7 "@polkadot/util": ^6.0.5 "@polkadot/util-crypto": ^6.0.5 "@polkadot/x-rxjs": ^6.0.5 "@types/bn.js": ^4.11.6 bn.js: ^4.11.9 - checksum: 2af76f045970cb5d2841981272301b499f0313cd457a0546e809aec586190aeaab4da950c9b3866d6cac28ff2ea3555239060796d6420c56eceab4e37bcafb88 + checksum: 096e75e711077bdce9a15578ee3b81a388d70901b2e20100749ddfa4c24081ecd93838d496f8242364fa89c8eb822a4ae5ee7aeb802e567adc9bbb793b3b7707 languageName: node linkType: hard