From d7d9a7e382fb66738238f9b2724365a4d07c9398 Mon Sep 17 00:00:00 2001 From: simoleo89 Date: Mon, 11 May 2026 16:53:52 +0000 Subject: [PATCH] Extract Inspection tab JSX into WiredInspectionTabView component MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Second of three slices to break up the WiredCreatorToolsView inline tab bodies (Variables tab was split in the previous commit; Monitor remains). What moved - 139 lines of inline JSX (`{ activeTab === 'inspection' &&
...
}`) → src/components/wired-tools/WiredInspectionTabView.tsx - The new component declares 28 typed props grouped by area: element-type + preview, keep-selected toggle, variables table, inline editor, give-variable popover, remove variable. All state and actions arrive from the parent — no internal useState/useEffect. - The "select variable + start editing" double action at the parent is wrapped into a single onSelectInspectionVariable callback so the sub-component doesn't need to know about the two setters. - The renderer-SDK type IWired*VariableDefinition is replaced by a structural InspectionGiveDefinition declared in the view file: { itemId, name, hasValue }. Keeps the sub-component free of renderer-SDK imports. Impact - WiredCreatorToolsView.tsx: 3809 → 3710 lines (−99 net). Combined with the previous commit, the file is now down 191 lines from the 4493-line single-monolith it was 6 commits ago. - Inspection panel JSX is now visually scannable as a file. The parent only orchestrates state and passes it down. Conscious non-goals - No state hoisted. selectedInspectionVariableKeys, editingVariable, isInspectionGiveOpen, inspectionGiveValue etc. all still live in the parent useState. The Zustand slice for shared wired-tools state is a follow-up PR. - No behavior change. Same renders, same handlers, same DOM. Verification - yarn eslint on the two files: 34 problems baseline, 34 after split (the same pre-existing FC<{}> + 5 set-state-in-effect on the parent module + react-compiler skip warnings). - yarn test: 49/49 passing. - yarn tsc on the two files: clean. Next: extract the Monitor tab (~176 lines), the last inline tab body. --- .../wired-tools/WiredCreatorToolsView.tsx | 177 +++---------- .../wired-tools/WiredInspectionTabView.tsx | 235 ++++++++++++++++++ 2 files changed, 274 insertions(+), 138 deletions(-) create mode 100644 src/components/wired-tools/WiredInspectionTabView.tsx diff --git a/src/components/wired-tools/WiredCreatorToolsView.tsx b/src/components/wired-tools/WiredCreatorToolsView.tsx index 64ff67c..c189cf5 100644 --- a/src/components/wired-tools/WiredCreatorToolsView.tsx +++ b/src/components/wired-tools/WiredCreatorToolsView.tsx @@ -9,6 +9,7 @@ import { useInventoryTrade, useMessageEvent, useNotification, useObjectSelectedE import { DIRECTION_NAMES, EDITABLE_FURNI_VARIABLES, EDITABLE_USER_VARIABLES, INSPECTION_ELEMENTS, MONITOR_ERROR_INFO, MONITOR_LOG_ORDER, MONTH_NAMES, TABS, TEAM_COLOR_NAMES, VARIABLES_ELEMENTS, VARIABLE_DEFINITIONS, WEEKDAY_NAMES, WIRED_CLOCK_REFRESH_MS, WIRED_FREEZE_EFFECT_IDS, WIRED_INSPECTION_REFRESH_MS, WIRED_MONITOR_ACTION_CLEAR_LOGS, WIRED_MONITOR_ACTION_FETCH, WIRED_MONITOR_POLL_MS, WIRED_VARIABLES_POLL_MS } from './WiredCreatorTools.constants'; import { createEmptyMonitorSnapshot, formatMonitorHistoryOccurrence, formatMonitorLatestOccurrence, formatMonitorSource, formatVariableTimestamp, getHotelDateTimeParts, getHotelTimeFormatter, normalizeMonitorReason } from './WiredCreatorTools.helpers'; import { HotelDateTimeParts, InspectionElementButton, InspectionElementType, InspectionFurniLiveState, InspectionFurniSelection, InspectionUserLiveState, InspectionUserSelection, InspectionUserTeamData, InspectionVariable, ManagedHolderVariableEntry, MonitorLog, MonitorLogDetails, MonitorSnapshot, MonitorStat, ParsedWallLocation, TeamEffectData, VariableDefinition, VariableHighlightOverlay, VariableHighlightTarget, VariableManageEntry, VariableTextValue, VariablesElementButton, VariablesElementType, WiredToolsTab } from './WiredCreatorTools.types'; +import { WiredInspectionTabView } from './WiredInspectionTabView'; import { WiredToolsSettingsTabView } from './WiredToolsSettingsTabView'; import { WiredVariablesTabView } from './WiredVariablesTabView'; @@ -3249,144 +3250,44 @@ export const WiredCreatorToolsView: FC<{}> = () => } } { (activeTab === 'inspection') && -
-
-
- Element type: -
- { INSPECTION_ELEMENTS.map(element => ( - - )) } -
-
-
- Preview: -
- { (inspectionType === 'furni') && selectedFurni && roomSession && -
- -
} - { (inspectionType === 'user') && selectedUser && -
- { (selectedUser.kind === 'pet') - ? - : } -
} - { (inspectionType === 'global') && -
- Global placeholder -
} - { (((inspectionType === 'furni') && !selectedFurni) || ((inspectionType === 'user') && !selectedUser) || (inspectionType === 'global')) && -
- { previewPlaceholder } -
} -
-
- -
-
-
- Variables: -
-
- Variable - Value -
- { !displayedVariables.length && -
- Nothing to display -
} - { !!displayedVariables.length && -
- - - { displayedVariables.map((variable, index) => ( - - { - setSelectedInspectionVariableKeys(prev => ({ ...prev, [inspectionType]: variable.key })); - beginVariableEdit(variable); - } }> - - - - )) } - -
{ variable.key } - { (editingVariable === variable.key) && - event.stopPropagation() } - onBlur={ cancelVariableEdit } - onChange={ event => setEditingValue(event.target.value) } - onKeyDownCapture={ onVariableInputKeyDown } /> } - { (editingVariable !== variable.key) && !variable.editable && { variable.value } } - { (editingVariable !== variable.key) && variable.editable && - } -
-
} -
-
-
- { isInspectionGiveOpen && -
- Variable: - - Value: - setInspectionGiveValue(event.target.value) } /> - -
} - - -
-
-
} + + { + setSelectedInspectionVariableKeys(prev => ({ ...prev, [inspectionType]: variable.key })); + beginVariableEdit(variable); + } } + editingVariable={ editingVariable } + editingValue={ editingValue } + onEditingValueChange={ setEditingValue } + onCancelVariableEdit={ cancelVariableEdit } + onVariableInputKeyDown={ onVariableInputKeyDown } + onBeginVariableEdit={ variable => + { + setSelectedInspectionVariableKeys(prev => ({ ...prev, [inspectionType]: variable.key })); + beginVariableEdit(variable); + } } + isInspectionGiveOpen={ isInspectionGiveOpen } + onToggleInspectionGive={ () => setIsInspectionGiveOpen(value => !value) } + selectedInspectionGiveDefinition={ selectedInspectionGiveDefinition } + onSelectGiveVariable={ setInspectionGiveVariableItemId } + availableInspectionDefinitions={ availableInspectionDefinitions } + inspectionGiveValue={ inspectionGiveValue } + onInspectionGiveValueChange={ setInspectionGiveValue } + canGiveInspectionVariable={ canGiveInspectionVariable } + onGiveInspectionVariable={ () => giveInspectionVariable() } + canRemoveInspectionVariable={ canRemoveInspectionVariable } + onRemoveInspectionVariable={ () => removeInspectionVariable() } + /> } { (activeTab === 'variables') && void; + selectedFurni: InspectionFurniSelection | null; + selectedUser: InspectionUserSelection | null; + roomId: number | null; + previewPlaceholder: string; + + // keep-selected toggle + keepSelected: boolean; + onKeepSelectedChange: (next: boolean) => void; + + // variables table + displayedVariables: InspectionVariable[]; + selectedInspectionVariableKey: string; + onSelectInspectionVariable: (variable: InspectionVariable) => void; + + // inline editor + editingVariable: string; + editingValue: string; + onEditingValueChange: (value: string) => void; + onCancelVariableEdit: () => void; + onVariableInputKeyDown: (event: KeyboardEvent) => void; + onBeginVariableEdit: (variable: InspectionVariable) => void; + + // give-variable popover + isInspectionGiveOpen: boolean; + onToggleInspectionGive: () => void; + selectedInspectionGiveDefinition: InspectionGiveDefinition | null; + onSelectGiveVariable: (itemId: number) => void; + availableInspectionDefinitions: InspectionGiveDefinition[]; + inspectionGiveValue: string; + onInspectionGiveValueChange: (value: string) => void; + canGiveInspectionVariable: boolean; + onGiveInspectionVariable: () => void; + + // remove variable + canRemoveInspectionVariable: boolean; + onRemoveInspectionVariable: () => void; +} + +/** + * The "Inspection" tab body of WiredCreatorToolsView, extracted from + * the parent's inline JSX. Same shape as WiredVariablesTabView: + * pure presentation, all state and actions arrive as typed props. + */ +export const WiredInspectionTabView = (props: WiredInspectionTabViewProps) => +{ + const { + inspectionType, + onInspectionTypeChange, + selectedFurni, + selectedUser, + roomId, + previewPlaceholder, + keepSelected, + onKeepSelectedChange, + displayedVariables, + selectedInspectionVariableKey, + onSelectInspectionVariable, + editingVariable, + editingValue, + onEditingValueChange, + onCancelVariableEdit, + onVariableInputKeyDown, + onBeginVariableEdit, + isInspectionGiveOpen, + onToggleInspectionGive, + selectedInspectionGiveDefinition, + onSelectGiveVariable, + availableInspectionDefinitions, + inspectionGiveValue, + onInspectionGiveValueChange, + canGiveInspectionVariable, + onGiveInspectionVariable, + canRemoveInspectionVariable, + onRemoveInspectionVariable + } = props; + + return ( +
+
+
+ Element type: +
+ { INSPECTION_ELEMENTS.map(element => ( + + )) } +
+
+
+ Preview: +
+ { (inspectionType === 'furni') && selectedFurni && (roomId !== null) && +
+ +
} + { (inspectionType === 'user') && selectedUser && +
+ { (selectedUser.kind === 'pet') + ? + : } +
} + { (inspectionType === 'global') && +
+ Global placeholder +
} + { (((inspectionType === 'furni') && !selectedFurni) || ((inspectionType === 'user') && !selectedUser) || (inspectionType === 'global')) && +
+ { previewPlaceholder } +
} +
+
+ +
+
+
+ Variables: +
+
+ Variable + Value +
+ { !displayedVariables.length && +
+ Nothing to display +
} + { !!displayedVariables.length && +
+ + + { displayedVariables.map((variable, index) => ( + onSelectInspectionVariable(variable) }> + + + + )) } + +
{ variable.key } + { (editingVariable === variable.key) && + event.stopPropagation() } + onBlur={ onCancelVariableEdit } + onChange={ event => onEditingValueChange(event.target.value) } + onKeyDownCapture={ onVariableInputKeyDown } /> } + { (editingVariable !== variable.key) && !variable.editable && { variable.value } } + { (editingVariable !== variable.key) && variable.editable && + } +
+
} +
+
+
+ { isInspectionGiveOpen && +
+ Variable: + + Value: + onInspectionGiveValueChange(event.target.value) } /> + +
} + + +
+
+
+ ); +};