fix: Rename timer to stopwatch

Closes #392

client/src/components/Stopwatch/Stopwatch.jsx

@@ -0,0 +1,91 @@
+import upperFirst from 'lodash/upperFirst';
+import React, { useCallback, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { useForceUpdate, usePrevious } from '../../lib/hooks';
+
+import { formatStopwatch } from '../../utils/stopwatch';
+
+import styles from './Stopwatch.module.scss';
+
+const SIZES = {
+  TINY: 'tiny',
+  SMALL: 'small',
+  MEDIUM: 'medium',
+};
+
+const Stopwatch = React.memo(({ as, startedAt, total, size, isDisabled, onClick }) => {
+  const prevStartedAt = usePrevious(startedAt);
+  const forceUpdate = useForceUpdate();
+
+  const interval = useRef(null);
+
+  const start = useCallback(() => {
+    interval.current = setInterval(() => {
+      forceUpdate();
+    }, 1000);
+  }, [forceUpdate]);
+
+  const stop = useCallback(() => {
+    clearInterval(interval.current);
+  }, []);
+
+  useEffect(() => {
+    if (prevStartedAt) {
+      if (!startedAt) {
+        stop();
+      }
+    } else if (startedAt) {
+      start();
+    }
+  }, [startedAt, prevStartedAt, start, stop]);
+
+  useEffect(
+    () => () => {
+      stop();
+    },
+    [stop],
+  );
+
+  const contentNode = (
+    <span
+      className={classNames(
+        styles.wrapper,
+        styles[`wrapper${upperFirst(size)}`],
+        startedAt && styles.wrapperActive,
+        onClick && styles.wrapperHoverable,
+      )}
+    >
+      {formatStopwatch({ startedAt, total })}
+    </span>
+  );
+
+  const ElementType = as;
+
+  return onClick ? (
+    <ElementType type="button" disabled={isDisabled} className={styles.button} onClick={onClick}>
+      {contentNode}
+    </ElementType>
+  ) : (
+    contentNode
+  );
+});
+
+Stopwatch.propTypes = {
+  as: PropTypes.elementType,
+  startedAt: PropTypes.instanceOf(Date),
+  total: PropTypes.number.isRequired, // eslint-disable-line react/no-unused-prop-types
+  size: PropTypes.oneOf(Object.values(SIZES)),
+  isDisabled: PropTypes.bool,
+  onClick: PropTypes.func,
+};
+
+Stopwatch.defaultProps = {
+  as: 'button',
+  startedAt: undefined,
+  size: SIZES.MEDIUM,
+  isDisabled: false,
+  onClick: undefined,
+};
+
+export default Stopwatch;

client/src/components/Stopwatch/Stopwatch.module.scss

@@ -0,0 +1,57 @@
+:global(#app) {
+  .button {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    display: inline-block;
+    outline: none;
+    padding: 0;
+  }
+
+  .wrapper {
+    background: #dce0e4;
+    border: none;
+    border-radius: 3px;
+    color: #6a808b;
+    display: inline-block;
+    font-variant-numeric: tabular-nums;
+    outline: none;
+    text-align: left;
+    transition: background 0.3s ease;
+    vertical-align: top;
+  }
+
+  .wrapperActive {
+    background: #21ba45;
+    color: #fff;
+
+    &.wrapperHoverable:hover {
+      background: #16ab39;
+      color: #fff;
+    }
+  }
+
+  .wrapperHoverable:hover {
+    background: #d2d8dc;
+    color: #17394d;
+  }
+
+  /* Sizes */
+
+  .wrapperTiny {
+    font-size: 12px;
+    line-height: 20px;
+    padding: 0 6px;
+  }
+
+  .wrapperSmall {
+    font-size: 12px;
+    line-height: 20px;
+    padding: 2px 6px;
+  }
+
+  .wrapperMedium {
+    line-height: 20px;
+    padding: 6px 12px;
+  }
+}

client/src/components/Stopwatch/index.js

@@ -0,0 +1,3 @@
+import Stopwatch from './Stopwatch';
+
+export default Stopwatch;