Strictify `components/structures/Thread*` (#10478)

* Strictify `components/structures/Thread*`

* Fix ThreadView event Id

src/components/structures/ThreadPanel.tsx

@@ -127,7 +127,7 @@ export const ThreadPanelHeader: React.FC<{
                             PosthogTrackers.trackInteraction("WebRightPanelThreadPanelFilterDropdown", ev);
                         }}
                     >
-                        {`${_t("Show:")} ${value.label}`}
+                        {`${_t("Show:")} ${value?.label}`}
                     </ContextMenuButton>
                     {contextMenu}
                 </>
@@ -197,8 +197,8 @@ const EmptyThread: React.FC<EmptyThreadIProps> = ({ hasThreads, filterOption, sh
 const ThreadPanel: React.FC<IProps> = ({ roomId, onClose, permalinkCreator }) => {
     const mxClient = useContext(MatrixClientContext);
     const roomContext = useContext(RoomContext);
-    const timelinePanel = useRef<TimelinePanel>();
+    const timelinePanel = useRef<TimelinePanel | null>(null);
-    const card = useRef<HTMLDivElement>();
+    const card = useRef<HTMLDivElement | null>(null);
 
     const [filterOption, setFilterOption] = useState<ThreadFilterType>(ThreadFilterType.All);
     const [room, setRoom] = useState<Room | null>(null);
@@ -220,7 +220,7 @@ const ThreadPanel: React.FC<IProps> = ({ roomId, onClose, permalinkCreator }) =>
 
     useEffect(() => {
         if (timelineSet && !Thread.hasServerSideSupport) {
-            timelinePanel.current.refreshTimeline();
+            timelinePanel.current?.refreshTimeline();
         }
     }, [timelineSet, timelinePanel]);
 
@@ -246,7 +246,7 @@ const ThreadPanel: React.FC<IProps> = ({ roomId, onClose, permalinkCreator }) =>
                 withoutScrollContainer={true}
                 ref={card}
             >
-                <Measured sensor={card.current} onMeasurement={setNarrow} />
+                {card.current && <Measured sensor={card.current} onMeasurement={setNarrow} />}
                 {timelineSet ? (
                     <TimelinePanel
                         key={filterOption + ":" + (timelineSet.getFilter()?.filterId ?? roomId)}

src/components/structures/ThreadView.tsx

@@ -79,15 +79,19 @@ export default class ThreadView extends React.Component<IProps, IState> {
     public static contextType = RoomContext;
     public context!: React.ContextType<typeof RoomContext>;
 
-    private dispatcherRef: string;
+    private dispatcherRef: string | null = null;
     private readonly layoutWatcherRef: string;
     private timelinePanel = createRef<TimelinePanel>();
     private card = createRef<HTMLDivElement>();
 
+    // Set by setEventId in ctor.
+    private eventId!: string;
+
     public constructor(props: IProps) {
         super(props);
 
-        const thread = this.props.room.getThread(this.props.mxEvent.getId());
+        this.setEventId(this.props.mxEvent);
+        const thread = this.props.room.getThread(this.eventId) ?? undefined;
 
         this.setupThreadListeners(thread);
         this.state = {
@@ -108,10 +112,18 @@ export default class ThreadView extends React.Component<IProps, IState> {
         if (this.state.thread) {
             this.postThreadUpdate(this.state.thread);
         }
+
         this.setupThread(this.props.mxEvent);
         this.dispatcherRef = dis.register(this.onAction);
 
         const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
+
+        if (!room) {
+            throw new Error(
+                `Unable to find room ${this.props.mxEvent.getRoomId()} for thread ${this.props.mxEvent.getId()}`,
+            );
+        }
+
         room.on(ThreadEvent.New, this.onNewThread);
     }
 
@@ -119,7 +131,7 @@ export default class ThreadView extends React.Component<IProps, IState> {
         if (this.dispatcherRef) dis.unregister(this.dispatcherRef);
         const roomId = this.props.mxEvent.getRoomId();
         const room = MatrixClientPeg.get().getRoom(roomId);
-        room.removeListener(ThreadEvent.New, this.onNewThread);
+        room?.removeListener(ThreadEvent.New, this.onNewThread);
         SettingsStore.unwatchSetting(this.layoutWatcherRef);
 
         const hasRoomChanged = SdkContextClass.instance.roomViewStore.getRoomId() !== roomId;
@@ -139,6 +151,7 @@ export default class ThreadView extends React.Component<IProps, IState> {
 
     public componentDidUpdate(prevProps: IProps): void {
         if (prevProps.mxEvent !== this.props.mxEvent) {
+            this.setEventId(this.props.mxEvent);
             this.setupThread(this.props.mxEvent);
         }
 
@@ -147,6 +160,14 @@ export default class ThreadView extends React.Component<IProps, IState> {
         }
     }
 
+    private setEventId(event: MatrixEvent): void {
+        if (!event.getId()) {
+            throw new Error("Got thread event without id");
+        }
+
+        this.eventId = event.getId()!;
+    }
+
     private onAction = (payload: ActionPayload): void => {
         if (payload.phase == RightPanelPhases.ThreadView && payload.event) {
             this.setupThread(payload.event);
@@ -193,10 +214,15 @@ export default class ThreadView extends React.Component<IProps, IState> {
     };
 
     private setupThread = (mxEv: MatrixEvent): void => {
-        let thread = this.props.room.getThread(mxEv.getId());
+        /** presence of event Id has been ensured by {@link setEventId} */
+        const eventId = mxEv.getId()!;
+
+        let thread = this.props.room.getThread(eventId);
+
         if (!thread) {
-            thread = this.props.room.createThread(mxEv.getId(), mxEv, [mxEv], true);
+            thread = this.props.room.createThread(eventId, mxEv, [mxEv], true);
         }
+
         this.updateThread(thread);
     };
 
@@ -420,7 +446,7 @@ export default class ThreadView extends React.Component<IProps, IState> {
                         PosthogTrackers.trackInteraction("WebThreadViewBackButton", ev);
                     }}
                 >
-                    <Measured sensor={this.card.current} onMeasurement={this.onMeasurement} />
+                    {this.card.current && <Measured sensor={this.card.current} onMeasurement={this.onMeasurement} />}
                     <div className="mx_ThreadView_timelinePanelWrapper">{timeline}</div>
 
                     {ContentMessages.sharedInstance().getCurrentUploads(threadRelation).length > 0 && (