Reuse empty string & space string logic for event types in devtools (#9218)

* Reuse empty string & space string logic for event types in devtools

* Fix edge case behaviours

* Make tsc quality higher

* Make remainder of tsc happy

src/components/views/dialogs/devtools/RoomState.tsx

@@ -41,6 +41,25 @@ export const StateEventEditor = ({ mxEvent, onBack }: IEditorProps) => {
     return <EventEditor fieldDefs={fields} defaultContent={defaultContent} onSend={onSend} onBack={onBack} />;
 };
 
+interface StateEventButtonProps {
+    label: string;
+    onClick(): void;
+}
+
+const StateEventButton = ({ label, onClick }: StateEventButtonProps) => {
+    const trimmed = label.trim();
+
+    return <button
+        className={classNames("mx_DevTools_button", {
+            mx_DevTools_RoomStateExplorer_button_hasSpaces: trimmed.length !== label.length,
+            mx_DevTools_RoomStateExplorer_button_emptyString: !trimmed,
+        })}
+        onClick={onClick}
+    >
+        { trimmed ? label : _t("<%(count)s spaces>", { count: label.length }) }
+    </button>;
+};
+
 interface IEventTypeProps extends Pick<IDevtoolsProps, "onBack"> {
     eventType: string;
 }
@@ -48,45 +67,35 @@ interface IEventTypeProps extends Pick<IDevtoolsProps, "onBack"> {
 const RoomStateExplorerEventType = ({ eventType, onBack }: IEventTypeProps) => {
     const context = useContext(DevtoolsContext);
     const [query, setQuery] = useState("");
-    const [event, setEvent] = useState<MatrixEvent>(null);
+    const [event, setEvent] = useState<MatrixEvent | null>(null);
 
-    const events = context.room.currentState.events.get(eventType);
+    const events = context.room.currentState.events.get(eventType)!;
 
     useEffect(() => {
         if (events.size === 1 && events.has("")) {
-            setEvent(events.get(""));
+            setEvent(events.get("")!);
         } else {
             setEvent(null);
         }
     }, [events]);
 
     if (event) {
-        const onBack = () => {
+        const _onBack = () => {
-            setEvent(null);
+            if (events?.size === 1 && events.has("")) {
+                onBack();
+            } else {
+                setEvent(null);
+            }
         };
-        return <EventViewer mxEvent={event} onBack={onBack} Editor={StateEventEditor} />;
+        return <EventViewer mxEvent={event} onBack={_onBack} Editor={StateEventEditor} />;
     }
 
     return <BaseTool onBack={onBack}>
         <FilteredList query={query} onChange={setQuery}>
             {
-                Array.from(events.entries()).map(([stateKey, ev]) => {
+                Array.from(events.entries()).map(([stateKey, ev]) => (
-                    const trimmed = stateKey.trim();
+                    <StateEventButton key={stateKey} label={stateKey} onClick={() => setEvent(ev)} />
-                    const onClick = () => {
+                ))
-                        setEvent(ev);
-                    };
-
-                    return <button
-                        className={classNames("mx_DevTools_button", {
-                            mx_DevTools_RoomStateExplorer_button_hasSpaces: trimmed.length !== stateKey.length,
-                            mx_DevTools_RoomStateExplorer_button_emptyString: !trimmed,
-                        })}
-                        key={stateKey}
-                        onClick={onClick}
-                    >
-                        { trimmed ? stateKey : _t("<%(count)s spaces>", { count: stateKey.length }) }
-                    </button>;
-                })
             }
         </FilteredList>
     </BaseTool>;
@@ -95,11 +104,11 @@ const RoomStateExplorerEventType = ({ eventType, onBack }: IEventTypeProps) => {
 export const RoomStateExplorer = ({ onBack, setTool }: IDevtoolsProps) => {
     const context = useContext(DevtoolsContext);
     const [query, setQuery] = useState("");
-    const [eventType, setEventType] = useState<string>(null);
+    const [eventType, setEventType] = useState<string | null>(null);
 
     const events = context.room.currentState.events;
 
-    if (eventType) {
+    if (eventType !== null) {
         const onBack = () => {
             setEventType(null);
         };
@@ -113,19 +122,9 @@ export const RoomStateExplorer = ({ onBack, setTool }: IDevtoolsProps) => {
     return <BaseTool onBack={onBack} actionLabel={_t("Send custom state event")} onAction={onAction}>
         <FilteredList query={query} onChange={setQuery}>
             {
-                Array.from(events.keys()).map((eventType) => {
+                Array.from(events.keys()).map((eventType) => (
-                    const onClick = () => {
+                    <StateEventButton key={eventType} label={eventType} onClick={() => setEventType(eventType)} />
-                        setEventType(eventType);
+                ))
-                    };
-
-                    return <button
-                        className="mx_DevTools_button"
-                        key={eventType}
-                        onClick={onClick}
-                    >
-                        { eventType }
-                    </button>;
-                })
             }
         </FilteredList>
     </BaseTool>;