chore: turn on no-unsafe-optional-chaining rule again (#527)

AhyoungRyu · web-flow · commit 7fc7ace8e76c · 2023-05-10T14:01:37.000+09:00
Turned on `no-unsafe-optional-chaining` eslint rule again off-ed by #526
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -71,7 +71,6 @@
     "no-bitwise": "off",
     "no-restricted-syntax": "off",
     "no-prototype-builtins": "off",
-    "no-unsafe-optional-chaining": "off",
     "import/no-unresolved": "off",
     "import/no-extraneous-dependencies": "off",
     "import/no-useless-path-segments": "off",
diff --git a/src/hooks/VoicePlayer/useVoicePlayer.tsx b/src/hooks/VoicePlayer/useVoicePlayer.tsx
@@ -70,9 +70,9 @@ export const useVoicePlayer = ({
     play: playVoicePlayer,
     pause: pauseVoicePlayer,
     stop: stopVoicePlayer,
-    playbackTime: currentAudioUnit?.playbackTime * 1000,
-    duration: currentAudioUnit?.duration * 1000,
+    playbackTime: currentAudioUnit.playbackTime * 1000,
+    duration: currentAudioUnit.duration * 1000,
     // the unit of playbackTime and duration should be millisecond
-    playingStatus: currentAudioUnit?.playingStatus,
+    playingStatus: currentAudioUnit.playingStatus,
   });
 };
diff --git a/src/modules/Channel/components/Message/index.tsx b/src/modules/Channel/components/Message/index.tsx
@@ -54,12 +54,13 @@ const Message = ({
 }: MessageUIProps): React.ReactElement => {
   const { dateLocale } = useLocalization();
   const globalStore = useSendbirdStateContext();
+
   const {
     userId,
     isOnline,
     isMentionEnabled,
     userMention,
-  } = globalStore?.config;
+  } = globalStore.config;
   const maxUserMentionCount = userMention?.maxMentionCount || MAX_USER_MENTION_COUNT;
   const maxUserSuggestionCount = userMention?.maxSuggestionCount || MAX_USER_SUGGESTION_COUNT;
 
diff --git a/src/modules/Channel/components/MessageInput/index.tsx b/src/modules/Channel/components/MessageInput/index.tsx
@@ -50,7 +50,7 @@ const MessageInputWrapper = (
     isMentionEnabled,
     userMention,
     isVoiceMessageEnabled,
-  } = globalStore?.config;
+  } = globalStore.config;
   const maxUserMentionCount = userMention?.maxMentionCount || 10;
   const maxUserSuggestionCount = userMention?.maxSuggestionCount || 15;
 
diff --git a/src/modules/Channel/components/MessageList/index.tsx b/src/modules/Channel/components/MessageList/index.tsx
@@ -100,7 +100,7 @@ const MessageList: React.FC<MessageListProps> = ({
     setAnimatedMessageId?.(null);
     setHighLightedMessageId?.(null);
     if (scrollRef?.current?.scrollTop > -1) {
-      scrollRef.current.scrollTop = scrollRef?.current?.scrollHeight - scrollRef?.current?.offsetHeight;
+      scrollRef.current.scrollTop = (scrollRef?.current?.scrollHeight ?? 0) - (scrollRef?.current?.offsetHeight ?? 0);
     }
   };
 
@@ -181,7 +181,7 @@ const MessageList: React.FC<MessageListProps> = ({
         time={unreadSince}
         onClick={() => {
           if (scrollRef?.current?.scrollTop) {
-            scrollRef.current.scrollTop = scrollRef?.current?.scrollHeight - scrollRef?.current?.offsetHeight;
+            scrollRef.current.scrollTop = (scrollRef?.current?.scrollHeight ?? 0) - (scrollRef?.current?.offsetHeight ?? 0);
           }
           if (!disableMarkAsRead) {
             markAsReadScheduler?.push(currentGroupChannel);
diff --git a/src/modules/Channel/components/SuggestedMentionList/SuggestedUserMentionItem.tsx b/src/modules/Channel/components/SuggestedMentionList/SuggestedUserMentionItem.tsx
@@ -28,14 +28,14 @@ function SuggestedUserMentionItem(props: SuggestedUserMentionItemProps): JSX.Ele
     onMouseMove,
     renderUserMentionItem,
   } = props;
-  const scrollRef = useRef(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
   const { stringSet = {} } = useContext(LocalizationContext);
   useEffect(() => {
-    if (isFocused
-      && (parentScrollRef?.current?.scrollTop >= scrollRef?.current?.offsetTop
-        || parentScrollRef?.current?.scrollTop + parentScrollRef?.current?.clientHeight <= scrollRef?.current?.offsetTop
+    if (isFocused && parentScrollRef?.current != null && scrollRef?.current != null
+      && (parentScrollRef.current.scrollTop >= scrollRef.current.offsetTop
+        || parentScrollRef.current.scrollTop + parentScrollRef.current.clientHeight <= scrollRef.current.offsetTop
       )) {
-      scrollRef?.current?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+      scrollRef.current.scrollIntoView({ block: 'nearest', inline: 'nearest' });
     }
   }, [isFocused]);
   const customMentionItem = useMemo(() => {
diff --git a/src/modules/Channel/context/ChannelProvider.tsx b/src/modules/Channel/context/ChannelProvider.tsx
@@ -17,7 +17,7 @@ import type {
 } from '@sendbird/chat/message';
 import type { SendbirdError, User } from '@sendbird/chat';
 
-import { ReplyType, RenderUserProfileProps } from '../../../types';
+import { ReplyType, RenderUserProfileProps, Nullable } from '../../../types';
 import { UserProfileProvider } from '../../../lib/UserProfileContext';
 import useSendbirdStateContext from '../../../hooks/useSendbirdStateContext';
 import { CoreMessageType } from '../../../utils';
@@ -105,7 +105,7 @@ interface MessageStoreInterface {
   initialized: boolean;
   unreadSince: string;
   isInvalid: boolean;
-  currentGroupChannel: GroupChannel;
+  currentGroupChannel: Nullable<GroupChannel>;
   hasMorePrev: boolean;
   oldestMessageTimeStamp: number;
   hasMoreNext: boolean;
diff --git a/src/modules/ChannelList/components/ChannelListHeader/index.tsx b/src/modules/ChannelList/components/ChannelListHeader/index.tsx
@@ -22,8 +22,8 @@ const ChannelListHeader: React.FC<ChannelListHeaderInterface> = ({
   onEdit,
   allowProfileEdit,
 }: ChannelListHeaderInterface) => {
-  const { stores, config } = useSendbirdStateContext?.();
-  const { user } = stores?.userStore;
+  const { stores, config } = useSendbirdStateContext();
+  const { user } = stores.userStore;
   const { logger } = config;
 
   const { stringSet } = useContext(LocalizationContext);
diff --git a/src/modules/OpenChannelSettings/components/EditDetailsModal.tsx b/src/modules/OpenChannelSettings/components/EditDetailsModal.tsx
@@ -27,7 +27,7 @@ const EditDetails = (props: Props): ReactElement => {
     onCancel,
   } = props;
   const globalState = useSendbirdStateContext();
-  const { logger, theme, pubSub } = globalState?.config;
+  const { logger, theme, pubSub } = globalState.config;
   const {
     channel,
     onBeforeUpdateChannel,
diff --git a/src/modules/Thread/components/ParentMessageInfo/index.tsx b/src/modules/Thread/components/ParentMessageInfo/index.tsx
@@ -42,8 +42,8 @@ export default function ParentMessageInfo({
     isOnline,
     userMention,
   } = config;
-  const userId = stores?.userStore?.user?.userId;
-  const { dateLocale } = useLocalization?.();
+  const userId = stores.userStore.user?.userId ?? '';
+  const { dateLocale } = useLocalization();
   const {
     currentChannel,
     parentMessage,
diff --git a/src/types.d.ts b/src/types.d.ts
@@ -7,6 +7,7 @@ import type {
 } from '@sendbird/chat/message';
 
 export type ReplyType = 'NONE' | 'QUOTE_REPLY' | 'THREAD';
+export type Nullable<T> = T | null;
 
 export interface UserListQuery {
   hasNext?: boolean;
diff --git a/src/ui/MessageContent/index.tsx b/src/ui/MessageContent/index.tsx
@@ -48,6 +48,7 @@ import { useMediaQueryContext } from '../../lib/MediaQueryContext';
 import ThreadReplies from '../ThreadReplies';
 import { ThreadReplySelectType } from '../../modules/Channel/context/const';
 import VoiceMessageItemBody from '../VoiceMessageItemBody';
+import { Nullable } from '../../types';
 
 // should initialize in UserProfileContext.jsx
 export interface UserProfileContextInterface {
@@ -59,7 +60,7 @@ export interface UserProfileContextInterface {
 interface Props {
   className?: string | Array<string>;
   userId: string;
-  channel: GroupChannel;
+  channel: Nullable<GroupChannel>;
   message: AdminMessage | UserMessage | FileMessage;
   disabled?: boolean;
   chainTop?: boolean;
@@ -266,7 +267,7 @@ export default function MessageContent({
               message={message as UserMessage | FileMessage}
               userId={userId}
               isByMe={isByMe}
-              isUnavailable={(replyType === 'THREAD' && (channel?.joinedAt * 1000) > message?.parentMessage?.createdAt)}
+              isUnavailable={(replyType === 'THREAD' && (channel?.joinedAt ?? 0 * 1000) > (message.parentMessage?.createdAt ?? 0))}
               onClick={() => {
                 if (replyType === 'THREAD' && threadReplySelectType === ThreadReplySelectType.THREAD) {
                   onQuoteMessageClick?.({ message: message as UserMessage | FileMessage });
@@ -329,7 +330,7 @@ export default function MessageContent({
             <VoiceMessageItemBody
               className="sendbird-message-content__middle__message-item-body"
               message={message as FileMessage}
-              channelUrl={channel?.url}
+              channelUrl={channel?.url ?? ''}
               isByMe={isByMe}
               isReactionEnabled={isReactionEnabledInChannel}
             />
diff --git a/src/ui/MessageStatus/index.tsx b/src/ui/MessageStatus/index.tsx
@@ -15,13 +15,14 @@ import {
 } from '../../utils/exports/getOutgoingMessageState';
 import { getLastMessageCreatedAt } from '../../modules/ChannelList/components/ChannelPreview/utils';
 import { useLocalization } from '../../lib/LocalizationContext';
+import { Nullable } from '../../types';
 
 export const MessageStatusTypes = OutgoingMessageStates;
 
 interface MessageStatusProps {
   className?: string;
   message: UserMessage | FileMessage;
-  channel: GroupChannel;
+  channel: Nullable<GroupChannel>;
   isDateSeparatorConsidered?: boolean;
 }
 
diff --git a/src/ui/MobileMenu/MobileBottomSheet.tsx b/src/ui/MobileMenu/MobileBottomSheet.tsx
@@ -53,7 +53,7 @@ const MobileBottomSheet: React.FunctionComponent<MobileBottomSheetProps> = (prop
   const disableReaction = message?.parentMessageId > 0;
 
   const fileMessage = message as FileMessage;
-  const maxEmojisPerRow = Math.floor(window?.innerWidth / EMOJI_SIZE) - 1;
+  const maxEmojisPerRow = Math.floor(window.innerWidth / EMOJI_SIZE) - 1;
   const [showEmojisOnly, setShowEmojisOnly] = useState<boolean>(false);
   const emojis = getEmojiListAll(emojiContainer);
   // calculate max emojis that can be shown in screen
diff --git a/src/ui/OpenchannelThumbnailMessage/index.tsx b/src/ui/OpenchannelThumbnailMessage/index.tsx
@@ -74,7 +74,7 @@ export default function OpenchannelThumbnailMessage({
   const { disableUserProfile, renderUserProfile } = useContext<UserProfileContext>(UserProfileContext);
   const [messageWidth, setMessageWidth] = useState(360);
   const [contextMenu, setContextMenu] = useState(false);
-  const messageRef = useRef(null);
+  const messageRef = useRef<HTMLDivElement>(null);
   const mobileMenuRef = useRef(null);
   const contextMenuRef = useRef(null);
   const avatarRef = useRef(null);
@@ -101,7 +101,7 @@ export default function OpenchannelThumbnailMessage({
   const sender = getSenderFromMessage(message);
 
   useEffect(() => {
-    const thumbnailWidth = messageRef?.current?.clientWidth - 80;
+    const thumbnailWidth = (messageRef?.current?.clientWidth ?? 0) - 80;
     setMessageWidth(thumbnailWidth > 360 ? 360 : thumbnailWidth);
   }, []);
 
diff --git a/src/utils/exports/getOutgoingMessageState.ts b/src/utils/exports/getOutgoingMessageState.ts
@@ -1,6 +1,7 @@
 import { GroupChannel } from '@sendbird/chat/groupChannel';
 import { OpenChannel } from '@sendbird/chat/openChannel';
 import { UserMessage, FileMessage } from '@sendbird/chat/message';
+import { Nullable } from '../../types';
 
 export enum OutgoingMessageStates {
   NONE = 'NONE',
@@ -11,7 +12,7 @@ export enum OutgoingMessageStates {
   READ = 'READ',
 }
 
-export const getOutgoingMessageState = (channel: GroupChannel | OpenChannel, message: UserMessage | FileMessage): string => {
+export const getOutgoingMessageState = (channel: Nullable<GroupChannel | OpenChannel>, message: UserMessage | FileMessage): string => {
   if (message.sendingStatus === 'pending') {
     return OutgoingMessageStates.PENDING;
   }
diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -4,7 +4,7 @@ import { AdminMessage, FileMessage, MessageListParams, Reaction, UserMessage } f
 import { OpenChannel, SendbirdOpenChat } from '@sendbird/chat/openChannel';
 
 import { getOutgoingMessageState, OutgoingMessageStates } from './exports/getOutgoingMessageState';
-import { EveryMessage } from '../types';
+import { EveryMessage, Nullable } from '../types';
 
 // https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types
 const SUPPORTED_MIMES = {
@@ -158,21 +158,21 @@ export const isGifMessage = (message: UserMessage | FileMessage): boolean => (
 );
 export const isAudioMessage = (message: FileMessage): boolean => message && isFileMessage(message) && isAudio(message.type);
 export const isAudioMessageMimeType = (type: string): boolean => (/^audio\//.test(type));
-export const isVoiceMessage = (message: FileMessage): boolean => {
+export const isVoiceMessage = (message: Nullable<FileMessage>): boolean => {
   // ex) audio/m4a OR audio/m4a;sbu_type=voice
   if (!(message && isFileMessage(message))) {
     return false;
   }
-  const [mimeType, typeParameter] = message.type?.split(';');
+  const [mimeType, typeParameter] = message.type.split(';');
   if (!isAudioMessageMimeType(mimeType) || !typeParameter) {
     return false;
   }
-  const [key, value] = typeParameter?.split('=');
+  const [key, value] = typeParameter.split('=');
   if (key === 'sbu_type' && value === 'voice') {
     return true;
   }
   // ex) message.metaArrays = [{ key: 'KEY_INTERNAL_MESSAGE_TYPE', value: ['voice/m4a'] }]
-  return isVoiceMessageMimeType(message.metaArrays.find((metaArray) => metaArray.key === 'KEY_INTERNAL_MESSAGE_TYPE')?.value?.[0]);
+  return isVoiceMessageMimeType(message?.metaArrays?.find((metaArray) => metaArray.key === 'KEY_INTERNAL_MESSAGE_TYPE')?.value?.[0] ?? '');
 };
 export const isVoiceMessageMimeType = (type: string): boolean => (/^voice\//.test(type));
 
