Progress

2020-04-06 21:53:23 -04:00
parent e485e2f955
commit b5e3c2a94f
58 changed files with 482 additions and 229 deletions
--- a/app/javascript/gabsocial/components/modal/block_account_modal.js
+++ b/app/javascript/gabsocial/components/modal/block_account_modal.js
@@ -33,6 +33,7 @@ class BlockAccountModal extends PureComponent {
  static propTypes = {
    account: PropTypes.object.isRequired,
    onConfirm: PropTypes.func.isRequired,
+    onClose: PropTypes.func.isRequired,
    intl: PropTypes.object.isRequired,
  }

@@ -41,7 +42,7 @@ class BlockAccountModal extends PureComponent {
  }

  render() {
-    const { account, intl } = this.props
+    const { account, intl, onClose } = this.props

    const title = intl.formatMessage(messages.title, {
      name: !!account ? account.get('acct') : '',
@@ -56,6 +57,7 @@ class BlockAccountModal extends PureComponent {
        message={message}
        confirm={intl.formatMessage(messages.block)}
        onConfirm={this.handleClick}
+        onClose={onClose}
      />
    )
  }
--- a/app/javascript/gabsocial/components/modal/community_timeline_settings_modal.js
+++ b/app/javascript/gabsocial/components/modal/community_timeline_settings_modal.js
@@ -1,7 +1,6 @@
 import { defineMessages, injectIntl } from 'react-intl'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'
-import { closeModal } from '../../actions/modal'
 import { changeSetting, saveSettings } from '../../actions/settings'
 import ModalLayout from './modal_layout'
 import Button from '../button'
@@ -19,14 +18,14 @@ const mapStateToProps = state => ({
  settings: state.getIn(['settings', 'community']),
 })

-const mapDispatchToProps = dispatch => {
+const mapDispatchToProps = (dispatch, { onClose }) => {
  return {
    onChange(key, checked) {
      dispatch(changeSetting(['community', ...key], checked))
    },
    onSave() {
      dispatch(saveSettings())
-      dispatch(closeModal())
+      onClose()
    },
  }
 }
@@ -48,7 +47,7 @@ class CommunityTimelineSettingsModal extends ImmutablePureComponent {
  }

  render() {
-    const { intl, settings, onChange } = this.props
+    const { intl, settings, onChange, onClose } = this.props

    return (
      <ModalLayout
--- a/app/javascript/gabsocial/components/modal/embed_modal.js
+++ b/app/javascript/gabsocial/components/modal/embed_modal.js
@@ -60,11 +60,14 @@ class EmbedModal extends ImmutablePureComponent {
  }

  render() {
-    const { intl } = this.props
+    const { intl, onClose } = this.props
    const { oembed } = this.state

    return (
-      <ModalLayout title={intl.formatMessage(messages.embed)}>
+      <ModalLayout
+        title={intl.formatMessage(messages.embed)}
+        onClose={onClose}
+      >
        <div className={_s.default}>
          <Text className={_s.my10}>
            {intl.formatMessage(messages.instructions)}
--- a/app/javascript/gabsocial/components/modal/gif_picker_modal.js
+++ b/app/javascript/gabsocial/components/modal/gif_picker_modal.js
@@ -6,7 +6,6 @@ import {
  setSelectedGif,
  changeGifSearchText
 } from '../../actions/tenor'
-import { closeModal } from '../../actions/modal'
 import Block from '../block'
 import Button from '../button'
 import ColumnIndicator from '../column_indicator'
@@ -29,12 +28,12 @@ const mapStateToProps = (state) => ({
  searchText: state.getIn(['tenor', 'searchText']),
 })

-export const mapDispatchToProps = (dispatch) => ({
+export const mapDispatchToProps = (dispatch, { onClose }) => ({

  handleCloseModal() {
    dispatch(changeGifSearchText(''))
    dispatch(clearGifResults())
-    dispatch(closeModal())
+    onClose()
  },

  handleFetchCategories: () => {
--- a/app/javascript/gabsocial/components/modal/group_create_modal.js
+++ b/app/javascript/gabsocial/components/modal/group_create_modal.js
@@ -13,15 +13,17 @@ class GroupCreateModal extends ImmutablePureComponent {

  static propTypes = {
    intl: PropTypes.object.isRequired,
+    onClose: PropTypes.func.isRequired,
  }

  render() {
-    const { intl } = this.props
+    const { intl, onClose } = this.props

    return (
      <ModalLayout
        title={intl.formatMessage(messages.title)}
        width='440'
+        onClose={onClose}
      >
        <GroupCreate />
      </ModalLayout>
--- a/app/javascript/gabsocial/components/modal/group_delete_modal.js
+++ b/app/javascript/gabsocial/components/modal/group_delete_modal.js
@@ -25,6 +25,7 @@ class GroupDeleteModal extends PureComponent {
  static propTypes = {
    group: PropTypes.object.isRequired,
    onConfirm: PropTypes.func.isRequired,
+    onClose: PropTypes.func.isRequired,
    intl: PropTypes.object.isRequired,
  }

@@ -33,7 +34,7 @@ class GroupDeleteModal extends PureComponent {
  }

  render() {
-    const { group, intl } = this.props
+    const { group, intl, onClose } = this.props

    const title = intl.formatMessage(messages.title, {
      group: !!group ? account.get('title') : '',
@@ -48,6 +49,7 @@ class GroupDeleteModal extends PureComponent {
        message={message}
        confirm={intl.formatMessage(messages.delete)}
        onConfirm={this.handleClick}
+        onClose={onClose}
      />
    )
  }
--- a/app/javascript/gabsocial/components/modal/hashtag_timeline_settings_modal.js
+++ b/app/javascript/gabsocial/components/modal/hashtag_timeline_settings_modal.js
@@ -1,7 +1,6 @@
 import { defineMessages, injectIntl } from 'react-intl'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'
-import { closeModal } from '../../actions/modal'
 import { changeSetting, saveSettings } from '../../actions/settings'
 import ModalLayout from './modal_layout'
 import Button from '../button'
@@ -19,14 +18,14 @@ const mapStateToProps = state => ({
  settings: state.getIn(['settings', 'community']),
 })

-const mapDispatchToProps = dispatch => {
+const mapDispatchToProps = (dispatch, { onClose }) => {
  return {
    onChange(key, checked) {
      dispatch(changeSetting(['community', ...key], checked))
    },
    onSave() {
      dispatch(saveSettings())
-      dispatch(closeModal())
+      onClose()
    },
  }
 }
@@ -41,6 +40,7 @@ class HashtagTimelineSettingsModal extends ImmutablePureComponent {
    settings: ImmutablePropTypes.map.isRequired,
    onChange: PropTypes.func.isRequired,
    onSave: PropTypes.func.isRequired,
+    onClose: PropTypes.func.isRequired,
  }

  handleSaveAndClose = () => {
@@ -48,7 +48,7 @@ class HashtagTimelineSettingsModal extends ImmutablePureComponent {
  }

  render() {
-    const { intl, settings, onChange } = this.props
+    const { intl, settings, onChange, onClose } = this.props

    // : todo :

@@ -56,8 +56,9 @@ class HashtagTimelineSettingsModal extends ImmutablePureComponent {
      <ModalLayout
        width='320'
        title={intl.formatMessage(messages.title)}
+        onClose={onClose}
      >
-      
+
        <div className={[_s.default, _s.pb10].join(' ')}>
          <SettingSwitch
            prefix='community_timeline'
--- a/app/javascript/gabsocial/components/modal/home_timeline_settings_modal.js
+++ b/app/javascript/gabsocial/components/modal/home_timeline_settings_modal.js
@@ -1,7 +1,6 @@
 import { defineMessages, injectIntl } from 'react-intl'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'
-import { closeModal } from '../../actions/modal'
 import { changeSetting, saveSettings } from '../../actions/settings'
 import ModalLayout from './modal_layout'
 import Button from '../button'
@@ -22,14 +21,14 @@ const mapStateToProps = state => ({
  settings: state.getIn(['settings', 'home']),
 })

-const mapDispatchToProps = dispatch => {
+const mapDispatchToProps = (dispatch, {onClose}) => {
  return {
    onChange(key, checked) {
      dispatch(changeSetting(['home', ...key], checked))
    },
    onSave() {
      dispatch(saveSettings())
-      dispatch(closeModal())
+      onClose()
    },
  }
 }
@@ -43,6 +42,7 @@ class HomeTimelineSettingsModal extends ImmutablePureComponent {
    intl: PropTypes.object.isRequired,
    settings: ImmutablePropTypes.map.isRequired,
    onChange: PropTypes.func.isRequired,
+    onClose: PropTypes.func.isRequired,
    onSave: PropTypes.func.isRequired,
  }

@@ -51,12 +51,13 @@ class HomeTimelineSettingsModal extends ImmutablePureComponent {
  }

  render() {
-    const { intl, settings, onChange } = this.props
+    const { intl, settings, onChange, onClose } = this.props

    return (
      <ModalLayout
        width='320'
        title={intl.formatMessage(messages.title)}
+        onClose={onClose}
      >
      
        <div className={[_s.default, _s.pb10].join(' ')}>
--- a/app/javascript/gabsocial/components/modal/hotkeys_modal.js
+++ b/app/javascript/gabsocial/components/modal/hotkeys_modal.js
@@ -42,13 +42,17 @@ class HotkeysModal extends ImmutablePureComponent {

  static propTypes = {
    intl: PropTypes.object.isRequired,
+    onClose: PropTypes.func.isRequired,
  }

  render() {
-    const { intl } = this.props
+    const { intl, onClose } = this.props

    return (
-      <ModalLayout title={intl.formatMessage(messages.heading)}>
+      <ModalLayout
+        title={intl.formatMessage(messages.heading)}
+        onClose={onClose}
+      >
        <div className={[_s.default, _s.flexRow].join(' ')}>
          <table>
            <thead>
--- a/app/javascript/gabsocial/components/modal/list_create_modal.js
+++ b/app/javascript/gabsocial/components/modal/list_create_modal.js
@@ -13,15 +13,17 @@ class ListCreateModal extends ImmutablePureComponent {

  static propTypes = {
    intl: PropTypes.object.isRequired,
+    onClose: PropTypes.func.isRequired,
  }

  render() {
-    const { intl } = this.props
+    const { intl, onClose } = this.props

    return (
      <ModalLayout
        title={intl.formatMessage(messages.title)}
        width='500'
+        onClose={onClose}
      >
        <ListCreate />
      </ModalLayout>
--- a/app/javascript/gabsocial/components/modal/list_delete_modal.js
+++ b/app/javascript/gabsocial/components/modal/list_delete_modal.js
@@ -33,7 +33,7 @@ class ListDeleteModal extends PureComponent {
  }

  render() {
-    const { list, intl } = this.props
+    const { list, intl, onClose } = this.props

    const title = intl.formatMessage(messages.title, {
      list: !!list ? account.get('title') : '',
@@ -48,6 +48,7 @@ class ListDeleteModal extends PureComponent {
        message={message}
        confirm={intl.formatMessage(messages.delete)}
        onConfirm={this.handleClick}
+        onClose={onClose}
      />
    )
  }
--- a/app/javascript/gabsocial/components/modal/list_timeline_settings_modal.js
+++ b/app/javascript/gabsocial/components/modal/list_timeline_settings_modal.js
@@ -1,7 +1,6 @@
 import { defineMessages, injectIntl } from 'react-intl'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'
-import { closeModal } from '../../actions/modal'
 import { changeSetting, saveSettings } from '../../actions/settings'
 import ModalLayout from './modal_layout'
 import Button from '../button'
@@ -22,14 +21,14 @@ const mapStateToProps = state => ({
  settings: state.getIn(['settings', 'list']),
 })

-const mapDispatchToProps = dispatch => {
+const mapDispatchToProps = (dispatch, { onClose }) => {
  return {
    onChange(key, checked) {
      dispatch(changeSetting(['list', ...key], checked))
    },
    onSave() {
      dispatch(saveSettings())
-      dispatch(closeModal())
+      onClose()
    },
  }
 }
@@ -43,6 +42,7 @@ class ListTimelineSettingsModal extends ImmutablePureComponent {
    intl: PropTypes.object.isRequired,
    settings: ImmutablePropTypes.map.isRequired,
    onChange: PropTypes.func.isRequired,
+    onClose: PropTypes.func.isRequired,
    onSave: PropTypes.func.isRequired,
  }

@@ -51,12 +51,13 @@ class ListTimelineSettingsModal extends ImmutablePureComponent {
  }

  render() {
-    const { intl, settings, onChange } = this.props
+    const { intl, settings, onChange, onClose } = this.props

    return (
      <ModalLayout
        width='320'
        title={intl.formatMessage(messages.title)}
+        onClose={onClose}
      >
      
        <div className={[_s.default, _s.pb10].join(' ')}>
--- a/app/javascript/gabsocial/components/modal/modal_base.js
+++ b/app/javascript/gabsocial/components/modal/modal_base.js
@@ -54,9 +54,11 @@ class ModalBase extends PureComponent {
    }
  }

-  handleOnClose = () => {
+  handleOnClose = (e) => {
    const { onOpenModal, composeText, composeId, onClose, intl, type, onCancelReplyCompose } = this.props

+    if (this.dialog !== e.target) return
+
    if (!composeId && composeText && type == 'COMPOSE') {
      onOpenModal('CONFIRM', {
        message: intl.formatMessage(messages.delete),
@@ -108,8 +110,12 @@ class ModalBase extends PureComponent {
    return Array(...this.node.parentElement.childNodes).filter(node => node !== this.node)
  }

-  setRef = ref => {
-    this.node = ref
+  setRef = (n) => {
+    this.node = n
+  }
+
+  setDialog = (n) => {
+    this.dialog = n
  }

  render () {
@@ -133,10 +139,11 @@ class ModalBase extends PureComponent {
            <div
              role='presentation'
              className={[_s.default, _s.backgroundColorOpaque, _s.positionFixed, _s.z3, _s.top0, _s.right0, _s.bottom0, _s.left0].join(' ')}
-              onClick={this.handleOnClose}
            />
            <div
+              ref={this.setDialog}
              role='dialog'
+              onClick={this.handleOnClose}
              className={[_s.default, _s.positionFixed, _s.alignItemsCenter, _s.justifyContentCenter, _s.z4, _s.width100PC, _s.height100PC, _s.top0, _s.rightAuto, _s.bottomAuto, _s.left0].join(' ')}
            >
              {children}
--- a/app/javascript/gabsocial/components/modal/modal_layout.js
+++ b/app/javascript/gabsocial/components/modal/modal_layout.js
@@ -1,6 +1,5 @@
 import { defineMessages, injectIntl } from 'react-intl'
 import classNames from 'classnames/bind'
-import { closeModal } from '../../actions/modal'
 import Button from '../button'
 import Block from '../block'
 import Heading from '../heading'
@@ -11,16 +10,7 @@ const messages = defineMessages({
  close: { id: 'lightbox.close', defaultMessage: 'Close' },
 })

-const mapDispatchToProps = dispatch => {
-  return {
-    handleCloseModal() {
-      dispatch(closeModal())
-    },
-  }
-}
-
 export default
-@connect(null, mapDispatchToProps)
@injectIntl
 class ModalLayout extends PureComponent {
  static propTypes = {
@@ -38,11 +28,7 @@ class ModalLayout extends PureComponent {
  }

  onHandleCloseModal = () => {
-    if (this.props.onClose) {
-      this.props.onClose();
-    } else {
-      this.props.handleCloseModal()
-    }
+    this.props.onClose()
  }

  render() {
--- a/app/javascript/gabsocial/components/modal/modal_root.js
+++ b/app/javascript/gabsocial/components/modal/modal_root.js
@@ -114,8 +114,7 @@ class ModalRoot extends PureComponent {
  }

  onClickClose = () => {
-    const { onClose, type } = this.props
-    onClose(type)
+    this.props.onClose(this.props.type)
  }

  render() {
--- a/app/javascript/gabsocial/components/modal/mute_modal.js
+++ b/app/javascript/gabsocial/components/modal/mute_modal.js
@@ -34,6 +34,7 @@ class MuteModal extends PureComponent {
    account: PropTypes.object.isRequired,
    onConfirm: PropTypes.func.isRequired,
    intl: PropTypes.object.isRequired,
+    onClose: PropTypes.func.isRequired,
  }

  handleClick = () => {
@@ -41,7 +42,7 @@ class MuteModal extends PureComponent {
  }

  render() {
-    const { account, intl } = this.props
+    const { account, intl, onClose } = this.props

    const title = intl.formatMessage(messages.title, {
      name: !!account ? account.get('acct') : '',
@@ -56,6 +57,7 @@ class MuteModal extends PureComponent {
        message={message}
        confirm={intl.formatMessage(messages.mute)}
        onConfirm={this.handleClick}
+        onClose={onClose}
      />
    )
  }
--- a/app/javascript/gabsocial/components/modal/pro_upgrade_modal.js
+++ b/app/javascript/gabsocial/components/modal/pro_upgrade_modal.js
@@ -16,13 +16,18 @@ class ProUpgradeModal extends ImmutablePureComponent {

  static propTypes = {
    intl: PropTypes.object.isRequired,
+    onClose: PropTypes.func.isRequired,
  }

  render() {
-    const { intl } = this.props
+    const { intl, onClose } = this.props

    return (
-      <ModalLayout title={intl.formatMessage(messages.title)} width='460'>
+      <ModalLayout
+        title={intl.formatMessage(messages.title)}
+        width='460'
+        onClose={onClose}
+      >
        <Text>
          {intl.formatMessage(messages.text)}
        </Text>
--- a/app/javascript/gabsocial/components/modal/report_modal.js
+++ b/app/javascript/gabsocial/components/modal/report_modal.js
@@ -20,13 +20,13 @@ const messages = defineMessages({
  forwardHint: { id: 'report.forward_hint', defaultMessage: 'The account is from another server. Send an anonymized copy of the report there as well?' },
  forward: { id: 'report.forward', defaultMessage: 'Forward to {target}' },
  target: { id: 'report.target', defaultMessage: 'Report {target}' },
-});
+})

 const makeMapStateToProps = () => {
-  const getAccount = makeGetAccount();
+  const getAccount = makeGetAccount()

  const mapStateToProps = state => {
-    const accountId = state.getIn(['reports', 'new', 'account_id']);
+    const accountId = state.getIn(['reports', 'new', 'account_id'])

    return {
      isSubmitting: state.getIn(['reports', 'new', 'isSubmitting']),
@@ -34,11 +34,11 @@ const makeMapStateToProps = () => {
      comment: state.getIn(['reports', 'new', 'comment']),
      forward: state.getIn(['reports', 'new', 'forward']),
      statusIds: OrderedSet(state.getIn(['timelines', `account:${accountId}:with_replies`, 'items'])).union(state.getIn(['reports', 'new', 'status_ids'])),
-    };
-  };
+    }
+  }

-  return mapStateToProps;
-};
+  return mapStateToProps
+}

 export default
@connect(makeMapStateToProps)
@@ -53,33 +53,34 @@ class ReportModal extends ImmutablePureComponent {
    forward: PropTypes.bool,
    dispatch: PropTypes.func.isRequired,
    intl: PropTypes.object.isRequired,
-  };
+    onClose: PropTypes.func.isRequired,
+  }

  handleCommentChange = e => {
-    this.props.dispatch(changeReportComment(e.target.value));
+    this.props.dispatch(changeReportComment(e.target.value))
  }

  handleForwardChange = e => {
-    this.props.dispatch(changeReportForward(e.target.checked));
+    this.props.dispatch(changeReportForward(e.target.checked))
  }

  handleSubmit = () => {
-    this.props.dispatch(submitReport());
+    this.props.dispatch(submitReport())
  }

  handleKeyDown = e => {
    if (e.keyCode === 13 && (e.ctrlKey || e.metaKey)) {
-      this.handleSubmit();
+      this.handleSubmit()
    }
  }

  componentDidMount () {
-    this.props.dispatch(expandAccountTimeline(this.props.account.get('id'), { withReplies: true }));
+    this.props.dispatch(expandAccountTimeline(this.props.account.get('id'), { withReplies: true }))
  }

  componentWillReceiveProps (nextProps) {
    if (this.props.account !== nextProps.account && nextProps.account) {
-      this.props.dispatch(expandAccountTimeline(nextProps.account.get('id'), { withReplies: true }));
+      this.props.dispatch(expandAccountTimeline(nextProps.account.get('id'), { withReplies: true }))
    }
  }

@@ -96,7 +97,7 @@ class ReportModal extends ImmutablePureComponent {

    if (!account) return null

-    const domain = account.get('acct').split('@')[1];
+    const domain = account.get('acct').split('@')[1]

    return (
      <ModalLayout
@@ -104,6 +105,7 @@ class ReportModal extends ImmutablePureComponent {
        title={intl.formatMessage(messages.target, {
          target: account.get('acct')
        })}
+        onClose={onClose}
      >

        <div className={[_s.default, _s.flexRow].join(' ')}>
@@ -168,7 +170,7 @@ class ReportModal extends ImmutablePureComponent {
          </div>
        </div>
      </ModalLayout>
-    );
+    )
  }

 }
--- a/app/javascript/gabsocial/components/modal/status_revisions_modal.js
+++ b/app/javascript/gabsocial/components/modal/status_revisions_modal.js
@@ -39,6 +39,7 @@ class StatusRevisionsModal extends ImmutablePureComponent {
    loading: PropTypes.bool.isRequired,
    error: PropTypes.bool,
    revisions: ImmutablePropTypes.list.isRequired,
+    onClose: PropTypes.func.isRequired,
  }

  componentDidMount() {
@@ -49,14 +50,16 @@ class StatusRevisionsModal extends ImmutablePureComponent {
    const {
      intl,
      status,
-      revisions
+      revisions,
+      onClose
    } = this.props

-    console.log("revisions:", revisions)
-    console.log("revisions.size:", revisions.size)
-
    return (
-      <ModalLayout title={intl.formatMessage(messages.title)} width='480'>
+      <ModalLayout
+        title={intl.formatMessage(messages.title)}
+        width='480'
+        onClose={onClose}
+      >
        <div className={[_s.default]}>
          <ScrollableList>
            {
--- a/app/javascript/gabsocial/components/modal/unauthorized_modal.js
+++ b/app/javascript/gabsocial/components/modal/unauthorized_modal.js
@@ -19,13 +19,17 @@ class UnauthorizedModal extends ImmutablePureComponent {

  static propTypes = {
    intl: PropTypes.object.isRequired,
+    onClose: PropTypes.func.isRequired,
  }

  render() {
    const { intl } = this.props

    return (
-      <ModalLayout title={intl.formatMessage(messages.signup)}>
+      <ModalLayout
+        title={intl.formatMessage(messages.signup)}
+        onClose={onClose}
+      >
        <div className={[_s.default, _s.px10, _s.py10].join(' ')}>
          <Text className={_s.mb15}>
            {intl.formatMessage(messages.text)}
--- a/app/javascript/gabsocial/components/modal/unfollow_modal.js
+++ b/app/javascript/gabsocial/components/modal/unfollow_modal.js
@@ -31,6 +31,7 @@ class UnfollowModal extends PureComponent {
    isSubmitting: PropTypes.bool.isRequired,
    account: PropTypes.object.isRequired,
    onConfirm: PropTypes.func.isRequired,
+    onClose: PropTypes.func.isRequired,
    intl: PropTypes.object.isRequired,
  }

@@ -61,6 +62,7 @@ class UnfollowModal extends PureComponent {
        title={`Mute @${account.get('acct')}`}
        message={<FormattedMessage id='confirmations.mute.message' defaultMessage='Are you sure you want to mute @{name}?' values={{ name: account.get('acct') }} />}
        confirm={<FormattedMessage id='mute' defaultMessage='Mute' />}
+        onClose={onClose}
        onConfirm={() => {
          // dispatch(blockDomain(domain))
          // dispatch(blockDomain(domain))