App wrappers -> func (#1591)
This commit is contained in:
parent
f637182dbe
commit
808ebc8d78
@ -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);
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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'>
|
||||
|
||||
@ -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);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user