From 6ca82c09dbfa7121d7a856df84713724ae0f362c Mon Sep 17 00:00:00 2001
From: Atul Madhugiri <atulm@berkeley.edu>
Date: Thu, 28 Dec 2023 15:10:45 -0800
Subject: [PATCH] [web] Update `DisconnectedBar` to display based on
 `useNetworkConnected()`

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                              |  2 +-
 .../disconnected-bar-visibility-handler.js    |  4 ++--
 web/redux/disconnected-bar.css                |  7 +-----
 web/redux/disconnected-bar.js                 | 24 ++++++-------------
 4 files changed, 11 insertions(+), 26 deletions(-)

diff --git a/web/app.react.js b/web/app.react.js
index 03075f851a..aa8e7e1a6b 100644
--- a/web/app.react.js
+++ b/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';
diff --git a/web/redux/disconnected-bar-visibility-handler.js b/web/redux/disconnected-bar-visibility-handler.js
index 04d851aff1..9e4cc14f95 100644
--- a/web/redux/disconnected-bar-visibility-handler.js
+++ b/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 };
diff --git a/web/redux/disconnected-bar.css b/web/redux/disconnected-bar.css
index dd234d738d..cbe53dbb26 100644
--- a/web/redux/disconnected-bar.css
+++ b/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);
-}
diff --git a/web/redux/disconnected-bar.js b/web/redux/disconnected-bar.js
index 19d35aa2ca..14b1703e25 100644
--- a/web/redux/disconnected-bar.js
+++ b/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;