Skip to content
This repository has been archived by the owner on Jul 29, 2022. It is now read-only.

refactor: Use function components, remove React class #355

Merged
merged 8 commits into from
May 23, 2019
Merged

refactor: Use function components, remove React class #355

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
4abba78
All at once
amaury1093 May 22, 2019
7ef88ff
Small ts fix
amaury1093 May 22, 2019
9c36ff0
Fix effect
amaury1093 May 22, 2019
2ca3ffa
Fix lint
amaury1093 May 22, 2019
69b0ebe
Fix lint
amaury1093 May 22, 2019
5c11d2c
Grumbles
amaury1093 May 23, 2019
5140240
Don't export props
amaury1093 May 23, 2019
77a76b3
Don't export useless types
amaury1093 May 23, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 31 additions & 41 deletions packages/light-apps/src/AddAccount/AddAccount.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,10 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.

import { Menu, WalletCard } from '@substrate/ui-components';
import React from 'react';
import { RouteComponentProps, Link, Switch, Route, Redirect } from 'react-router-dom';
import { Container } from 'semantic-ui-react';
import { AppContext } from '@substrate/ui-common';
import { Menu, WalletCard } from '@substrate/ui-components';

import { Create } from './Create';
import { ImportWithJson } from './ImportWithJson';
Expand All @@ -18,47 +17,38 @@ interface MatchParams {

interface Props extends RouteComponentProps<MatchParams> { }

export class AddAccount extends React.PureComponent<Props> {
static contextType = AppContext;

context!: React.ContextType<typeof AppContext>; // http://bit.ly/typescript-and-react-context

getActiveTab = () => this.props.location.pathname.split('/')[4];
export function AddAccount (props: Props) {
const activeTab = props.location.pathname.split('/')[4];
const { match: { params: { currentAccount } } } = props;

render () {
const { match: { params: { currentAccount } } } = this.props;

const activeTab = this.getActiveTab();

return (
<Container>
<Menu>
<Link to={`/accounts/${currentAccount}/add/generate`}>
<Menu.Item active={activeTab === 'generate'}>
Generate new account
return (
<Container>
<Menu>
<Link to={`/accounts/${currentAccount}/add/generate`}>
<Menu.Item active={activeTab === 'generate'}>
Generate new account
</Menu.Item>
</Link>
<Link to={`/accounts/${currentAccount}/add/json`}>
<Menu.Item active={activeTab === 'json'}>
Import from JSON keyfile
</Link>
<Link to={`/accounts/${currentAccount}/add/json`}>
<Menu.Item active={activeTab === 'json'}>
Import from JSON keyfile
</Menu.Item>
</Link>
<Link to={`/accounts/${currentAccount}/add/phrase`}>
<Menu.Item active={activeTab === 'phrase'}>
Import from mnemonic phrase
</Link>
<Link to={`/accounts/${currentAccount}/add/phrase`}>
<Menu.Item active={activeTab === 'phrase'}>
Import from mnemonic phrase
</Menu.Item>
</Link>
</Menu>

<WalletCard header='Add an Account' height='100%'>
<Switch>
<Route path='/accounts/:currentAccount/add/generate' component={Create} />
<Route path='/accounts/:currentAccount/add/json' component={ImportWithJson} />
<Route path='/accounts/:currentAccount/add/phrase' component={ImportWithPhrase} />
<Redirect to='/accounts/:currentAccount/add/generate' />
</Switch>
</WalletCard>
</Container>
);
}
</Link>
</Menu>

<WalletCard header='Add an Account' height='100%'>
<Switch>
<Route path='/accounts/:currentAccount/add/generate' component={Create} />
<Route path='/accounts/:currentAccount/add/json' component={ImportWithJson} />
<Route path='/accounts/:currentAccount/add/phrase' component={ImportWithPhrase} />
<Redirect to='/accounts/:currentAccount/add/generate' />
</Switch>
</WalletCard>
</Container>
);
}
Loading