feat: implement state action items in timeline (#49)

* implement state action items in timeline

* fix color

* fix MST type

Author: stevenconner

app/components/DetailPanel.tsx

@@ -45,6 +45,8 @@ export function DetailPanel({ selectedItem, onClose }: DetailPanelProps) {
 
   const getHeaderTitle = () => {
     switch (selectedItem.type) {
+      case CommandType.StateActionComplete:
+        return "State Action Details"
       case CommandType.Log:
         return "Log Details"
       case CommandType.Display:
@@ -60,6 +62,8 @@ export function DetailPanel({ selectedItem, onClose }: DetailPanelProps) {
 
   const renderDetailContent = () => {
     switch (selectedItem.type) {
+      case CommandType.StateActionComplete:
+        return <StateActionDetailContent item={selectedItem} />
       case CommandType.Log:
         return <LogDetailContent item={selectedItem} />
       case CommandType.Display:
@@ -119,6 +123,26 @@ export function DetailPanel({ selectedItem, onClose }: DetailPanelProps) {
   )
 }
 
+function StateActionDetailContent({
+  item,
+}: {
+  item: TimelineItem & { type: typeof CommandType.StateActionComplete }
+}) {
+  const {
+    payload: { action, name },
+  } = item
+  return (
+    <View style={$detailContent()}>
+      <DetailSection title="Type">
+        <Text style={$valueText()}>{name}</Text>
+      </DetailSection>
+      <DetailSection title="Payload">
+        <TreeViewWithProvider data={action.payload} />
+      </DetailSection>
+    </View>
+  )
+}
+
 function DisplayDetailContent({
   item,
 }: {

app/components/TimelineStateActionItem.tsx

@@ -0,0 +1,36 @@
+import { CommandType } from "reactotron-core-contract"
+import { TimelineItem } from "./TimelineItem"
+import { TimelineItemStateActionComplete } from "../types"
+
+type TimelineStateActionItemProps = {
+  item: TimelineItemStateActionComplete
+  isSelected?: boolean
+  onSelect?: () => void
+}
+
+/**
+ * A single display item in the timeline.
+ */
+export function TimelineStateActionItem({
+  item,
+  isSelected = false,
+  onSelect,
+}: TimelineStateActionItemProps) {
+  const { payload, date, deltaTime, important } = item
+
+  // Type guard to ensure this is a display item
+  if (item.type !== CommandType.StateActionComplete) return null
+
+  return (
+    <TimelineItem
+      title={"ACTION"}
+      date={new Date(date)}
+      deltaTime={deltaTime}
+      preview={payload.name}
+      isImportant={important}
+      isTagged={important}
+      isSelected={isSelected}
+      onSelect={onSelect}
+    />
+  )
+}

app/components/TimelineToolbar.tsx

@@ -5,6 +5,7 @@ export type FilterType =
   | typeof CommandType.Log
   | typeof CommandType.Display
   | typeof CommandType.ApiResponse
+  | typeof CommandType.StateActionComplete
   | typeof CommandType.Benchmark
 // export type LogLevel = "all" | "debug" | "warn" | "error"
 // export type SortBy = "time-newest" | "time-oldest" | "type" | "level"

app/screens/TimelineScreen.tsx

@@ -18,6 +18,7 @@ import { MenuItemId } from "app/components/Sidebar/SidebarMenu"
 import { useEffect } from "react"
 import { FilterType } from "../components/TimelineToolbar"
 import { ClearLogsButton } from "../components/ClearLogsButton"
+import { TimelineStateActionItem } from "../components/TimelineStateActionItem"
 
 /**
  * Renders the correct component for each timeline item.
@@ -48,6 +49,11 @@ const TimelineItemRenderer = ({
   if (item.type === CommandType.ApiResponse) {
     return <TimelineNetworkItem item={item} isSelected={isSelected} onSelect={handleSelectItem} />
   }
+  if (item.type === CommandType.StateActionComplete) {
+    return (
+      <TimelineStateActionItem item={item} isSelected={isSelected} onSelect={handleSelectItem} />
+    )
+  }
   if (item.type === CommandType.Benchmark) {
     return (
       <TimelineBenchmmarkItem item={item} isSelected={isSelected} onSelect={handleSelectItem} />
@@ -60,13 +66,19 @@ const TimelineItemRenderer = ({
 function getTimelineTypes(activeItem: MenuItemId): FilterType[] {
   switch (activeItem) {
     case "logs":
-      return [CommandType.Log, CommandType.Display]
+      return [CommandType.Log, CommandType.Display, CommandType.StateActionComplete]
     case "network":
       return [CommandType.ApiResponse]
     case "performance":
       return [CommandType.Benchmark]
     default:
-      return [CommandType.Log, CommandType.Display, CommandType.ApiResponse, CommandType.Benchmark]
+      return [
+        CommandType.Log,
+        CommandType.Display,
+        CommandType.ApiResponse,
+        CommandType.Benchmark,
+        CommandType.StateActionComplete,
+      ]
   }
 }
 

app/state/connectToServer.ts

@@ -95,11 +95,11 @@ export function connectToServer(props: { port: number } = { port: 9292 }): Unsub
 
     if (data.type === "command" && data.cmd) {
       if (data.cmd.type === CommandType.Clear) setTimelineItems([])
-
       if (
         data.cmd.type === CommandType.Log ||
         data.cmd.type === CommandType.ApiResponse ||
         data.cmd.type === CommandType.Display ||
+        data.cmd.type === CommandType.StateActionComplete ||
         data.cmd.type === CommandType.Benchmark
       ) {
         // Add a unique ID to the timeline item

app/types.ts

@@ -11,6 +11,7 @@ import type {
   StateBackupRequestPayload,
   StateRestoreRequestPayload,
   Command,
+  StateActionCompletePayload,
 } from "reactotron-core-contract"
 
 /**
@@ -144,10 +145,16 @@ export type TimelineItemDisplay = TimelineItemBase & {
   payload: DisplayPayload
 }
 
+export type TimelineItemStateActionComplete = TimelineItemBase & {
+  type: typeof CommandType.StateActionComplete
+  payload: StateActionCompletePayload
+}
+
 export type TimelineItem =
   | TimelineItemLog
   | TimelineItemNetwork
   | TimelineItemDisplay
+  | TimelineItemStateActionComplete
   | TimelineItemBenchmark
 
 // StateSubscription represents a single state path/value pair tracked by the app

macos/Podfile.lock

@@ -1779,7 +1779,7 @@ SPEC CHECKSUMS:
   glog: b7594b792ee4e02ed1f44b01d046ca25fa713e3d
   hermes-engine: b5c9cfbe6415f1b0b24759f2942c8f33e9af6347
   IRNativeModules: 2fa316ab0ca91ec3e7bd4ba7ab2fc1f642fb5542
-  RCT-Folly: abec2d7f4af402b4957c44e86ceff8725b23c1b4
+  RCT-Folly: e8b53d8c0d2d9df4a6a8b0a368a1a91fc62a88cb
   RCTDeprecation: 9da6c2d8a3b1802142718283260fb06d702ddb07
   RCTRequired: 574f9d55bda1d50676530b6c36bab4605612dfb6
   RCTTypeSafety: 7de929c405e619c023116e7747118a2c5d5b2320