client/src/components/Clock.js
author Alexandre Segura <mex.zktk@gmail.com>
Thu, 08 Jun 2017 11:13:41 +0200
changeset 21 284e866f55c7
child 28 abf9f3ff2635
permissions -rw-r--r--
First version of categories tooltip. - Use react-portal to display hovering menu. - Add custom Mark to store category data.
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
21
284e866f55c7 First version of categories tooltip.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff changeset
     1
import React, { Component } from 'react';
284e866f55c7 First version of categories tooltip.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff changeset
     2
import { Label } from 'react-bootstrap';
284e866f55c7 First version of categories tooltip.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff changeset
     3
import moment from 'moment';
284e866f55c7 First version of categories tooltip.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff changeset
     4
284e866f55c7 First version of categories tooltip.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff changeset
     5
class Clock extends Component {
284e866f55c7 First version of categories tooltip.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff changeset
     6
284e866f55c7 First version of categories tooltip.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff changeset
     7
  state = {
284e866f55c7 First version of categories tooltip.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff changeset
     8
    time: moment().format('H:mm:ss'),
284e866f55c7 First version of categories tooltip.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff changeset
     9
  }
284e866f55c7 First version of categories tooltip.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff changeset
    10
284e866f55c7 First version of categories tooltip.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff changeset
    11
  componentDidMount() {
284e866f55c7 First version of categories tooltip.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff changeset
    12
    setInterval(() => {
284e866f55c7 First version of categories tooltip.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff changeset
    13
      const time = moment().format('H:mm:ss');
284e866f55c7 First version of categories tooltip.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff changeset
    14
      this.setState({ time });
284e866f55c7 First version of categories tooltip.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff changeset
    15
    }, 1000);
284e866f55c7 First version of categories tooltip.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff changeset
    16
  }
284e866f55c7 First version of categories tooltip.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff changeset
    17
284e866f55c7 First version of categories tooltip.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff changeset
    18
  render() {
284e866f55c7 First version of categories tooltip.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff changeset
    19
    return (
284e866f55c7 First version of categories tooltip.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff changeset
    20
      <Label bsStyle="info">{ this.state.time }</Label>
284e866f55c7 First version of categories tooltip.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff changeset
    21
    );
284e866f55c7 First version of categories tooltip.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff changeset
    22
  }
284e866f55c7 First version of categories tooltip.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff changeset
    23
}
284e866f55c7 First version of categories tooltip.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff changeset
    24
284e866f55c7 First version of categories tooltip.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff changeset
    25
export default Clock