client/src/components/Clock.js
author Alexandre Segura <mex.zktk@gmail.com>
Thu, 22 Jun 2017 11:58:27 +0200
changeset 73 7e8cdc74d86f
parent 28 abf9f3ff2635
child 143 cfcbf4bc66f1
permissions -rw-r--r--
Make session summary scrollable.
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'),
28
abf9f3ff2635 Clear interval when component unmounts.
Alexandre Segura <mex.zktk@gmail.com>
parents: 21
diff changeset
     9
    intervalID: null
21
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
284e866f55c7 First version of categories tooltip.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff changeset
    12
  componentDidMount() {
28
abf9f3ff2635 Clear interval when component unmounts.
Alexandre Segura <mex.zktk@gmail.com>
parents: 21
diff changeset
    13
    const intervalID = setInterval(() => {
21
284e866f55c7 First version of categories tooltip.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff changeset
    14
      const time = moment().format('H:mm:ss');
284e866f55c7 First version of categories tooltip.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff changeset
    15
      this.setState({ time });
284e866f55c7 First version of categories tooltip.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff changeset
    16
    }, 1000);
28
abf9f3ff2635 Clear interval when component unmounts.
Alexandre Segura <mex.zktk@gmail.com>
parents: 21
diff changeset
    17
abf9f3ff2635 Clear interval when component unmounts.
Alexandre Segura <mex.zktk@gmail.com>
parents: 21
diff changeset
    18
    this.setState({ intervalID });
abf9f3ff2635 Clear interval when component unmounts.
Alexandre Segura <mex.zktk@gmail.com>
parents: 21
diff changeset
    19
  }
abf9f3ff2635 Clear interval when component unmounts.
Alexandre Segura <mex.zktk@gmail.com>
parents: 21
diff changeset
    20
abf9f3ff2635 Clear interval when component unmounts.
Alexandre Segura <mex.zktk@gmail.com>
parents: 21
diff changeset
    21
  componentWillUnmount() {
abf9f3ff2635 Clear interval when component unmounts.
Alexandre Segura <mex.zktk@gmail.com>
parents: 21
diff changeset
    22
    clearInterval(this.state.intervalID);
21
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
  render() {
284e866f55c7 First version of categories tooltip.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff changeset
    26
    return (
284e866f55c7 First version of categories tooltip.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff changeset
    27
      <Label bsStyle="info">{ this.state.time }</Label>
284e866f55c7 First version of categories tooltip.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff changeset
    28
    );
284e866f55c7 First version of categories tooltip.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff changeset
    29
  }
284e866f55c7 First version of categories tooltip.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff changeset
    30
}
284e866f55c7 First version of categories tooltip.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff changeset
    31
284e866f55c7 First version of categories tooltip.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff changeset
    32
export default Clock