Democracy with useTranslation (polkadot-js#2153)

* Democracy with useTranslation * Remove isSuspended display * One isSubstrateV2 less * Linting
cennznet · Feb 20, 2020 · b6de1b8 · b6de1b8
1 parent b4891f9
commit b6de1b8
Show file tree

Hide file tree

Showing 16 changed files with 106 additions and 115 deletions.
diff --git a/packages/app-democracy/src/Overview/DispatchEntry.tsx b/packages/app-democracy/src/Overview/DispatchEntry.tsx
@@ -2,7 +2,6 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { I18nProps } from '@polkadot/react-components/types';
 import { AccountId, Balance, BlockNumber, Hash, Proposal, ReferendumIndex } from '@polkadot/types/interfaces';
 import { ITuple } from '@polkadot/types/types';
 
@@ -11,16 +10,17 @@ import { useApi, useCall } from '@polkadot/react-hooks';
 import { Bytes, Option } from '@polkadot/types';
 import { formatNumber } from '@polkadot/util';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 import ProposalCell from './ProposalCell';
 
-interface Props extends I18nProps {
+interface Props {
   blockNumber?: BlockNumber;
   hash: Hash;
   referendumIndex: ReferendumIndex;
 }
 
-function DispatchEntry ({ blockNumber, hash, referendumIndex, t }: Props): React.ReactElement<Props> {
+export default function DispatchEntry ({ blockNumber, hash, referendumIndex }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const { api } = useApi();
   const preimage = useCall<Option<ITuple<[Bytes, AccountId, Balance, BlockNumber]>>
   >(api.query.democracy.preimages, [hash]);
@@ -50,5 +50,3 @@ function DispatchEntry ({ blockNumber, hash, referendumIndex, t }: Props): React
     </tr>
   );
 }
-
-export default translate(DispatchEntry);
diff --git a/packages/app-democracy/src/Overview/DispatchQueue.tsx b/packages/app-democracy/src/Overview/DispatchQueue.tsx
@@ -2,17 +2,21 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { I18nProps as Props } from '@polkadot/react-components/types';
 import { BlockNumber, Hash, ReferendumIndex } from '@polkadot/types/interfaces';
 
 import React from 'react';
 import { Table } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 import DispatchEntry from './DispatchEntry';
 
-function DispatchQueue ({ className, t }: Props): React.ReactElement<Props> | null {
+interface Props {
+  className?: string;
+}
+
+export default function DispatchQueue ({ className }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
   const { api } = useApi();
   const queued = useCall<[BlockNumber, Hash, ReferendumIndex][]>(api.query.democracy.dispatchQueue, []);
 
@@ -43,5 +47,3 @@ function DispatchQueue ({ className, t }: Props): React.ReactElement<Props> | nu
     </div>
   );
 }
-
-export default translate(DispatchQueue);
diff --git a/packages/app-democracy/src/Overview/Externals.tsx b/packages/app-democracy/src/Overview/Externals.tsx
@@ -4,18 +4,22 @@
 
 import { AccountId, Balance, BlockNumber, Hash, Proposal, VoteThreshold } from '@polkadot/types/interfaces';
 import { ITuple } from '@polkadot/types/types';
-import { I18nProps as Props } from '@polkadot/react-components/types';
 
 import React, { useEffect, useState } from 'react';
 import { AddressSmall, Table } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
 import { FormatBalance } from '@polkadot/react-query';
 import { Bytes, Option } from '@polkadot/types';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 import ProposalCell from './ProposalCell';
 
-function Externals ({ className, t }: Props): React.ReactElement<Props> | null {
+interface Props {
+  className?: string;
+}
+
+export default function Externals ({ className }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
   const { api } = useApi();
   const external = useCall<Option<ITuple<[Hash, VoteThreshold]>>>(api.query.democracy.nextExternal, []);
   const [hash, setHash] = useState<Hash | null>(null);
@@ -72,5 +76,3 @@ function Externals ({ className, t }: Props): React.ReactElement<Props> | null {
     </div>
   );
 }
-
-export default translate(Externals);
diff --git a/packages/app-democracy/src/Overview/Proposal.tsx b/packages/app-democracy/src/Overview/Proposal.tsx
@@ -3,23 +3,24 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { DeriveProposal } from '@polkadot/api-derive/types';
-import { I18nProps } from '@polkadot/react-components/types';
 
 import React from 'react';
 import styled from 'styled-components';
 import { AddressMini, AddressSmall } from '@polkadot/react-components';
 import { FormatBalance } from '@polkadot/react-query';
 import { formatNumber } from '@polkadot/util';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 import ProposalCell from './ProposalCell';
 import Seconding from './Seconding';
 
-interface Props extends I18nProps {
+interface Props {
+  className?: string;
   value: DeriveProposal;
 }
 
-function Proposal ({ className, t, value: { balance, hash, index, proposal, proposer, seconds } }: Props): React.ReactElement<Props> {
+function Proposal ({ className, value: { balance, hash, index, proposal, proposer, seconds } }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const seconding = seconds.filter((_address, index): boolean => index !== 0);
 
   return (
@@ -64,20 +65,18 @@ function Proposal ({ className, t, value: { balance, hash, index, proposal, prop
   );
 }
 
-export default translate(
-  styled(Proposal)`
-    .identityIcon {
-      &:first-child {
-        padding-top: 0;
-      }
-
-      &:last-child {
-        margin-bottom: 4px;
-      }
+export default styled(Proposal)`
+  .identityIcon {
+    &:first-child {
+      padding-top: 0;
     }
 
-    .seconding {
-      padding-top: 1.1rem;
+    &:last-child {
+      margin-bottom: 4px;
     }
-  `
-);
+  }
+
+  .seconding {
+    padding-top: 1.1rem;
+  }
+`;
diff --git a/packages/app-democracy/src/Overview/ProposalCell.tsx b/packages/app-democracy/src/Overview/ProposalCell.tsx
@@ -3,20 +3,22 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { Hash, Proposal } from '@polkadot/types/interfaces';
-import { I18nProps } from '@polkadot/react-components/types';
 
 import React from 'react';
 import { registry } from '@polkadot/react-api';
 import { Call } from '@polkadot/react-components';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 
-interface Props extends I18nProps {
+interface Props {
+  className?: string;
   proposal?: Proposal | null;
   proposalHash: Hash | string;
 }
 
-function ProposalCell ({ className, proposal, proposalHash, t }: Props): React.ReactElement<Props> {
+export default function ProposalCell ({ className, proposal, proposalHash }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+
   if (!proposal) {
     return (
       <td className={`${className} all`}>
@@ -42,5 +44,3 @@ function ProposalCell ({ className, proposal, proposalHash, t }: Props): React.R
     </td>
   );
 }
-
-export default translate(ProposalCell);
diff --git a/packages/app-democracy/src/Overview/Proposals.tsx b/packages/app-democracy/src/Overview/Proposals.tsx
@@ -3,16 +3,20 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { DeriveProposal } from '@polkadot/api-derive/types';
-import { I18nProps as Props } from '@polkadot/react-components/types';
 
 import React from 'react';
 import { Table } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
 
 import ProposalDisplay from './Proposal';
-import translate from '../translate';
+import { useTranslation } from '../translate';
 
-function Proposals ({ className, t }: Props): React.ReactElement<Props> {
+interface Props {
+  className?: string;
+}
+
+export default function Proposals ({ className }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const { api } = useApi();
   const proposals = useCall<DeriveProposal[]>(api.derive.democracy.proposals, []);
 
@@ -37,5 +41,3 @@ function Proposals ({ className, t }: Props): React.ReactElement<Props> {
     </div>
   );
 }
-
-export default translate(Proposals);
diff --git a/packages/app-democracy/src/Overview/Propose.tsx b/packages/app-democracy/src/Overview/Propose.tsx
@@ -2,21 +2,21 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { I18nProps } from '@polkadot/react-components/types';
-
 import BN from 'bn.js';
 import React, { useState } from 'react';
 import { Button, Input, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/react-components';
 import { Available } from '@polkadot/react-query';
 import { isHex } from '@polkadot/util';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 
-interface Props extends I18nProps {
+interface Props {
+  className?: string;
   onClose: () => void;
 }
 
-function Propose ({ className, onClose, t }: Props): React.ReactElement<Props> {
+export default function Propose ({ className, onClose }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const [accountId, setAccountId] = useState<string | null>(null);
   const [balance, setBalance] = useState<BN | undefined>();
   const [{ isHashValid, hash }, setHash] = useState<{ isHashValid: boolean; hash?: string }>({ isHashValid: false, hash: '' });
@@ -78,5 +78,3 @@ function Propose ({ className, onClose, t }: Props): React.ReactElement<Props> {
     </Modal>
   );
 }
-
-export default translate(Propose);
diff --git a/packages/app-democracy/src/Overview/Referendum.tsx b/packages/app-democracy/src/Overview/Referendum.tsx
@@ -4,7 +4,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { DerivedReferendumVote, DerivedReferendum } from '@polkadot/api-derive/types';
-import { I18nProps } from '@polkadot/react-components/types';
 import { BlockNumber } from '@polkadot/types/interfaces';
 
 import BN from 'bn.js';
@@ -14,11 +13,12 @@ import { formatNumber } from '@polkadot/util';
 import { useApi, useCall } from '@polkadot/react-hooks';
 import { FormatBalance } from '@polkadot/react-query';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 import ProposalCell from './ProposalCell';
 import Voting from './Voting';
 
-interface Props extends I18nProps {
+interface Props {
+  className?: string;
   idNumber: BN;
   value: DerivedReferendum;
 }
@@ -32,7 +32,8 @@ interface State {
   votedTotal: BN;
 }
 
-function Referendum ({ className, idNumber, t, value }: Props): React.ReactElement<Props> | null {
+function Referendum ({ className, idNumber, value }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
   const { api } = useApi();
   const bestNumber = useCall<BlockNumber>(api.derive.chain.bestNumber, []);
   const votesFor = useCall<DerivedReferendumVote[]>(api.derive.democracy.referendumVotesFor as any, [idNumber]);
@@ -114,14 +115,12 @@ function Referendum ({ className, idNumber, t, value }: Props): React.ReactEleme
   );
 }
 
-export default translate(
-  styled(Referendum)`
-    .democracy--Referendum-results {
-      margin-bottom: 1em;
+export default styled(Referendum)`
+  .democracy--Referendum-results {
+    margin-bottom: 1em;
 
-      &.chart {
-        text-align: center;
-      }
+    &.chart {
+      text-align: center;
     }
-  `
-);
+  }
+`;
diff --git a/packages/app-democracy/src/Overview/Referendums.tsx b/packages/app-democracy/src/Overview/Referendums.tsx
@@ -3,16 +3,20 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { DerivedReferendum } from '@polkadot/api-derive/types';
-import { I18nProps as Props } from '@polkadot/react-components/types';
 
 import React from 'react';
 import { Table } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
 
 import Referendum from './Referendum';
-import translate from '../translate';
+import { useTranslation } from '../translate';
 
-function Referendums ({ className, t }: Props): React.ReactElement<Props> {
+interface Props {
+  className?: string;
+}
+
+export default function Referendums ({ className }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const { api } = useApi();
   const referendums = useCall<DerivedReferendum[]>(api.derive.democracy.referendums, []);
 
@@ -38,5 +42,3 @@ function Referendums ({ className, t }: Props): React.ReactElement<Props> {
     </div>
   );
 }
-
-export default translate(Referendums);
diff --git a/packages/app-democracy/src/Overview/Seconding.tsx b/packages/app-democracy/src/Overview/Seconding.tsx
@@ -3,21 +3,22 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { AccountId } from '@polkadot/types/interfaces';
-import { I18nProps } from '@polkadot/react-components/types';
 
 import BN from 'bn.js';
 import React, { useState } from 'react';
 import { Button, InputAddress, Modal, TxButton } from '@polkadot/react-components';
 import { useAccounts } from '@polkadot/react-hooks';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 
-interface Props extends I18nProps {
+interface Props {
+  className?: string;
   depositors: AccountId[];
   proposalId: BN | number;
 }
 
-function Seconding ({ depositors, proposalId, t }: Props): React.ReactElement<Props> | null {
+export default function Seconding ({ depositors, proposalId }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
   const { hasAccounts } = useAccounts();
   const [accountId, setAccountId] = useState<string | null>(null);
   const [isSecondingOpen, setIsSecondingOpen] = useState(false);
@@ -78,5 +79,3 @@ function Seconding ({ depositors, proposalId, t }: Props): React.ReactElement<Pr
     </>
   );
 }
-
-export default translate(Seconding);