diff options
Diffstat (limited to 'app/containers/App/Console.js')
-rw-r--r-- | app/containers/App/Console.js | 55 |
1 files changed, 34 insertions, 21 deletions
diff --git a/app/containers/App/Console.js b/app/containers/App/Console.js index 98d4147..175610d 100644 --- a/app/containers/App/Console.js +++ b/app/containers/App/Console.js @@ -4,6 +4,7 @@ import { Container, Header } from '@/components/Mux'; import LotteryContract from '@/services/Lottery'; import LotteryItem from './LotteryItem'; +import LastItem from './LastItem'; import EmptyItem from './EmptyItem'; const StretchedContainer = styled(Container)` @@ -15,7 +16,9 @@ const Body = styled.div` position: absolute; height: calc(100% - 30px); width: calc(100% - 40px); - display: block; + display: flex; + flex-direction: column; + justify-content: flex-end; `; // eslint-disable-next-line react/prefer-stateless-function @@ -25,15 +28,15 @@ class Console extends PureComponent { }; componentDidMount() { - // this.updateList(); - // setInterval(this.updateList, 10000); + this.updateList(); + setInterval(this.updateList, 10000); } - setBodyRef = (ref) => { - this.body = ref; + // setBodyRef = (ref) => { + // this.body = ref; - this.scrollToBottom(); - }; + // this.scrollToBottom(); + // }; updateList = () => { LotteryContract.getPastEvents('NumberRevealed', { @@ -42,14 +45,14 @@ class Console extends PureComponent { }) .then(events => this.setState({ list: events, - }, this.scrollToBottom)); + })); } - scrollToBottom = () => { - if (!this.body) return; + // scrollToBottom = () => { + // if (!this.body) return; - this.body.scrollTop = this.body.offsetHeight; - } + // this.body.scrollTop = this.body.offsetHeight; + // } render() { const { list } = this.state; @@ -60,15 +63,25 @@ class Console extends PureComponent { Lottery History </Header> - <Body innerRef={this.setBodyRef}> - {list.map(event => ( - <LotteryItem - key={event.transactionHash} - hash={event.transactionHash} - timestamp={event.returnValues[0]} - number={`00${event.returnValues[1]}`.slice(-3)} - rawValue={event.returnValues[2]} - /> + <Body> + {list.map((event, index) => ( + index !== list.length - 1 ? ( + <LotteryItem + key={event.transactionHash} + hash={event.transactionHash} + timestamp={event.returnValues[0]} + number={`00${event.returnValues[1]}`.slice(-3)} + rawValue={event.returnValues[2]} + /> + ) : ( + <LastItem + key={event.transactionHash} + hash={event.transactionHash} + timestamp={event.returnValues[0]} + number={`00${event.returnValues[1]}`.slice(-3)} + rawValue={event.returnValues[2]} + /> + ) ))} {!list.length && <EmptyItem />} |