From 55577ac9bc9f9112b5e7cab264940710eb2a45bc Mon Sep 17 00:00:00 2001 From: diminator Date: Mon, 25 Nov 2019 15:06:11 +0100 Subject: [PATCH 1/5] cherry pick leaderboard app --- packages/web/env-config.js.template | 4 ++ packages/web/package.json | 1 + packages/web/src/dev/Cover.tsx | 16 +---- packages/web/src/dev/Engage.tsx | 2 +- packages/web/src/dev/Features.tsx | 4 +- packages/web/src/dev/LeaderBoard.tsx | 32 ++++++++- packages/web/src/dev/LeaderBoardApp.tsx | 77 +++++++++++++++++++++ packages/web/src/dev/LeaderBoardError.tsx | 38 ++++++++++ packages/web/src/dev/LeaderBoardLoading.tsx | 24 +++++++ packages/web/static/locales/en/dev.json | 1 + 10 files changed, 179 insertions(+), 20 deletions(-) create mode 100644 packages/web/src/dev/LeaderBoardApp.tsx create mode 100644 packages/web/src/dev/LeaderBoardError.tsx create mode 100644 packages/web/src/dev/LeaderBoardLoading.tsx diff --git a/packages/web/env-config.js.template b/packages/web/env-config.js.template index 8766054259b..235b68a71c8 100644 --- a/packages/web/env-config.js.template +++ b/packages/web/env-config.js.template @@ -8,6 +8,10 @@ const environments = { databaseURL: 'https://celo-faucet.firebaseio.com', projectId: 'celo-faucet', }, + LEADERBOARD: { + uri: "http://localhost:8080/v1/graphql", + pageLength: 5 + }, V3: true, __SEGMENT_KEY__: 'REPLACE_ME', }, diff --git a/packages/web/package.json b/packages/web/package.json index 41b210c643d..0758c9f71df 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -18,6 +18,7 @@ "test": "jest --runInBand" }, "dependencies": { + "react-apollo": "^2.5.8", "@celo/utils": "^0.1.0", "@segment/in-eu": "^0.2.1", "@sentry/browser": "^5.6.2", diff --git a/packages/web/src/dev/Cover.tsx b/packages/web/src/dev/Cover.tsx index 6211f055b04..04d08d106cb 100644 --- a/packages/web/src/dev/Cover.tsx +++ b/packages/web/src/dev/Cover.tsx @@ -2,7 +2,6 @@ import * as React from 'react' import LazyLoad from 'react-lazyload' import { Image, StyleSheet, Text, View } from 'react-native' import Fade from 'react-reveal/Fade' -import LeaderBoard from 'src/dev/LeaderBoard' import Transceive from 'src/dev/Transceive' import { H2, H4 } from 'src/fonts/Fonts' import { I18nProps, withNamespaces } from 'src/i18n' @@ -10,21 +9,10 @@ import { Cell, GridRow, Spans } from 'src/layout/GridRow' import Button, { BTN } from 'src/shared/Button.3' import { HEADER_HEIGHT } from 'src/shared/Styles' import { colors, fonts, standardStyles, textStyles } from 'src/styles' +import LeaderBoardApp from './LeaderBoardApp' const DELAY = 100 const DURATION = 400 -const LEADERS = [ - { points: 8, identity: 'Rex' }, - { points: 840, identity: '100%_that_validator_who_is_an_absolute_diva' }, - { points: 3200, identity: 'Heisenberg' }, - - { points: 7600, identity: 'DX-West' }, - { points: 5000, identity: 'Simone2148' }, - { points: 4009, identity: '$celo-$' }, - { points: 1002, identity: '77zepher' }, - { points: 9400, identity: 'Gatsby & Durben' }, -] - const CoverComponent = React.memo(function Cover({ t }: I18nProps) { return ( @@ -56,7 +44,7 @@ const CoverComponent = React.memo(function Cover({ t }: I18nProps) { mobileStyle={standardStyles.blockMarginBottomMobile} > - + diff --git a/packages/web/src/dev/Engage.tsx b/packages/web/src/dev/Engage.tsx index eef355e2803..e49a3a4fbe8 100644 --- a/packages/web/src/dev/Engage.tsx +++ b/packages/web/src/dev/Engage.tsx @@ -1,7 +1,7 @@ import { I18nProps } from 'next-i18next' import * as React from 'react' -import Fade from 'react-reveal/Fade' import { Image, ImageSourcePropType, StyleSheet, Text, View } from 'react-native' +import Fade from 'react-reveal/Fade' import { H2, H3, H4 } from 'src/fonts/Fonts' import { NameSpaces, withNamespaces } from 'src/i18n' import { Cell, GridRow, Spans } from 'src/layout/GridRow' diff --git a/packages/web/src/dev/Features.tsx b/packages/web/src/dev/Features.tsx index ebed1c77da3..e34395d5f28 100644 --- a/packages/web/src/dev/Features.tsx +++ b/packages/web/src/dev/Features.tsx @@ -2,11 +2,11 @@ import { memo } from 'react' import { StyleSheet, View } from 'react-native' import Fade from 'react-reveal/Fade' import Feature from 'src/dev/Feature' +import { H3 } from 'src/fonts/Fonts' import { I18nProps, withNamespaces } from 'src/i18n' import { Cell, GridRow, Spans } from 'src/layout/GridRow' import { hashNav } from 'src/shared/menu-items' -import { colors, textStyles, standardStyles } from 'src/styles' -import { H3 } from 'src/fonts/Fonts' +import { colors, standardStyles, textStyles } from 'src/styles' const stableImg = require('src/dev/features/stable.png') const pkiImg = require('src/dev/features/pki.png') const govImg = require('src/dev/features/gov.png') diff --git a/packages/web/src/dev/LeaderBoard.tsx b/packages/web/src/dev/LeaderBoard.tsx index 93a9860f96f..0929859e112 100644 --- a/packages/web/src/dev/LeaderBoard.tsx +++ b/packages/web/src/dev/LeaderBoard.tsx @@ -1,7 +1,10 @@ import * as React from 'react' +import getConfig from 'next/config' import { LayoutChangeEvent, StyleSheet, Text, View } from 'react-native' import Racer from 'src/dev/Racer' +import { I18nProps, withNamespaces } from 'src/i18n' import { colors, fonts, standardStyles, textStyles } from 'src/styles' +import Button, { BTN, SIZE } from '../shared/Button.3' interface BoardProps { leaders: Competitor[] @@ -14,11 +17,13 @@ interface Competitor { interface State { width: number + page: number } -class LeaderBoard extends React.PureComponent { +class LeaderBoard extends React.PureComponent { state: State = { width: 0, + page: 0, } onLayout = (event: LayoutChangeEvent) => { @@ -26,8 +31,16 @@ class LeaderBoard extends React.PureComponent { this.setState({ width }) } + onExpand = () => { + const { page } = this.state + this.setState({ page: page + 1 }) + } + render() { - const sortedLeaders = this.props.leaders.sort(sorter) + const { page } = this.state + const { pageLength } = getConfig().publicRuntimeConfig.LEADERBOARD + const showExpandButton = this.props.leaders.length >= (page + 1) * pageLength + const sortedLeaders = this.props.leaders.sort(sorter).slice(0, pageLength * (page + 1)) const maxPoints = round(sortedLeaders[0].points * 1.1, 100) const width = this.state.width return ( @@ -49,11 +62,21 @@ class LeaderBoard extends React.PureComponent { /> ))} + {showExpandButton && ( + +