ghost-portal/packages/page-staking/src/Query/index.tsx
Jaco Greeff 2b534fc1fb
Additional wrappers via React.memo (#2377)
* More React.memo

* Last non-memo functional components in staking
2020-03-12 15:45:59 +01:00

54 lines
1.5 KiB
TypeScript

// Copyright 2017-2020 @polkadot/app-staking authors & contributors
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
import React, { useCallback, useState } from 'react';
import { useParams } from 'react-router-dom';
import { Button, InputAddressSimple } from '@polkadot/react-components';
import { useTranslation } from '../translate';
import Validator from './Validator';
interface Props {
className?: string;
}
function Query ({ className }: Props): React.ReactElement<Props> {
const { t } = useTranslation();
const { value } = useParams();
const [validatorId, setValidatorId] = useState<string | null>(value || null);
const _onQuery = useCallback(
(): void => {
if (validatorId) {
window.location.hash = `/staking/query/${validatorId}`;
}
},
[validatorId]
);
return (
<div className={className}>
<InputAddressSimple
className='staking--queryInput'
defaultValue={value}
help={t('Display overview information for the selected validator, including blocks produced.')}
label={t('validator to query')}
onChange={setValidatorId}
onEnter={_onQuery}
>
<Button
icon='play'
isDisabled={!validatorId}
onClick={_onQuery}
/>
</InputAddressSimple>
{value && (
<Validator validatorId={value} />
)}
</div>
);
}
export default React.memo(Query);