WIP any types

src/App.tsx:    // Type 'Codec' is missing the following properties from type 'Observable<any>': _isScalar, source
src/App.tsx:    const council: any = await api.query.council.activeCouncil();
src/types.ts:  query: any;
src/types.ts:  handles: any;
src/types.ts:export type Seat = any;
src/types.ts:  exec: any;
src/types.ts:  description: any;
src/lib/getters.ts:  const proposalCount: any = await api.query.proposalsEngine.proposalCount();
src/lib/getters.ts:  const status: { [key: string]: any } = proposal.status;
src/lib/announcements.ts:const query = async (test: string, cb: () => Promise<any>): Promise<any> => {
src/lib/announcements.ts:  const stage: any = await api.query.councilElection.stage()
src/lib/announcements.ts:  const era: any = await api.query.staking.currentEra()
src/lib/announcements.ts:  const totalStake: any = await api.query.staking.erasTotalStake(parseInt(era))
src/lib/util.ts:export const formatTime = (time?: any): string =>

src/App.tsx

@@ -6,30 +6,17 @@ import * as get from "./lib/getters";
 import { domain, wsLocation } from "./config";
 
 // types
-import { Api, Block } from "./types";
+import { Api, Block, IState } from "./types";
 import { types } from "@joystream/types";
+//import { Observable } from "@polkadot/types/types";
+import { Seat } from "@joystream/types/augment/all/types";
+//import { Vec } from "@polkadot/types/codec";
+//import { Codec } from "@polkadot/types/types";
 import { ApiPromise, WsProvider } from "@polkadot/api";
-import { Header } from "@polkadot/types/interfaces";
+import { AccountId, Header } from "@polkadot/types/interfaces";
 
 interface IProps {}
 
-interface IState {
-  block: number;
-  blocks: Block[];
-  nominators: string[];
-  validators: string[];
-  loading: boolean;
-  council: any;
-  channels: number[];
-  proposals: any;
-  posts: number[];
-  categories: number[];
-  threads: number[];
-  domain: string;
-  proposalCount: number;
-  handles: any;
-}
-
 const initialState = {
   blocks: [],
   block: 0,
@@ -75,18 +62,24 @@ class App extends React.Component<IProps, IState> {
 
     this.setState({ channels, proposalCount, posts, categories, threads });
 
+    // TODO typeof activeCouncil
+    // Type 'Codec' is missing the following properties from type 'Observable<Vec<Seat>>': _isScalar,
+    // Type 'Codec' is missing the following properties from type 'Observable<any>': _isScalar, source
     const council: any = await api.query.council.activeCouncil();
     console.log(`council`, council);
-    council.map((seat: any) => this.fetchHandle(api, seat.member));
+    // Property 'map' does not exist on type 'Codec'.  TS2339
+    council.map((seat: Seat) => this.fetchHandle(api, seat.member));
 
     // count nominators and validators
     const validatorEntries = await api.query.session.validators();
     const nominatorEntries = await api.query.staking.nominators.entries();
+
     const validators = await validatorEntries.map((v) => {
       this.fetchHandle(api, v.toJSON());
       return String(v);
     });
     console.log(`validators`, validators);
+
     const nominators = nominatorEntries.map((n) => {
       const name = n[0].toHuman();
       this.fetchHandle(api, `${name}`);
@@ -123,7 +116,7 @@ class App extends React.Component<IProps, IState> {
     proposals[id] = proposal;
     this.setState({ proposals });
   }
-  async fetchHandle(api: Api, id: string) {
+  async fetchHandle(api: Api, id: AccountId | string) {
     const handle = await get.memberHandleByAccount(api, id);
     let { handles } = this.state;
     handles[String(id)] = handle;
@@ -141,7 +134,7 @@ class App extends React.Component<IProps, IState> {
   componentWillUnmount() {
     console.log("unmounting...");
   }
-  constructor(props: any) {
+  constructor(props: IProps) {
     super(props);
     this.state = initialState;
     this.fetchProposal = this.fetchProposal.bind(this);

src/components/Dashboard/index.tsx

@@ -2,21 +2,9 @@ import React from "react";
 import { ActiveProposals, Council } from "..";
 import Nominators from "./Nominators";
 import Validators from "./Validators";
-import { Block, Handles } from "../../types";
+import { IState } from "../../types";
 
-interface IProps {
-  block: number;
-  blocks: Block[];
-  council: any;
-  nominators: string[];
-  validators: string[];
-  proposals: any;
-  proposalCount: number;
-  domain: string;
-  handles: Handles;
-}
-
-const Dashboard = (props: IProps) => {
+const Dashboard = (props: IState) => {
   return (
     <div className="w-100 flex-grow-1 d-flex align-items-center justify-content-center d-flex flex-column">
       <div className="title">

src/components/Proposals/Active.tsx

@@ -1,13 +1,23 @@
 import React from "react";
 import Proposal from "./ProposalOverlay";
+import { ProposalDetail } from "../../types";
 
-const ActiveProposals = (props: any) => {
+const ActiveProposals = (props: {
+  block: number;
+  proposals: ProposalDetail[];
+}) => {
   const { block, proposals } = props;
-  const active = proposals.filter((p: any) => p.stage === "Active");
+  const active = proposals.filter((p) => p.stage === "Active");
+
   if (!active.length) return <div className="box">No active proposals.</div>;
-  return active.map((p: any, key: number) => (
-    <Proposal key={key} block={block} {...p} />
-  ));
+
+  return (
+    <div>
+      {active.map((p, key: number) => (
+        <Proposal key={key} block={block} {...p} />
+      ))}
+    </div>
+  );
 };
 
 export default ActiveProposals;

src/components/Proposals/Proposal.tsx

@@ -1,12 +1,16 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import htmr from "htmr";
+import { ProposalDetail } from "../../types";
 
-const Proposal = (props: any) => {
+const Proposal = (props: {
+  match: { params: { id: string } };
+  proposals: ProposalDetail[];
+}) => {
   const { match, proposals } = props;
   const id = parseInt(match.params.id);
 
-  const proposal = proposals.find((p: any) => p && p.id === id);
+  const proposal = proposals.find((p) => p && p.id === id);
   if (!proposal) return <div>Proposal not found</div>;
   const { title, message } = proposal;
 

src/components/Proposals/ProposalOverlay.tsx

@@ -1,8 +1,17 @@
 import React from "react";
 import { OverlayTrigger, Tooltip } from "react-bootstrap";
 import htmr from "htmr";
+import { ProposalParameters } from "@joystream/types/proposals";
 
-const ProposalOverlay = (props: any) => {
+const ProposalOverlay = (props: {
+  block: number;
+  id: number;
+  createdAt: number;
+  parameters: ProposalParameters;
+  title: string;
+  message: string;
+  description: string;
+}) => {
   const { block, createdAt, parameters } = props;
 
   const remainingBlocks = +createdAt + +parameters.votingPeriod - block;

src/components/Proposals/index.tsx

@@ -1,24 +1,26 @@
 import React from "react";
+import { Link } from "react-router-dom";
 import Proposal from "./Proposal";
+import { ProposalDetail } from "../../types";
 
-const Proposals = (props: any) => {
+const Proposals = (props: { proposals: ProposalDetail[] }) => {
   const { proposals } = props;
 
-  const active = proposals.filter((p: any) => p.stage === "Active");
-  const executing = proposals.filter((p: any) => p.exec);
+  const active = proposals.filter((p) => p.stage === "Active");
+  const executing = proposals.filter((p) => p.exec);
 
   return (
     <div className="d-flex flex-column">
       <div className="d-flex flex-row">
         {(active.length &&
-          active.map((p: any, key: number) => (
-            <Proposal key={key} {...p} />
+          active.map((p, key: number) => (
+            <Link to={`/proposal/${p.id}`}>{p.id}</Link>
           ))) || <div className="box">No active proposals.</div>}
       </div>
       <div className="d-flex flex-row">
         {(executing.length &&
-          executing.map((p: any, key: number) => (
-            <Proposal key={key} {...p} />
+          executing.map((p, key: number) => (
+            <Link to={`/proposal/${p.id}`}>{p.id}</Link>
           ))) || <div className="box">No executing proposals.</div>}
       </div>
     </div>

src/components/Routes/index.tsx

@@ -1,7 +1,8 @@
 import { Switch, Route } from "react-router-dom";
 import { Council, Dashboard, Proposals, Proposal } from "..";
+import { IState } from "../../types";
 
-const Routes = (props: any) => {
+const Routes = (props: IState) => {
   return (
     <Switch>
       <Route path="/proposals" render={() => <Proposals {...props} />} />

src/lib/getters.ts

@@ -13,6 +13,7 @@ import {
 import { Category, CategoryId } from "@joystream/types/forum";
 import { MemberId, Membership } from "@joystream/types/members";
 import { Proposal } from "@joystream/types/proposals";
+import { AccountId } from "@polkadot/types/interfaces";
 
 // channel
 
@@ -28,7 +29,7 @@ export const memberHandle = async (api: Api, id: MemberId): Promise<string> => {
 
 export const memberHandleByAccount = async (
   api: Api,
-  account: string
+  account: AccountId | string
 ): Promise<string> => {
   const id: MemberId = await api.query.members.memberIdsByRootAccountId(
     account

src/types.ts

@@ -1,6 +1,5 @@
 import { ApiPromise } from "@polkadot/api";
 import { MemberId } from "@joystream/types/members";
-import { AnyJson } from "@polkadot/types/types/helpers";
 import { ProposalParameters, ProposalStatus } from "@joystream/types/proposals";
 import { Nominations } from "@polkadot/types/interfaces";
 import { Option } from "@polkadot/types/codec";
@@ -10,6 +9,25 @@ export interface Api {
   query: any;
 }
 
+export interface IState {
+  block: number;
+  blocks: Block[];
+  nominators: string[];
+  validators: string[];
+  loading: boolean;
+  council: Seat[];
+  channels: number[];
+  proposals: ProposalDetail[];
+  posts: number[];
+  categories: number[];
+  threads: number[];
+  domain: string;
+  proposalCount: number;
+  handles: any;
+}
+
+export type Seat = any;
+
 export interface Council {
   round: number;
   last: string;