add loading for leaving opengroup dialog

ts/components/session/SessionConfirm.tsx

@@ -17,7 +17,7 @@ export interface SessionConfirmDialogProps {
   title?: string;
   onOk?: any;
   onClose?: any;
-  onClickOk?: () => any;
+  onClickOk?: () => Promise<void> | void;
   onClickClose?: () => any;
   okText?: string;
   cancelText?: string;

ts/components/session/SessionToggle.tsx

@@ -1,84 +1,63 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import classNames from 'classnames';
 import { updateConfirmModal } from '../../state/ducks/modalDialog';
+import { useDispatch } from 'react-redux';
 
-interface Props {
+type Props = {
   active: boolean;
-  onClick: any;
+  onClick: () => void;
   confirmationDialogParams?: any | undefined;
+};
 
-  updateConfirmModal?: any;
+export const SessionToggle = (props: Props) => {
-}
+  const [active, setActive] = useState(false);
 
-interface State {
+  const dispatch = useDispatch();
-  active: boolean;
-}
-
-export class SessionToggle extends React.PureComponent<Props, State> {
-  public static defaultProps = {
-    onClick: () => null,
-  };
-
-  constructor(props: any) {
-    super(props);
-    this.clickHandler = this.clickHandler.bind(this);
 
-    const { active } = this.props;
+  useEffect(() => {
+    setActive(props.active);
+  }, []);
 
-    this.state = {
+  const clickHandler = (event: any) => {
-      active: active,
-    };
-  }
-
-  public render() {
-    return (
-      <div
-        className={classNames('session-toggle', this.state.active ? 'active' : '')}
-        role="button"
-        onClick={this.clickHandler}
-      >
-        <div className="knob" />
-      </div>
-    );
-  }
-
-  private clickHandler(event: any) {
     const stateManager = (e: any) => {
-      this.setState({
+      setActive(!active);
-        active: !this.state.active,
-      });
-
-      if (this.props.onClick) {
       e.stopPropagation();
-        this.props.onClick();
+      props.onClick();
-      }
     };
 
-    if (
+    if (props.confirmationDialogParams && props.confirmationDialogParams.shouldShowConfirm()) {
-      this.props.confirmationDialogParams &&
-      this.props.updateConfirmModal &&
-      this.props.confirmationDialogParams.shouldShowConfirm()
-    ) {
       // If item needs a confirmation dialog to turn ON, render it
       const closeConfirmModal = () => {
-        this.props.updateConfirmModal(null);
+        dispatch(updateConfirmModal(null));
       };
 
-      this.props.updateConfirmModal({
+      dispatch(
+        updateConfirmModal({
           onClickOk: () => {
             stateManager(event);
             closeConfirmModal();
           },
           onClickClose: () => {
-          this.props.updateConfirmModal(null);
+            updateConfirmModal(null);
           },
-        ...this.props.confirmationDialogParams,
+          ...props.confirmationDialogParams,
           updateConfirmModal,
-      });
+        })
+      );
 
       return;
     }
 
     stateManager(event);
-  }
+  };
-}
+
+  return (
+    <div
+      className={classNames('session-toggle', active ? 'active' : '')}
+      role="button"
+      onClick={clickHandler}
+    >
+      <div className="knob" />
+    </div>
+  );
+};

ts/components/session/menu/Menu.tsx

@@ -25,6 +25,7 @@ import {
   showUpdateGroupNameByConvoId,
   unblockConvoById,
 } from '../../../interactions/conversationInteractions';
+import { SessionButtonColor } from '../SessionButton';
 
 function showTimerOptions(
   isPublic: boolean,
@@ -162,9 +163,9 @@ export function getDeleteContactMenuItem(
             ? window.i18n('leaveGroupConfirmation')
             : window.i18n('deleteContactConfirmation'),
           onClickClose,
-          onClickOk: () => {
+          okTheme: SessionButtonColor.Danger,
-            void getConversationController().deleteContact(conversationId);
+          onClickOk: async () => {
-            onClickClose();
+            await getConversationController().deleteContact(conversationId);
           },
         })
       );

ts/components/session/settings/SessionSettingListItem.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import classNames from 'classnames';
 
 import Slider from 'rc-slider';
@@ -9,7 +9,7 @@ import { SessionSettingType } from './SessionSettings';
 import { SessionRadioGroup } from '../SessionRadioGroup';
 import { SessionConfirmDialogProps } from '../SessionConfirm';
 
-interface Props {
+type Props = {
   title?: string;
   description?: string;
   type: SessionSettingType | undefined;
@@ -19,36 +19,23 @@ interface Props {
   onSliderChange?: any;
   content: any;
   confirmationDialogParams?: SessionConfirmDialogProps;
+};
 
-  // for updating modal in redux
+export const SessionSettingListItem = (props: Props) => {
-  updateConfirmModal?: any;
+  const handleSlider = (value: any) => {
-}
+    if (props.onSliderChange) {
-
+      props.onSliderChange(value);
-interface State {
+    }
-  sliderValue: number | null;
-}
 
-export class SessionSettingListItem extends React.Component<Props, State> {
+    setSliderValue(value);
-  public static defaultProps = {
-    inline: true,
   };
 
-  public constructor(props: Props) {
+  const [sliderValue, setSliderValue] = useState(null);
-    super(props);
-    this.state = {
-      sliderValue: null,
-    };
 
-    this.handleClick = this.handleClick.bind(this);
+  const { title, description, type, value, content } = props;
-  }
+  const inline = !!type && ![SessionSettingType.Options, SessionSettingType.Slider].includes(type);
 
-  public render(): JSX.Element {
+  const currentSliderValue = type === SessionSettingType.Slider && (sliderValue || value);
-    const { title, description, type, value, content } = this.props;
-    const inline =
-      !!type && ![SessionSettingType.Options, SessionSettingType.Slider].includes(type);
-
-    const currentSliderValue =
-      type === SessionSettingType.Slider && (this.state.sliderValue || value);
 
   return (
     <div className={classNames('session-settings-item', inline && 'inline')}>
@@ -63,9 +50,8 @@ export class SessionSettingListItem extends React.Component<Props, State> {
           <div className="session-settings-item__selection">
             <SessionToggle
               active={Boolean(value)}
-                onClick={this.handleClick}
+              onClick={() => props.onClick?.()}
-                confirmationDialogParams={this.props.confirmationDialogParams}
+              confirmationDialogParams={props.confirmationDialogParams}
-                updateConfirmModal={this.props.updateConfirmModal}
             />
           </div>
         )}
@@ -74,7 +60,7 @@ export class SessionSettingListItem extends React.Component<Props, State> {
           <SessionButton
             text={content.buttonText}
             buttonColor={content.buttonColor}
-              onClick={this.handleClick}
+            onClick={() => props.onClick?.()}
           />
         )}
 
@@ -84,7 +70,7 @@ export class SessionSettingListItem extends React.Component<Props, State> {
             group={content.options.group}
             items={content.options.items}
             onClick={(selectedRadioValue: string) => {
-                this.props.onClick(selectedRadioValue);
+              props.onClick(selectedRadioValue);
             }}
           />
         )}
@@ -97,9 +83,7 @@ export class SessionSettingListItem extends React.Component<Props, State> {
               min={content.min}
               max={content.max}
               defaultValue={currentSliderValue}
-                onAfterChange={sliderValue => {
+              onAfterChange={handleSlider}
-                  this.handleSlider(sliderValue);
-                }}
             />
 
             <div className="slider-info">
@@ -110,21 +94,4 @@ export class SessionSettingListItem extends React.Component<Props, State> {
       </div>
     </div>
   );
-  }
+};
-
-  private handleClick() {
-    if (this.props.onClick) {
-      this.props.onClick();
-    }
-  }
-
-  private handleSlider(value: any) {
-    if (this.props.onSliderChange) {
-      this.props.onSliderChange(value);
-    }
-
-    this.setState({
-      sliderValue: value,
-    });
-  }
-}

ts/components/session/settings/SessionSettings.tsx

@@ -40,7 +40,6 @@ export interface SettingsViewProps {
   // pass the conversation as props, so our render is called everytime they change.
   // we have to do this to make the list refresh on unblock()
   conversations?: ConversationLookupType;
-  updateConfirmModal?: any;
 }
 
 interface State {
@@ -156,7 +155,6 @@ class SettingsViewInner extends React.Component<SettingsViewProps, State> {
                     onSliderChange={sliderFn}
                     content={content}
                     confirmationDialogParams={setting.confirmationDialogParams}
-                    updateConfirmModal={this.props.updateConfirmModal}
                   />
                 )}
               </div>

ts/interactions/conversationInteractions.ts

@@ -36,6 +36,7 @@ import { getDecryptedMediaUrl } from '../session/crypto/DecryptedAttachmentsMana
 import { IMAGE_JPEG } from '../types/MIME';
 import { FSv2 } from '../fileserver';
 import { fromBase64ToArray, toHex } from '../session/utils/String';
+import { SessionButtonColor } from '../components/session/SessionButton';
 
 export const getCompleteUrlForV2ConvoId = async (convoId: string) => {
   if (convoId.match(openGroupV2ConversationIdRegex)) {
@@ -219,8 +220,8 @@ export function showLeaveGroupByConvoId(conversationId: string) {
       updateConfirmModal({
         title,
         message,
-        onClickOk: () => {
+        onClickOk: async () => {
-          void conversation.leaveClosedGroup();
+          await conversation.leaveClosedGroup();
           onClickClose();
         },
         onClickClose,
@@ -302,8 +303,8 @@ export function deleteMessagesByConvoIdWithConfirmation(conversationId: string)
     window?.inboxStore?.dispatch(updateConfirmModal(null));
   };
 
-  const onClickOk = () => {
+  const onClickOk = async () => {
-    void deleteMessagesByConvoIdNoConfirmation(conversationId);
+    await deleteMessagesByConvoIdNoConfirmation(conversationId);
     onClickClose();
   };
 
@@ -312,6 +313,7 @@ export function deleteMessagesByConvoIdWithConfirmation(conversationId: string)
       title: window.i18n('deleteMessages'),
       message: window.i18n('deleteConversationConfirmation'),
       onClickOk,
+      okTheme: SessionButtonColor.Danger,
       onClickClose,
     })
   );

ts/interactions/messageInteractions.ts

@@ -173,7 +173,9 @@ const acceptOpenGroupInvitationV2 = (completeUrl: string, roomName?: string) =>
     updateConfirmModal({
       title: window.i18n('joinOpenGroupAfterInvitationConfirmationTitle', roomName),
       message: window.i18n('joinOpenGroupAfterInvitationConfirmationDesc', roomName),
-      onClickOk: () => joinOpenGroupV2WithUIEvents(completeUrl, true, false),
+      onClickOk: async () => {
+        await joinOpenGroupV2WithUIEvents(completeUrl, true, false);
+      },
 
       onClickClose,
     })