feat(reactotron-app): Network tab with api responses

apps/reactotron-app/src/renderer/App.tsx

@@ -15,6 +15,7 @@ import Overlay from "./pages/reactNative/Overlay"
 import Storybook from "./pages/reactNative/Storybook"
 import CustomCommands from "./pages/customCommands"
 import Help from "./pages/help"
+import NetworkPage from "./pages/network"
 
 const AppContainer = styled.div`
   position: absolute;
@@ -56,6 +57,8 @@ function App() {
 
                 {/* Timeline */}
                 <Route path="/timeline" element={<Timeline />} />
+                {/* Network */}
+                <Route path="/network" element={<NetworkPage />} />
 
                 {/* State */}
                 <Route path="/state/subscriptions" element={<Subscriptions />} />

apps/reactotron-app/src/renderer/ReactotronBrain.tsx

@@ -6,6 +6,7 @@ import {
   CustomCommandsProvider,
   ReactNativeProvider,
   TimelineProvider,
+  NetworkProvider,
   StateProvider,
 } from "reactotron-core-ui"
 
@@ -15,6 +16,7 @@ interface Props {
   commands: Command[]
   sendCommand: (type: string, payload: any, clientId?: string) => void
   clearCommands: () => void
+  clearNetworkCommands: () => void
   addCommandListener: (callback: (command: Command) => void) => void
 }
 
@@ -23,6 +25,7 @@ const ReactotronBrain: FunctionComponent<PropsWithChildren<Props>> = ({
   commands,
   sendCommand,
   clearCommands,
+  clearNetworkCommands,
   addCommandListener,
   children,
 }) => {
@@ -31,17 +34,20 @@ const ReactotronBrain: FunctionComponent<PropsWithChildren<Props>> = ({
       commands={commands}
       sendCommand={sendCommand}
       clearCommands={clearCommands}
+      clearNetworkCommands={clearNetworkCommands}
       addCommandListener={addCommandListener}
     >
-      <TimelineProvider>
-        <StateProvider>
-          <CustomCommandsProvider>
-            <ReactNativeProvider>
-              <KeybindHandler>{children}</KeybindHandler>
-            </ReactNativeProvider>
-          </CustomCommandsProvider>
-        </StateProvider>
-      </TimelineProvider>
+      <NetworkProvider>
+        <TimelineProvider>
+          <StateProvider>
+            <CustomCommandsProvider>
+              <ReactNativeProvider>
+                <KeybindHandler>{children}</KeybindHandler>
+              </ReactNativeProvider>
+            </CustomCommandsProvider>
+          </StateProvider>
+        </TimelineProvider>
+      </NetworkProvider>
     </ReactotronProvider>
   )
 }

apps/reactotron-app/src/renderer/components/SideBar/Sidebar.tsx

@@ -7,6 +7,7 @@ import {
   MdWarning,
   MdOutlineMobileFriendly,
   MdMobiledataOff,
+  MdNetworkCheck,
 } from "react-icons/md"
 import { FaMagic } from "react-icons/fa"
 import styled from "styled-components"
@@ -58,6 +59,7 @@ function SideBar({ isOpen, serverStatus }: { isOpen: boolean; serverStatus: Serv
     <SideBarContainer $isOpen={isOpen}>
       <SideBarButton image={reactotronLogo} path="/" text="Home" hideTopBar />
       <SideBarButton icon={MdReorder} path="/timeline" text="Timeline" />
+      <SideBarButton icon={MdNetworkCheck} path="/network" text="Network" />
       <SideBarButton
         icon={MdAssignment}
         path="/state/subscriptions"

apps/reactotron-app/src/renderer/contexts/Standalone/index.tsx

@@ -31,6 +31,7 @@ const Provider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
     selectedConnection,
     selectConnection,
     clearSelectedConnectionCommands,
+    clearNetworkCommands,
     serverStarted,
     serverStopped,
     connectionEstablished,
@@ -89,6 +90,7 @@ const Provider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
         commands={(selectedConnection || { commands: [] }).commands}
         sendCommand={sendCommand}
         clearCommands={clearSelectedConnectionCommands}
+        clearNetworkCommands={clearNetworkCommands}
         addCommandListener={addCommandListener}
       >
         {children}

apps/reactotron-app/src/renderer/contexts/Standalone/useStandalone.test.ts

@@ -286,7 +286,7 @@ describe("contexts/Standalone/useStandalone", () => {
       expect(result.current.orphanedCommands[0]).toEqual({ connectionId: 1, payload: true })
     })
 
-    it("should clear commands from a connection", () => {
+    it("should clear commands from a connection but keeping the api ones", () => {
       const { result } = renderHook(() => useStandalone())
 
       act(() => {
@@ -299,15 +299,43 @@ describe("contexts/Standalone/useStandalone", () => {
 
       act(() => {
         result.current.commandReceived({ clientId: "1234", payload: true })
+        result.current.commandReceived({ clientId: "1234", payload: true, type: "api.response" })
       })
 
-      expect(result.current.connections[0].commands.length).toEqual(1)
-      expect(result.current.connections[0].commands[0]).toEqual({ clientId: "1234", payload: true })
+      expect(result.current.connections[0].commands.length).toEqual(2)
+      expect(result.current.connections[0].commands[0]).toEqual({ clientId: "1234", payload: true, type: "api.response"})
+      expect(result.current.connections[0].commands[1]).toEqual({ clientId: "1234", payload: true })
 
       act(() => {
         result.current.clearSelectedConnectionCommands()
       })
 
+      expect(result.current.connections[0].commands.length).toEqual(1)
+      expect(result.current.connections[0].commands[0]).toEqual({ clientId: "1234", payload: true, type: "api.response"})
+    })
+
+    it("should clear network commands from a connection", () => {
+      const { result } = renderHook(() => useStandalone())
+
+      act(() => {
+        result.current.connectionEstablished({
+          clientId: "1234",
+          id: 0,
+          platform: "ios",
+        })
+      })
+
+      act(() => {
+        result.current.commandReceived({ clientId: "1234", payload: true, type: "api.response" })
+      })
+
+      expect(result.current.connections[0].commands.length).toEqual(1)
+      expect(result.current.connections[0].commands[0]).toEqual({ clientId: "1234", payload: true, type: "api.response" })
+
+      act(() => {
+        result.current.clearNetworkCommands()
+      })
+
       expect(result.current.connections[0].commands.length).toEqual(0)
     })
 

apps/reactotron-app/src/renderer/contexts/Standalone/useStandalone.ts

@@ -1,12 +1,14 @@
 import { useCallback, useReducer } from "react"
 import { produce } from "immer"
+import { CommandType } from "reactotron-core-contract"
 
 export enum ActionTypes {
   ServerStarted = "SERVER_STARTED",
   ServerStopped = "SERVER_STOPPED",
   AddConnection = "ADD_CONNECTION",
   RemoveConnection = "REMOVE_CONNECTION",
   ClearConnectionCommands = "CLEAR_CONNECTION_COMMANDS",
+  ClearNetworkCommands = "CLEAR_NETWORK_COMMANDS",
   CommandReceived = "COMMAND_RECEIVED",
   ChangeSelectedClientId = "CHANGE_SELECTED_CLIENT_ID",
   AddCommandHandler = "ADD_COMMAND_HANDLER",
@@ -52,6 +54,7 @@ type Action =
   | { type: ActionTypes.ChangeSelectedClientId; payload: string }
   | { type: ActionTypes.CommandReceived; payload: any } // TODO: Type this better!
   | { type: ActionTypes.ClearConnectionCommands }
+  | { type: ActionTypes.ClearNetworkCommands }
   | { type: ActionTypes.AddCommandHandler; payload: (command: any) => void }
   | { type: ActionTypes.PortUnavailable; payload: undefined }
 
@@ -153,7 +156,25 @@ export function reducer(state: State, action: Action) {
 
         if (!selectedConnection) return
 
-        selectedConnection.commands = []
+        // for now we are keeping the api responses until we separate them out
+        // into their own list
+        selectedConnection.commands = selectedConnection.commands.filter(
+          (c) => c.type === CommandType.ApiResponse
+        )
+      })
+    case ActionTypes.ClearNetworkCommands:
+      return produce(state, (draftState) => {
+        if (!draftState.selectedClientId) return
+
+        const selectedConnection = draftState.connections.find(
+          (c) => c.clientId === draftState.selectedClientId
+        )
+
+        if (!selectedConnection) return
+
+        selectedConnection.commands = selectedConnection.commands.filter(
+          (c) => c.type !== CommandType.ApiResponse
+        )
       })
     case ActionTypes.ChangeSelectedClientId:
       return produce(state, (draftState) => {
@@ -218,6 +239,10 @@ function useStandalone() {
     dispatch({ type: ActionTypes.ClearConnectionCommands })
   }, [])
 
+  const clearNetworkCommands = useCallback(() => {
+    dispatch({ type: ActionTypes.ClearNetworkCommands })
+  }, [])
+
   const selectConnection = useCallback((clientId: string) => {
     dispatch({ type: ActionTypes.ChangeSelectedClientId, payload: clientId })
   }, [])
@@ -240,6 +265,7 @@ function useStandalone() {
     connectionDisconnected,
     commandReceived,
     clearSelectedConnectionCommands,
+    clearNetworkCommands,
     addCommandListener,
     portUnavailable,
   }