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 {
-  active: boolean;
-}
+  const dispatch = useDispatch();
 
-export class SessionToggle extends React.PureComponent<Props, State> {
-  public static defaultProps = {
-    onClick: () => null,
-  };
+  useEffect(() => {
+    setActive(props.active);
+  }, []);
 
-  constructor(props: any) {
-    super(props);
-    this.clickHandler = this.clickHandler.bind(this);
-
-    const { active } = this.props;
-
-    this.state = {
-      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 clickHandler = (event: any) => {
     const stateManager = (e: any) => {
-      this.setState({
-        active: !this.state.active,
-      });
-
-      if (this.props.onClick) {
-        e.stopPropagation();
-        this.props.onClick();
-      }
+      setActive(!active);
+      e.stopPropagation();
+      props.onClick();
     };
 
-    if (
-      this.props.confirmationDialogParams &&
-      this.props.updateConfirmModal &&
-      this.props.confirmationDialogParams.shouldShowConfirm()
-    ) {
+    if (props.confirmationDialogParams && 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({
-        onClickOk: () => {
-          stateManager(event);
-          closeConfirmModal();
-        },
-        onClickClose: () => {
-          this.props.updateConfirmModal(null);
-        },
-        ...this.props.confirmationDialogParams,
-        updateConfirmModal,
-      });
+      dispatch(
+        updateConfirmModal({
+          onClickOk: () => {
+            stateManager(event);
+            closeConfirmModal();
+          },
+          onClickClose: () => {
+            updateConfirmModal(null);
+          },
+          ...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: () => {
-            void getConversationController().deleteContact(conversationId);
-            onClickClose();
+          okTheme: SessionButtonColor.Danger,
+          onClickOk: async () => {
+            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,112 +19,79 @@ interface Props {
   onSliderChange?: any;
   content: any;
   confirmationDialogParams?: SessionConfirmDialogProps;
+};
 
-  // for updating modal in redux
-  updateConfirmModal?: any;
-}
+export const SessionSettingListItem = (props: Props) => {
+  const handleSlider = (value: any) => {
+    if (props.onSliderChange) {
+      props.onSliderChange(value);
+    }
 
-interface State {
-  sliderValue: number | null;
-}
-
-export class SessionSettingListItem extends React.Component<Props, State> {
-  public static defaultProps = {
-    inline: true,
+    setSliderValue(value);
   };
 
-  public constructor(props: Props) {
-    super(props);
-    this.state = {
-      sliderValue: null,
-    };
+  const [sliderValue, setSliderValue] = useState(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 { title, description, type, value, content } = this.props;
-    const inline =
-      !!type && ![SessionSettingType.Options, SessionSettingType.Slider].includes(type);
+  const currentSliderValue = type === SessionSettingType.Slider && (sliderValue || value);
 
-    const currentSliderValue =
-      type === SessionSettingType.Slider && (this.state.sliderValue || value);
+  return (
+    <div className={classNames('session-settings-item', inline && 'inline')}>
+      <div className="session-settings-item__info">
+        <div className="session-settings-item__title">{title}</div>
 
-    return (
-      <div className={classNames('session-settings-item', inline && 'inline')}>
-        <div className="session-settings-item__info">
-          <div className="session-settings-item__title">{title}</div>
-
-          {description && <div className="session-settings-item__description">{description}</div>}
-        </div>
-
-        <div className="session-settings-item__content">
-          {type === SessionSettingType.Toggle && (
-            <div className="session-settings-item__selection">
-              <SessionToggle
-                active={Boolean(value)}
-                onClick={this.handleClick}
-                confirmationDialogParams={this.props.confirmationDialogParams}
-                updateConfirmModal={this.props.updateConfirmModal}
-              />
-            </div>
-          )}
-
-          {type === SessionSettingType.Button && (
-            <SessionButton
-              text={content.buttonText}
-              buttonColor={content.buttonColor}
-              onClick={this.handleClick}
-            />
-          )}
-
-          {type === SessionSettingType.Options && (
-            <SessionRadioGroup
-              initialItem={content.options.initalItem}
-              group={content.options.group}
-              items={content.options.items}
-              onClick={(selectedRadioValue: string) => {
-                this.props.onClick(selectedRadioValue);
-              }}
-            />
-          )}
-
-          {type === SessionSettingType.Slider && (
-            <div className="slider-wrapper">
-              <Slider
-                dots={true}
-                step={content.step}
-                min={content.min}
-                max={content.max}
-                defaultValue={currentSliderValue}
-                onAfterChange={sliderValue => {
-                  this.handleSlider(sliderValue);
-                }}
-              />
-
-              <div className="slider-info">
-                <p>{content.info(currentSliderValue)}</p>
-              </div>
-            </div>
-          )}
-        </div>
+        {description && <div className="session-settings-item__description">{description}</div>}
       </div>
-    );
-  }
 
-  private handleClick() {
-    if (this.props.onClick) {
-      this.props.onClick();
-    }
-  }
+      <div className="session-settings-item__content">
+        {type === SessionSettingType.Toggle && (
+          <div className="session-settings-item__selection">
+            <SessionToggle
+              active={Boolean(value)}
+              onClick={() => props.onClick?.()}
+              confirmationDialogParams={props.confirmationDialogParams}
+            />
+          </div>
+        )}
 
-  private handleSlider(value: any) {
-    if (this.props.onSliderChange) {
-      this.props.onSliderChange(value);
-    }
+        {type === SessionSettingType.Button && (
+          <SessionButton
+            text={content.buttonText}
+            buttonColor={content.buttonColor}
+            onClick={() => props.onClick?.()}
+          />
+        )}
 
-    this.setState({
-      sliderValue: value,
-    });
-  }
-}
+        {type === SessionSettingType.Options && (
+          <SessionRadioGroup
+            initialItem={content.options.initalItem}
+            group={content.options.group}
+            items={content.options.items}
+            onClick={(selectedRadioValue: string) => {
+              props.onClick(selectedRadioValue);
+            }}
+          />
+        )}
+
+        {type === SessionSettingType.Slider && (
+          <div className="slider-wrapper">
+            <Slider
+              dots={true}
+              step={content.step}
+              min={content.min}
+              max={content.max}
+              defaultValue={currentSliderValue}
+              onAfterChange={handleSlider}
+            />
+
+            <div className="slider-info">
+              <p>{content.info(currentSliderValue)}</p>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

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: () => {
-          void conversation.leaveClosedGroup();
+        onClickOk: async () => {
+          await conversation.leaveClosedGroup();
           onClickClose();
         },
         onClickClose,
@@ -302,8 +303,8 @@ export function deleteMessagesByConvoIdWithConfirmation(conversationId: string)
     window?.inboxStore?.dispatch(updateConfirmModal(null));
   };
 
-  const onClickOk = () => {
-    void deleteMessagesByConvoIdNoConfirmation(conversationId);
+  const onClickOk = async () => {
+    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,
     })