presence: Convert PresenceHeartbeat to a Hooks-based function

The single `useEffect` seems easier to reason about than the
collection of lifecycle methods.

Author: gnprice

src/presence/PresenceHeartbeat.js

@@ -1,82 +1,47 @@
 // @flow strict-local
-import { PureComponent } from 'react';
-import type { ComponentType } from 'react';
+import * as React from 'react';
 import { AppState } from 'react-native';
 
-import { assumeSecretlyGlobalState, type Dispatch } from '../reduxTypes';
-import { connect } from '../react-redux';
+import { useGlobalSelector, useDispatch } from '../react-redux';
 import { getHasAuth } from '../account/accountsSelectors';
 import { reportPresence } from '../actions';
 import Heartbeat from './heartbeat';
 
-type OuterProps = $ReadOnly<{||}>;
-
-type SelectorProps = $ReadOnly<{|
-  hasAuth: boolean,
-|}>;
-
-type Props = $ReadOnly<{|
-  ...OuterProps,
-
-  // from `connect`
-  dispatch: Dispatch,
-  ...SelectorProps,
-|}>;
+type Props = $ReadOnly<{||}>;
 
 /**
  * Component providing a recurrent `presence` signal.
  */
-// The name "PureComponent" is potentially misleading here, as this component is
-// in no reasonable sense "pure" -- its entire purpose is to emit network calls
-// for their observable side effects as a side effect of being rendered.
-//
-// (This is merely a misnomer on React's part, rather than a functional error. A
-// `PureComponent` is simply one which never updates except when its props have
-// changed -- which is exactly what we want.)
-class PresenceHeartbeatInner extends PureComponent<Props> {
-  /** Callback for Heartbeat object. */
-  onHeartbeat = () => {
-    if (this.props.hasAuth) {
-      // TODO(#5005): should ensure this gets the intended account
-      this.props.dispatch(reportPresence(true));
-    }
-  };
-
-  heartbeat: Heartbeat = new Heartbeat(this.onHeartbeat, 1000 * 60);
-
-  componentDidMount() {
-    AppState.addEventListener('change', this.updateHeartbeatState);
-    this.updateHeartbeatState(); // conditional start
-  }
-
-  componentWillUnmount() {
-    AppState.removeEventListener('change', this.updateHeartbeatState);
-    this.heartbeat.stop(); // unconditional stop
-  }
-
-  // React to any state change.
-  updateHeartbeatState = () => {
-    // heartbeat.toState is idempotent
-    this.heartbeat.toState(AppState.currentState === 'active' && this.props.hasAuth);
-  };
+// TODO(#5005): either make one of these per account, or make it act on all accounts
+export default function PresenceHeartbeat(props: Props): React.Node {
+  const dispatch = useDispatch();
+  const hasAuth = useGlobalSelector(getHasAuth); // a job for withHaveServerDataGate?
 
-  // React to props changes.
-  //
-  // Not dependent on `render()`'s return value, although the docs may not yet
-  // be clear on that. See: https://github.com/reactjs/reactjs.org/pull/1230.
-  componentDidUpdate() {
-    this.updateHeartbeatState();
-  }
+  React.useEffect(() => {
+    if (!hasAuth) {
+      return;
+    }
 
-  render() {
-    return null;
-  }
+    const onHeartbeat = () => {
+      // TODO(#5005): should ensure this gets the intended account
+      dispatch(reportPresence(true));
+    };
+    const heartbeat = new Heartbeat(onHeartbeat, 1000 * 60);
+
+    // React to any state change.
+    const updateHeartbeatState = () => {
+      // heartbeat.toState is idempotent
+      heartbeat.toState(AppState.currentState === 'active');
+    };
+
+    const sub = AppState.addEventListener('change', updateHeartbeatState);
+    updateHeartbeatState(); // conditional start
+
+    return () => {
+      sub.remove();
+      heartbeat.stop(); // unconditional stop
+    };
+  }, [dispatch, hasAuth]);
+
+  return null;
 }
-
-/** (NB this is a per-account component.) */
-// TODO(#5005): either make one of these per account, or make it act on all accounts
-const PresenceHeartbeat: ComponentType<OuterProps> = connect(state => ({
-  hasAuth: getHasAuth(assumeSecretlyGlobalState(state)), // a job for withHaveServerDataGate?
-}))(PresenceHeartbeatInner);
-
-export default PresenceHeartbeat;