misc: refactor smart note widget

src/components/SideDrawerView/index.tsx

@@ -1,64 +1,34 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React from 'react';
 import { RcDrawer, styled } from '@ringcentral/juno';
-import { SmartNoteApp } from './SmartNoteApp';
 
 const StyledDrawer = styled(RcDrawer)`
-  height: 100%;
-  width: 50%;
-  .RcDrawer-paper {
+  &.MuiDrawer-docked {
+    height: 100%;
     width: 50%;
+    .RcDrawer-paper {
+      width: 50%;
+    }
   }
 `;
 
 export function SideDrawerView({
-  smartNoteClient,
-  smartNoteSession,
-  smartNoteRemoteEntry,
   show,
-  onClose,
-  onAlert,
-  themeType,
-  onSmartNoteSave,
+  children,
+  variant = 'permanent',
 }) {
-  const [session, setSession] = useState(null);
-  const sessionRef = useRef(session);
-  useEffect(() => {
-    if (
-      sessionRef.current &&
-      smartNoteSession &&
-      sessionRef.current.id === smartNoteSession.id
-    ) {
-      // avoid re-render when session is the same
-      return;
-    }
-    sessionRef.current = smartNoteSession;
-    setSession(null);
-    const timeout = setTimeout(() => {
-      setSession(smartNoteSession);
-    }, 50);
-    return () => {
-      clearTimeout(timeout);
-    };
-  }, [smartNoteSession]);
-  if (!show) {
-    return null;
-  }
-  if (!session || !smartNoteClient) {
+
+  if (!show && variant === 'permanent') {
     return null;
   }
+
   return (
     <StyledDrawer
       anchor="right"
-      variant="permanent"
+      variant={variant as "permanent" | "temporary"}
+      open={show}
+      keepMounted
     >
-      <SmartNoteApp
-        client={smartNoteClient}
-        onClose={onClose}
-        onAlert={onAlert}
-        smartNoteRemoteEntry={smartNoteRemoteEntry}
-        themeType={themeType}
-        onSave={onSmartNoteSave}
-      />
+      {children}
     </StyledDrawer>
   );
 }

src/components/SmartNotesPanel/index.tsx

@@ -0,0 +1,53 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { SmartNoteApp } from './SmartNoteApp';
+
+export function SmartNotesPanel({
+  smartNoteClient,
+  smartNoteSession,
+  smartNoteRemoteEntry,
+  onClose,
+  onAlert,
+  themeType,
+  onSave,
+}) {
+  const [session, setSession] = useState(null);
+  const sessionRef = useRef(session);
+
+  useEffect(() => {
+    if (
+      sessionRef.current &&
+      smartNoteSession &&
+      sessionRef.current.id === smartNoteSession.id
+    ) {
+      // avoid re-render when session is the same
+      return;
+    }
+    sessionRef.current = smartNoteSession;
+    setSession(null);
+    const timeout = setTimeout(() => {
+      setSession(smartNoteSession);
+    }, 50);
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [smartNoteSession]);
+
+  useEffect(() => {
+    console.log('SmartNotesPanel mounted');
+  }, []);
+
+  if (!session || !smartNoteClient) {
+    return null;
+  }
+
+  return (
+    <SmartNoteApp
+      client={smartNoteClient}
+      onClose={onClose}
+      onAlert={onAlert}
+      smartNoteRemoteEntry={smartNoteRemoteEntry}
+      themeType={themeType}
+      onSave={onSave}
+    />
+  );
+}

src/containers/App/index.js

@@ -55,6 +55,8 @@ import CustomizedPage from '../CustomizedPage';
 import { NotificationContainer } from '../NotificationContainer';
 import GlipChatPage from '../GlipChatPage';
 import GlipGroupsPage from '../GlipGroupsPage';
+import { SideDrawerContainer } from '../SideDrawerContainer';
+import { SmartNotesPage } from '../SmartNotesPage';
 
 export default function App({
   phone,
@@ -139,6 +141,9 @@ export default function App({
                     callingSettingsUrl="/settings/calling"
                     regionSettingsUrl="/settings/region"
                   />
+                  <SideDrawerContainer>
+                    <SmartNotesPage />
+                  </SideDrawerContainer>
                 </AppView>
               )} >
               <Route

src/containers/AppView/index.js

@@ -9,7 +9,6 @@ import { callingModes } from '@ringcentral-integration/commons/modules/CallingSe
 import { DemoOnlyBanner } from '../../components/DemoOnlyBanner';
 import { InitializeAudioBanner } from '../../components/InitializeAudioBanner';
 import { EnvironmentPanel } from '../../components/EnvironmentPanel';
-import { SideDrawerContainer } from '../SideDrawerContainer';
 
 import './styles.scss';
 
@@ -28,19 +27,21 @@ const MainContent = styled.div`
   flex-direction: column;
   flex: 1;
   height: 100%;
-  max-width: ${({ showSideDrawer }) => showSideDrawer ? '50%' : '100%'};
+  width: 100%;
   position: relative;
 `;
 
 const Content = styled.div`
   flex: 1;
   overflow: hidden;
+  display: flex;
+  flex-direction: row;
 `;
 
 function AppView(props) {
   return (
     <Root>
-      <MainContent showSideDrawer={props.showSideDrawer}>
+      <MainContent>
         <DemoOnlyBanner
           show={props.showDemoWarning}
           onClose={props.dismissDemoWarning}
@@ -65,7 +66,6 @@ function AppView(props) {
           />
         </Content>
       </MainContent>
-      <SideDrawerContainer />
     </Root>
   );
 }

src/containers/SmartNotesPage/index.ts

@@ -0,0 +1,8 @@
+import { connectModule } from '@ringcentral-integration/widgets/lib/phoneContext';
+import { SmartNotesPanel } from '../../components/SmartNotesPanel';
+
+const SmartNotesPage = connectModule(
+  (phone) => phone.smartNotesUI,
+)(SmartNotesPanel);
+
+export { SmartNotesPage };

src/modules/Phone/index.js

@@ -219,6 +219,7 @@ import { CustomizedPageUI } from '../CustomizedPageUI';
 import { SmsTemplates } from '../SmsTemplates';
 import { SmartNotes } from '../SmartNotes';
 import { SideDrawerUI } from '../SideDrawerUI';
+import { SmartNotesUI } from '../SmartNotesUI';
 
 // user Dependency Injection with decorator to create a phone class
 // https://github.com/ringcentral/ringcentral-js-integration-commons/blob/master/docs/dependency-injection.md
@@ -458,6 +459,7 @@ import { SideDrawerUI } from '../SideDrawerUI';
     { provide: 'ThirdPartySettingSectionUI', useClass: ThirdPartySettingSectionUI },
     { provide: 'CustomizedPageUI', useClass: CustomizedPageUI },
     { provide: 'SmartNotes', useClass: SmartNotes },
+    { provide: 'SmartNotesUI', useClass: SmartNotesUI },
   ]
 })
 export default class BasePhone extends RcModule {

src/modules/SideDrawerUI/index.ts

@@ -1,28 +1,28 @@
 import { Module } from '@ringcentral-integration/commons/lib/di';
-import { RcUIModuleV2, action, state, watch } from '@ringcentral-integration/core';
+import { RcUIModuleV2, action, state } from '@ringcentral-integration/core';
 
 @Module({
   name: 'SideDrawerUI',
   deps: [
     'Locale',
-    'SmartNotes',
-    'Alert',
-    'Theme',
   ],
 })
 export class SideDrawerUI extends RcUIModuleV2 {
   constructor(deps) {
     super({
       deps,
     });
+  }
 
-    watch(
-      this,
-      () => this._deps.smartNotes.session,
-      (smartNoteSession) => {
-        this.setShow(!!smartNoteSession);
-      },
-    );
+  onInitOnce() {
+    const handleResize = () => {
+      const newVariant = window.innerWidth > 500 ? 'permanent' : 'temporary';
+      if (this.variant === newVariant) {
+        return;
+      }
+      this.setVariant(newVariant);
+    };
+    window.addEventListener('resize', handleResize);
   }
 
   @state
@@ -33,42 +33,24 @@ export class SideDrawerUI extends RcUIModuleV2 {
     this.show = show;
   }
 
+  @state
+  variant = 'permanent';
+
+  @action
+  setVariant(variant: 'permanent' | 'temporary') {
+    this.variant = variant;
+  }
+
   getUIProps() {
-    const { locale, smartNotes, theme } = this._deps;
+    const { locale } = this._deps;
     return {
       currentLocale: locale.currentLocale,
-      smartNoteSession: smartNotes.session,
       show: this.show,
-      smartNoteClient: smartNotes.smartNoteClient,
-      smartNoteRemoteEntry: smartNotes.smartNoteMFERemoteEntry,
-      themeType: theme.themeType,
+      variant: this.variant,
     };
   }
 
-  onClose = () => {
-    this.setShow(false);
-    this._deps.smartNotes.setSession(null);
-  }
-
-  onAlert = ({ level, message }) => {
-    this._deps.alert.alert({
-      message: 'showCustomAlertMessage',
-      level,
-      payload: {
-        alertMessage: message
-      }
-    });
-  }
-
-  onSmartNoteSave = async (data) => {
-    return this._deps.smartNotes.onSmartNoteSave();
-  }
-
   getUIFunctions() {
-    return {
-      onClose: this.onClose,
-      onAlert: this.onAlert,
-      onSmartNoteSave: this.onSmartNoteSave,
-    };
+    return {};
   }
 }

src/modules/SmartNotesUI/index.ts

@@ -0,0 +1,66 @@
+import { Module } from '@ringcentral-integration/commons/lib/di';
+import { RcUIModuleV2, watch } from '@ringcentral-integration/core';
+
+@Module({
+  name: 'SmartNotesUI',
+  deps: [
+    'SmartNotes',
+    'Alert',
+    'Theme',
+    'SideDrawerUI',
+  ],
+})
+export class SmartNotesUI extends RcUIModuleV2 {
+  constructor(deps) {
+    super({
+      deps,
+    });
+
+    watch(
+      this,
+      () => this._deps.smartNotes.session,
+      (smartNoteSession) => {
+        this._deps.sideDrawerUI.setShow(!!smartNoteSession);
+      },
+    );
+  }
+
+  getUIProps() {
+    const { smartNotes, theme } = this._deps;
+    return {
+      smartNoteSession: smartNotes.session,
+      smartNoteClient: smartNotes.smartNoteClient,
+      smartNoteRemoteEntry: smartNotes.smartNoteMFERemoteEntry,
+      themeType: theme.themeType,
+    };
+  }
+
+  onClose = () => {
+    this._deps.sideDrawerUI.setShow(false);
+    if (this._deps.smartNotes.session.status === 'Disconnected') {
+      this._deps.smartNotes.setSession(null);
+    }
+  }
+
+  onAlert = ({ level, message }) => {
+    this._deps.alert.alert({
+      message: 'showCustomAlertMessage',
+      level,
+      payload: {
+        alertMessage: message
+      }
+    });
+  }
+
+  onSave = async (data) => {
+    return this._deps.smartNotes.onSmartNoteSave();
+  }
+
+  getUIFunctions() {
+    return {
+      onClose: this.onClose,
+      onAlert: this.onAlert,
+      onSave: this.onSave,
+    };
+  }
+}