Progress

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

@@ -0,0 +1,27 @@
+import { defineMessages, injectIntl } from 'react-intl'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import Button from '../button'
+import Text from '../text'
+import ModalLayout from './modal_layout'
+
+const messages = defineMessages({
+
+})
+
+export default
+@injectIntl
+class EditProfileModal extends ImmutablePureComponent {
+
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+  }
+
+  render() {
+    const { intl } = this.props
+
+    return (
+      <ModalLayout>
+      </ModalLayout>
+    )
+  }
+}

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

@@ -1,20 +1,20 @@
-import classNames from 'classnames';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import ReactSwipeableViews from 'react-swipeable-views';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import Video from '../../features/video';
-import ExtendedVideoPlayer from '../extended_video_player';
-import Button from '../button';
-import ImageLoader from '../image_loader';
-import Icon from '../icon';
+import classNames from 'classnames'
+import { defineMessages, injectIntl } from 'react-intl'
+import ReactSwipeableViews from 'react-swipeable-views'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import Video from '../video'
+import ExtendedVideoPlayer from '../extended_video_player'
+import Button from '../button'
+import ImageLoader from '../image_loader'
+import Icon from '../icon'
 
 const messages = defineMessages({
   close: { id: 'lightbox.close', defaultMessage: 'Close' },
   previous: { id: 'lightbox.previous', defaultMessage: 'Previous' },
   next: { id: 'lightbox.next', defaultMessage: 'Next' },
   viewContext: { id: 'lightbox.view_context', defaultMessage: 'View context' },
-});
+})
 
 export const previewState = 'previewMediaModal';
 

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

@@ -7,7 +7,7 @@ import {
   EmbedModal,
   // ListEditor,
   // ListAdder,
-  StatusRevisionModal,
+  StatusRevisionsModal,
 } from '../../features/ui/util/async_components'
 
 import ModalBase from './modal_base'
@@ -57,10 +57,10 @@ const MODAL_COMPONENTS = {
   LIST_EDITOR: () => Promise.resolve({ default: ListEditorModal }),
   LIST_TIMELINE_SETTINGS: () => Promise.resolve({ default: ListTimelineSettingsModal }),
   MEDIA: () => Promise.resolve({ default: MediaModal }),
-  'MUTE': MuteModal,
+  MUTE: MuteModal,
   PRO_UPGRADE: () => Promise.resolve({ default: ProUpgradeModal }),
   REPORT: ReportModal,
-  STATUS_REVISION: () => Promise.resolve({ default: StatusRevisionModal }),
+  STATUS_REVISIONS: StatusRevisionsModal,
   UNAUTHORIZED: () => Promise.resolve({ default: UnauthorizedModal }),
   UNFOLLOW: () => Promise.resolve({ default: UnfollowModal }),
   VIDEO: () => Promise.resolve({ default: VideoModal }),

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

@@ -1,40 +0,0 @@
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'
-import ImmutablePropTypes from 'react-immutable-proptypes'
-import ImmutablePureComponent from 'react-immutable-pure-component'
-import StatusRevisionListContainer from '../../containers/status_revision_list_container'
-import Button from '../button'
-
-const messages = defineMessages({
-  close: { id: 'lightbox.close', defaultMessage: 'Close' },
-})
-
-export default
-@injectIntl
-class StatusRevisionModal extends ImmutablePureComponent {
-
-  static propTypes = {
-    intl: PropTypes.object.isRequired,
-    onClose: PropTypes.func.isRequired,
-    status: ImmutablePropTypes.map.isRequired
-  }
-
-  render() {
-    const { intl, onClose, status } = this.props
-
-    return (
-      <div className='modal-root__modal status-revisions-root'>
-        <div className='status-revisions'>
-          <div className='status-revisions__header'>
-            <h3 className='status-revisions__header__title'>
-              <FormattedMessage id='status_revisions.heading' defaultMessage='Revision History' />
-            </h3>
-            <Button className='status-revisions__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={20} />
-          </div>
-          <div className='status-revisions__content'>
-            <StatusRevisionListContainer id={status.get('id')} />
-          </div>
-        </div>
-      </div>
-    )
-  }
-}

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

@@ -0,0 +1,97 @@
+import { defineMessages, injectIntl } from 'react-intl'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import classNames from 'classnames/bind'
+// import StatusRevisionListContainer from '../../containers/status_revisions_list_container'
+import { loadStatusRevisions } from '../../actions/status_revisions'
+import ModalLayout from './modal_layout'
+import RelativeTimestamp from '../relative_timestamp'
+import ScrollableList from '../scrollable_list'
+import Text from '../text'
+
+const cx = classNames.bind(_s)
+
+const messages = defineMessages({
+  title: { id: 'status_revisions.heading', defaultMessage: 'Revision History' },
+})
+
+const mapStateToProps = state => ({
+  loading: state.getIn(['status_revisions', 'loading']),
+  error: state.getIn(['status_revisions', 'error']),
+  revisions: state.getIn(['status_revisions', 'revisions']),
+})
+
+const mapDispatchToProps = dispatch => ({
+  onLoadStatusRevisions(statusId) {
+    dispatch(loadStatusRevisions(statusId))
+  },
+})
+
+export default
+@injectIntl
+@connect(mapStateToProps, mapDispatchToProps)
+class StatusRevisionsModal extends ImmutablePureComponent {
+
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+    status: ImmutablePropTypes.map.isRequired,
+    onLoadStatusRevisions: PropTypes.func.isRequired,
+    loading: PropTypes.bool.isRequired,
+    error: PropTypes.bool,
+    revisions: ImmutablePropTypes.list.isRequired,
+  }
+
+  componentDidMount() {
+    this.props.onLoadStatusRevisions(this.props.status.get('id'))
+  }
+
+  render() {
+    const {
+      intl,
+      status,
+      revisions
+    } = this.props
+
+    console.log("revisions:", revisions)
+    console.log("revisions.size:", revisions.size)
+
+    return (
+      <ModalLayout title={intl.formatMessage(messages.title)} width='480'>
+        <div className={[_s.default]}>
+          <ScrollableList>
+            {
+              revisions.map((revision, i) => {
+                const isFirst = i === 0
+                const isLast = i === revisions.size - 1
+
+                const containerClasses = cx({
+                  default: 1,
+                  pt5: 1,
+                  pb10: 1,
+                  mt5: !isFirst,
+                  borderColorSecondary: !isLast,
+                  borderBottom1PX: !isLast,
+                })
+
+                return (
+                  <div key={`status-revision-${i}`} className={containerClasses}>
+                    <div className={[_s.default, _s.pb5].join(' ')}>
+                      <Text size='medium'>
+                        {revision.get('text')}
+                      </Text>
+                    </div>
+                    <div className={[_s.default]}>
+                      <Text size='small' color='secondary'>
+                        Edited on <RelativeTimestamp timestamp={revision.get('created_at')} />
+                      </Text>
+                    </div>
+                  </div>
+                )
+              })
+            }
+          </ScrollableList>
+        </div>
+      </ModalLayout>
+    )
+  }
+}

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

@@ -1,9 +1,9 @@
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { FormattedMessage } from 'react-intl';
-import Video from '../../features/video';
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { FormattedMessage } from 'react-intl'
+import Video from '../video'
 
-export const previewState = 'previewVideoModal';
+export const previewState = 'previewVideoModal'
 
 export default class VideoModal extends ImmutablePureComponent {
 
@@ -12,45 +12,45 @@ export default class VideoModal extends ImmutablePureComponent {
     status: ImmutablePropTypes.map,
     time: PropTypes.number,
     onClose: PropTypes.func.isRequired,
-  };
+  }
 
   static contextTypes = {
     router: PropTypes.object,
-  };
+  }
 
   componentDidMount () {
     if (this.context.router) {
-      const history = this.context.router.history;
+      const history = this.context.router.history
 
-      history.push(history.location.pathname, previewState);
+      history.push(history.location.pathname, previewState)
 
       this.unlistenHistory = history.listen(() => {
-        this.props.onClose();
-      });
+        this.props.onClose()
+      })
     }
   }
 
   componentWillUnmount () {
     if (this.context.router) {
-      this.unlistenHistory();
+      this.unlistenHistory()
 
       if (this.context.router.history.location.state === previewState) {
-        this.context.router.history.goBack();
+        this.context.router.history.goBack()
       }
     }
   }
 
   handleStatusClick = e => {
     if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
-      e.preventDefault();
-      this.context.router.history.push(`/${this.props.status.getIn(['account', 'acct'])}/posts/${this.props.status.get('id')}`);
+      e.preventDefault()
+      this.context.router.history.push(`/${this.props.status.getIn(['account', 'acct'])}/posts/${this.props.status.get('id')}`)
     }
   }
 
   render () {
-    const { media, status, time, onClose } = this.props;
+    const { media, status, time, onClose } = this.props
 
-    const link = status && <a href={status.get('url')} onClick={this.handleStatusClick}><FormattedMessage id='lightbox.view_context' defaultMessage='View context' /></a>;
+    const link = status && <a href={status.get('url')} onClick={this.handleStatusClick}><FormattedMessage id='lightbox.view_context' defaultMessage='View context' /></a>
 
     return (
       <div className='modal-root__modal video-modal'>
@@ -67,7 +67,7 @@ export default class VideoModal extends ImmutablePureComponent {
           />
         </div>
       </div>
-    );
+    )
   }
 
 }