From 2191a2d8200c19a94b77a6b04c139fb04af23323 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 7 Mar 2023 11:28:48 +0000
Subject: [PATCH] Apply `strictNullChecks` to
 src/components/views/emojipicker/* (#10298)

---
 src/components/views/emojipicker/EmojiPicker.tsx    | 10 ++++++----
 src/components/views/emojipicker/Header.tsx         |  6 +++---
 src/components/views/emojipicker/ReactionPicker.tsx |  3 +--
 src/components/views/rooms/EmojiButton.tsx          |  2 +-
 4 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/components/views/emojipicker/EmojiPicker.tsx b/src/components/views/emojipicker/EmojiPicker.tsx
index a759457008..b4a868f474 100644
--- a/src/components/views/emojipicker/EmojiPicker.tsx
+++ b/src/components/views/emojipicker/EmojiPicker.tsx
@@ -36,7 +36,6 @@ const ZERO_WIDTH_JOINER = "\u200D";
 
 interface IProps {
     selectedEmojis?: Set<string>;
-    showQuickReactions?: boolean;
     onChoose(unicode: string): boolean;
     isEmojiDisabled?: (unicode: string) => boolean;
 }
@@ -143,6 +142,7 @@ class EmojiPicker extends React.Component<IProps, IState> {
 
     private onScroll = (): void => {
         const body = this.scrollRef.current?.containerRef.current;
+        if (!body) return;
         this.setState({
             scrollTop: body.scrollTop,
             viewportHeight: body.clientHeight,
@@ -152,12 +152,13 @@ class EmojiPicker extends React.Component<IProps, IState> {
 
     private updateVisibility = (): void => {
         const body = this.scrollRef.current?.containerRef.current;
+        if (!body) return;
         const rect = body.getBoundingClientRect();
         for (const cat of this.categories) {
             const elem = body.querySelector(`[data-category-id="${cat.id}"]`);
             if (!elem) {
                 cat.visible = false;
-                cat.ref.current.classList.remove("mx_EmojiPicker_anchor_visible");
+                cat.ref.current?.classList.remove("mx_EmojiPicker_anchor_visible");
                 continue;
             }
             const elemRect = elem.getBoundingClientRect();
@@ -165,6 +166,7 @@ class EmojiPicker extends React.Component<IProps, IState> {
             const yEnd = elemRect.y + elemRect.height - rect.y;
             cat.visible = y < rect.height && yEnd > 0;
             // We update this here instead of through React to avoid re-render on scroll.
+            if (!cat.ref.current) continue;
             if (cat.visible) {
                 cat.ref.current.classList.add("mx_EmojiPicker_anchor_visible");
                 cat.ref.current.setAttribute("aria-selected", "true");
@@ -180,7 +182,7 @@ class EmojiPicker extends React.Component<IProps, IState> {
     private scrollToCategory = (category: string): void => {
         this.scrollRef.current?.containerRef.current
             ?.querySelector(`[data-category-id="${category}"]`)
-            .scrollIntoView();
+            ?.scrollIntoView();
     };
 
     private onChangeFilter = (filter: string): void => {
@@ -299,7 +301,7 @@ class EmojiPicker extends React.Component<IProps, IState> {
                         return categoryElement;
                     })}
                 </AutoHideScrollbar>
-                {this.state.previewEmoji || !this.props.showQuickReactions ? (
+                {this.state.previewEmoji ? (
                     <Preview emoji={this.state.previewEmoji} />
                 ) : (
                     <QuickReactions onClick={this.onClickEmoji} selectedEmojis={this.props.selectedEmojis} />
diff --git a/src/components/views/emojipicker/Header.tsx b/src/components/views/emojipicker/Header.tsx
index 995e2291e8..9a7005d632 100644
--- a/src/components/views/emojipicker/Header.tsx
+++ b/src/components/views/emojipicker/Header.tsx
@@ -29,7 +29,7 @@ interface IProps {
 }
 
 class Header extends React.PureComponent<IProps> {
-    private findNearestEnabled(index: number, delta: number): number {
+    private findNearestEnabled(index: number, delta: number): number | undefined {
         index += this.props.categories.length;
         const cats = [...this.props.categories, ...this.props.categories, ...this.props.categories];
 
@@ -45,10 +45,10 @@ class Header extends React.PureComponent<IProps> {
     }
 
     private changeCategoryAbsolute(index: number, delta = 1): void {
-        const category = this.props.categories[this.findNearestEnabled(index, delta)];
+        const category = this.props.categories[this.findNearestEnabled(index, delta)!];
         if (category) {
             this.props.onAnchorClick(category.id);
-            category.ref.current.focus();
+            category.ref.current?.focus();
         }
     }
 
diff --git a/src/components/views/emojipicker/ReactionPicker.tsx b/src/components/views/emojipicker/ReactionPicker.tsx
index 207767ecf9..6b13c76823 100644
--- a/src/components/views/emojipicker/ReactionPicker.tsx
+++ b/src/components/views/emojipicker/ReactionPicker.tsx
@@ -82,7 +82,7 @@ class ReactionPicker extends React.Component<IProps, IState> {
         return Object.fromEntries(
             [...myAnnotations]
                 .filter((event) => !event.isRedacted())
-                .map((event) => [event.getRelation().key, event.getId()]),
+                .map((event) => [event.getRelation()?.key, event.getId()]),
         );
     }
 
@@ -136,7 +136,6 @@ class ReactionPicker extends React.Component<IProps, IState> {
                 onChoose={this.onChoose}
                 isEmojiDisabled={this.isEmojiDisabled}
                 selectedEmojis={this.state.selectedEmojis}
-                showQuickReactions={true}
             />
         );
     }
diff --git a/src/components/views/rooms/EmojiButton.tsx b/src/components/views/rooms/EmojiButton.tsx
index 7baca3f260..013feeee24 100644
--- a/src/components/views/rooms/EmojiButton.tsx
+++ b/src/components/views/rooms/EmojiButton.tsx
@@ -46,7 +46,7 @@ export function EmojiButton({ addEmoji, menuPosition, className }: IEmojiButtonP
                 }}
                 managed={false}
             >
-                <EmojiPicker onChoose={addEmoji} showQuickReactions={true} />
+                <EmojiPicker onChoose={addEmoji} />
             </ContextMenu>
         );
     }