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

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';

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: flex;
  flex-direction: column;
  justify-content: flex-end;
`;

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

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

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

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

    return (
      <StretchedContainer>
        <Header>
          Lottery History
        </Header>

        <Body>
          {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>
      </StretchedContainer>
    );
  }
}

export default Console;