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/features/ui/util/async-components.js

@@ -1,5 +1,5 @@
 export function EmojiPicker () {
-  return import(/* webpackChunkName: "emoji_picker" */'../../emoji/emoji_picker');
+  return import(/* webpackChunkName: "emoji_picker" */'../../../components/emoji/emoji_picker');
 }
 
 export function Compose () {
@@ -22,10 +22,6 @@ export function HashtagTimeline () {
   return import(/* webpackChunkName: "features/hashtag_timeline" */'../../hashtag_timeline');
 }
 
-export function DirectTimeline() {
-  return import(/* webpackChunkName: "features/direct_timeline" */'../../direct_timeline');
-}
-
 export function ListTimeline () {
   return import(/* webpackChunkName: "features/list_timeline" */'../../list_timeline');
 }
@@ -62,10 +58,6 @@ export function Status () {
   return import(/* webpackChunkName: "features/status" */'../../status');
 }
 
-export function GettingStarted () {
-  return import(/* webpackChunkName: "features/getting_started" */'../../getting_started');
-}
-
 export function PinnedStatuses () {
   return import(/* webpackChunkName: "features/pinned_statuses" */'../../pinned_statuses');
 }
@@ -90,10 +82,6 @@ export function Reblogs () {
   return import(/* webpackChunkName: "features/reblogs" */'../../reblogs');
 }
 
-export function Favourites () {
-  return import(/* webpackChunkName: "features/favourites" */'../../favourites');
-}
-
 export function FollowRequests () {
   return import(/* webpackChunkName: "features/follow_requests" */'../../follow_requests');
 }
@@ -119,11 +107,11 @@ export function Mutes () {
 }
 
 export function MuteModal () {
-  return import(/* webpackChunkName: "modals/mute_modal" */'../components/mute_modal');
+  return import(/* webpackChunkName: "modals/mute_modal" */'../../../components/modal');
 }
 
 export function ReportModal () {
-  return import(/* webpackChunkName: "modals/report_modal" */'../components/report_modal');
+  return import(/* webpackChunkName: "modals/report_modal" */'../../../components/modal');
 }
 
 export function MediaGallery () {
@@ -135,7 +123,7 @@ export function Video () {
 }
 
 export function EmbedModal () {
-  return import(/* webpackChunkName: "modals/embed_modal" */'../components/embed_modal');
+  return import(/* webpackChunkName: "modals/embed_modal" */'../../../components/modal');
 }
 
 export function ListEditor () {
@@ -149,7 +137,3 @@ export function ListAdder () {
 export function Search () {
   return import(/*webpackChunkName: "features/search" */'../../search');
 }
-
-export function Explore () {
-  return import(/* webpackChunkName: "features/explore" */'../../explore');
-}

app/javascript/gabsocial/features/ui/util/bundle.js

@@ -0,0 +1,114 @@
+import { fetchBundleRequest, fetchBundleSuccess, fetchBundleFail } from '../../../actions/bundles';
+
+const mapDispatchToProps = dispatch => ({
+  onFetch() {
+    dispatch(fetchBundleRequest());
+  },
+  onFetchSuccess() {
+    dispatch(fetchBundleSuccess());
+  },
+  onFetchFail(error) {
+    dispatch(fetchBundleFail(error));
+  },
+});
+
+const emptyComponent = () => null;
+const noop = () => { };
+
+export default @connect(null, mapDispatchToProps)
+class Bundle extends PureComponent {
+
+  static propTypes = {
+    fetchComponent: PropTypes.func.isRequired,
+    loading: PropTypes.func,
+    error: PropTypes.func,
+    children: PropTypes.func.isRequired,
+    renderDelay: PropTypes.number,
+    onFetch: PropTypes.func,
+    onFetchSuccess: PropTypes.func,
+    onFetchFail: PropTypes.func,
+  }
+
+  static defaultProps = {
+    loading: emptyComponent,
+    error: emptyComponent,
+    renderDelay: 0,
+    onFetch: noop,
+    onFetchSuccess: noop,
+    onFetchFail: noop,
+  }
+
+  static cache = new Map
+
+  state = {
+    mod: undefined,
+    forceRender: false,
+  }
+
+  componentWillMount() {
+    this.load(this.props);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.fetchComponent !== this.props.fetchComponent) {
+      this.load(nextProps);
+    }
+  }
+
+  componentWillUnmount () {
+    if (this.timeout) {
+      clearTimeout(this.timeout);
+    }
+  }
+
+  load = (props) => {
+    const { fetchComponent, onFetch, onFetchSuccess, onFetchFail, renderDelay } = props || this.props;
+    const cachedMod = Bundle.cache.get(fetchComponent);
+
+    if (fetchComponent === undefined) {
+      this.setState({ mod: null });
+      return Promise.resolve();
+    }
+
+    onFetch();
+
+    if (cachedMod) {
+      this.setState({ mod: cachedMod.default });
+      onFetchSuccess();
+      return Promise.resolve();
+    }
+
+    this.setState({ mod: undefined });
+
+    if (renderDelay !== 0) {
+      this.timestamp = new Date();
+      this.timeout = setTimeout(() => this.setState({ forceRender: true }), renderDelay);
+    }
+
+    return fetchComponent()
+      .then((mod) => {
+        Bundle.cache.set(fetchComponent, mod);
+        this.setState({ mod: mod.default });
+        onFetchSuccess();
+      })
+      .catch((error) => {
+        this.setState({ mod: null });
+        onFetchFail(error);
+      });
+  }
+
+  render() {
+    const { loading: Loading, error: Error, children, renderDelay } = this.props;
+    const { mod, forceRender } = this.state;
+    const elapsed = this.timestamp ? (new Date() - this.timestamp) : renderDelay;
+
+    if (mod === undefined) {
+      return (elapsed >= renderDelay || forceRender) ? <Loading /> : null;
+    } else if (mod === null) {
+      return <Error onRetry={this.load} />;
+    }
+
+    return children(mod);
+  }
+
+}

app/javascript/gabsocial/features/ui/util/intersection_observer_wrapper.js

@@ -5,7 +5,8 @@
 // instance by calling observe() multiple times."
 // https://developers.google.com/web/updates/2016/04/intersectionobserver
 
-class IntersectionObserverWrapper {
+
+export default class IntersectionObserverWrapper {
 
   callbacks = {};
   observerBacklog = [];
@@ -52,6 +53,4 @@ class IntersectionObserverWrapper {
     }
   }
 
-}
-
-export default IntersectionObserverWrapper;
+}

app/javascript/gabsocial/features/ui/util/wrapped_route.js

@@ -1,11 +1,11 @@
-import { Redirect, Route } from 'react-router-dom';
-import ColumnsAreaContainer from '../containers/columns_area_container';
-import ColumnLoading from '../components/column_loading';
-import BundleColumnError from '../components/bundle_column_error';
-import BundleContainer from '../containers/bundle_container';
-import { me } from 'gabsocial/initial_state';
+import { Route } from 'react-router-dom';
+import ColumnsArea from '../../../components/columns_area';
+import BundleColumnError from '../../../components/bundle_column_error';
+import Bundle from './bundle';
+import { me } from '../../../initial_state';
+import ColumnIndicator from '../../../components/column_indicator';
 
-export class WrappedRoute extends Component {
+export default class WrappedRoute extends Component {
   static propTypes = {
     component: PropTypes.func.isRequired,
     page: PropTypes.func,
@@ -24,7 +24,7 @@ export class WrappedRoute extends Component {
 
     if (Page) {
       return (
-        <BundleContainer fetchComponent={component} loading={this.renderLoading} error={this.renderError}>
+        <Bundle fetchComponent={component} loading={this.renderLoading} error={this.renderError}>
           {Component =>
             (
                 <Page params={match.params} {...componentParams}>
@@ -34,27 +34,27 @@ export class WrappedRoute extends Component {
                 </Page>
             )
           }
-        </BundleContainer>
+        </Bundle>
       );
     }
 
     return (
-      <BundleContainer fetchComponent={component} loading={this.renderLoading} error={this.renderError}>
+      <Bundle fetchComponent={component} loading={this.renderLoading} error={this.renderError}>
         {Component =>
           (
-            <ColumnsAreaContainer layout={layout}>
+            <ColumnsArea layout={layout}>
               <Component params={match.params} {...componentParams}>
                 {content}
               </Component>
-            </ColumnsAreaContainer>
+            </ColumnsArea>
           )
         }
-      </BundleContainer>
+      </Bundle>
     );
   }
 
   renderLoading = () => {
-    return <ColumnLoading />;
+    return <ColumnIndicator type='loading' />;
   }
 
   renderError = (props) => {