From 15aa6b5ef969922abee7227f15d19b687d4f92f5 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Mon, 28 Jun 2021 13:31:21 +1000 Subject: [PATCH] add loading for leaving opengroup dialog --- ts/components/session/SessionConfirm.tsx | 2 +- ts/components/session/SessionToggle.tsx | 105 +++++------- ts/components/session/menu/Menu.tsx | 7 +- .../settings/SessionSettingListItem.tsx | 161 +++++++----------- .../session/settings/SessionSettings.tsx | 2 - ts/interactions/conversationInteractions.ts | 10 +- ts/interactions/messageInteractions.ts | 4 +- 7 files changed, 120 insertions(+), 171 deletions(-) diff --git a/ts/components/session/SessionConfirm.tsx b/ts/components/session/SessionConfirm.tsx index 27b40bb93..190c11632 100644 --- a/ts/components/session/SessionConfirm.tsx +++ b/ts/components/session/SessionConfirm.tsx @@ -17,7 +17,7 @@ export interface SessionConfirmDialogProps { title?: string; onOk?: any; onClose?: any; - onClickOk?: () => any; + onClickOk?: () => Promise | void; onClickClose?: () => any; okText?: string; cancelText?: string; diff --git a/ts/components/session/SessionToggle.tsx b/ts/components/session/SessionToggle.tsx index eb7ed2de4..378b18a46 100644 --- a/ts/components/session/SessionToggle.tsx +++ b/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; -} - -export class SessionToggle extends React.PureComponent { - public static defaultProps = { - onClick: () => null, - }; - - constructor(props: any) { - super(props); - this.clickHandler = this.clickHandler.bind(this); - - const { active } = this.props; + const dispatch = useDispatch(); - this.state = { - active: active, - }; - } - - public render() { - return ( -
-
-
- ); - } + useEffect(() => { + setActive(props.active); + }, []); - 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 ( +
+
+
+ ); +}; diff --git a/ts/components/session/menu/Menu.tsx b/ts/components/session/menu/Menu.tsx index 39b741a86..e7c0bc1b5 100644 --- a/ts/components/session/menu/Menu.tsx +++ b/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); }, }) ); diff --git a/ts/components/session/settings/SessionSettingListItem.tsx b/ts/components/session/settings/SessionSettingListItem.tsx index f205fd487..66c18d4fa 100644 --- a/ts/components/session/settings/SessionSettingListItem.tsx +++ b/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; -} - -interface State { - sliderValue: number | null; -} +export const SessionSettingListItem = (props: Props) => { + const handleSlider = (value: any) => { + if (props.onSliderChange) { + props.onSliderChange(value); + } -export class SessionSettingListItem extends React.Component { - public static defaultProps = { - inline: true, + setSliderValue(value); }; - public constructor(props: Props) { - super(props); - this.state = { - sliderValue: null, - }; - - this.handleClick = this.handleClick.bind(this); - } - - public render(): JSX.Element { - const { title, description, type, value, content } = this.props; - const inline = - !!type && ![SessionSettingType.Options, SessionSettingType.Slider].includes(type); + const [sliderValue, setSliderValue] = useState(null); - const currentSliderValue = - type === SessionSettingType.Slider && (this.state.sliderValue || value); + const { title, description, type, value, content } = props; + const inline = !!type && ![SessionSettingType.Options, SessionSettingType.Slider].includes(type); - return ( -
-
-
{title}
+ const currentSliderValue = type === SessionSettingType.Slider && (sliderValue || value); - {description &&
{description}
} -
+ return ( +
+
+
{title}
-
- {type === SessionSettingType.Toggle && ( -
- -
- )} + {description &&
{description}
} +
- {type === SessionSettingType.Button && ( - + {type === SessionSettingType.Toggle && ( +
+ props.onClick?.()} + confirmationDialogParams={props.confirmationDialogParams} /> - )} - - {type === SessionSettingType.Options && ( - { - this.props.onClick(selectedRadioValue); - }} +
+ )} + + {type === SessionSettingType.Button && ( + props.onClick?.()} + /> + )} + + {type === SessionSettingType.Options && ( + { + props.onClick(selectedRadioValue); + }} + /> + )} + + {type === SessionSettingType.Slider && ( +
+ - )} - {type === SessionSettingType.Slider && ( -
- { - this.handleSlider(sliderValue); - }} - /> - -
-

{content.info(currentSliderValue)}

-
+
+

{content.info(currentSliderValue)}

- )} -
+
+ )}
- ); - } - - 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, - }); - } -} +
+ ); +}; diff --git a/ts/components/session/settings/SessionSettings.tsx b/ts/components/session/settings/SessionSettings.tsx index d03453754..abcff8bb7 100644 --- a/ts/components/session/settings/SessionSettings.tsx +++ b/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 { onSliderChange={sliderFn} content={content} confirmationDialogParams={setting.confirmationDialogParams} - updateConfirmModal={this.props.updateConfirmModal} /> )}
diff --git a/ts/interactions/conversationInteractions.ts b/ts/interactions/conversationInteractions.ts index ce9b35e1f..2aa01feef 100644 --- a/ts/interactions/conversationInteractions.ts +++ b/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, }) ); diff --git a/ts/interactions/messageInteractions.ts b/ts/interactions/messageInteractions.ts index 8199e427a..50b6d9268 100644 --- a/ts/interactions/messageInteractions.ts +++ b/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, })