update to start node process with metro, changes to persisting (#25)

* update to start node process with metro, changes to persisting

* metro changes

---------

Signed-off-by: Steven Conner <steven.c.conner@gmail.com>

Author: stevenconner

app/app.tsx

@@ -29,12 +29,8 @@ if (__DEV__) {
 function App(): React.JSX.Element {
   const { colors } = useTheme()
   const { toggleSidebar } = useSidebar()
-  const [activeItem, setActiveItem] = useGlobal<MenuItemId>("sidebar-active-item", "logs", {
-    persist: true,
-  })
-  const [, setTimelineItems] = withGlobal<TimelineItem[]>("timelineItems", [], {
-    persist: true,
-  })
+  const [activeItem, setActiveItem] = useGlobal<MenuItemId>("sidebar-active-item", "logs")
+  const [, setTimelineItems] = withGlobal<TimelineItem[]>("timelineItems", [])
 
   const menuConfig = useMemo(
     () => ({

app/components/ClearLogsButton.tsx

@@ -12,9 +12,7 @@ export function ClearLogsButton() {
   })
 
   // Using withGlobal so we don't rerender when the logs change
-  const [_timelineItems, setTimelineItems] = withGlobal<TimelineItem[]>("timelineItems", [], {
-    persist: true,
-  })
+  const [_timelineItems, setTimelineItems] = withGlobal<TimelineItem[]>("timelineItems", [])
   const [activeClientId] = useGlobal("activeClientId", "")
   const clearLogs = useCallback(() => {
     setTimelineItems((prev) => prev.filter((item) => item.clientId !== activeClientId))

app/components/ClientTab.tsx

@@ -10,7 +10,7 @@ export function ClientTab({ clientId }: { clientId: string }) {
   const label: string = clientData?.name ?? clientId
   const platformVersion: string = clientData?.platformVersion ?? ""
 
-  const [activeTab, setActiveTab] = useGlobal(tabgroup, label, { persist: true })
+  const [activeTab, setActiveTab] = useGlobal(tabgroup, label)
   const active = activeTab === clientId
 
   const getOsLabel = (os: string) => {

app/components/ExpandableRow.tsx

@@ -35,7 +35,7 @@ export function ExpandableRow({
   responseStatusCode,
   children,
 }: ExpandableRowProps) {
-  const [isOpen, setIsOpen] = useGlobal(`timeline-${id}-open`, false, { persist: true })
+  const [isOpen, setIsOpen] = useGlobal(`timeline-${id}-open`, false)
   const time = formatTime(date)
 
   return (

app/components/Tab.tsx

@@ -10,7 +10,7 @@ import { useGlobal } from "../state/useGlobal"
  * with useGlobal/withGlobal to retrieve which tab is currently active.
  */
 export function Tab({ id, label, tabgroup }: { id: string; label: string; tabgroup: string }) {
-  const [activeTab, setActiveTab] = useGlobal(tabgroup, label, { persist: true })
+  const [activeTab, setActiveTab] = useGlobal(tabgroup, label)
   const active = activeTab === label
 
   return (

app/screens/StateScreen.tsx

@@ -15,7 +15,7 @@ export function StateScreen() {
   const [stateSubscriptionsByClientId, setStateSubscriptionsByClientId] = useGlobal<{
     [clientId: string]: StateSubscription[]
   }>("stateSubscriptionsByClientId", {})
-  const [activeTab] = useGlobal("activeClientId", "")
+  const [activeTab, setActiveTab] = useGlobal("activeClientId", "")
 
   const clientStateSubscriptions = stateSubscriptionsByClientId[activeTab] || []
 
@@ -64,6 +64,7 @@ export function StateScreen() {
                 [activeTab]: [],
               }))
               sendToCore("state.values.subscribe", { paths: [], clientId: activeTab })
+              setActiveTab("")
             }}
           >
             <Text>Clear State</Text>

app/state/connectToServer.ts

@@ -1,7 +1,7 @@
 import { getUUID } from "../utils/random/getUUID"
+import { deleteGlobal, withGlobal } from "./useGlobal"
 import { CommandType } from "reactotron-core-contract"
 import type { StateSubscription, TimelineItem } from "../types"
-import { withGlobal } from "./useGlobal"
 import { isSafeKey, sanitizeValue } from "../utils/sanitize"
 
 type UnsubscribeFn = () => void
@@ -33,9 +33,7 @@ export function connectToServer(props: { port: number } = { port: 9292 }): Unsub
   const [_e, setError] = withGlobal<Error | null>("error", null)
   const [clientIds, setClientIds] = withGlobal<string[]>("clientIds", [])
   const [, setActiveClientId] = withGlobal("activeClientId", "")
-  const [_timelineItems, setTimelineItems] = withGlobal<TimelineItem[]>("timelineItems", [], {
-    persist: true,
-  })
+  const [_timelineItems, setTimelineItems] = withGlobal<TimelineItem[]>("timelineItems", [])
   const [_stateSubscriptionsByClientId, setStateSubscriptionsByClientId] = withGlobal<{
     [clientId: string]: StateSubscription[]
   }>("stateSubscriptionsByClientId", {})
@@ -77,13 +75,22 @@ export function connectToServer(props: { port: number } = { port: 9292 }): Unsub
     }
 
     if (data.type === "connectedClients") {
+      let newestClientId = ""
       data.clients.forEach((client: any) => {
         // Store the client data in global state
         const clientId = client.clientId
         const [_, setClientData] = withGlobal(`client-${clientId}`, {})
         setClientData(client)
+        if (!clientIds.includes(clientId)) {
+          newestClientId = clientId
+        }
       })
       setClientIds(data.clients.map((client: any) => client.clientId))
+
+      if (newestClientId) {
+        // Set the active client to the newest client
+        setActiveClientId(newestClientId)
+      }
     }
 
     if (data.type === "command" && data.cmd) {
@@ -109,7 +116,6 @@ export function connectToServer(props: { port: number } = { port: 9292 }): Unsub
         console.tron.log("unknown command", data.cmd)
       }
       if (data.cmd.type === CommandType.StateValuesChange) {
-        console.log("state.values.change", data.cmd)
         data.cmd.payload.changes.forEach((change: StateSubscription) => {
           if (!isSafeKey(data.cmd.clientId) || !isSafeKey(change.path)) {
             console.warn(
@@ -155,8 +161,17 @@ export function connectToServer(props: { port: number } = { port: 9292 }): Unsub
   // Clean up after disconnect
   ws.socket.onclose = () => {
     console.tron.log("Reactotron server disconnected")
-    setIsConnected(false)
+    // Clear individual client data
+    clientIds.forEach((clientId) => {
+      const [_, setClientData] = withGlobal(`client-${clientId}`, {})
+      setClientData({})
+    })
+    deleteGlobal("clientIds")
     setClientIds([])
+    setIsConnected(false)
+    setActiveClientId("")
+    setTimelineItems([])
+    setStateSubscriptionsByClientId({})
   }
 
   // Send a message to the server (which will be forwarded to the client)

app/state/useGlobal.ts

@@ -112,6 +112,10 @@ function buildSetValue<T>(id: string, persist: boolean) {
   }
 }
 
+export function deleteGlobal(id: string): void {
+  delete globals[id]
+}
+
 /**
  * Clear all globals and reset the storage entirely.
  * Optionally rerender all components that use useGlobal.

app/utils/useSelectedTimelineItems.ts

@@ -15,7 +15,7 @@ import { TimelineItem } from "../types"
  */
 export const useSelectedTimelineItems = () => {
   const [selectedItemId, setSelectedItemId] = useGlobal<string | null>("selectedTimelineItem", null)
-  const [timelineItems] = useGlobal<TimelineItem[]>("timelineItems", [], { persist: true })
+  const [timelineItems] = useGlobal<TimelineItem[]>("timelineItems", [])
 
   const selectedItem = selectedItemId
     ? timelineItems.find((item) => item.id === selectedItemId) || null

app/utils/useTimeline.ts

@@ -6,7 +6,7 @@ import { normalize } from "./normalize"
 import { safeTime } from "./safeTime"
 
 export function useTimeline(filters: TimelineFilters): TimelineItem[] {
-  const [items] = useGlobal<TimelineItem[]>("timelineItems", [], { persist: true })
+  const [items] = useGlobal<TimelineItem[]>("timelineItems", [])
   const [search] = useGlobal("search", "")
 
   return useMemo(() => {