Large update for all components

reorganization, linting, updating file imports, consolidation
warning: there will be errors in this commit
todo: update webpack, add missing styles, scss files, consolidate the rest of components within features/*

app/javascript/gabsocial/components/status_check_box/index.js

@@ -0,0 +1 @@
+export { default } from './status_check_box';

app/javascript/gabsocial/components/status_check_box/status_check_box.js

@@ -0,0 +1,87 @@
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import Toggle from 'react-toggle';
+import { Set as ImmutableSet } from 'immutable';
+import noop from 'lodash/noop';
+import StatusContent from '../status_content';
+import { MediaGallery, Video } from '../../features/ui/util/async-components';
+import Bundle from '../../features/ui/util/bundle';
+import { toggleStatusReport } from '../../actions/reports';
+
+import './status_check_box.scss';
+
+const mapStateToProps = (state, { id }) => ({
+  status: state.getIn(['statuses', id]),
+  checked: state.getIn(['reports', 'new', 'status_ids'], ImmutableSet()).includes(id),
+});
+
+const mapDispatchToProps = (dispatch, { id }) => ({
+  onToggle(e) {
+    dispatch(toggleStatusReport(id, e.target.checked));
+  },
+});
+
+export default @connect(mapStateToProps, mapDispatchToProps)
+class StatusCheckBox extends PureComponent {
+
+  static propTypes = {
+    status: ImmutablePropTypes.map.isRequired,
+    checked: PropTypes.bool,
+    onToggle: PropTypes.func.isRequired,
+    disabled: PropTypes.bool,
+  };
+
+  render () {
+    const { status, checked, onToggle, disabled } = this.props;
+    let media = null;
+
+    if (status.get('reblog')) {
+      return null;
+    }
+
+    if (status.get('media_attachments').size > 0) {
+      if (status.get('media_attachments').some(item => item.get('type') === 'unknown')) {
+
+      } else if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
+        const video = status.getIn(['media_attachments', 0]);
+
+        media = (
+          <Bundle fetchComponent={Video} loading={this.renderLoadingVideoPlayer} >
+            {Component => (
+              <Component
+                preview={video.get('preview_url')}
+                blurhash={video.get('blurhash')}
+                src={video.get('url')}
+                alt={video.get('description')}
+                width={239}
+                height={110}
+                inline
+                sensitive={status.get('sensitive')}
+                onOpenVideo={noop}
+              />
+            )}
+          </Bundle>
+        );
+      } else {
+        media = (
+          <Bundle fetchComponent={MediaGallery} loading={this.renderLoadingMediaGallery} >
+            {Component => <Component media={status.get('media_attachments')} sensitive={status.get('sensitive')} height={110} onOpenMedia={noop} />}
+          </Bundle>
+        );
+      }
+    }
+
+    return (
+      <div className='status-check-box'>
+        <div className='status-check-box__status'>
+          <StatusContent status={status} />
+          {media}
+        </div>
+
+        <div className='status-check-box-toggle'>
+          <Toggle checked={checked} onChange={onToggle} disabled={disabled} />
+        </div>
+      </div>
+    );
+  }
+
+}

app/javascript/gabsocial/components/status_check_box/status_check_box.scss

@@ -0,0 +1,34 @@
+.status-check-box {
+  display: flex;
+  border-bottom: 1px solid $ui-secondary-color;
+
+  &__status {
+    margin: 10px 0 10px 10px;
+    flex: 1;
+
+    .media-gallery {
+      max-width: 250px;
+    }
+
+    .status__content {
+      padding: 0;
+      white-space: normal;
+    }
+
+    .video-player {
+      margin-top: 8px;
+      max-width: 250px;
+    }
+
+    .media-gallery__item-thumbnail {
+      cursor: default;
+    }
+  }
+
+  &__toggle {
+    flex: 0 0 auto;
+    padding: 10px;
+
+    @include flex(center, center);
+  }
+}