From edd7354b6c6b29c9703e71c28154ba7f6e7c6f46 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 24 Aug 2022 11:51:52 +0100
Subject: [PATCH 1/4] Reuse empty string & space string logic for event types
 in devtools

---
 .../views/dialogs/devtools/RoomState.tsx      | 55 +++++++++----------
 1 file changed, 25 insertions(+), 30 deletions(-)

diff --git a/src/components/views/dialogs/devtools/RoomState.tsx b/src/components/views/dialogs/devtools/RoomState.tsx
index d8a6fc04089..4cad294012d 100644
--- a/src/components/views/dialogs/devtools/RoomState.tsx
+++ b/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;
 }
@@ -70,23 +89,9 @@ const RoomStateExplorerEventType = ({ eventType, onBack }: IEventTypeProps) => {
     return <BaseTool onBack={onBack}>
         <FilteredList query={query} onChange={setQuery}>
             {
-                Array.from(events.entries()).map(([stateKey, ev]) => {
-                    const trimmed = stateKey.trim();
-                    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>;
-                })
+                Array.from(events.entries()).map(([stateKey, ev]) => (
+                    <StateEventButton key={stateKey} label={stateKey} onClick={() => setEvent(ev)} />
+                ))
             }
         </FilteredList>
     </BaseTool>;
@@ -113,19 +118,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) => {
-                    const onClick = () => {
-                        setEventType(eventType);
-                    };
-
-                    return <button
-                        className="mx_DevTools_button"
-                        key={eventType}
-                        onClick={onClick}
-                    >
-                        { eventType }
-                    </button>;
-                })
+                Array.from(events.keys()).map((eventType) => (
+                    <StateEventButton key={eventType} label={eventType} onClick={() => setEventType(eventType)} />
+                ))
             }
         </FilteredList>
     </BaseTool>;

From 5e51709cd438223e5b0965f1efaa45b09295b32e Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 24 Aug 2022 11:57:34 +0100
Subject: [PATCH 2/4] Fix edge case behaviours

---
 src/components/views/dialogs/devtools/RoomState.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/views/dialogs/devtools/RoomState.tsx b/src/components/views/dialogs/devtools/RoomState.tsx
index 4cad294012d..fabadbd1265 100644
--- a/src/components/views/dialogs/devtools/RoomState.tsx
+++ b/src/components/views/dialogs/devtools/RoomState.tsx
@@ -80,10 +80,14 @@ const RoomStateExplorerEventType = ({ eventType, onBack }: IEventTypeProps) => {
     }, [events]);
 
     if (event) {
-        const onBack = () => {
-            setEvent(null);
+        const _onBack = () => {
+            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}>
@@ -104,7 +108,7 @@ export const RoomStateExplorer = ({ onBack, setTool }: IDevtoolsProps) => {
 
     const events = context.room.currentState.events;
 
-    if (eventType) {
+    if (eventType !== null) {
         const onBack = () => {
             setEventType(null);
         };

From 78efcfc513449a5889b130258f034126b37fa05a Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 24 Aug 2022 11:58:59 +0100
Subject: [PATCH 3/4] Make tsc quality higher

---
 src/components/views/dialogs/devtools/RoomState.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/views/dialogs/devtools/RoomState.tsx b/src/components/views/dialogs/devtools/RoomState.tsx
index fabadbd1265..11ce7b62711 100644
--- a/src/components/views/dialogs/devtools/RoomState.tsx
+++ b/src/components/views/dialogs/devtools/RoomState.tsx
@@ -67,12 +67,12 @@ 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);
 
     useEffect(() => {
-        if (events.size === 1 && events.has("")) {
+        if (events?.size === 1 && events.has("")) {
             setEvent(events.get(""));
         } else {
             setEvent(null);
@@ -81,7 +81,7 @@ const RoomStateExplorerEventType = ({ eventType, onBack }: IEventTypeProps) => {
 
     if (event) {
         const _onBack = () => {
-            if (events.size === 1 && events.has("")) {
+            if (events?.size === 1 && events.has("")) {
                 onBack();
             } else {
                 setEvent(null);
@@ -104,7 +104,7 @@ 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;
 

From bfd8eb00d29a12b8554222c9263ad5f030df37a8 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 24 Aug 2022 12:03:45 +0100
Subject: [PATCH 4/4] Make remainder of tsc happy

---
 src/components/views/dialogs/devtools/RoomState.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/views/dialogs/devtools/RoomState.tsx b/src/components/views/dialogs/devtools/RoomState.tsx
index 11ce7b62711..4ad4a1c8211 100644
--- a/src/components/views/dialogs/devtools/RoomState.tsx
+++ b/src/components/views/dialogs/devtools/RoomState.tsx
@@ -69,11 +69,11 @@ const RoomStateExplorerEventType = ({ eventType, onBack }: IEventTypeProps) => {
     const [query, setQuery] = useState("");
     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(""));
+        if (events.size === 1 && events.has("")) {
+            setEvent(events.get("")!);
         } else {
             setEvent(null);
         }