Updated panels to be async_components

• Updated: - panels to be async_components • Added: - WrappedBundle
2020-08-12 17:52:46 -05:00
parent f7bf7e2263
commit a72ea2b525
22 changed files with 292 additions and 149 deletions
--- a/app/javascript/gabsocial/layouts/about_layout.js
+++ b/app/javascript/gabsocial/layouts/about_layout.js
@@ -3,14 +3,17 @@ import {
  BREAKPOINT_EXTRA_SMALL,
 } from '../constants'
 import { me } from '../initial_state'
-import SidebarXS from '../components/sidebar_xs'
 import NavigationBar from '../components/navigation_bar'
 import LoggedOutNavigationBar from '../components/logged_out_navigation_bar'
 import FooterBar from '../components/footer_bar'
-import GlobalFooter from '../components/global_footer'
 import Responsive from '../features/ui/util/responsive_component'
 import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component'
-import AboutSidebar from '../components/about_sidebar'
+import WrappedBundle from '../features/ui/util/wrapped_bundle'
+import {
+  AboutSidebar,
+  GlobalFooter,
+  SidebarXS,
+} from '../features/ui/util/async_components'

 export default class SettingsLayout extends PureComponent {

@@ -73,7 +76,7 @@ export default class SettingsLayout extends PureComponent {
      <div className={[_s.default, _s.width100PC, _s.heightMin100VH, _s.bgPrimary].join(' ')}>

        <Responsive max={BREAKPOINT_EXTRA_SMALL}>
-          <SidebarXS />
+          <WrappedBundle component={SidebarXS} />
        </Responsive>

        {
@@ -88,7 +91,7 @@ export default class SettingsLayout extends PureComponent {
        <div className={[_s.default, _s.flexRow, _s.width100PC].join(' ')}>

          <Responsive min={BREAKPOINT_EXTRA_SMALL}>
-            <AboutSidebar title={title} items={menuItems} />
+            <WrappedBundle component={AboutSidebar} componentParams={{ title, items: menuItems }} />
          </Responsive>

          <ResponsiveClassesComponent
@@ -106,7 +109,7 @@ export default class SettingsLayout extends PureComponent {
                <div className={[_s.default, _s.width1015PX, _s.z1].join(' ')}>

                  <Responsive max={BREAKPOINT_EXTRA_SMALL}>
-                    <AboutSidebar title={title} items={menuItems} />
+                    <WrappedBundle component={AboutSidebar} componentParams={{ title, items: menuItems }} />
                  </Responsive>
      
                  <div className={_s.default}>
@@ -120,7 +123,7 @@ export default class SettingsLayout extends PureComponent {
          </ResponsiveClassesComponent>
        </div>

-        <GlobalFooter />
+        <WrappedBundle component={GlobalFooter} />

        <Responsive max={BREAKPOINT_EXTRA_SMALL}>
          <FooterBar />
--- a/app/javascript/gabsocial/layouts/explore_layout.js
+++ b/app/javascript/gabsocial/layouts/explore_layout.js
@@ -4,12 +4,15 @@ import throttle from 'lodash.throttle'
 import Sticky from 'react-stickynode'
 import { BREAKPOINT_EXTRA_SMALL } from '../constants'
 import Layout from './layout'
-import TrendsPanel from '../components/panel/trends_panel'
-import GroupSidebarPanel from '../components/panel/groups_panel'
-import SignUpLogInPanel from '../components/panel/sign_up_log_in_panel'
 import SidebarPanelGroup from '../components/sidebar_panel_group'
 import Responsive from '../features/ui/util/responsive_component'
+import WrappedBundle from '../features/ui/util/wrapped_bundle'
 import Heading from '../components/heading'
+import {
+  GroupSidebarPanel,
+  SignUpLogInPanel,
+  TrendsPanel,
+} from '../features/ui/util/async_components'

 export default class ExploreLayout extends ImmutablePureComponent {

@@ -105,9 +108,9 @@ export default class ExploreLayout extends ImmutablePureComponent {
                    <SidebarPanelGroup
                      page='explore'
                      layout={[
-                        <SignUpLogInPanel key='explore-page-signup-login-panel' />,
-                        <GroupSidebarPanel groupType='featured' key='explore-page-group-panel' />,
-                        <TrendsPanel key='explore-page-trends-panel' isLazy shouldLoad={lazyLoaded} />,
+                        SignUpLogInPanel,
+                        <WrappedBundle component={GroupSidebarPanel} componentParams={{ groupType: 'featured' }} />,
+                        <WrappedBundle component={TrendsPanel} componentParams={{ isLazy: true, shouldLoad: lazyLoaded }} />,
                      ]}
                    />
                  </div>
--- a/app/javascript/gabsocial/layouts/group_layout.js
+++ b/app/javascript/gabsocial/layouts/group_layout.js
@@ -3,13 +3,16 @@ import ImmutablePureComponent from 'react-immutable-pure-component'
 import Sticky from 'react-stickynode'
 import { BREAKPOINT_EXTRA_SMALL } from '../constants'
 import Layout from './layout'
-import GroupInfoPanel from '../components/panel/group_info_panel'
-import GroupSidebarPanel from '../components/panel/groups_panel'
-import SignupPanel from '../components/panel/sign_up_panel'
-import LinkFooter from '../components/link_footer'
 import GroupHeader from '../components/group_header'
 import SidebarPanelGroup from '../components/sidebar_panel_group'
-import Responsive from '../features/ui/util/responsive_component';
+import Responsive from '../features/ui/util/responsive_component'
+import WrappedBundle from '../features/ui/util/wrapped_bundle'
+import {
+  LinkFooter,
+  SignUpPanel,
+  GroupSidebarPanel,
+  GroupInfoPanel,
+} from '../features/ui/util/async_components'

 export default class GroupLayout extends ImmutablePureComponent {

@@ -77,10 +80,10 @@ export default class GroupLayout extends ImmutablePureComponent {
                    <SidebarPanelGroup
                      page={`group.${groupId}`}
                      layout={[
-                        <GroupInfoPanel group={group} key='group-page-info-panel' />,
-                        <SignupPanel key='group-page-signup-panel' />,
-                        <GroupSidebarPanel isSlim key='group-page-group-panel' />,
-                        <LinkFooter key='group-page-link-footer' />,
+                        <WrappedBundle component={GroupInfoPanel} componentParams={{ group }} />,
+                        SignUpPanel,
+                        GroupSidebarPanel,
+                        LinkFooter,
                      ]}
                    />
                  </div>
--- a/app/javascript/gabsocial/layouts/profile_layout.js
+++ b/app/javascript/gabsocial/layouts/profile_layout.js
@@ -4,19 +4,22 @@ import { BREAKPOINT_EXTRA_SMALL } from '../constants'
 import Sticky from 'react-stickynode'
 import { me } from '../initial_state'
 import { CX } from '../constants'
-import LinkFooter from '../components/link_footer'
-import ProfileStatsPanel from '../components/panel/profile_stats_panel'
-import ProfileInfoPanel from '../components/panel/profile_info_panel'
-import MediaGalleryPanel from '../components/panel/media_gallery_panel'
-import SignUpPanel from '../components/panel/sign_up_panel'
 import NavigationBar from '../components/navigation_bar'
 import FooterBar from '../components/footer_bar'
 import ProfileHeader from '../components/profile_header'
 import FloatingActionButton from '../components/floating_action_button'
 import ProfileNavigationBar from '../components/profile_navigation_bar'
 import LoggedOutNavigationBar from '../components/logged_out_navigation_bar'
-import Responsive from '../features/ui/util/responsive_component';
-import Divider from '../components/divider';
+import Responsive from '../features/ui/util/responsive_component'
+import Divider from '../components/divider'
+import WrappedBundle from '../features/ui/util/wrapped_bundle'
+import {
+  LinkFooter,
+  ProfileStatsPanel,
+  ProfileInfoPanel,
+  MediaGalleryPanel,
+  SignUpPanel,
+} from '../features/ui/util/async_components'

 export default class ProfileLayout extends ImmutablePureComponent {

@@ -64,9 +67,9 @@ export default class ProfileLayout extends ImmutablePureComponent {
                <div className={[_s.default, _s.z1, _s.width100PC, _s.alignItemsCenter].join(' ')}>

                  <ProfileHeader account={account} isXS>
-                    <ProfileInfoPanel account={account} noPanel />
+                    <WrappedBundle component={ProfileInfoPanel} componentParams={{ account }} />
                    <Divider isSmall />
-                    <ProfileStatsPanel account={account} noPanel />
+                    <WrappedBundle component={ProfileStatsPanel} componentParams={{ account }} />
                  </ProfileHeader>

                  <div className={[_s.default, _s.width100PC, , _s.flexRow, _s.justifyContentEnd, _s.py15].join(' ')}>
@@ -116,11 +119,11 @@ export default class ProfileLayout extends ImmutablePureComponent {
                      <div className={[_s.default, _s.width340PX, _s.mr15].join(' ')}>
                        <Sticky top={63} enabled>
                          <div className={[_s.default, _s.width340PX].join(' ')}>
-                            <ProfileStatsPanel account={account} />
-                            <ProfileInfoPanel account={account} />
-                            { !unavailable && <MediaGalleryPanel account={account} /> }
-                            <SignUpPanel />
-                            <LinkFooter />
+                            <WrappedBundle component={ProfileStatsPanel} componentParams={{ account }} />
+                            <WrappedBundle component={ProfileInfoPanel} componentParams={{ account }} />
+                            { !unavailable && <WrappedBundle component={MediaGalleryPanel} componentParams={{ account }} /> }
+                            { !me && <WrappedBundle component={SignUpPanel} /> }
+                            <WrappedBundle component={LinkFooter} />
                          </div>
                        </Sticky>
                      </div>
--- a/app/javascript/gabsocial/layouts/settings_layout.js
+++ b/app/javascript/gabsocial/layouts/settings_layout.js
@@ -3,12 +3,15 @@ import {
  BREAKPOINT_EXTRA_SMALL,
 } from '../constants'
 import { me } from '../initial_state'
-import SidebarXS from '../components/sidebar_xs'
 import NavigationBar from '../components/navigation_bar'
 import FooterBar from '../components/footer_bar'
 import Responsive from '../features/ui/util/responsive_component'
 import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component'
 import SettingsSidebar from '../components/settings_sidebar'
+import WrappedBundle from '../features/ui/util/wrapped_bundle'
+import {
+  SidebarXS,
+} from '../features/ui/util/async_components'

 export default class SettingsLayout extends PureComponent {

@@ -33,7 +36,7 @@ export default class SettingsLayout extends PureComponent {
      <div className={[_s.default, _s.width100PC, _s.heightMin100VH, _s.bgTertiary].join(' ')}>

        <Responsive max={BREAKPOINT_EXTRA_SMALL}>
-          <SidebarXS />
+          <WrappedBundle component={SidebarXS} />
        </Responsive>

        <NavigationBar