app/containers/App/Console.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

import React, { PureComponent } from 'react';
import styled from 'styled-components';
import { Container, Header } from '@/components/Mux';
import LotteryContract from '@/services/Lottery';

import LotteryItem from './LotteryItem';
import EmptyItem from './EmptyItem';

const StretchedContainer = styled(Container)`
  flex: 1 1 auto;
`;

const Body = styled.div`
  overflow: auto;
  position: absolute;
  height: calc(100% - 30px);
  width: calc(100% - 40px);
  display: block;
`;

// eslint-disable-next-line react/prefer-stateless-function
class Console extends PureComponent {
  state = {
    list: [],
  };

  componentDidMount() {
    // this.updateList();
    // setInterval(this.updateList, 10000);
  }

  setBodyRef = (ref) => {
    this.body = ref;

    this.scrollToBottom();
  };

  updateList = () => {
    LotteryContract.getPastEvents('NumberRevealed', {
      fromBlock: 0,
      toBlock: 'latest',
    })
      .then(events => this.setState({
        list: events,
      }, this.scrollToBottom));
  }

  scrollToBottom = () => {
    if (!this.body) return;

    this.body.scrollTop = this.body.offsetHeight;
  }

  render() {
    const { list } = this.state;

    return (
      <StretchedContainer>
        <Header>
          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]}
            />
          ))}

          {!list.length && <EmptyItem />}
        </Body>
      </StretchedContainer>
    );
  }
}

export default Console;