인프런 커뮤니티 질문&답변

감사합니다.

2021, 새해 복  넘치시길 기원드립니다.

시간이 지난 것이라 이 소스파일이 맞는지 모르겠지만 참고하시기 바랍니다.

import React, { Component } from 'react'
import PropTypes from 'prop-types';

import {Grid, Row, Col, Panel} from 'react-bootstrap';
import {Button, ButtonGroup, ButtonToolbar} from 'react-bootstrap';
import {InputGroup, FormControl} from 'react-bootstrap';
import Glyphicon from "react-bootstrap/lib/Glyphicon";

import './css/bootstrap/css/bootstrap.min.css';
import './css/style.css';

class MyComponent extends Component {

    //legacy Context API
    constructor(props, context) {
        super(props);
        this.drizzle = context.drizzle;
        this.contracts = context.drizzle.contracts;

        this.state = {
            val: 0,
            storedData: 0,
        }
    }

    componentDidMount() {

        this.contracts.SimpleStorage.events.Change()
            .on('data', (event) => {
                this.setState({storedData: event.returnValues.newVal});
            })
            .on('error', (err) => { console.log(err) } );
    }

    handleSet = () => {
        const val = this.state.val;
        if (val && !isNaN(val)) {
            //this.contracts.SimpleStorage.methods.set.cacheSend(val);
            this.contracts.SimpleStorage.methods.set(val).send({from: this.props.accounts[0]});
        }
    }

    handleGet = async () => {
        const storedData = await this.contracts.SimpleStorage.methods.get().call();
        this.setState({storedData});
    }

    handleSayHello = () => {
        // this.props.onSayHello();
        this.drizzle.store.dispatch({type: 'SAY_HELLO', payload: 'SOMETHING'});
    }

    handleChange = (e) => {
        if (e.target.value !== "") {
            this.setState({val: e.target.value});
        }
    }

    render () {

        return (
            <Grid fluid={true}>
                <Row>
                    <Col md={5}>
                        <InputGroup style={{paddingBottom:'10px'}}>
                            <InputGroup.Addon>Value</InputGroup.Addon>
                            <FormControl type="number" placeholder="Enter number" bsSize="lg" onChange={this.handleChange} />
                        </InputGroup>
                    </Col>
                </Row>
                <Row>
                    <Col md={5} style={{textAlign: "center"}}>
                        <div className="button">
                            <ButtonToolbar>
                                <ButtonGroup justified>
                                    <Button href="#" bsStyle="primary" bsSize="large" block onClick={this.handleSet}>
                                        Set
                                    </Button>
                                    <Button href="#" bsStyle="info" bsSize="large" block onClick={this.handleGet}>
                                        Get
                                    </Button>
                                    <Button href="#" bsStyle="success" bsSize="large" block onClick={this.handleSayHello}>
                                        Hello!
                                    </Button>
                                </ButtonGroup>
                            </ButtonToolbar>
                        </div>
                    </Col>
                </Row>
                <Row style={{marginTop:'10px'}}>
                    <Col md={5}>
                        <Panel bsStyle="info">
                            <Panel.Heading>
                                <Panel.Title>
                                    <Glyphicon glyph="signal" /> Stored Data - Event
                                </Panel.Title>
                            </Panel.Heading>
                            <Panel.Body>
                                <div style={{display:"inline-block"}}>
                                    <p>{this.state.storedData}</p>
                                </div>
                            </Panel.Body>
                        </Panel>
                    </Col>
                </Row>
            </Grid>
        )
    }
}

// legacy Context API
MyComponent.contextTypes = {
    drizzle: PropTypes.object
}

export default MyComponent;