From 7c6b33bee421677b933a9598056d2250eff07a03 Mon Sep 17 00:00:00 2001
From: Sravan S <sravan-s@protonmail.com>
Date: Wed, 31 May 2023 16:19:36 +0900
Subject: [PATCH] feat: Rename MediaQueryBreakpoint to  breakpoint

---
 scripts/index_d_ts            |  2 +-
 src/lib/MediaQueryContext.tsx | 22 +++++++++++-----------
 src/lib/Sendbird.tsx          |  4 ++--
 src/modules/App/index.jsx     |  8 ++++----
 4 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/scripts/index_d_ts b/scripts/index_d_ts
index 4d8f8ed31..2adc0015d 100644
--- a/scripts/index_d_ts
+++ b/scripts/index_d_ts
@@ -51,7 +51,7 @@ declare module "SendbirdUIKitGlobal" {
     customApiHost?: string,
     customWebSocketHost?: string,
     // not-ready yet
-    // mediaQueryBreakPoint?: string | boolean,
+    // breakpoint?: string | boolean,
     theme?: 'light' | 'dark';
     userListQuery?(): UserListQuery;
     nickname?: string;
diff --git a/src/lib/MediaQueryContext.tsx b/src/lib/MediaQueryContext.tsx
index 98c1506f6..580a594e8 100644
--- a/src/lib/MediaQueryContext.tsx
+++ b/src/lib/MediaQueryContext.tsx
@@ -6,13 +6,13 @@ const DEFAULT_MOBILE = false;
 const MOBILE_CLASSNAME = 'sendbird--mobile-mode';
 
 const MediaQueryContext = React.createContext({
-  mediaQueryBreakPoint: DEFAULT_MOBILE,
+  breakpoint: DEFAULT_MOBILE,
   isMobile: false,
 });
 
 export interface MediaQueryProviderProps {
   children: React.ReactElement;
-  mediaQueryBreakPoint?: string | boolean;
+  breakpoint?: string | boolean;
   logger?: Logger;
 }
 
@@ -39,13 +39,13 @@ const MediaQueryProvider = (props: MediaQueryProviderProps): React.ReactElement
     children,
     logger,
   } = props;
-  const mediaQueryBreakPoint = props?.mediaQueryBreakPoint || DEFAULT_MOBILE;
+  const breakpoint = props?.breakpoint || DEFAULT_MOBILE;
   const [isMobile, setIsMobile] = useState(false);
   useEffect(() => {
     const updateSize = () => {
-      if (typeof mediaQueryBreakPoint === 'boolean') {
-        setIsMobile(mediaQueryBreakPoint);
-        if (mediaQueryBreakPoint) {
+      if (typeof breakpoint === 'boolean') {
+        setIsMobile(breakpoint);
+        if (breakpoint) {
           logger?.info?.('MediaQueryProvider: isMobile: true');
           addClassNameToBody();
         } else {
@@ -53,8 +53,8 @@ const MediaQueryProvider = (props: MediaQueryProviderProps): React.ReactElement
           removeClassNameFromBody();
         }
       } else {
-        const mq = window.matchMedia(`(max-width: ${mediaQueryBreakPoint})`);
-        logger?.info?.(`MediaQueryProvider: Screensize updated to ${mediaQueryBreakPoint}`);
+        const mq = window.matchMedia(`(max-width: ${breakpoint})`);
+        logger?.info?.(`MediaQueryProvider: Screensize updated to ${breakpoint}`);
         if (mq.matches) {
           setIsMobile(true);
           addClassNameToBody();
@@ -73,16 +73,16 @@ const MediaQueryProvider = (props: MediaQueryProviderProps): React.ReactElement
       window.removeEventListener('resize', updateSize);
       logger?.info?.('MediaQueryProvider: removeEventListener', { updateSize });
     };
-  }, [mediaQueryBreakPoint]);
+  }, [breakpoint]);
   return (
-    <MediaQueryContext.Provider value={{ mediaQueryBreakPoint, isMobile }}>
+    <MediaQueryContext.Provider value={{ breakpoint, isMobile }}>
       {children}
     </MediaQueryContext.Provider>
   );
 };
 
 export type useMediaQueryContextType = () => ({
-  mediaQueryBreakPoint: string | boolean;
+  breakpoint: string | boolean;
   isMobile: boolean;
 });
 
diff --git a/src/lib/Sendbird.tsx b/src/lib/Sendbird.tsx
index 7aef29935..6b9183d2d 100644
--- a/src/lib/Sendbird.tsx
+++ b/src/lib/Sendbird.tsx
@@ -117,7 +117,7 @@ const Sendbird = ({
   renderUserProfile = null,
   onUserProfileMessage = null,
 }: SendbirdProviderProps): React.ReactElement => {
-  const mediaQueryBreakPoint = false;
+  const breakpoint = false;
 
   const {
     logLevel = '',
@@ -290,7 +290,7 @@ const Sendbird = ({
         },
       }}
     >
-      <MediaQueryProvider logger={logger} mediaQueryBreakPoint={mediaQueryBreakPoint}>
+      <MediaQueryProvider logger={logger} breakpoint={breakpoint}>
         <LocalizationProvider stringSet={localeStringSet} dateLocale={dateLocale}>
           <VoiceMessageProvider isVoiceMessageEnabled={isVoiceMessageEnabled}>
             {children}
diff --git a/src/modules/App/index.jsx b/src/modules/App/index.jsx
index 5978e74d1..af1f0fc59 100644
--- a/src/modules/App/index.jsx
+++ b/src/modules/App/index.jsx
@@ -20,7 +20,7 @@ export default function App(props) {
     accessToken,
     customApiHost,
     customWebSocketHost,
-    mediaQueryBreakPoint,
+    breakpoint,
     theme,
     userListQuery,
     nickname,
@@ -55,7 +55,7 @@ export default function App(props) {
       accessToken={accessToken}
       customApiHost={customApiHost}
       customWebSocketHost={customWebSocketHost}
-      mediaQueryBreakPoint={mediaQueryBreakPoint}
+      breakpoint={breakpoint}
       theme={theme}
       nickname={nickname}
       profileUrl={profileUrl}
@@ -103,7 +103,7 @@ App.propTypes = {
   userListQuery: PropTypes.func,
   nickname: PropTypes.string,
   profileUrl: PropTypes.string,
-  mediaQueryBreakPoint: PropTypes.string,
+  breakpoint: PropTypes.string,
   allowProfileEdit: PropTypes.bool,
   disableUserProfile: PropTypes.bool,
   disableMarkAsDelivered: PropTypes.bool,
@@ -154,7 +154,7 @@ App.defaultProps = {
   nickname: '',
   profileUrl: '',
   userListQuery: null,
-  mediaQueryBreakPoint: null,
+  breakpoint: null,
   dateLocale: null,
   allowProfileEdit: false,
   onProfileEditSuccess: null,