joy-members: fix rendering of members list, identityicon and balance

packages/joy-members/src/Details.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { Table } from 'semantic-ui-react';
 import ReactMarkdown from 'react-markdown';
-
+import { IdentityIcon } from '@polkadot/react-components';
 import { ApiProps } from '@polkadot/react-api/types';
 import { I18nProps } from '@polkadot/react-components/types';
 import { withCalls } from '@polkadot/react-api/with';
@@ -58,10 +58,9 @@ class Component extends React.PureComponent<Props> {
     return (
       <>
       <div className={`item ProfileDetails ${isMyProfile && 'MyProfile'}`}>
-        <div>{this.props.memberId.toString()}</div>
         {hasAvatar
           ? <img className='ui avatar image' src={avatar_uri.toString()} />
-          : null
+          : <IdentityIcon className='image' value={root_account} size={40} />
         }
         <div className='content'>
           <div className='header'>
@@ -74,7 +73,8 @@ class Component extends React.PureComponent<Props> {
                 <i className='university icon'></i>
                 Council member
               </b>}
-            <BalanceDisplay label='Balance: ' params={myAddress} />
+              <BalanceDisplay label='Balance(root): ' params={root_account} />
+              <div>MemberId: {this.props.memberId.toString()}</div>
           </div>
         </div>
       </div>

packages/joy-members/src/List.tsx

@@ -11,7 +11,7 @@ import { MemberId } from '@joystream/types/members';
 
 type Props = ApiProps & I18nProps & {
   firstMemberId: BN,
-  nextMemberId: BN
+  membersCreated: BN
 };
 
 type State = {};
@@ -23,15 +23,14 @@ class Component extends React.PureComponent<Props, State> {
   render () {
     const {
       firstMemberId,
-      nextMemberId
+      membersCreated
     } = this.props;
 
-    const membersCount = nextMemberId.sub(firstMemberId).toNumber();
+    const membersCount = membersCreated.toNumber();
     const ids: MemberId[] = [];
     if (membersCount > 0) {
       const firstId = firstMemberId.toNumber();
-      const lastId = nextMemberId.toNumber();
-      for (let i = firstId; i < lastId; i++) {
+      for (let i = firstId; i < membersCount; i++) {
         ids.push(new MemberId(i));
       }
     }

packages/joy-members/src/index.tsx

@@ -48,8 +48,8 @@ class App extends React.PureComponent<Props> {
 
   private renderList () {
     const { membersCreated, ...otherProps } = this.props;
-    return membersCreated
-      ? <List firstMemberId={FIRST_MEMBER_ID} nextMemberId={membersCreated} {...otherProps} />
+    return membersCreated ?
+      <List firstMemberId={FIRST_MEMBER_ID} membersCreated={membersCreated} {...otherProps} />
       : <em>Loading...</em>;
   }