add / remove moderator modals refactored. Need to remove old whisper code and files.

stylesheets/_modal.scss

@@ -1,9 +1,9 @@
 .modal {
-  position: fixed;
+  position: absolute;
   top: 0;
   left: 0;
-  height: 100%;
+  height: 100vh;
-  width: 100%;
+  width: 100vw;
   background-color: rgba(0, 0, 0, 0.3);
   padding: 0 20px;
   z-index: 100;

ts/components/conversation/ModeratorsAddDialog.tsx

@@ -9,6 +9,7 @@ import { Flex } from '../basic/Flex';
 import { ConversationModel } from '../../models/conversation';
 import { ApiV2 } from '../../opengroup/opengroupV2';
 import { processDecrypted } from '../../receiver/dataMessage';
+import { SessionWrapperModal } from '../session/SessionWrapperModal';
 interface Props {
   convo: ConversationModel;
   onClose: any;
@@ -146,12 +147,14 @@ export const AddModeratorsDialog = (props: any) => {
   let channelAPI: any;
 
   useEffect(() => {
-    async function getPublicSendData {
+    async function getPublicSendData () {
       if (props.convo.isOpenGroupV1()) {
         channelAPI = await convo.getPublicSendData();
       }
       setFirstLoading(false);
     }
+
+    getPublicSendData();
   }, [])
 
 
@@ -160,7 +163,7 @@ export const AddModeratorsDialog = (props: any) => {
     // if we don't have valid data entered by the user
     const pubkey = PubKey.from(inputBoxValue);
     if (!pubkey) {
-      window.log.info('invalid pubkey for adding as moderator:', this.state.inputBoxValue);
+      window.log.info('invalid pubkey for adding as moderator:', inputBoxValue);
       ToastUtils.pushInvalidPubKey();
       return;
     }
@@ -211,7 +214,7 @@ export const AddModeratorsDialog = (props: any) => {
 
 
   return (
-    <SessionModal title={title} onClose={() => onClose()} theme={theme}>
+    <SessionWrapperModal showExitIcon={true} title={title} onClose={() => onClose()} theme={theme}>
       <Flex container={true} flexDirection="column" alignItems="center">
         {renderContent && (
           <>
@@ -236,7 +239,7 @@ export const AddModeratorsDialog = (props: any) => {
         )}
         <SessionSpinner loading={addingInProgress || firstLoading} />
       </Flex>
-    </SessionModal>
+    </SessionWrapperModal>
   );
 
 }

ts/components/conversation/ModeratorsRemoveDialog.tsx

@@ -11,6 +11,7 @@ import { ContactType, SessionMemberListItem } from '../session/SessionMemberList
 import { SessionModal } from '../session/SessionModal';
 import { SessionSpinner } from '../session/SessionSpinner';
 import _ from 'lodash';
+import { SessionWrapperModal } from '../session/SessionWrapperModal';
 interface Props {
   convo: ConversationModel;
   onClose: any;
@@ -60,7 +61,7 @@ export class RemoveModeratorsDialog extends React.Component<Props, State> {
     const renderContent = !firstLoading;
 
     return (
-      <SessionModal title={title} onClose={this.closeDialog} theme={this.props.theme}>
+      <SessionWrapperModal title={title} onClose={this.closeDialog} theme={this.props.theme}>
         <Flex container={true} flexDirection="column" alignItems="center">
           {renderContent && (
             <>
@@ -91,7 +92,7 @@ export class RemoveModeratorsDialog extends React.Component<Props, State> {
 
           <SessionSpinner loading={firstLoading} />
         </Flex>
-      </SessionModal>
+      </SessionWrapperModal>
     );
   }
 

ts/components/session/ActionsPanel.tsx

@@ -33,12 +33,9 @@ import { OpenGroupManagerV2 } from '../../opengroup/opengroupV2/OpenGroupManager
 import { loadDefaultRooms } from '../../opengroup/opengroupV2/ApiUtil';
 import { forceRefreshRandomSnodePool } from '../../session/snode_api/snodePool';
 import { SwarmPolling } from '../../session/snode_api/swarmPolling';
-import _, { divide } from 'lodash';
 import { ActionPanelOnionStatusLight, OnionPathModal } from '../OnionStatusDialog';
 import { EditProfileDialog } from '../EditProfileDialog';
 import { StateType } from '../../state/reducer';
-import { updateConfirmModal } from "../../state/ducks/modalDialog";
-import { useInView } from 'react-intersection-observer';
 import { SessionConfirm } from './SessionConfirm';
 
 // tslint:disable-next-line: no-import-side-effect no-submodule-imports

ts/components/session/conversation/SessionConversation.tsx

@@ -34,6 +34,8 @@ import { getDecryptedMediaUrl } from '../../../session/crypto/DecryptedAttachmen
 import { deleteOpenGroupMessages } from '../../../interactions/conversation';
 import { ConversationTypeEnum } from '../../../models/conversation';
 import { SessionButtonColor } from '../SessionButton';
+import { AddModeratorsDialog } from '../../conversation/ModeratorsAddDialog';
+import { RemoveModeratorsDialog } from '../../conversation/ModeratorsRemoveDialog';
 
 
 
@@ -68,6 +70,8 @@ interface State {
 
   // lightbox options
   lightBoxOptions?: any;
+
+  modal: JSX.Element | null;
 }
 
 interface Props {
@@ -102,6 +106,7 @@ export class SessionConversation extends React.Component<Props, State> {
       showOptionsPane: false,
       stagedAttachments: [],
       isDraggingFile: false,
+      modal: null
     };
     this.compositionBoxRef = React.createRef();
     this.messageContainerRef = React.createRef();
@@ -291,6 +296,7 @@ export class SessionConversation extends React.Component<Props, State> {
           />
         </div>
 
+        { this.state.modal ? this.state.modal : null}
         <div className={classNames('conversation-item__options-pane', showOptionsPane && 'show')}>
           <SessionRightPanelWithDetails {...this.getRightPanelProps()} />
         </div>
@@ -514,11 +520,29 @@ export class SessionConversation extends React.Component<Props, State> {
         window.Whisper.events.trigger('leaveClosedGroup', conversation);
       },
       onAddModerators: () => {
-        window.Whisper.events.trigger('addModerators', conversation);
+        // window.Whisper.events.trigger('addModerators', conversation);
+        this.setState({
+          ...this.state,
+          modal: (
+            <AddModeratorsDialog
+              convo={conversation}
+              onClose={() => this.setState({ ...this.state, modal: null })}
+              theme={this.props.theme}
+            ></AddModeratorsDialog>)
+        })
       },
 
       onRemoveModerators: () => {
-        window.Whisper.events.trigger('removeModerators', conversation);
+        // window.Whisper.events.trigger('removeModerators', conversation);
+        this.setState({
+          ...this.state,
+          modal: (
+            <RemoveModeratorsDialog
+              convo={conversation}
+              onClose={() => this.setState({ ...this.state, modal: null })}
+              theme={this.props.theme}
+            ></RemoveModeratorsDialog>)
+        })
       },
       onShowLightBox: (lightBoxOptions = {}) => {
         this.setState({ lightBoxOptions });

ts/components/session/conversation/SessionRightPanel.tsx

@@ -235,10 +235,10 @@ class SessionRightPanel extends React.Component<Props, State> {
     const leaveGroupString = isPublic
       ? window.i18n('leaveGroup')
       : isKickedFromGroup
-      ? window.i18n('youGotKickedFromGroup')
+        ? window.i18n('youGotKickedFromGroup')
-      : left
+        : left
-      ? window.i18n('youLeftTheGroup')
+          ? window.i18n('youLeftTheGroup')
-      : window.i18n('leaveGroup');
+          : window.i18n('leaveGroup');
 
     const disappearingMessagesOptions = timerOptions.map(option => {
       return {