From 3d144f7ba4264e83043863c764ca9e67fe02bd70 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Tue, 12 Jan 2021 21:57:32 +0100
Subject: [PATCH] Show scheduled info on proposals (#4380)

---
 packages/page-parachains/src/Overview/Proposal.tsx |  6 +++---
 packages/page-parachains/src/Overview/index.tsx    |  2 +-
 packages/page-parachains/src/Overview/types.tsx    |  1 +
 .../page-parachains/src/Overview/useProposals.ts   | 14 +++++++-------
 4 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/packages/page-parachains/src/Overview/Proposal.tsx b/packages/page-parachains/src/Overview/Proposal.tsx
index 3c41a37185..9842444726 100644
--- a/packages/page-parachains/src/Overview/Proposal.tsx
+++ b/packages/page-parachains/src/Overview/Proposal.tsx
@@ -17,7 +17,7 @@ interface Props {
   proposal: ProposalExt;
 }
 
-function Proposal ({ proposal: { id, isApproved, proposal: { balance, genesisHead, name, proposer, validationCode, validators } } }: Props): React.ReactElement<Props> {
+function Proposal ({ proposal: { id, isApproved, isScheduled, proposal: { balance, genesisHead, name, proposer, validationCode, validators } } }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const { hasSudoKey, sudoKey } = useSudo();
@@ -41,10 +41,10 @@ function Proposal ({ proposal: { id, isApproved, proposal: { balance, genesisHea
     <tr>
       <td className='number'><h1>{formatNumber(id)}</h1></td>
       <td className='badge'>
-        {isApproved && (
+        {(isApproved || isScheduled) && (
           <Badge
             color='green'
-            icon='check'
+            icon={isScheduled ? 'clock' : 'check'}
           />
         )}
       </td>
diff --git a/packages/page-parachains/src/Overview/index.tsx b/packages/page-parachains/src/Overview/index.tsx
index 12688f4b24..f7bcfa9953 100644
--- a/packages/page-parachains/src/Overview/index.tsx
+++ b/packages/page-parachains/src/Overview/index.tsx
@@ -22,7 +22,7 @@ function Overview (): React.ReactElement<Props> {
   const { api } = useApi();
   const paraIds = useCall<ParaId[]>(api.query.paras?.parachains);
   const upcomingIds = useCall<ParaId[]>(api.query.paras?.upcomingParas);
-  const proposals = useProposals(paraIds);
+  const proposals = useProposals();
 
   return (
     <>
diff --git a/packages/page-parachains/src/Overview/types.tsx b/packages/page-parachains/src/Overview/types.tsx
index caeed1d7d7..a9b3f52d85 100644
--- a/packages/page-parachains/src/Overview/types.tsx
+++ b/packages/page-parachains/src/Overview/types.tsx
@@ -6,5 +6,6 @@ import type { ParachainProposal, ParaId } from '@polkadot/types/interfaces';
 export interface ProposalExt {
   id: ParaId;
   isApproved: boolean;
+  isScheduled: boolean;
   proposal: ParachainProposal;
 }
diff --git a/packages/page-parachains/src/Overview/useProposals.ts b/packages/page-parachains/src/Overview/useProposals.ts
index b0b647c5bd..49e21e85b6 100644
--- a/packages/page-parachains/src/Overview/useProposals.ts
+++ b/packages/page-parachains/src/Overview/useProposals.ts
@@ -10,18 +10,18 @@ import { useEffect, useState } from 'react';
 
 import { useApi, useCall, useIsMountedRef } from '@polkadot/react-hooks';
 
-function createExt (paraIds: ParaId[], approvedIds: ParaId[], proposals: [{ args: [ParaId] }, Option<ParachainProposal>][], scheduledProposals: [Codec, ParaId[]][]): ProposalExt[] {
+function createExt (approvedIds: ParaId[], proposals: [{ args: [ParaId] }, Option<ParachainProposal>][], scheduledProposals: [Codec, ParaId[]][]): ProposalExt[] {
   return proposals
     .filter(([, opt]) => opt.isSome)
     .map(([{ args: [id] }, optProposal]) => ({
       id,
-      isApproved: approvedIds.some((a) => a.eq(id)) || scheduledProposals.some(([, ids]) => ids.some((s) => s.eq(id))),
+      isApproved: approvedIds.some((a) => a.eq(id)),
+      isScheduled: scheduledProposals.some(([, ids]) => ids.some((s) => s.eq(id))),
       proposal: optProposal.unwrap()
-    }))
-    .filter(({ id, isApproved }) => !isApproved || !paraIds.some((p) => p.eq(id)));
+    }));
 }
 
-export default function useProposals (paraIds: ParaId[] = []): ProposalExt[] | undefined {
+export default function useProposals (): ProposalExt[] | undefined {
   const { api } = useApi();
   const mountedRef = useIsMountedRef();
   const [state, setState] = useState<ProposalExt[] | undefined>();
@@ -48,10 +48,10 @@ export default function useProposals (paraIds: ParaId[] = []): ProposalExt[] | u
         ])
         .then(([proposals, scheduledProposals]) =>
           mountedRef.current &&
-            setState(createExt(paraIds, approvedIds, proposals as any, scheduledProposals as any))
+            setState(createExt(approvedIds, proposals as any, scheduledProposals as any))
         )
         .catch(console.error);
-  }, [api, approvedIds, mountedRef, paraIds, trigger]);
+  }, [api, approvedIds, mountedRef, trigger]);
 
   return state;
 }