Apply strictNullChecks to src/components/views/dialogs/devtools/* (#10391)

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

@@ -1,5 +1,6 @@
 /*
 Copyright 2022 Michael Telatynski <7t3chguy@gmail.com>
+Copyright 2023 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -29,7 +30,7 @@ export const AccountDataEventEditor: React.FC<IEditorProps> = ({ mxEvent, onBack
     const fields = useMemo(() => [eventTypeField(mxEvent?.getType())], [mxEvent]);
 
     const onSend = async ([eventType]: string[], content?: IContent): Promise<void> => {
-        await cli.setAccountData(eventType, content);
+        await cli.setAccountData(eventType, content || {});
     };
 
     const defaultContent = mxEvent ? stringify(mxEvent.getContent()) : undefined;
@@ -43,7 +44,7 @@ export const RoomAccountDataEventEditor: React.FC<IEditorProps> = ({ mxEvent, on
     const fields = useMemo(() => [eventTypeField(mxEvent?.getType())], [mxEvent]);
 
     const onSend = async ([eventType]: string[], content?: IContent): Promise<void> => {
-        await cli.setRoomAccountData(context.room.roomId, eventType, content);
+        await cli.setRoomAccountData(context.room.roomId, eventType, content || {});
     };
 
     const defaultContent = mxEvent ? stringify(mxEvent.getContent()) : undefined;
@@ -58,7 +59,7 @@ interface IProps extends IDevtoolsProps {
 
 const BaseAccountDataExplorer: React.FC<IProps> = ({ events, Editor, actionLabel, onBack, setTool }) => {
     const [query, setQuery] = useState("");
-    const [event, setEvent] = useState<MatrixEvent>(null);
+    const [event, setEvent] = useState<MatrixEvent | null>(null);
 
     if (event) {
         const onBack = (): void => {

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

@@ -1,5 +1,6 @@
 /*
 Copyright 2022 Michael Telatynski <7t3chguy@gmail.com>
+Copyright 2023 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -38,7 +39,7 @@ interface IProps extends IMinProps {
 }
 
 const BaseTool: React.FC<XOR<IMinProps, IProps>> = ({ className, actionLabel, onBack, onAction, children }) => {
-    const [message, setMessage] = useState<string>(null);
+    const [message, setMessage] = useState<string | null>(null);
 
     const onBackClick = (): void => {
         if (message) {
@@ -48,7 +49,7 @@ const BaseTool: React.FC<XOR<IMinProps, IProps>> = ({ className, actionLabel, on
         }
     };
 
-    let actionButton: JSX.Element;
+    let actionButton: ReactNode = null;
     if (message) {
         children = message;
     } else if (onAction) {

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

@@ -1,5 +1,6 @@
 /*
 Copyright 2022 Michael Telatynski <7t3chguy@gmail.com>
+Copyright 2023 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -55,7 +56,7 @@ export const stateKeyField = (defaultValue?: string): IFieldDef => ({
 const validateEventContent = withValidation<any, Error | undefined>({
     deriveData({ value }) {
         try {
-            JSON.parse(value);
+            JSON.parse(value!);
         } catch (e) {
             return e;
         }
@@ -75,7 +76,7 @@ const validateEventContent = withValidation<any, Error | undefined>({
 export const EventEditor: React.FC<IEventEditorProps> = ({ fieldDefs, defaultContent = "{\n\n}", onSend, onBack }) => {
     const [fieldData, setFieldData] = useState<string[]>(fieldDefs.map((def) => def.default ?? ""));
     const [content, setContent] = useState<string>(defaultContent);
-    const contentField = useRef<Field>();
+    const contentField = useRef<Field>(null);
 
     const fields = fieldDefs.map((def, i) => (
         <Field
@@ -96,12 +97,12 @@ export const EventEditor: React.FC<IEventEditorProps> = ({ fieldDefs, defaultCon
         />
     ));
 
-    const onAction = async (): Promise<string> => {
+    const onAction = async (): Promise<string | undefined> => {
-        const valid = await contentField.current.validate({});
+        const valid = contentField.current ? await contentField.current.validate({}) : false;
 
         if (!valid) {
-            contentField.current.focus();
+            contentField.current?.focus();
-            contentField.current.validate({ focused: true });
+            contentField.current?.validate({ focused: true });
             return;
         }
 
@@ -140,7 +141,7 @@ export interface IEditorProps extends Pick<IDevtoolsProps, "onBack"> {
 }
 
 interface IViewerProps extends Required<IEditorProps> {
-    Editor: React.FC<Required<IEditorProps>>;
+    Editor: React.FC<IEditorProps>;
 }
 
 export const EventViewer: React.FC<IViewerProps> = ({ mxEvent, onBack, Editor }) => {
@@ -168,7 +169,7 @@ export const EventViewer: React.FC<IViewerProps> = ({ mxEvent, onBack, Editor })
 const getBaseEventId = (baseEvent: MatrixEvent): string => {
     // show the replacing event, not the original, if it is an edit
     const mxEvent = baseEvent.replacingEvent() ?? baseEvent;
-    return mxEvent.getWireContent()["m.relates_to"]?.event_id ?? baseEvent.getId();
+    return mxEvent.getWireContent()["m.relates_to"]?.event_id ?? baseEvent.getId()!;
 };
 
 export const TimelineEventEditor: React.FC<IEditorProps> = ({ mxEvent, onBack }) => {
@@ -178,10 +179,10 @@ export const TimelineEventEditor: React.FC<IEditorProps> = ({ mxEvent, onBack })
     const fields = useMemo(() => [eventTypeField(mxEvent?.getType())], [mxEvent]);
 
     const onSend = ([eventType]: string[], content?: IContent): Promise<unknown> => {
-        return cli.sendEvent(context.room.roomId, eventType, content);
+        return cli.sendEvent(context.room.roomId, eventType, content || {});
     };
 
-    let defaultContent: string;
+    let defaultContent = "";
 
     if (mxEvent) {
         const originalContent = mxEvent.getContent();

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

@@ -1,5 +1,6 @@
 /*
 Copyright 2022 Michael Telatynski <7t3chguy@gmail.com>
+Copyright 2023 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -37,7 +38,7 @@ const FilteredList: React.FC<IProps> = ({ children, query, onChange }) => {
         let filteredChildren = children;
         if (query) {
             const lcQuery = query.toLowerCase();
-            filteredChildren = children.filter((child) => child.key.toString().toLowerCase().includes(lcQuery));
+            filteredChildren = children.filter((child) => child.key?.toString().toLowerCase().includes(lcQuery));
         }
         setFilteredChildren(filteredChildren);
         setTruncateAt(INITIAL_LOAD_TILES);

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

@@ -1,5 +1,6 @@
 /*
 Copyright 2022 Michael Telatynski <7t3chguy@gmail.com>
+Copyright 2023 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

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

@@ -1,5 +1,6 @@
 /*
 Copyright 2022 Michael Telatynski <7t3chguy@gmail.com>
+Copyright 2023 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -27,7 +28,7 @@ const ServersInRoom: React.FC<IDevtoolsProps> = ({ onBack }) => {
         const servers: Record<string, number> = {};
         context.room.currentState.getStateEvents(EventType.RoomMember).forEach((ev) => {
             if (ev.getContent().membership !== "join") return; // only count joined users
-            const server = ev.getSender().split(":")[1];
+            const server = ev.getSender()!.split(":")[1];
             servers[server] = (servers[server] ?? 0) + 1;
         });
         return servers;

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

@@ -1,6 +1,6 @@
 /*
 Copyright 2022 Michael Telatynski <7t3chguy@gmail.com>
-Copyright 2018-2021 The Matrix.org Foundation C.I.C.
+Copyright 2018-2023 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -27,7 +27,7 @@ import { SETTINGS } from "../../../../settings/Settings";
 import Field from "../../elements/Field";
 
 const SettingExplorer: React.FC<IDevtoolsProps> = ({ onBack }) => {
-    const [setting, setSetting] = useState<string>(null);
+    const [setting, setSetting] = useState<string | null>(null);
     const [editing, setEditing] = useState(false);
 
     if (setting && editing) {
@@ -73,7 +73,7 @@ const CanEditLevelField: React.FC<ICanEditLevelFieldProps> = ({ setting, roomId,
     );
 };
 
-function renderExplicitSettingValues(setting: string, roomId: string): string {
+function renderExplicitSettingValues(setting: string, roomId?: string): string {
     const vals: Record<string, number | null> = {};
     for (const level of LEVEL_ORDER) {
         try {
@@ -94,12 +94,12 @@ interface IEditSettingProps extends Pick<IDevtoolsProps, "onBack"> {
 
 const EditSetting: React.FC<IEditSettingProps> = ({ setting, onBack }) => {
     const context = useContext(DevtoolsContext);
-    const [explicitValue, setExplicitValue] = useState(renderExplicitSettingValues(setting, null));
+    const [explicitValue, setExplicitValue] = useState(renderExplicitSettingValues(setting));
     const [explicitRoomValue, setExplicitRoomValue] = useState(
         renderExplicitSettingValues(setting, context.room.roomId),
     );
 
-    const onSave = async (): Promise<string> => {
+    const onSave = async (): Promise<string | undefined> => {
         try {
             const parsedExplicit = JSON.parse(explicitValue);
             const parsedExplicitRoom = JSON.parse(explicitRoomValue);
@@ -232,7 +232,7 @@ const ViewSetting: React.FC<IViewSettingProps> = ({ setting, onEdit, onBack }) =
             <div>
                 {_t("Values at explicit levels:")}
                 <pre>
-                    <code>{renderExplicitSettingValues(setting, null)}</code>
+                    <code>{renderExplicitSettingValues(setting)}</code>
                 </pre>
             </div>
 

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

@@ -1,5 +1,6 @@
 /*
 Copyright 2022 Michael Telatynski <7t3chguy@gmail.com>
+Copyright 2023 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -87,7 +88,7 @@ const VerificationExplorer: Tool = ({ onBack }: IDevtoolsProps) => {
 
     const requests = useTypedEventEmitterState(cli, CryptoEvent.VerificationRequest, () => {
         return (
-            cli.crypto.inRoomVerificationRequests["requestsByRoomId"]?.get(context.room.roomId) ??
+            cli.crypto?.inRoomVerificationRequests["requestsByRoomId"]?.get(context.room.roomId) ??
             new Map<string, VerificationRequest>()
         );
     });

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

@@ -1,5 +1,6 @@
 /*
 Copyright 2022 Michael Telatynski <7t3chguy@gmail.com>
+Copyright 2023 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -28,7 +29,7 @@ import { StateEventEditor } from "./RoomState";
 const WidgetExplorer: React.FC<IDevtoolsProps> = ({ onBack }) => {
     const context = useContext(DevtoolsContext);
     const [query, setQuery] = useState("");
-    const [widget, setWidget] = useState<IApp>(null);
+    const [widget, setWidget] = useState<IApp | null>(null);
 
     const widgets = useEventEmitterState(WidgetStore.instance, UPDATE_EVENT, () => {
         return WidgetStore.instance.getApps(context.room.roomId);
@@ -46,7 +47,7 @@ const WidgetExplorer: React.FC<IDevtoolsProps> = ({ onBack }) => {
         ).reduce((p, c) => {
             p.push(...c);
             return p;
-        }, []);
+        }, [] as MatrixEvent[]);
         const event = allState.find((ev) => ev.getId() === widget.eventId);
         if (!event) {
             // "should never happen"