Progress

2020-02-22 18:26:23 -05:00
parent bebc39f150
commit d255982ec5
39 changed files with 1054 additions and 885 deletions
--- a/app/javascript/gabsocial/features/ui/util/async-components.js
+++ b/app/javascript/gabsocial/features/ui/util/async-components.js
@@ -1,143 +1,143 @@
-export function EmojiPicker () {
-  return import(/* webpackChunkName: "emoji_picker" */'../../../components/emoji/emoji_picker');
+export function EmojiPicker() {
+  return import(/* webpackChunkName: "emoji_picker" */'../../../components/emoji/emoji_picker')
 }

-export function Compose () {
-  return import(/* webpackChunkName: "features/compose" */'../../compose');
+export function Compose() {
+  return import(/* webpackChunkName: "features/compose" */'../../compose')
 }

-export function Notifications () {
-  return import(/* webpackChunkName: "features/notifications" */'../../notifications');
+export function Notifications() {
+  return import(/* webpackChunkName: "features/notifications" */'../../notifications')
 }

-export function HomeTimeline () {
-  return import(/* webpackChunkName: "features/home_timeline" */'../../home_timeline');
+export function HomeTimeline() {
+  return import(/* webpackChunkName: "features/home_timeline" */'../../home_timeline')
 }

-export function CommunityTimeline () {
-  return import(/* webpackChunkName: "features/community_timeline" */'../../community_timeline');
+export function CommunityTimeline() {
+  return import(/* webpackChunkName: "features/community_timeline" */'../../community_timeline')
 }

-export function HashtagTimeline () {
-  return import(/* webpackChunkName: "features/hashtag_timeline" */'../../hashtag_timeline');
+export function HashtagTimeline() {
+  return import(/* webpackChunkName: "features/hashtag_timeline" */'../../hashtag_timeline')
 }

-export function ListTimeline () {
-  return import(/* webpackChunkName: "features/list_timeline" */'../../list_timeline');
+export function ListTimeline() {
+  return import(/* webpackChunkName: "features/list_timeline" */'../../list_timeline')
 }

-export function GroupTimeline () {
-  return import(/* webpackChunkName: "features/groups/timeline" */'../../groups/timeline');
+export function GroupTimeline() {
+  return import(/* webpackChunkName: "features/groups/timeline" */'../../groups/timeline')
 }

-export function GroupMembers () {
-  return import(/* webpackChunkName: "features/groups/timeline" */'../../groups/members');
+export function GroupMembers() {
+  return import(/* webpackChunkName: "features/groups/timeline" */'../../groups/members')
 }

-export function GroupRemovedAccounts () {
-  return import(/* webpackChunkName: "features/groups/timeline" */'../../groups/removed_accounts');
+export function GroupRemovedAccounts() {
+  return import(/* webpackChunkName: "features/groups/timeline" */'../../groups/removed_accounts')
 }

-export function GroupCreate () {
-  return import(/* webpackChunkName: "features/groups/timeline" */'../../groups/create');
+export function GroupCreate() {
+  return import(/* webpackChunkName: "features/groups/timeline" */'../../groups/create')
 }

-export function GroupEdit () {
-  return import(/* webpackChunkName: "features/groups/timeline" */'../../groups/edit');
+export function GroupEdit() {
+  return import(/* webpackChunkName: "features/groups/timeline" */'../../groups/edit')
 }

-export function Groups () {
-  return import(/* webpackChunkName: "features/groups/index" */'../../groups/index');
+export function GroupsCollection() {
+  return import(/* webpackChunkName: "features/groups_collection" */'../../g../../groups_collection')
 }

-export function ListsDirectory () {
-  return import(/* webpackChunkName: "features/lists_directory" */'../../lists_directory');
+export function ListsDirectory() {
+  return import(/* webpackChunkName: "features/lists_directory" */'../../lists_directory')
 }

-export function Status () {
-  return import(/* webpackChunkName: "features/status" */'../../status');
+export function Status() {
+  return import(/* webpackChunkName: "features/status" */'../../status')
 }

-export function PinnedStatuses () {
-  return import(/* webpackChunkName: "features/pinned_statuses" */'../../pinned_statuses');
+export function PinnedStatuses() {
+  return import(/* webpackChunkName: "features/pinned_statuses" */'../../pinned_statuses')
 }

-export function AccountTimeline () {
-  return import(/* webpackChunkName: "features/account_timeline" */'../../account_timeline');
+export function AccountTimeline() {
+  return import(/* webpackChunkName: "features/account_timeline" */'../../account_timeline')
 }

-export function AccountGallery () {
-  return import(/* webpackChunkName: "features/account_gallery" */'../../account_gallery');
+export function AccountGallery() {
+  return import(/* webpackChunkName: "features/account_gallery" */'../../account_gallery')
 }

-export function Followers () {
-  return import(/* webpackChunkName: "features/followers" */'../../followers');
+export function Followers() {
+  return import(/* webpackChunkName: "features/followers" */'../../followers')
 }

-export function Following () {
-  return import(/* webpackChunkName: "features/following" */'../../following');
+export function Following() {
+  return import(/* webpackChunkName: "features/following" */'../../following')
 }

-export function Reblogs () {
-  return import(/* webpackChunkName: "features/reblogs" */'../../reblogs');
+export function Reblogs() {
+  return import(/* webpackChunkName: "features/reblogs" */'../../reblogs')
 }

-export function FollowRequests () {
-  return import(/* webpackChunkName: "features/follow_requests" */'../../follow_requests');
+export function FollowRequests() {
+  return import(/* webpackChunkName: "features/follow_requests" */'../../follow_requests')
 }

-export function GenericNotFound () {
-  return import(/* webpackChunkName: "features/generic_not_found" */'../../generic_not_found');
+export function GenericNotFound() {
+  return import(/* webpackChunkName: "features/generic_not_found" */'../../generic_not_found')
 }

-export function FavouritedStatuses () {
-  return import(/* webpackChunkName: "features/favourited_statuses" */'../../favourited_statuses');
+export function FavouritedStatuses() {
+  return import(/* webpackChunkName: "features/favourited_statuses" */'../../favourited_statuses')
 }

-export function Blocks () {
-  return import(/* webpackChunkName: "features/blocks" */'../../blocks');
+export function Blocks() {
+  return import(/* webpackChunkName: "features/blocks" */'../../blocks')
 }

-export function DomainBlocks () {
-  return import(/* webpackChunkName: "features/domain_blocks" */'../../domain_blocks');
+export function DomainBlocks() {
+  return import(/* webpackChunkName: "features/domain_blocks" */'../../domain_blocks')
 }

-export function Mutes () {
-  return import(/* webpackChunkName: "features/mutes" */'../../mutes');
+export function Mutes() {
+  return import(/* webpackChunkName: "features/mutes" */'../../mutes')
 }

-export function MuteModal () {
-  return import(/* webpackChunkName: "modals/mute_modal" */'../../../components/modal');
+export function MuteModal() {
+  return import(/* webpackChunkName: "modals/mute_modal" */'../../../components/modal')
 }

-export function StatusRevisionModal () {
-  return import(/* webpackChunkName: "modals/mute_modal" */'../../../components/modal');
+export function StatusRevisionModal() {
+  return import(/* webpackChunkName: "modals/mute_modal" */'../../../components/modal')
 }

-export function ReportModal () {
-  return import(/* webpackChunkName: "modals/report_modal" */'../../../components/modal');
+export function ReportModal() {
+  return import(/* webpackChunkName: "modals/report_modal" */'../../../components/modal')
 }

-export function MediaGallery () {
-  return import(/* webpackChunkName: "status/media_gallery" */'../../../components/media_gallery');
+export function MediaGallery() {
+  return import(/* webpackChunkName: "status/media_gallery" */'../../../components/media_gallery')
 }

-export function Video () {
-  return import(/* webpackChunkName: "features/video" */'../../video');
+export function Video() {
+  return import(/* webpackChunkName: "features/video" */'../../video')
 }

-export function EmbedModal () {
-  return import(/* webpackChunkName: "modals/embed_modal" */'../../../components/modal');
+export function EmbedModal() {
+  return import(/* webpackChunkName: "modals/embed_modal" */'../../../components/modal')
 }

-export function ListEditor () {
-  return import(/* webpackChunkName: "features/list_editor" */'../../list_editor');
+export function ListEditor() {
+  return import(/* webpackChunkName: "features/list_editor" */'../../list_editor')
 }

-export function ListAdder () {
-  return import(/*webpackChunkName: "features/list_adder" */'../../list_adder');
+export function ListAdder() {
+  return import(/*webpackChunkName: "features/list_adder" */'../../list_adder')
 }

-export function Search () {
-  return import(/*webpackChunkName: "features/search" */'../../search');
+export function Search() {
+  return import(/*webpackChunkName: "features/search" */'../../search')
 }
--- a/app/javascript/gabsocial/features/ui/util/bundle.js
+++ b/app/javascript/gabsocial/features/ui/util/bundle.js
@@ -1,21 +1,26 @@
-import { fetchBundleRequest, fetchBundleSuccess, fetchBundleFail } from '../../../actions/bundles';
+import {
+  fetchBundleRequest,
+  fetchBundleSuccess,
+  fetchBundleFail
+} from '../../../actions/bundles'

 const mapDispatchToProps = dispatch => ({
  onFetch() {
-    dispatch(fetchBundleRequest());
+    dispatch(fetchBundleRequest())
  },
  onFetchSuccess() {
-    dispatch(fetchBundleSuccess());
+    dispatch(fetchBundleSuccess())
  },
  onFetchFail(error) {
-    dispatch(fetchBundleFail(error));
+    dispatch(fetchBundleFail(error))
  },
-});
+})

-const emptyComponent = () => null;
-const noop = () => { };
+const emptyComponent = () => null
+const noop = () => { }

-export default @connect(null, mapDispatchToProps)
+export default
+@connect(null, mapDispatchToProps)
 class Bundle extends PureComponent {

  static propTypes = {
@@ -46,69 +51,94 @@ class Bundle extends PureComponent {
  }

  componentWillMount() {
-    this.load(this.props);
+    this.load(this.props)
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.fetchComponent !== this.props.fetchComponent) {
-      this.load(nextProps);
+      this.load(nextProps)
    }
  }

-  componentWillUnmount () {
+  componentWillUnmount() {
    if (this.timeout) {
-      clearTimeout(this.timeout);
+      clearTimeout(this.timeout)
    }
  }

  load = (props) => {
-    const { fetchComponent, onFetch, onFetchSuccess, onFetchFail, renderDelay } = props || this.props;
-    const cachedMod = Bundle.cache.get(fetchComponent);
+    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();
+      this.setState({
+        mod: null
+      })
+      return Promise.resolve()
    }

-    onFetch();
+    onFetch()

    if (cachedMod) {
-      this.setState({ mod: cachedMod.default });
-      onFetchSuccess();
-      return Promise.resolve();
+      this.setState({
+        mod: cachedMod.default
+      })
+      onFetchSuccess()
+      return Promise.resolve()
    }

-    this.setState({ mod: undefined });
+    this.setState({
+      mod: undefined
+    })

    if (renderDelay !== 0) {
-      this.timestamp = new Date();
-      this.timeout = setTimeout(() => this.setState({ forceRender: true }), renderDelay);
+      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();
+        Bundle.cache.set(fetchComponent, mod)
+        this.setState({
+          mod: mod.default
+        })
+        onFetchSuccess()
      })
      .catch((error) => {
-        this.setState({ mod: null });
-        onFetchFail(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;
+    const {
+      loading: LoadingComponent,
+      error: ErrorComponent,
+      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;
+      return (elapsed >= renderDelay || forceRender) ? <LoadingComponent /> : null
    } else if (mod === null) {
-      return <Error onRetry={this.load} />;
+      return <ErrorComponent onRetry={this.load} />
    }

-    return children(mod);
+    return children(mod)
  }

 }
--- a/app/javascript/gabsocial/features/ui/util/wrapped_route.js
+++ b/app/javascript/gabsocial/features/ui/util/wrapped_route.js
@@ -1,77 +1,64 @@
-import { Route } from 'react-router-dom';
-import DefaultLayout from '../../../components/layouts/default_layout';
-import BundleColumnError from '../../../components/bundle_column_error';
-import Bundle from './bundle';
-import { me } from '../../../initial_state';
-import ColumnIndicator from '../../../components/column_indicator';
+import { Route } from 'react-router-dom'
+import BundleColumnError from '../../../components/bundle_column_error'
+import Bundle from './bundle'
+import { me } from '../../../initial_state'

 export default class WrappedRoute extends Component {
  static propTypes = {
    component: PropTypes.func.isRequired,
-    page: PropTypes.func,
+    page: PropTypes.func.isRequired,
    content: PropTypes.node,
    componentParams: PropTypes.object,
-    layout: PropTypes.object,
    publicRoute: PropTypes.bool,
-  };
+  }

  static defaultProps = {
    componentParams: {},
-  };
+  }

  renderComponent = ({ match }) => {
-    const { component, content, componentParams, layout, page: Page } = this.props;
-
-    if (Page) {
-      return (
-        <Bundle fetchComponent={component} loading={this.renderLoading} error={this.renderError}>
-          {Component =>
-            (
-              <Page params={match.params} {...componentParams}>
-                <Component params={match.params} {...componentParams}>
-                  {content}
-                </Component>
-              </Page>
-            )
-          }
-        </Bundle>
-      );
-    }
+    const {
+      component,
+      content,
+      componentParams,
+      page: Page
+    } = this.props

    return (
-      <Bundle fetchComponent={component} loading={this.renderLoading} error={this.renderError}>
+      <Bundle fetchComponent={component} error={this.renderError}>
        {Component =>
          (
-            <DefaultLayout layout={layout}>
+            <Page params={match.params} {...componentParams}>
              <Component params={match.params} {...componentParams}>
                {content}
              </Component>
-            </DefaultLayout>
+            </Page>
          )
        }
      </Bundle>
-    );
-  }
-
-  renderLoading = () => {
-    return <div />
+    )
  }

  renderError = (props) => {
-    return <BundleColumnError {...props} />;
+    return <BundleColumnError {...props} />
  }

  render() {
-    const { component: Component, content, publicRoute, ...rest } = this.props;
+    const {
+      component: Component,
+      content,
+      publicRoute,
+      ...rest
+    } = this.props

    if (!publicRoute && !me) {
-      const actualUrl = encodeURIComponent(this.props.computedMatch.url);
+      const actualUrl = encodeURIComponent(this.props.computedMatch.url)
      return <Route path={this.props.path} component={() => {
-        window.location.href = `/auth/sign_in?redirect_uri=${actualUrl}`;
-        return null;
+        window.location.href = `/auth/sign_in?redirect_uri=${actualUrl}`
+        return null
      }} />
    }

-    return <Route {...rest} render={this.renderComponent} />;
+    return <Route {...rest} render={this.renderComponent} />
  }
 }