From c57ff7057a817f82ec34f329236c65b9ffcee837 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Wed, 13 Jan 2021 10:12:25 +0100
Subject: [PATCH] Show scheduled/approved (#4383)

---
 .../page-parachains/src/Overview/Proposal.tsx | 14 +++---
 .../src/Overview/Proposals.tsx                |  2 +-
 .../page-parachains/src/Overview/types.tsx    | 15 +++++-
 .../src/Overview/useProposals.ts              | 50 +++++++------------
 4 files changed, 39 insertions(+), 42 deletions(-)

diff --git a/packages/page-parachains/src/Overview/Proposal.tsx b/packages/page-parachains/src/Overview/Proposal.tsx
index cbcd5fa9b4..ca3c79109c 100644
--- a/packages/page-parachains/src/Overview/Proposal.tsx
+++ b/packages/page-parachains/src/Overview/Proposal.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { ParaId } from '@polkadot/types/interfaces';
-import type { ScheduledProposals } from './useProposals';
+import type { ScheduledProposals } from './types';
 
 import React, { useMemo } from 'react';
 
@@ -33,12 +33,12 @@ function Proposal ({ approvedIds, id, scheduled }: Props): React.ReactElement<Pr
   );
 
   const initialHex = useMemo(
-    () => proposal && sliceHex(proposal.proposal.genesisHead, 8),
+    () => proposal?.proposal && sliceHex(proposal.proposal.genesisHead, 8),
     [proposal]
   );
 
   const validationHex = useMemo(
-    () => proposal && sliceHex(proposal.proposal.validationCode, 8),
+    () => proposal?.proposal && sliceHex(proposal.proposal.validationCode, 8),
     [proposal]
   );
 
@@ -53,12 +53,12 @@ function Proposal ({ approvedIds, id, scheduled }: Props): React.ReactElement<Pr
           />
         )}
       </td>
-      <td className='start together'>{proposal?.proposal.name.toUtf8()}</td>
-      <td className='address'>{proposal && <AddressSmall value={proposal.proposal.proposer} />}</td>
-      <td className='balance'>{proposal && <FormatBalance value={proposal.proposal.balance} />}</td>
+      <td className='start together'>{proposal?.proposal?.name.toUtf8()}</td>
+      <td className='address'>{proposal?.proposal && <AddressSmall value={proposal.proposal.proposer} />}</td>
+      <td className='balance'>{proposal?.proposal && <FormatBalance value={proposal.proposal.balance} />}</td>
       <td className='start hash together'>{initialHex}</td>
       <td className='start hash together'>{validationHex}</td>
-      <td className='address all'>{proposal?.proposal.validators.map((validatorId) => (
+      <td className='address all'>{proposal?.proposal?.validators.map((validatorId) => (
         <AddressMini
           key={validatorId.toString()}
           value={validatorId}
diff --git a/packages/page-parachains/src/Overview/Proposals.tsx b/packages/page-parachains/src/Overview/Proposals.tsx
index 79e9ce5000..cda8eb7e55 100644
--- a/packages/page-parachains/src/Overview/Proposals.tsx
+++ b/packages/page-parachains/src/Overview/Proposals.tsx
@@ -1,7 +1,7 @@
 // Copyright 2017-2021 @polkadot/app-parachains authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { Proposals as UseProposals } from './useProposals';
+import type { Proposals as UseProposals } from './types';
 
 import React, { useRef } from 'react';
 
diff --git a/packages/page-parachains/src/Overview/types.tsx b/packages/page-parachains/src/Overview/types.tsx
index a9b3f52d85..710d49e964 100644
--- a/packages/page-parachains/src/Overview/types.tsx
+++ b/packages/page-parachains/src/Overview/types.tsx
@@ -1,11 +1,22 @@
 // Copyright 2017-2021 @polkadot/app-parachains authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ParachainProposal, ParaId } from '@polkadot/types/interfaces';
+import type { ParachainProposal, ParaId, SessionIndex } from '@polkadot/types/interfaces';
 
 export interface ProposalExt {
   id: ParaId;
   isApproved: boolean;
   isScheduled: boolean;
-  proposal: ParachainProposal;
+  proposal?: ParachainProposal;
+}
+
+export interface ScheduledProposals {
+  scheduledIds: ParaId[];
+  sessionIndex: SessionIndex;
+}
+
+export interface Proposals {
+  approvedIds: ParaId[];
+  proposalIds: ParaId[];
+  scheduled: ScheduledProposals[];
 }
diff --git a/packages/page-parachains/src/Overview/useProposals.ts b/packages/page-parachains/src/Overview/useProposals.ts
index 6d3818f6b8..ebacdbd9c4 100644
--- a/packages/page-parachains/src/Overview/useProposals.ts
+++ b/packages/page-parachains/src/Overview/useProposals.ts
@@ -1,27 +1,14 @@
 // Copyright 2017-2021 @polkadot/app-parachains authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-// import type { Option } from '@polkadot/types';
-// import type { Codec } from '@polkadot/types/types';
+import type { Option } from '@polkadot/types';
+import type { EventRecord, ParachainProposal, ParaId, SessionIndex } from '@polkadot/types/interfaces';
+import type { ProposalExt, Proposals, ScheduledProposals } from './types';
 
-import type { EventRecord, ParaId, SessionIndex } from '@polkadot/types/interfaces';
-import type { ProposalExt } from './types';
-
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import { useApi, useCall, useIsMountedRef } from '@polkadot/react-hooks';
 
-export interface ScheduledProposals {
-  scheduledIds: ParaId[];
-  sessionIndex: SessionIndex;
-}
-
-export interface Proposals {
-  approvedIds: ParaId[];
-  proposalIds: ParaId[];
-  scheduled: ScheduledProposals[];
-}
-
 function createResult (approvedIds: ParaId[], proposalKeys: { args: [ParaId] }[], scheduledProposals: [{ args: [SessionIndex] }, ParaId[]][]): Proposals {
   return {
     approvedIds,
@@ -68,20 +55,19 @@ export default function useProposals (): Proposals | undefined {
   return state;
 }
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export function useProposal (id: ParaId, approvedIds: ParaId[], scheduled: ScheduledProposals[]): ProposalExt | undefined {
-  return undefined;
+  const { api } = useApi();
+  const opt = useCall<Option<ParachainProposal>>(api.query.proposeParachain_UNUSED?.proposals, [id]);
+
+  return useMemo(
+    (): ProposalExt => ({
+      id,
+      isApproved: approvedIds.some((a) => a.eq(id)),
+      isScheduled: scheduled.some(({ scheduledIds }) => scheduledIds.some((s) => s.eq(id))),
+      proposal: opt && opt.isSome
+        ? opt.unwrap()
+        : undefined
+    }),
+    [approvedIds, id, opt, scheduled]
+  );
 }
-
-// export function useProposal (id: ParaId, approvedIds: ParaId[], scheduled: Scheduled[]): ProposalExt | undefined {
-//   const { api } = useApi();
-//   const proposal = useCall<Option<ParachainProposal>>(api.query.proposeParachain.proposals, [id]);
-
-//   return useMemo(
-//     (): ProposalExt | undefined => {
-//       proposal && proposal?.isSome
-//         ?
-//     ),
-//     [approvedIds, id, proposal, scheduled]
-//   );
-// }