Adjust ref displays (split for completed) (#8807)

packages/page-referenda/src/Referenda/Group.tsx

@@ -21,7 +21,7 @@ interface Props extends ReferendaGroup {
   palletReferenda: PalletReferenda;
   palletVote: PalletVote;
   ranks?: BN[];
-  tracks?: TrackDescription[] | undefined;
+  tracks: TrackDescription[];
 }
 
 function Group ({ activeIssuance, className, isMember, members, palletReferenda, palletVote, ranks, referenda, trackId, trackName, tracks }: Props): React.ReactElement<Props> {
@@ -70,6 +70,7 @@ function Group ({ activeIssuance, className, isMember, members, palletReferenda,
       empty={referenda && t<string>('No active referenda')}
       header={header}
       headerChildren={headerChildren}
+      isSplit={!trackId}
       key={key}
     >
       {referenda && referenda.map((r) => (

packages/page-referenda/src/Referenda/Referendum.tsx

@@ -10,7 +10,7 @@ import type { CurveGraph, ReferendumProps as Props } from '../types';
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
 
-import { Chart, Columar, ExpandButton, LinkExternal, Table } from '@polkadot/react-components';
+import { Chart, Columar, LinkExternal, Table } from '@polkadot/react-components';
 import { useBestNumber, useBlockInterval, useToggle } from '@polkadot/react-hooks';
 import { calcBlockTime } from '@polkadot/react-hooks/useBlockTime';
 import { BN_MILLION, BN_THOUSAND, bnMax, bnToBn, formatNumber, objectSpread } from '@polkadot/util';
@@ -393,14 +393,10 @@ function Referendum (props: Props): React.ReactElement<Props> {
       <StyledTr className={`${className} isExpanded isFirst ${isExpanded ? '' : 'isLast'}`}>
         <Table.Column.Id value={id} />
         <Component {...props} />
-        <td className='actions'>
-          <div>
-            <ExpandButton
-              expanded={isExpanded}
-              onClick={toggleExpanded}
-            />
-          </div>
-        </td>
+        <Table.Column.Expand
+          isExpanded={isExpanded}
+          toggle={toggleExpanded}
+        />
       </StyledTr>
       <StyledTr className={`${className} ${isExpanded ? 'isExpanded isLast' : 'isCollapsed'}`}>
         <td />

packages/page-referenda/src/Referenda/Submit.tsx

@@ -25,7 +25,7 @@ interface Props {
   isMember: boolean;
   members?: string[];
   palletReferenda: PalletReferenda;
-  tracks?: TrackDescription[];
+  tracks: TrackDescription[];
 }
 
 interface HashState {

packages/page-referenda/src/useReferenda.ts

@@ -8,7 +8,6 @@ import type { PalletReferenda, ReferendaGroup, ReferendaGroupKnown, Referendum,
 import { useMemo } from 'react';
 
 import { createNamedHook, useApi, useCall } from '@polkadot/react-hooks';
-import { BN_ZERO } from '@polkadot/util';
 
 import useReferendaIds from './useReferendaIds';
 import useTracks from './useTracks';
@@ -31,27 +30,12 @@ function sortOngoing (a: Referendum, b: Referendum): number {
   );
 }
 
-function getWhen ({ info }: Referendum): BN {
-  return info.isApproved
-    ? info.asApproved[0]
-    : info.isRejected
-      ? info.asRejected[0]
-      : info.isCancelled
-        ? info.asCancelled[0]
-        : info.isTimedOut
-          ? info.asTimedOut[0]
-          : info.isKilled
-            ? info.asKilled
-            // this is an actual unknown state...
-            : BN_ZERO;
-}
-
 function sortReferenda (a: Referendum, b: Referendum): number {
   return (
     a.info.isOngoing === b.info.isOngoing
       ? a.info.isOngoing
         ? sortOngoing(a, b)
-        : getWhen(b).cmp(getWhen(a))
+        : 0
       : a.info.isOngoing
         ? -1
         : 1
@@ -84,7 +68,7 @@ const OPT_MULTI = {
   withParamsTransform: true
 };
 
-function group (totalIssuance?: BN, referenda?: Referendum[], tracks?: TrackDescription[]): ReferendaGroup[] {
+function group (tracks: TrackDescription[], totalIssuance?: BN, referenda?: Referendum[]): ReferendaGroup[] {
   if (!referenda || !totalIssuance) {
     // return an empty group when we have no referenda
     return [{ key: 'empty' }];
@@ -156,7 +140,7 @@ function group (totalIssuance?: BN, referenda?: Referendum[], tracks?: TrackDesc
   return grouped.sort(sortGroups);
 }
 
-function useReferendaImpl (palletReferenda: PalletReferenda): [ReferendaGroup[], TrackDescription[] | undefined] {
+function useReferendaImpl (palletReferenda: PalletReferenda): [ReferendaGroup[], TrackDescription[]] {
   const { api, isApiReady } = useApi();
   const totalIssuance = useCall<BN>(isApiReady && api.query.balances.totalIssuance);
   const ids = useReferendaIds(palletReferenda);
@@ -167,7 +151,7 @@ function useReferendaImpl (palletReferenda: PalletReferenda): [ReferendaGroup[],
     () => [
       (ids && ids.length === 0)
         ? [{ key: 'referenda', referenda: [] }]
-        : group(totalIssuance, referenda, tracks),
+        : group(tracks, totalIssuance, referenda),
       tracks
     ],
     [ids, referenda, totalIssuance, tracks]

packages/page-referenda/src/useTracks.ts

@@ -11,27 +11,21 @@ import { createNamedHook, useApi } from '@polkadot/react-hooks';
 
 import { calcCurves } from './util';
 
-function expandTracks (tracks?: [BN, PalletReferendaTrackInfo][]): TrackDescription[] | undefined {
-  if (tracks) {
-    return tracks.map(([id, info]) => ({
-      graph: calcCurves(info),
-      id,
-      info
-    }));
-  }
-
-  return undefined;
+function expandTracks (tracks: [BN, PalletReferendaTrackInfo][]): TrackDescription[] {
+  return tracks.map(([id, info]) => ({
+    graph: calcCurves(info),
+    id,
+    info
+  }));
 }
 
-function useTracksImpl (palletReferenda: PalletReferenda): TrackDescription[] | undefined {
-  const { api, isApiReady } = useApi();
+function useTracksImpl (palletReferenda: PalletReferenda): TrackDescription[] {
+  const { api } = useApi();
 
   return useMemo(
-    () => isApiReady
-      ? expandTracks(api.consts[palletReferenda as 'referenda'] && api.consts[palletReferenda as 'referenda'].tracks)
-      : undefined,
-    [api, isApiReady, palletReferenda]
+    () => expandTracks(api.consts[palletReferenda as 'referenda'].tracks),
+    [api, palletReferenda]
   );
 }
 
-export default createNamedHook('useTraqcks', useTracksImpl);
+export default createNamedHook('useTracks', useTracksImpl);

packages/page-referenda/src/util.ts

@@ -22,7 +22,7 @@ export function getTrackName (trackId: BN, { name }: PalletReferendaTrackInfo):
   }`;
 }
 
-export function getTrackInfo (api: ApiPromise, specName: string, palletReferenda: string, tracks?: TrackDescription[], trackId?: number): TrackInfoExt | undefined {
+export function getTrackInfo (api: ApiPromise, specName: string, palletReferenda: string, tracks: TrackDescription[], trackId?: number): TrackInfoExt | undefined {
   let info: TrackInfoExt | undefined;
 
   if (tracks && trackId !== undefined) {