Progress

app/javascript/gabsocial/components/modal/group_editor_modal.js

@@ -1,68 +0,0 @@
-import { injectIntl, defineMessages } from 'react-intl'
-import { muteAccount } from '../../actions/accounts'
-
-const messages = defineMessages({
-  muteMessage: { id: 'confirmations.mute.message', defaultMessage: 'Are you sure you want to mute {name}?' },
-  cancel: { id: 'confirmation_modal.cancel', defaultMessage: 'Cancel' },
-  confirm: { id: 'confirmations.mute.confirm', defaultMessage: 'Mute' },
-})
-
-const mapStateToProps = (state) => ({
-  isSubmitting: state.getIn(['reports', 'new', 'isSubmitting']),
-  account: state.getIn(['mutes', 'new', 'account']),
-})
-
-const mapDispatchToProps = (dispatch) => ({
-  onConfirm(account, notifications) {
-    dispatch(muteAccount(account.get('id'), notifications))
-  },
-})
-
-export default
-@connect(mapStateToProps, mapDispatchToProps)
-@injectIntl
-class UnfollowModal extends PureComponent {
-
-  static propTypes = {
-    isSubmitting: PropTypes.bool.isRequired,
-    account: PropTypes.object.isRequired,
-    onConfirm: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-  }
-
-  componentDidMount() {
-    this.button.focus()
-  }
-
-  handleClick = () => {
-    this.props.onClose()
-    this.props.onConfirm(this.props.account, this.props.notifications)
-  }
-
-  handleCancel = () => {
-    this.props.onClose()
-  }
-
-  render() {
-    const { account, intl } = this.props
-
-    // , {
-    //   message: <FormattedMessage id='confirmations.unfollow.message' defaultMessage='Are you sure you want to unfollow {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
-    //   confirm: intl.formatMessage(messages.unfollowConfirm),
-    //   onConfirm: () => dispatch(unfollowAccount(account.get('id'))),
-    // }));
-
-    return (
-      <ConfirmationModal
-        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' />}
-        onConfirm={() => {
-          // dispatch(blockDomain(domain))
-          // dispatch(blockDomain(domain))
-        }}
-      />
-    )
-  }
-
-}

app/javascript/gabsocial/components/modal/group_members_modal.js

@@ -1,31 +1,36 @@
 import { defineMessages, injectIntl } from 'react-intl'
-import ImmutablePureComponent from 'react-immutable-pure-component'
 import ModalLayout from './modal_layout'
-import GroupCreate from '../../features/group_create'
+import GroupMembers from '../../features/group_members'
 
 const messages = defineMessages({
-  title: { id: 'create_group', defaultMessage: 'Create group' },
+  title: { id: 'group_members', defaultMessage: 'Group members' },
 })
 
 export default
 @injectIntl
-class GroupMembersModal extends ImmutablePureComponent {
+class GroupMembersModal extends PureComponent {
 
   static propTypes = {
+    groupId: PropTypes.string.isRequired,
     intl: PropTypes.object.isRequired,
     onClose: PropTypes.func.isRequired,
   }
 
   render() {
-    const { intl, onClose } = this.props
+    const {
+      intl,
+      onClose,
+      groupId,
+    } = this.props
 
     return (
       <ModalLayout
         title={intl.formatMessage(messages.title)}
         width={440}
         onClose={onClose}
+        noPadding
       >
-        <GroupCreate onCloseModal={onClose} />
+        <GroupMembers groupId={groupId} onCloseModal={onClose} />
       </ModalLayout>
     )
   }

app/javascript/gabsocial/components/modal/group_removed_accounts_modal.js

@@ -0,0 +1,37 @@
+import { defineMessages, injectIntl } from 'react-intl'
+import ModalLayout from './modal_layout'
+import GroupRemovedAccounts from '../../features/group_removed_accounts'
+
+const messages = defineMessages({
+  title: { id: 'group_removed', defaultMessage: 'Removed accounts' },
+})
+
+export default
+@injectIntl
+class GroupRemovedAccountsModal extends PureComponent {
+
+  static propTypes = {
+    groupId: PropTypes.string.isRequired,
+    intl: PropTypes.object.isRequired,
+    onClose: PropTypes.func.isRequired,
+  }
+
+  render() {
+    const {
+      intl,
+      onClose,
+      groupId,
+    } = this.props
+
+    return (
+      <ModalLayout
+        title={intl.formatMessage(messages.title)}
+        width={440}
+        onClose={onClose}
+        noPadding
+      >
+        <GroupRemovedAccounts groupId={groupId} onCloseModal={onClose} />
+      </ModalLayout>
+    )
+  }
+}

app/javascript/gabsocial/components/modal/modal_base.js

@@ -3,6 +3,9 @@ import { injectIntl, FormattedMessage, defineMessages } from 'react-intl'
 import classNames from 'classnames/bind'
 import { openModal } from '../../actions/modal'
 import { cancelReplyCompose } from '../../actions/compose'
+import { BREAKPOINT_EXTRA_SMALL } from '../../constants'
+import Responsive from '../../features/ui/util/responsive_component'
+import CardView from '../card_view'
 
 const messages = defineMessages({
   confirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
@@ -145,7 +148,14 @@ class ModalBase extends PureComponent {
               onClick={this.handleOnClose}
               className={[_s.default, _s.posFixed, _s.alignItemsCenter, _s.justifyContentCenter, _s.z4, _s.width100PC, _s.height100PC, _s.top0, _s.rightAuto, _s.bottomAuto, _s.left0].join(' ')}
             >
-              {children}
+              <Responsive min={BREAKPOINT_EXTRA_SMALL}>
+                {children}
+              </Responsive>
+              <Responsive max={BREAKPOINT_EXTRA_SMALL}>
+                <CardView>
+                  {children}
+                </CardView>
+              </Responsive>
             </div>
           </Fragment>
         }

app/javascript/gabsocial/components/modal/modal_root.js

@@ -1,3 +1,4 @@
+import { Fragment } from 'react'
 import { closeModal } from '../../actions/modal'
 import { cancelReplyCompose } from '../../actions/compose'
 import Bundle from '../../features/ui/util/bundle'
@@ -17,8 +18,8 @@ import {
   MODAL_GIF_PICKER,
   MODAL_GROUP_CREATE,
   MODAL_GROUP_DELETE,
-  MODAL_GROUP_EDITOR,
   MODAL_GROUP_MEMBERS,
+  MODAL_GROUP_REMOVED_ACCOUNTS,
   MODAL_HASHTAG_TIMELINE_SETTINGS,
   MODAL_HOME_TIMELINE_SETTINGS,
   MODAL_HOTKEYS,
@@ -51,8 +52,8 @@ import {
   GifPickerModal,
   GroupCreateModal,
   GroupDeleteModal,
-  GroupEditorModal,
   GroupMembersModal,
+  GroupRemovedAccountsModal,
   HashtagTimelineSettingsModal,
   HomeTimelineSettingsModal,
   HotkeysModal,
@@ -86,8 +87,8 @@ MODAL_COMPONENTS[MODAL_EMBED] = EmbedModal
 MODAL_COMPONENTS[MODAL_GIF_PICKER] = GifPickerModal
 MODAL_COMPONENTS[MODAL_GROUP_CREATE] = GroupCreateModal
 MODAL_COMPONENTS[MODAL_GROUP_DELETE] = GroupDeleteModal
-MODAL_COMPONENTS[MODAL_GROUP_EDITOR] = GroupEditorModal
 MODAL_COMPONENTS[MODAL_GROUP_MEMBERS] = GroupMembersModal
+MODAL_COMPONENTS[MODAL_GROUP_REMOVED_ACCOUNTS] = GroupRemovedAccountsModal
 MODAL_COMPONENTS[MODAL_HASHTAG_TIMELINE_SETTINGS] = HashtagTimelineSettingsModal
 MODAL_COMPONENTS[MODAL_HOME_TIMELINE_SETTINGS] = HomeTimelineSettingsModal
 MODAL_COMPONENTS[MODAL_HOTKEYS] = HotkeysModal
@@ -159,8 +160,6 @@ class ModalRoot extends PureComponent {
     const { type, props } = this.props
     const visible = !!type
 
-    // : todo : init card view if mobile
-
     return (
       <ModalBase onClose={this.onClickClose} type={type}>
         {