Template Module frontend

code.js

import React, { useState, useEffect } from "react";
import { Form, Input, Grid, Card, Statistic } from "semantic-ui-react";

import TxButton from "./TxButton";

export default function TemplateModule(props) {
  const { api, accountPair } = props;
  const [status, setStatus] = useState("");

  const [currentValue, setCurrentValue] = useState(0);
  const [newValue, setNewValue] = useState(0);

  useEffect(() => {
    let unsubscribe;

    api.query.templateModule.something()
      .then(onChainValue => {
        setCurrentValue(onChainValue)
      })
      .catch(console.error);

    // Call this when the component unmounts (eg page crashes)
    //return () => unsubscribeAll && unsubscribeAll();
  }, [api.query.templateModule.something]);

  return (
    <Grid.Column>
      <h1>Template Module</h1>
      <Card>
        <Card.Content textAlign="center">
          <Statistic
            label={"Current Value"}
            value={currentValue}
          />
        </Card.Content>
      </Card>
      <Form>
        <Form.Field>
          <Input
            label="New Value"
            fluid
            // data.value will contain the new value in the field
            onChange={(_, data) => {
              setNewValue(data.value)
            }}
            state="newValue"
            type="number"
          />
        </Form.Field>
        <Form.Field>
          <TxButton
            api={api}
            accountPair={accountPair}
            label={"Store New Value"}
            params={["TODO"]}
            setStatus={setStatus}
            tx={api.tx.templateModule.doSomething}
          />
          {status}
        </Form.Field>
      </Form>
    </Grid.Column>
  );
}