Adding Connection status to redux store

src/components/ConnectionDetailsModal/index.tsx

@@ -1,38 +1,39 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { useActiveTab, useActiveTabUrl } from '../../reducers/requests';
-import Modal, {
-  ModalHeader,
-  ModalContent,
-  ModalFooter,
-} from '../../components/Modal/Modal';
+import React, { useCallback, useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import {
+  useActiveTabUrl,
+  setConnection,
+  useIsConnected,
+} from '../../reducers/requests';
+import Modal, { ModalHeader, ModalContent } from '../../components/Modal/Modal';
 import { deleteConnection, getConnection } from '../../entries/Background/db';
-import { urlify } from '../../utils/misc';
-import Icon from '../Icon';
 
 const ConnectionDetailsModal = (props: {
   showConnectionDetails: boolean;
-  setShowConnectionDetails: any;
+  setShowConnectionDetails: (show: boolean) => void;
 }) => {
+  const dispatch = useDispatch();
   const activeTabOrigin = useActiveTabUrl();
-
-  const [connected, setConnected] = useState(false);
+  const connected = useIsConnected();
 
   useEffect(() => {
     (async () => {
       if (activeTabOrigin) {
         const isConnected: boolean | null = await getConnection(
-          activeTabOrigin?.origin,
+          activeTabOrigin.origin,
         );
-        isConnected ? setConnected(true) : setConnected(false);
+        dispatch(setConnection(!!isConnected));
       }
     })();
-  }, []);
+  }, [activeTabOrigin, dispatch]);
 
   const handleDisconnect = useCallback(async () => {
-    await deleteConnection(activeTabOrigin?.origin as string);
-    props.setShowConnectionDetails(false);
-    setConnected(false);
-  }, [props.setShowConnectionDetails]);
+    if (activeTabOrigin?.origin) {
+      await deleteConnection(activeTabOrigin.origin);
+      props.setShowConnectionDetails(false);
+      dispatch(setConnection(false));
+    }
+  }, [activeTabOrigin?.origin, dispatch, props]);
 
   return (
     <Modal
@@ -56,8 +57,7 @@ const ConnectionDetailsModal = (props: {
         {connected && (
           <button
             className="button disabled:opacity-50 self-end"
-            disabled={!connected}
-            onClick={() => handleDisconnect()}
+            onClick={handleDisconnect}
           >
             Disconnect
           </button>

src/entries/Popup/Popup.tsx

@@ -32,6 +32,7 @@ import { RunPluginApproval } from '../../pages/RunPluginApproval';
 import Icon from '../../components/Icon';
 import classNames from 'classnames';
 import { getConnection } from '../Background/db';
+import { useIsConnected, setConnection } from '../../reducers/requests';
 
 const Popup = () => {
   const dispatch = useDispatch();
@@ -123,16 +124,17 @@ const Popup = () => {
 export default Popup;
 
 function AppConnectionLogo() {
+  const dispatch = useDispatch();
   const activeTab = useActiveTab();
   const url = useActiveTabUrl();
   const [showConnectionDetails, setShowConnectionDetails] = useState(false);
-  const [connected, setConnected] = useState(false);
+  const connected = useIsConnected();
 
   useEffect(() => {
     (async () => {
       if (url) {
         const isConnected: boolean | null = await getConnection(url?.origin);
-        isConnected ? setConnected(true) : setConnected(false);
+        dispatch(setConnection(!!isConnected));
       }
     })();
   }, [url]);

src/reducers/requests.ts

@@ -18,6 +18,7 @@ enum ActionType {
   '/requests/setRequests' = '/requests/setRequests',
   '/requests/addRequest' = '/requests/addRequest',
   '/requests/setActiveTab' = '/requests/setActiveTab',
+  '/requests/isConnected' = '/requests/isConnected',
 }
 
 type Action<payload> = {
@@ -32,11 +33,22 @@ type State = {
     [requestId: string]: RequestLog;
   };
   activeTab: chrome.tabs.Tab | null;
+  isConnected: boolean;
 };
 
 const initialState: State = {
   map: {},
   activeTab: null,
+  isConnected: false,
+};
+
+export const setConnection = (isConnected: boolean): Action<boolean> => ({
+  type: ActionType['/requests/isConnected'],
+  payload: isConnected,
+});
+
+export const isConnected = (isConnected: boolean) => async () => {
+  return isConnected;
 };
 
 export const setRequests = (requests: RequestLog[]): Action<RequestLog[]> => ({
@@ -113,6 +125,11 @@ export default function requests(
           [action.payload.requestId]: action.payload,
         },
       };
+    case ActionType['/requests/isConnected']:
+      return {
+        ...state,
+        isConnected: action.payload,
+      };
     default:
       return state;
   }
@@ -142,3 +159,7 @@ export const useActiveTabUrl = (): URL | null => {
     return activeTab?.url ? new URL(activeTab.url) : null;
   }, deepEqual);
 };
+
+export const useIsConnected = (): boolean => {
+  return useSelector((state: AppRootState) => state.requests.isConnected);
+};