[web] Update DisconnectedBar to display based on `useNetworkConnect…

…ed()`

Summary:
Part of https://linear.app/comm/issue/ENG-6137/modify-disconnectedbar-so-it-pulls-from-connectivityinfo.

To begin, I'm going to update the `web` and `native` components to skip eg `useShouldShowDisconnectedBar`, etc. and just get the boolean they need (is the network connected or not) "directly" from `useNetworkConnected` on `web` and `(state => state.connectivity.connected)` on `native`.

I'll then go ahead and rename all of eg `useDisconnectedBarVisibilityHandler` to make it clear that they're no longer connected to the `DisconnectedBar`. I think we'll still want all the Redux actions and whatnot for the "Keyserver status"? page that @Ginsu is working on, so I won't rip them out.

Test Plan:
1. Open local `web` app
2. Kill local `keyserver`
3. Observe that nothing happens:

{F1010487}

4. Disconnect laptop from WiFi
5. Observe the `DisconnectedBar`:

{F1010488}

Reviewers: ashoat, ginsu, tomek

Reviewed By: ashoat, ginsu

Subscribers: inka, ginsu

Differential Revision: https://phab.comm.dev/D10469

web/app.react.js

@@ -55,7 +55,7 @@ import Topbar from './navigation-panels/topbar.react.js';
 import useBadgeHandler from './push-notif/badge-handler.react.js';
 import { PushNotificationsHandler } from './push-notif/push-notifs-handler.js';
 import { updateNavInfoActionType } from './redux/action-types.js';
-import DisconnectedBarVisibilityHandler from './redux/disconnected-bar-visibility-handler.js';
+import { DisconnectedBarVisibilityHandler } from './redux/disconnected-bar-visibility-handler.js';
 import DisconnectedBar from './redux/disconnected-bar.js';
 import FocusHandler from './redux/focus-handler.react.js';
 import { persistConfig } from './redux/persist.js';

web/redux/disconnected-bar-visibility-handler.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 
 import { useDisconnectedBarVisibilityHandler } from 'lib/hooks/disconnected-bar.js';
 
-function useNetworkConnected() {
+function useNetworkConnected(): boolean {
   const [networkConnected, setNetworkConnected] = React.useState(true);
   React.useEffect(() => {
     if (!window) {
@@ -30,4 +30,4 @@ function DisconnectedBarVisibilityHandler(): null {
   return null;
 }
 
-export default DisconnectedBarVisibilityHandler;
+export { useNetworkConnected, DisconnectedBarVisibilityHandler };

web/redux/disconnected-bar.css

@@ -8,12 +8,7 @@ p.bar {
   font-size: var(--m-font-16);
 }
 
-p.connecting {
+p.disconnected {
   background-color: var(--disconnected-bar-connecting-bg);
   color: var(--disconnected-bar-connecting-color);
 }
-
-p.disconnected {
-  background-color: var(--disconnected-bar-alert-bg);
-  color: var(--disconnected-bar-alert-color);
-}

web/redux/disconnected-bar.js

@@ -3,29 +3,19 @@
 import classNames from 'classnames';
 import * as React from 'react';
 
-import {
-  useShouldShowDisconnectedBar,
-  useDisconnectedBar,
-} from 'lib/hooks/disconnected-bar.js';
-
+import { useNetworkConnected } from './disconnected-bar-visibility-handler.js';
 import css from './disconnected-bar.css';
 
 function DisconnectedBar(): React.Node {
-  const { shouldShowDisconnectedBar } = useShouldShowDisconnectedBar();
-  const [showing, setShowing] = React.useState(shouldShowDisconnectedBar);
-
-  const barCause = useDisconnectedBar(setShowing);
-  const isDisconnected = barCause === 'disconnected';
-  const text = isDisconnected ? 'DISCONNECTED' : 'CONNECTING…';
-  if (!showing) {
+  const isNetworkConnected = useNetworkConnected();
+  if (isNetworkConnected) {
     return null;
   }
-
-  const textClasses = classNames(css.bar, {
-    [css.disconnected]: isDisconnected,
-    [css.connecting]: !isDisconnected,
+  const textClasses = classNames({
+    [css.bar]: true,
+    [css.disconnected]: !isNetworkConnected,
   });
-  return <p className={textClasses}>{text}</p>;
+  return <p className={textClasses}>{'DISCONNECTED'}</p>;
 }
 
 export default DisconnectedBar;