zecfoundation
/
zepio
mirror of https://github.com/ZcashFoundation/zepio.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(status-pill): add StatusPill refetching status

This commit is contained in:
George Lima 2019-06-04 21:31:15 -03:00
parent 8e0dd4ae39
commit f1732f8101
3 changed files with 45 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
__tests__/components/status-pill.test.js
View File

@ -18,6 +18,7 @@ describe('<StatusPill />', () => {
getBlockchainStatus={() => Promise.resolve()} getBlockchainStatus={() => Promise.resolve()}
nodeSyncProgress={56.0} nodeSyncProgress={56.0}
nodeSyncType='syncing' nodeSyncType='syncing'
isRefetching={false}
/> />
</ThemeProvider>, </ThemeProvider>,
); );
@ -32,6 +33,7 @@ describe('<StatusPill />', () => {
getBlockchainStatus={() => Promise.resolve()} getBlockchainStatus={() => Promise.resolve()}
nodeSyncProgress={100.0} nodeSyncProgress={100.0}
nodeSyncType='ready' nodeSyncType='ready'
isRefetching={false}
/> />
</ThemeProvider>, </ThemeProvider>,
); );
@ -46,6 +48,7 @@ describe('<StatusPill />', () => {
getBlockchainStatus={() => Promise.resolve()} getBlockchainStatus={() => Promise.resolve()}
nodeSyncProgress={0.0} nodeSyncProgress={0.0}
nodeSyncType='error' nodeSyncType='error'
isRefetching={false}
/> />
</ThemeProvider>, </ThemeProvider>,
); );

50
app/components/status-pill.js
View File

@ -27,6 +27,14 @@ const rotate = keyframes`
`; `;
const Wrapper = styled.div` const Wrapper = styled.div`
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: center;
height: 100%;
`;
const StatusWrapper = styled.div`
align-items: center; align-items: center;
display: flex; display: flex;
background: ${props => props.theme.colors.statusPillBg}; background: ${props => props.theme.colors.statusPillBg};
@ -90,6 +98,15 @@ const TooltipText = styled(TextComponent)`
font-weight: 700; font-weight: 700;
`; `;
const RefetchingLabel = styled.p`
color: ${props => props.theme.colors.sidebarItem};
font-size: 10px;
letter-spacing: 0.5px;
text-transform: uppercase;
font-family: ${props => props.theme.fontFamily};
margin-right: 10px;
`;
type Props = { type Props = {
theme: AppTheme, theme: AppTheme,
} & MapStateToProps & } & MapStateToProps &
@ -219,26 +236,31 @@ class Component extends PureComponent<Props, State> {
render() { render() {
const icon = this.getIcon(); const icon = this.getIcon();
const { nodeSyncType, nodeSyncProgress } = this.props; const { nodeSyncType, nodeSyncProgress, isRefetching } = this.props;
const { showTooltip } = this.state; const { showTooltip } = this.state;
const percent = nodeSyncType && nodeSyncType === NODE_SYNC_TYPES.SYNCING const percent = nodeSyncType && nodeSyncType === NODE_SYNC_TYPES.SYNCING
? `(${nodeSyncProgress.toFixed(2)}%)` ? `(${nodeSyncProgress.toFixed(2)}%)`
: ''; : '';
return ( return (
// eslint-disable-next-line <Wrapper>
<Wrapper {isRefetching && <RefetchingLabel>Refetching...</RefetchingLabel>}
onMouseOver={() => this.setState({ showTooltip: true })} {
onMouseOut={() => this.setState({ showTooltip: false })} // eslint-disable-next-line
id='status-pill' <StatusWrapper
> onMouseOver={() => this.setState({ showTooltip: true })}
{showTooltip && ( onMouseOut={() => this.setState({ showTooltip: false })}
<Tooltip> id='status-pill'
<TooltipText value={this.getStatusText()} /> >
</Tooltip> {showTooltip && (
)} <Tooltip>
{icon && <Icon src={icon} animated={this.isSyncing()} />} <TooltipText value={this.getStatusText()} />
<StatusPillLabel value={`${this.getLabel()} ${percent}`} /> </Tooltip>
)}
{icon && <Icon src={icon} animated={this.isSyncing()} />}
<StatusPillLabel value={`${this.getLabel()} ${percent}`} />
</StatusWrapper>
}
</Wrapper> </Wrapper>
); );
} }

7
app/containers/status-pill.js
View File

@ -8,6 +8,7 @@ import { updateNodeSyncStatus } from '../redux/modules/app';
import { StatusPill } from '../components/status-pill'; import { StatusPill } from '../components/status-pill';
import rpc from '../../services/api'; import rpc from '../../services/api';
import { NODE_SYNC_TYPES } from '../constants/node-sync-types'; import { NODE_SYNC_TYPES } from '../constants/node-sync-types';
import { FETCH_STATE } from '../constants/fetch-states';
import type { Dispatch } from '../types/redux'; import type { Dispatch } from '../types/redux';
import type { AppState } from '../types/app-state'; import type { AppState } from '../types/app-state';
@ -15,11 +16,15 @@ import type { AppState } from '../types/app-state';
export type MapStateToProps = {| export type MapStateToProps = {|
nodeSyncProgress: number, nodeSyncProgress: number,
nodeSyncType: 'ready' | 'syncing' | 'error', nodeSyncType: 'ready' | 'syncing' | 'error',
isRefetching: boolean,
|}; |};
const mapStateToProps = ({ app }: AppState): MapStateToProps => ({ const mapStateToProps = ({ app, walletSummary, receive }: AppState): MapStateToProps => ({
nodeSyncProgress: app.nodeSyncProgress, nodeSyncProgress: app.nodeSyncProgress,
nodeSyncType: app.nodeSyncType, nodeSyncType: app.nodeSyncType,
isRefetching:
walletSummary.fetchState === FETCH_STATE.REFETCHING
|| receive.fetchState === FETCH_STATE.REFETCHING,
}); });
export type MapDispatchToProps = {| export type MapDispatchToProps = {|