pioneer joy-roles elements remove stories and redo some elements that don't work with old actors module

pioneer/packages/joy-roles/src/elements.stories.tsx

@@ -1,84 +0,0 @@
-// @ts-nocheck
-import React from 'react';
-import { boolean, number, text, withKnobs } from '@storybook/addon-knobs';
-import { Table } from 'semantic-ui-react';
-
-import { u128, Text } from '@polkadot/types';
-
-import { Actor } from '@joystream/types/roles';
-
-import { BalanceView, GroupMemberView, HandleView, MemberView, MemoView } from './elements';
-
-import 'semantic-ui-css/semantic.min.css';
-import '@polkadot/joy-roles/index.sass';
-
-export default {
-  title: 'Roles / Elements',
-  decorators: [withKnobs]
-};
-
-export const Balance = () => {
-  return (
-    <BalanceView balance={new u128(number('Balance', 10))} />
-  );
-};
-
-export const Memo = () => {
-  const actor = new Actor({ member_id: 1, account: '5HZ6GtaeyxagLynPryM7ZnmLzoWFePKuDrkb4AT8rT4pU1fp' });
-  const memo = new Text(text('Memo text', 'This is a memo'));
-
-  return (
-    <MemoView actor={actor} memo={memo} />
-  );
-};
-
-export const Handle = () => {
-  const profile = {
-    handle: new Text(text('Handle', 'benholdencrowther'))
-  };
-
-  return (
-    <HandleView profile={profile} />
-  );
-};
-
-export const Member = () => {
-  const actor = new Actor({ member_id: 1, account: '5HZ6GtaeyxagLynPryM7ZnmLzoWFePKuDrkb4AT8rT4pU1fp' });
-  const profile = {
-    handle: new Text(text('Handle', 'benholdencrowther'))
-  };
-
-  return (
-    <Table basic='very'>
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell>
-            <MemberView
-              actor={actor}
-              balance={new u128(number('Balance', 10))}
-              profile={profile}
-            />
-          </Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
-  );
-};
-
-export const GroupMember = () => {
-  const actor = new Actor({ member_id: 1, account: '5HZ6GtaeyxagLynPryM7ZnmLzoWFePKuDrkb4AT8rT4pU1fp' });
-  const profile = {
-    handle: new Text(text('Handle', 'benholdencrowther'))
-  };
-
-  return (
-    <GroupMemberView
-      actor={actor}
-      profile={profile}
-      title={text('Title', 'Group lead')}
-      lead={boolean('Lead member', true)}
-      stake={new u128(number('Stake', 10))}
-      earned={new u128(number('Earned', 10))}
-    />
-  );
-};

pioneer/packages/joy-roles/src/elements.tsx

@@ -6,14 +6,10 @@ import { Link } from 'react-router-dom';
 import { Balance } from '@polkadot/types/interfaces';
 import { formatBalance } from '@polkadot/util';
 import Identicon from '@polkadot/react-identicon';
-import { Actor } from '@joystream/types/roles';
 import { IProfile, MemberId } from '@joystream/types/members';
 import { Text, GenericAccountId } from '@polkadot/types';
 import { LeadRoleState } from '@joystream/types/content-working-group';
-
-type ActorProps = {
-  actor: Actor;
-}
+import { Worker } from '@joystream/types/working-group';
 
 type BalanceProps = {
   balance?: Balance;
@@ -27,7 +23,7 @@ export function BalanceView (props: BalanceProps) {
   );
 }
 
-type MemoProps = ActorProps & {
+type MemoProps = ProfileProps & {
   memo?: Text;
 }
 
@@ -39,7 +35,7 @@ export function MemoView (props: MemoProps) {
   return (
     <div className="memo">
       <span>Memo:</span> {props.memo.toString()}
-      <Link to={`/addressbook/memo/${props.actor.account.toString()}`}>{' view full memo'}</Link>
+      <Link to={`/addressbook/memo/${props.profile.controller_account.toString()}`}>{' view full memo'}</Link>
     </div>
   );
 }
@@ -58,10 +54,10 @@ export function HandleView (props: ProfileProps) {
   );
 }
 
-type MemberProps = ActorProps & BalanceProps & ProfileProps
+type MemberProps = BalanceProps & ProfileProps
 
 export function MemberView (props: MemberProps) {
-  let avatar = <Identicon value={props.actor.account.toString()} size={50} />;
+  let avatar = <Identicon value={props.profile.controller_account.toString()} size={50} />;
   if (typeof props.profile.avatar_uri !== 'undefined' && props.profile.avatar_uri.toString() !== '') {
     avatar = <Image src={props.profile.avatar_uri.toString()} circular className='avatar' />;
   }
@@ -77,13 +73,14 @@ export function MemberView (props: MemberProps) {
   );
 }
 
-type ActorDetailsProps = MemoProps & BalanceProps
+type WorkerDetailsProps = MemoProps & BalanceProps & {
+  worker: Worker
+}
 
-export function ActorDetailsView (props: ActorDetailsProps) {
+export function WorkerDetailsView (props: WorkerDetailsProps) {
   return (
-    <div className="actor-summary" id={props.actor.account.toString()}>
-      {props.actor.account.toString()}
-      <MemoView actor={props.actor} memo={props.memo} />
+    <div id={props.worker.role_account.toString()}>
+      {props.worker.role_account.toString()}
     </div>
   );
 }