.circleci
.github
.vscode
__mocks__
app
flow-typed
public
server
shared
components
Branding.js
Breadcrumb.js
BreadcrumbMenu.js
Flex.js
GithubLogo.js
GoogleLogo.js
Notice.js
OutlineLogo.js
SlackLogo.js
TeamLogo.js
Time.js
styles
utils
constants.js
random.js
.babelrc
.env.sample
.eslintignore
.eslintrc
.flowconfig
.gitignore
.sequelizerc
CODE_OF_CONDUCT.md
Dockerfile
LICENSE
Makefile
Procfile
README.md
SECURITY.md
app.json
docker-compose.yml
index.js
init.js
package.json
setupJest.js
webpack.config.dev.js
webpack.config.js
webpack.config.prod.js
yarn.lock
d3773dc943
* first pass at updating all Time components each second * fix a couple date variable typos * use class style state management instead of hooks * address feedback * lint Co-authored-by: Tom Moor <tom.moor@gmail.com>
56 lines
1.2 KiB
JavaScript
56 lines
1.2 KiB
JavaScript
// @flow
|
|
import * as React from 'react';
|
|
import Tooltip from 'components/Tooltip';
|
|
import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
|
|
import format from 'date-fns/format';
|
|
|
|
let callbacks = [];
|
|
|
|
// This is a shared timer that fires every minute, used for
|
|
// updating all Time components across the page all at once.
|
|
setInterval(() => {
|
|
callbacks.forEach(cb => cb());
|
|
}, 1000 * 60);
|
|
|
|
function eachMinute(fn) {
|
|
callbacks.push(fn);
|
|
|
|
return () => {
|
|
callbacks = callbacks.filter(cb => cb !== fn);
|
|
};
|
|
}
|
|
|
|
type Props = {
|
|
dateTime: string,
|
|
children?: React.Node,
|
|
};
|
|
|
|
class Time extends React.Component<Props> {
|
|
removeEachMinuteCallback: () => void;
|
|
|
|
componentDidMount() {
|
|
this.removeEachMinuteCallback = eachMinute(() => {
|
|
this.forceUpdate();
|
|
});
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
this.removeEachMinuteCallback();
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<Tooltip
|
|
tooltip={format(this.props.dateTime, 'MMMM Do, YYYY h:mm a')}
|
|
placement="bottom"
|
|
>
|
|
<time dateTime={this.props.dateTime}>
|
|
{this.props.children || distanceInWordsToNow(this.props.dateTime)}
|
|
</time>
|
|
</Tooltip>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Time;
|