App wrappers -> func (#1591)

This commit is contained in:
Jaco Greeff 2019-09-13 11:22:27 +02:00 committed by GitHub
parent f637182dbe
commit 808ebc8d78
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 99 additions and 181 deletions

View File

@ -3,7 +3,6 @@
// of the Apache-2.0 license. See the LICENSE file for details.
import { AppProps, BareProps, I18nProps } from '@polkadot/react-components/types';
import { TabItem } from '@polkadot/react-components/Tabs';
import React from 'react';
import { Route, Switch } from 'react-router';
@ -15,50 +14,31 @@ import translate from './translate';
interface Props extends AppProps, BareProps, I18nProps {}
interface State {
tabs: TabItem[];
}
class App extends React.PureComponent<Props, State> {
public constructor (props: Props) {
super(props);
const { t } = props;
this.state = {
tabs: [
{
isRoot: true,
name: 'overview',
text: t('Council overview')
},
{
name: 'motions',
text: t('Motions')
}
]
};
}
public render (): React.ReactNode {
const { basePath } = this.props;
const { tabs } = this.state;
return (
<main>
<header>
<Tabs
basePath={basePath}
items={tabs}
/>
</header>
<Switch>
<Route path={`${basePath}/motions`} component={Motions} />
<Route component={Overview} />
</Switch>
</main>
);
}
function App ({ basePath, t }: Props): React.ReactElement<Props> {
return (
<main>
<header>
<Tabs
basePath={basePath}
items={[
{
isRoot: true,
name: 'overview',
text: t('Council overview')
},
{
name: 'motions',
text: t('Motions')
}
]}
/>
</header>
<Switch>
<Route path={`${basePath}/motions`} component={Motions} />
<Route component={Overview} />
</Switch>
</main>
);
}
export default translate(App);

View File

@ -3,7 +3,6 @@
// of the Apache-2.0 license. See the LICENSE file for details.
import { AppProps, BareProps, I18nProps } from '@polkadot/react-components/types';
import { TabItem } from '@polkadot/react-components/Tabs';
import React from 'react';
import { Route, Switch } from 'react-router';
@ -17,58 +16,40 @@ import translate from './translate';
interface Props extends AppProps, BareProps, I18nProps {}
interface State {
tabs: TabItem[];
}
const hidden = uiSettings.uiMode === 'full'
? []
: ['propose'];
class App extends React.PureComponent<Props, State> {
public constructor (props: Props) {
super(props);
const { t } = props;
this.state = {
tabs: [
{
isRoot: true,
name: 'overview',
text: t('Democracy overview')
},
{
name: 'propose',
text: t('Submit proposal')
}
]
};
}
public render (): React.ReactNode {
const { basePath } = this.props;
const { tabs } = this.state;
const hidden = uiSettings.uiMode === 'full'
? []
: ['propose'];
return (
<main className='democracy--App'>
<HelpOverlay md={basicMd} />
<header>
<Tabs
basePath={basePath}
hidden={hidden}
items={tabs}
/>
</header>
<Switch>
<Route
path={`${basePath}/propose`}
render={(): React.ReactNode => <Propose basePath={basePath} />}
/>
<Route component={Overview} />
</Switch>
</main>
);
}
function App ({ basePath, t }: Props): React.ReactElement<Props> {
return (
<main className='democracy--App'>
<HelpOverlay md={basicMd} />
<header>
<Tabs
basePath={basePath}
hidden={hidden}
items={[
{
isRoot: true,
name: 'overview',
text: t('Democracy overview')
},
{
name: 'propose',
text: t('Submit proposal')
}
]}
/>
</header>
<Switch>
<Route
path={`${basePath}/propose`}
render={(): React.ReactNode => <Propose basePath={basePath} />}
/>
<Route component={Overview} />
</Switch>
</main>
);
}
export default translate(App);

View File

@ -3,7 +3,6 @@
// of the Apache-2.0 license. See the LICENSE file for details.
import { AppProps, BareProps, I18nProps } from '@polkadot/react-components/types';
import { TabItem } from '@polkadot/react-components/Tabs';
import React from 'react';
import { Route, Switch } from 'react-router';
@ -14,45 +13,26 @@ import translate from './translate';
interface Props extends AppProps, BareProps, I18nProps {}
interface State {
tabs: TabItem[];
}
class App extends React.PureComponent<Props, State> {
public constructor (props: Props) {
super(props);
const { t } = props;
this.state = {
tabs: [
{
isRoot: true,
name: 'overview',
text: t('Parachains overview')
}
]
};
}
public render (): React.ReactNode {
const { basePath } = this.props;
const { tabs } = this.state;
return (
<main>
<header>
<Tabs
basePath={basePath}
items={tabs}
/>
</header>
<Switch>
<Route component={Overview} />
</Switch>
</main>
);
}
function App ({ basePath, t }: Props): React.ReactElement<Props> {
return (
<main>
<header>
<Tabs
basePath={basePath}
items={[
{
isRoot: true,
name: 'overview',
text: t('Parachains overview')
}
]}
/>
</header>
<Switch>
<Route component={Overview} />
</Switch>
</main>
);
}
export default translate(App);

View File

@ -21,6 +21,10 @@ interface State {
tabs: TabItem[];
}
const hidden = uiSettings.uiMode === 'full'
? []
: ['developer'];
class App extends React.PureComponent<Props, State> {
public constructor (props: Props) {
super(props);
@ -45,9 +49,6 @@ class App extends React.PureComponent<Props, State> {
public render (): React.ReactNode {
const { basePath } = this.props;
const { tabs } = this.state;
const hidden = uiSettings.uiMode === 'full'
? []
: ['developer'];
return (
<main className='settings--App'>

View File

@ -7,7 +7,7 @@ import { QueryTypes } from './types';
import './index.css';
import React from 'react';
import React, { useState } from 'react';
import Queries from './Queries';
import Selection from './Selection';
@ -15,48 +15,24 @@ import translate from './translate';
interface Props extends AppProps, I18nProps {}
interface State {
queue: QueryTypes[];
}
function StorageApp ({ basePath }: Props): React.ReactElement<Props> {
const [queue, setQueue] = useState<QueryTypes[]>([]);
class StorageApp extends React.PureComponent<Props, State> {
public state: State = {
queue: []
};
const _onAdd = (query: QueryTypes): void => setQueue([query].concat(queue));
const _onRemove = (id: number): void => setQueue(queue.filter((item): boolean => item.id !== id));
public render (): React.ReactNode {
const { basePath } = this.props;
const { queue } = this.state;
return (
<main className='storage--App'>
<Selection
basePath={basePath}
onAdd={this.onAdd}
/>
<Queries
onRemove={this.onRemove}
value={queue}
/>
</main>
);
}
private onAdd = (query: QueryTypes): void => {
this.setState(
(prevState: State): State => ({
queue: [query].concat(prevState.queue)
})
);
}
private onRemove = (id: number): void => {
this.setState(
(prevState: State): State => ({
queue: prevState.queue.filter((item): boolean => item.id !== id)
})
);
}
return (
<main className='storage--App'>
<Selection
basePath={basePath}
onAdd={_onAdd}
/>
<Queries
onRemove={_onRemove}
value={queue}
/>
</main>
);
}
export default translate(StorageApp);