refactor: Migrate the SendbirdProvider and pubSub to TS (#437)

* Migrate `Sendbird.js` and `pubSub` files into the TypeScript
[UIKIT-3187](https://sendbird.atlassian.net/browse/UIKIT-3187)

Author: HoonBaek

src/hooks/VoicePlayer/dux/actionTypes.ts

@@ -1,3 +1,5 @@
+import { ObjectValues } from "../../../utils/typeHelpers/objectValues";
+
 export const actionTypes = {
   INITIALIZE_AUDIO_UNIT: 'INITIALIZE_AUDIO_UNIT',
   SET_CURRENT_PLAYER: 'SET_CURRENT_PLAYER',
@@ -6,7 +8,6 @@ export const actionTypes = {
   ON_CURRENT_TIME_UPDATE: 'ON_CURRENT_TIME_UPDATE',
 } as const;
 
-type ObjectValues<T> = T[keyof T];
 export type VoicePlayerActionType = ObjectValues<typeof actionTypes>;
 
 export const INITIALIZE_AUDIO_UNIT: VoicePlayerActionType = 'INITIALIZE_AUDIO_UNIT';

src/lib/Logger/index.js src/lib/Logger/index.tssrc/lib/Logger/index.js renamed to src/lib/Logger/index.ts

@@ -1,15 +1,19 @@
 // Logger, pretty much explains it
 // in SendbirdProvider
+
+import { ObjectValues } from "../../utils/typeHelpers/objectValues";
+
 // const [logger, setLogger] = useState(LoggerFactory(logLevel));
 export const LOG_LEVELS = {
   DEBUG: 'debug',
   WARNING: 'warning',
   ERROR: 'error',
   INFO: 'info',
   ALL: 'all',
-};
+} as const;
+export type LogLevel = ObjectValues<typeof LOG_LEVELS>;
 
-const colorLog = (level) => {
+const colorLog = (level: LogLevel): string => {
   switch (level) {
     case LOG_LEVELS.WARNING:
       return ('color: Orange');
@@ -20,29 +24,45 @@ const colorLog = (level) => {
   }
 };
 
+interface PrintLogProps {
+  level: LogLevel;
+  title: string;
+  description?: string;
+}
 export const printLog = ({
   level,
   title,
   description = '',
-}) => {
+}: PrintLogProps): void => {
   // eslint-disable-next-line no-console
   console.log(
     `%c SendbirdUIKit | ${level} | ${new Date().toISOString()} | ${title} ${description && '|'}`, colorLog(level),
     description,
   );
 };
 
-export const getDefaultLogger = () => ({
-  info: () => {},
-  error: () => {},
-  warning: () => {},
+type LoggerLogType = (title?: string, description?: string) => void;
+interface LoggerInterface {
+  info: LoggerLogType;
+  error: LoggerLogType;
+  warning: LoggerLogType;
+}
+
+const noop = () => {/* noop */};
+export const getDefaultLogger = (): LoggerInterface => ({
+  info: noop,
+  error: noop,
+  warning: noop,
 });
 
-export const LoggerFactory = (lvl, customInterface) => {
+export const LoggerFactory = (
+  lvl: LogLevel,
+  customInterface: () => void,
+): LoggerInterface => {
   const logInterface = customInterface || printLog;
-  const lvlArray = Array.isArray(lvl) ? lvl : [lvl];
+  const lvlArray: Array<LogLevel> = Array.isArray(lvl) ? lvl : [lvl];
 
-  const applyLog = (lgLvl) => (title, description) => logInterface({
+  const applyLog = (lgLvl: LogLevel) => (title?: string, description?: string) => logInterface({
     level: lgLvl,
     title,
     description,
@@ -83,3 +103,5 @@ export const LoggerFactory = (lvl, customInterface) => {
   }, getDefaultLogger());
   return logger;
 };
+
+// TODO: Make this to hook, useLogger

src/lib/Sendbird.jsx src/lib/Sendbird.tsxsrc/lib/Sendbird.jsx renamed to src/lib/Sendbird.tsx

@@ -2,7 +2,7 @@ import './index.scss';
 import './__experimental__typography.scss';
 
 import React, { useEffect, useReducer, useState } from 'react';
-import PropTypes from 'prop-types';
+import { User } from '@sendbird/chat';
 
 import { SendbirdSdkContext } from './SendbirdSdkContext';
 import { handleConnection } from './dux/sdk/thunks';
@@ -26,39 +26,93 @@ import { MediaQueryProvider } from './MediaQueryContext';
 import getStringSet from '../ui/Label/stringSet';
 import { VOICE_RECORDER_DEFAULT_MAX, VOICE_RECORDER_DEFAULT_MIN } from '../utils/consts';
 
-export default function Sendbird(props) {
-  const {
-    userId,
-    dateLocale,
-    appId,
-    accessToken,
-    configureSession,
-    // mediaQueryBreakPoint,
-    customApiHost,
-    customWebSocketHost,
-    children,
-    disableUserProfile,
-    disableMarkAsDelivered,
-    renderUserProfile,
-    onUserProfileMessage,
-    allowProfileEdit,
-    theme,
-    nickname,
-    profileUrl,
-    userListQuery,
-    config = {},
-    colorSet,
-    stringSet,
-    imageCompression,
-    isReactionEnabled,
-    isMentionEnabled,
-    isVoiceMessageEnabled,
-    voiceRecord,
-    isTypingIndicatorEnabledOnChannelList,
-    isMessageReceiptStatusEnabledOnChannelList,
-    replyType,
-  } = props;
+export type UserListQueryType = {
+  hasNext?: boolean;
+  next: () => Promise<Array<User>>;
+}
+
+interface VoiceRecordOptions {
+  maxRecordingTime?: number;
+  minRecordingTime?: number;
+}
+
+export interface ImageCompressionOptions {
+  compressionRate?: number;
+  resizingWidth?: number | string;
+  resizingHeight?: number | string;
+}
 
+export interface SendbirdConfig {
+  logLevel?: string | Array<string>;
+  pubSub?: () => void;// TODO: Define pubSub type and apply it here
+  userMention?: {
+    maxMentionCount?: number;
+    maxSuggestionCount?: number;
+  };
+  isREMUnitEnabled?: boolean;
+}
+
+export interface SendbirdProviderProps {
+  appId: string;
+  userId: string;
+  children: React.ReactElement;
+  accessToken?: string;
+  customApiHost?: string;
+  customWebSocketHost?: string;
+  configureSession?: () => void;
+  theme?: 'light' | 'dark';
+  config?: SendbirdConfig;
+  nickname?: string;
+  colorSet?: Record<string, string>;
+  stringSet?: Record<string, string>;
+  replyType?: 'NONE' | 'QUOTE_REPLY' | 'THREAD';
+  dateLocale?: Locale;
+  profileUrl?: string;
+  voiceRecord?: VoiceRecordOptions;
+  userListQuery?: UserListQueryType;
+  imageCompression?: ImageCompressionOptions;
+  allowProfileEdit?: boolean;
+  isMentionEnabled?: boolean;
+  isReactionEnabled?: boolean;
+  disableUserProfile?: boolean;
+  isVoiceMessageEnabled?: boolean;
+  disableMarkAsDelivered?: boolean;
+  isTypingIndicatorEnabledOnChannelList?: boolean;
+  isMessageReceiptStatusEnabledOnChannelList?: boolean;
+  renderUserProfile?: () => React.ReactElement;
+  onUserProfileMessage?: () => void;
+}
+
+const Sendbird = ({
+  appId,
+  userId,
+  children,
+  accessToken = '',
+  customApiHost = '',
+  customWebSocketHost = '',
+  configureSession = null,
+  theme = 'light',
+  config = {},
+  nickname = '',
+  colorSet = null,
+  stringSet = null,
+  replyType = 'NONE',
+  dateLocale = null,
+  profileUrl = '',
+  voiceRecord = { maxRecordingTime: VOICE_RECORDER_DEFAULT_MAX, minRecordingTime: VOICE_RECORDER_DEFAULT_MIN },
+  userListQuery = null,
+  imageCompression = {},
+  allowProfileEdit = false,
+  isMentionEnabled = false,
+  isReactionEnabled = true,
+  disableUserProfile = false,
+  isVoiceMessageEnabled = true,
+  disableMarkAsDelivered = false,
+  isTypingIndicatorEnabledOnChannelList = false,
+  isMessageReceiptStatusEnabledOnChannelList = false,
+  renderUserProfile = null,
+  onUserProfileMessage = null,
+}: SendbirdProviderProps): React.ReactElement => {
   const mediaQueryBreakPoint = false;
 
   const {
@@ -223,98 +277,4 @@ export default function Sendbird(props) {
   );
 }
 
-Sendbird.propTypes = {
-  userId: PropTypes.string.isRequired,
-  appId: PropTypes.string.isRequired,
-  accessToken: PropTypes.string,
-  customApiHost: PropTypes.string,
-  customWebSocketHost: PropTypes.string,
-  // mediaQueryBreakPoint: PropTypes.string,
-  configureSession: PropTypes.func,
-  children: PropTypes.oneOfType([
-    PropTypes.element,
-    PropTypes.arrayOf(PropTypes.element),
-    PropTypes.any,
-  ]).isRequired,
-  theme: PropTypes.string,
-  nickname: PropTypes.string,
-  dateLocale: PropTypes.shape({}),
-  profileUrl: PropTypes.string,
-  disableUserProfile: PropTypes.bool,
-  disableMarkAsDelivered: PropTypes.bool,
-  renderUserProfile: PropTypes.func,
-  onUserProfileMessage: PropTypes.func,
-  allowProfileEdit: PropTypes.bool,
-  userListQuery: PropTypes.func,
-  config: PropTypes.shape({
-    // None Error Warning Info 'All/Debug'
-    logLevel: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.arrayOf(PropTypes.string),
-    ]),
-    pubSub: PropTypes.shape({
-      subscribe: PropTypes.func,
-      publish: PropTypes.func,
-    }),
-    userMention: PropTypes.shape({
-      maxMentionCount: PropTypes.number,
-      maxSuggestionCount: PropTypes.number,
-    }),
-    isREMUnitEnabled: PropTypes.bool,
-  }),
-  stringSet: PropTypes.objectOf(PropTypes.string),
-  colorSet: PropTypes.objectOf(PropTypes.string),
-  isReactionEnabled: PropTypes.bool,
-  isMentionEnabled: PropTypes.bool,
-  isVoiceMessageEnabled: PropTypes.bool,
-  voiceRecord: PropTypes.shape({
-    maxRecordingTime: PropTypes.number,
-    minRecordingTime: PropTypes.number,
-  }),
-  imageCompression: PropTypes.shape({
-    compressionRate: PropTypes.number,
-    resizingWidth: PropTypes.oneOfType([
-      PropTypes.number,
-      PropTypes.string,
-    ]),
-    resizingHeight: PropTypes.oneOfType([
-      PropTypes.number,
-      PropTypes.string,
-    ]),
-  }),
-  isTypingIndicatorEnabledOnChannelList: PropTypes.bool,
-  isMessageReceiptStatusEnabledOnChannelList: PropTypes.bool,
-  replyType: PropTypes.oneOf(['NONE', 'QUOTE_REPLY', 'THREAD']),
-};
-
-Sendbird.defaultProps = {
-  accessToken: '',
-  customApiHost: null,
-  customWebSocketHost: null,
-  configureSession: null,
-  theme: 'light',
-  // mediaQueryBreakPoint: null,
-  nickname: '',
-  dateLocale: null,
-  profileUrl: '',
-  disableUserProfile: false,
-  disableMarkAsDelivered: false,
-  renderUserProfile: null,
-  onUserProfileMessage: null,
-  allowProfileEdit: false,
-  userListQuery: null,
-  config: {},
-  stringSet: null,
-  colorSet: null,
-  imageCompression: {},
-  isReactionEnabled: true,
-  isMentionEnabled: false,
-  isVoiceMessageEnabled: true,
-  voiceRecord: {
-    maxRecordingTime: VOICE_RECORDER_DEFAULT_MAX,
-    minRecordingTime: VOICE_RECORDER_DEFAULT_MIN,
-  },
-  isTypingIndicatorEnabledOnChannelList: false,
-  isMessageReceiptStatusEnabledOnChannelList: false,
-  replyType: 'NONE',
-};
+export default Sendbird;

src/lib/SendbirdSdkContext.jsx src/lib/SendbirdSdkContext.tsxsrc/lib/SendbirdSdkContext.jsx renamed to src/lib/SendbirdSdkContext.tsx

@@ -1,8 +1,14 @@
 import React from 'react';
 
-export const SendbirdSdkContext = React.createContext();
+type ContextAwareComponentType = {
+  (props: any): JSX.Element;
+  displayName: string;
+}
 
-const withSendbirdContext = (OriginalComponent, mapStoreToProps) => {
+export const SendbirdSdkContext = React.createContext({});
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+const withSendbirdContext = (OriginalComponent: any, mapStoreToProps: Record<string, any>): ContextAwareComponentType => {
   const ContextAwareComponent = (props) => (
     <SendbirdSdkContext.Consumer>
       {(context) => {

src/lib/pubSub/index.js src/lib/pubSub/index.tssrc/lib/pubSub/index.js renamed to src/lib/pubSub/index.ts

@@ -3,7 +3,14 @@
 // for example, if customer sends a message from their custom component
 // without pubsub,we would not be able to listen to it
 // in our ChannelList or Conversation
-export default () => {
+
+interface PubSubTypes {
+  __getTopics: () => Record<string, string>;
+  subscribe: (topic: string, listener: unknown) => { remove: () => void };
+  publish: (topic: string, info: unknown) => void;
+}
+
+const pubSubFactory = (): PubSubTypes => {
   const topics = {};
   const hOP = topics.hasOwnProperty;
 
@@ -34,3 +41,5 @@ export default () => {
     },
   };
 };
+
+export default pubSubFactory;