chore: enable semi eslint rule (#522)

### Description Of Changes
Enabled [semi](https://eslint.org/docs/latest/rules/semi#rule-details) eslint rule off-ed previously.

Author: AhyoungRyu

.eslintrc.json

@@ -76,7 +76,6 @@
     "arrow-body-style": "off",
     "function-paren-newline": "off",
     "prefer-template": "off",
-    "semi": "off",
     "padded-blocks": "off",
     "arrow-parens": "off",
     "dot-notation": "off",
@@ -88,7 +87,11 @@
     "yoda": "off",
     "brace-style": "off",
     "nonblock-statement-body-position": "off",
-    "func-names": "off"
+    "func-names": "off",
+    // In some cases, eslint requires semicolon and wants it removed at the same time
+    // https://stackoverflow.com/questions/58474874/eslint-demands-semicolon-and-wants-it-removed-at-the-same-time
+    "semi": "off",
+    "@typescript-eslint/semi": ["error"]
   },
   "extends": [
     "plugin:react/recommended",

src/hooks/VoicePlayer/dux/initialState.ts

@@ -14,7 +14,7 @@ export type AudioStorageUnit = {
   audioFile: null | File;
   playbackTime: number;
   duration: number;
-}
+};
 export const AudioUnitDefaultValue = (): AudioStorageUnit => ({
   audioFile: null,
   playbackTime: 0,

src/hooks/VoicePlayer/dux/reducer.ts

@@ -27,7 +27,7 @@ type PayloadType = (
 type ActionType = {
   type: string;
   payload: PayloadType;
-}
+};
 
 export default function voicePlayerReducer(
   state: VoicePlayerInitialState,

src/hooks/VoicePlayer/useVoicePlayer.tsx

@@ -63,7 +63,7 @@ export const useVoicePlayer = ({
         const voiceAudioPlayerElement = document.getElementById(VOICE_PLAYER_AUDIO_ID);
         (voiceAudioPlayerElement as HTMLAudioElement)?.pause?.();
       }
-    }
+    };
   }, []);
 
   return ({

src/hooks/VoiceRecorder/index.tsx

@@ -42,7 +42,7 @@ export const VoiceRecorderProvider = (props: VoiceRecorderProps): React.ReactEle
     if (isVoiceMessageEnabled && !webAudioUtils) {
       import('./WebAudioUtils').then((data) => {
         setWebAudioUtils(data);
-      })
+      });
     }
   }, []);
 
@@ -110,7 +110,7 @@ export const VoiceRecorderProvider = (props: VoiceRecorderProps): React.ReactEle
     }}>
       {children}
     </VoiceRecorderContext.Provider>
-  )
+  );
 };
 
 export const useVoiceRecorderContext = (): VoiceRecorderContext => useContext(VoiceRecorderContext);

src/hooks/useHandleOnScrollCallback/index.ts

@@ -9,7 +9,7 @@ export interface UseHandleOnScrollCallbackProps {
 }
 
 export function calcScrollBottom(scrollHeight: number, scrollTop: number): number {
-  return scrollHeight - scrollTop
+  return scrollHeight - scrollTop;
 }
 
 export function useHandleOnScrollCallback({
@@ -36,7 +36,7 @@ export function useHandleOnScrollCallback({
     // even if there is more to fetch or not,
     // we still have to show the scroll to bottom button
     if (typeof setShowScrollDownButton === 'function') {
-      setShowScrollDownButton(scrollHeight > scrollTop + clientHeight + 1)
+      setShowScrollDownButton(scrollHeight > scrollTop + clientHeight + 1);
     }
     if (!hasMore) {
       return;

src/hooks/useLongPress.tsx

@@ -30,7 +30,7 @@ const DEFAULT_DURATION = 300;
 
 function preventDefault(e: Event) {
   if (!isTouchEvent(e)) {
-    return
+    return;
   }
 
   if (e.touches.length < 2 && e.preventDefault) {

src/index.d.ts

@@ -185,7 +185,7 @@ export type SendBirdState = {
   dispatchers: {
     userDispatcher: UserDispatcher,
   },
-}
+};
 
 type UserDispatcherParams = {
   type: string,
@@ -515,20 +515,20 @@ type ChannelSettingsContextProps = {
   queries?: ChannelSettingsQueries;
   renderUserProfile?: (props: RenderUserProfileProps) => React.ReactElement;
   disableUserProfile?: boolean;
-}
+};
 
 interface ChannelSettingsProps extends ChannelSettingsUIProps, ChannelSettingsContextProps {
 }
 
 type ChannelSettingsEditDetailsProps = {
   onSubmit: () => void;
   onCancel: () => void;
-}
+};
 
 type CustomUser = User & {
   isMuted: boolean;
   role: string;
-}
+};
 
 interface UserListItemActionProps {
   actionRef: React.RefObject<HTMLInputElement>;
@@ -553,10 +553,10 @@ declare module '@sendbird/uikit-react' {
   export type sendbirdSelectors = sendbirdSelectorsInterface;
   export type ChannelList = React.FunctionComponent<ChannelListProps>;
   export type ChannelSettings = React.FunctionComponent<ChannelSettingsProps>;
-  export type Channel = React.FunctionComponent<ChannelProps>
-  export type OpenChannel = React.FunctionComponent<OpenChannelProps>
-  export type OpenChannelSettings = React.FunctionComponent<OpenChannelSettingsProps>
-  export type MessageSearch = React.FunctionComponent<MessageSearchProps>
+  export type Channel = React.FunctionComponent<ChannelProps>;
+  export type OpenChannel = React.FunctionComponent<OpenChannelProps>;
+  export type OpenChannelSettings = React.FunctionComponent<OpenChannelSettingsProps>;
+  export type MessageSearch = React.FunctionComponent<MessageSearchProps>;
   export function withSendBird(
     ChildComp: React.Component | React.ElementType | React.ReactElement,
     mapStoreToProps?: (store: SendBirdState) => unknown
@@ -814,7 +814,7 @@ interface ChannelProviderInterface extends ChannelContextProps, MessageStoreInte
 type FileViewerProps = {
   onCancel: () => void;
   message: ClientFileMessage;
-}
+};
 
 type MessageUIProps = {
   message: EveryMessage;
@@ -1020,7 +1020,7 @@ interface OpenChannelProps extends OpenChannelProviderProps, OpenChannelUIProps
 type OpenchannelMessageListProps = {
   renderMessage?: (props: RenderMessageProps) => React.ReactElement;
   renderPlaceHolderEmptyList?: () => React.ReactElement;
-}
+};
 
 type OpenChannelMessageProps = {
   renderMessage?: (props: RenderMessageProps) => React.ReactElement;
@@ -1086,7 +1086,7 @@ interface UserFilledOpenChannelListQuery {
 type OpenChannelListFetchingStatus = 'EMPTY' | 'FETCHING' | 'DONE' | 'ERROR';
 type CustomUseReducerDispatcher = (props: { type: string, payload: any }) => void;
 type OnOpenChannelSelected = (channel: OpenChannel, e?: React.MouseEvent<HTMLDivElement | unknown>) => void;
-type FetchNextCallbackType = (callback: (channels?: Array<OpenChannel>, err?: SendbirdError) => void) => void
+type FetchNextCallbackType = (callback: (channels?: Array<OpenChannel>, err?: SendbirdError) => void) => void;
 
 interface OpenChannelListProviderProps {
   className?: string;

src/lib/MediaQueryContext.tsx

@@ -64,14 +64,14 @@ const MediaQueryProvider = (props: MediaQueryProviderProps): React.ReactElement
           logger?.info?.('MediaQueryProvider: isMobile: false');
         }
       }
-    }
+    };
     updateSize();
     window.addEventListener('resize', updateSize);
     logger?.info?.('MediaQueryProvider: addEventListener', updateSize);
     return () => {
       window.removeEventListener('resize', updateSize);
       logger?.info?.('MediaQueryProvider: removeEventListener', updateSize);
-    }
+    };
   }, [mediaQueryBreakPoint]);
   return (
     <MediaQueryContext.Provider value={{ mediaQueryBreakPoint, isMobile }}>

src/lib/Sendbird.tsx

@@ -30,7 +30,7 @@ import { ConfigureSessionTypes } from './hooks/useConnect/types';
 export type UserListQueryType = {
   hasNext?: boolean;
   next: () => Promise<Array<User>>;
-}
+};
 
 interface VoiceRecordOptions {
   maxRecordingTime?: number;
@@ -260,6 +260,6 @@ const Sendbird = ({
       </MediaQueryProvider>
     </SendbirdSdkContext.Provider>
   );
-}
+};
 
 export default Sendbird;