Make more code conform to strict null checks (#10219

* Make more code conform to strict null checks

* Fix types

* Fix tests

* Fix remaining test assertions

* Iterate PR

src/components/views/emojipicker/Category.tsx

@@ -38,7 +38,7 @@ interface IProps {
     id: string;
     name: string;
     emojis: IEmoji[];
-    selectedEmojis: Set<string>;
+    selectedEmojis?: Set<string>;
     heightBefore: number;
     viewportHeight: number;
     scrollTop: number;

src/components/views/emojipicker/EmojiPicker.tsx

@@ -26,6 +26,7 @@ import Search from "./Search";
 import Preview from "./Preview";
 import QuickReactions from "./QuickReactions";
 import Category, { ICategory, CategoryKey } from "./Category";
+import { filterBoolean } from "../../../utils/arrays";
 
 export const CATEGORY_HEADER_HEIGHT = 20;
 export const EMOJI_HEIGHT = 35;
@@ -62,13 +63,12 @@ class EmojiPicker extends React.Component<IProps, IState> {
 
         this.state = {
             filter: "",
-            previewEmoji: null,
             scrollTop: 0,
             viewportHeight: 280,
         };
 
         // Convert recent emoji characters to emoji data, removing unknowns and duplicates
-        this.recentlyUsed = Array.from(new Set(recent.get().map(getEmojiFromUnicode).filter(Boolean)));
+        this.recentlyUsed = Array.from(new Set(filterBoolean(recent.get().map(getEmojiFromUnicode))));
         this.memoizedDataByCategory = {
             recent: this.recentlyUsed,
             ...DATA_BY_CATEGORY,
@@ -230,9 +230,9 @@ class EmojiPicker extends React.Component<IProps, IState> {
         });
     };
 
-    private onHoverEmojiEnd = (emoji: IEmoji): void => {
+    private onHoverEmojiEnd = (): void => {
         this.setState({
-            previewEmoji: null,
+            previewEmoji: undefined,
         });
     };
 

src/components/views/emojipicker/QuickReactions.tsx

@@ -42,9 +42,7 @@ interface IState {
 class QuickReactions extends React.Component<IProps, IState> {
     public constructor(props: IProps) {
         super(props);
-        this.state = {
-            hover: null,
-        };
+        this.state = {};
     }
 
     private onMouseEnter = (emoji: IEmoji): void => {
@@ -55,7 +53,7 @@ class QuickReactions extends React.Component<IProps, IState> {
 
     private onMouseLeave = (): void => {
         this.setState({
-            hover: null,
+            hover: undefined,
         });
     };
 

src/components/views/emojipicker/ReactionPicker.tsx

@@ -77,8 +77,8 @@ class ReactionPicker extends React.Component<IProps, IState> {
         if (!this.props.reactions) {
             return {};
         }
-        const userId = MatrixClientPeg.get().getUserId();
-        const myAnnotations = this.props.reactions.getAnnotationsBySender()[userId] || new Set<MatrixEvent>();
+        const userId = MatrixClientPeg.get().getUserId()!;
+        const myAnnotations = this.props.reactions.getAnnotationsBySender()?.[userId] ?? new Set<MatrixEvent>();
         return Object.fromEntries(
             [...myAnnotations]
                 .filter((event) => !event.isRedacted())
@@ -97,9 +97,9 @@ class ReactionPicker extends React.Component<IProps, IState> {
         this.props.onFinished();
         const myReactions = this.getReactions();
         if (myReactions.hasOwnProperty(reaction)) {
-            if (this.props.mxEvent.isRedacted() || !this.context.canSelfRedact) return;
+            if (this.props.mxEvent.isRedacted() || !this.context.canSelfRedact) return false;
 
-            MatrixClientPeg.get().redactEvent(this.props.mxEvent.getRoomId(), myReactions[reaction]);
+            MatrixClientPeg.get().redactEvent(this.props.mxEvent.getRoomId()!, myReactions[reaction]);
             dis.dispatch<FocusComposerPayload>({
                 action: Action.FocusAComposer,
                 context: this.context.timelineRenderingType,
@@ -107,7 +107,7 @@ class ReactionPicker extends React.Component<IProps, IState> {
             // Tell the emoji picker not to bump this in the more frequently used list.
             return false;
         } else {
-            MatrixClientPeg.get().sendEvent(this.props.mxEvent.getRoomId(), EventType.Reaction, {
+            MatrixClientPeg.get().sendEvent(this.props.mxEvent.getRoomId()!, EventType.Reaction, {
                 "m.relates_to": {
                     rel_type: RelationType.Annotation,
                     event_id: this.props.mxEvent.getId(),

src/components/views/emojipicker/Search.tsx

@@ -32,7 +32,7 @@ class Search extends React.PureComponent<IProps> {
 
     public componentDidMount(): void {
         // For some reason, neither the autoFocus nor just calling focus() here worked, so here's a window.setTimeout
-        window.setTimeout(() => this.inputRef.current.focus(), 0);
+        window.setTimeout(() => this.inputRef.current?.focus(), 0);
     }
 
     private onKeyDown = (ev: React.KeyboardEvent): void => {