random-mirrors/gab-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated panels to be async_components

Browse Source 
• Updated:
- panels to be async_components

• Added:
- WrappedBundle
This commit is contained in:
mgabdev 2020-08-12 17:52:46 -05:00
parent f7bf7e2263
commit a72ea2b525
22 changed files with 292 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
app/javascript/gabsocial/components/sidebar_panel_group.js
View File

@ -1,6 +1,10 @@
import { Fragment } from 'react'
import { me, promotions } from '../initial_state'
import StatusPromotionPanel from './panel/status_promotion_panel'
import Bundle from '../features/ui/util/bundle'
import WrappedBundle from '../features/ui/util/bundle'
import {
StatusPromotionPanel
} from '../features/ui/util/async_components'
export default class SidebarPanelGroup extends PureComponent {
@ -20,14 +24,33 @@ export default class SidebarPanelGroup extends PureComponent {
if (!!promotion) {
const correctedPosition = promotion.position - 1 > layout.length ? layout.length - 1 : promotion.position
if (!layout.find(p => p.key === 'status-promotion-panel')) {
layout.splice(correctedPosition, 0, <StatusPromotionPanel key='status-promotion-panel' statusId={promotion.status_id} />)
layout.splice(correctedPosition, 0, <WrappedBundle component={StatusPromotionPanel} componentParams={{ statusId: promotion.status_id }} />)
}
}
}
return (
<Fragment>
{layout}
{
layout.map((panel) => {
if (typeof panel !== 'function') {
return panel
}
return (
<Bundle
fetchComponent={panel}
loading={this.renderLoading}
error={this.renderError}
renderDelay={150}
>
{
(Component) => <Component />
}
</Bundle>
)
})
}
</Fragment>
)
}

17
app/javascript/gabsocial/features/group_about.js
View File

@ -4,7 +4,11 @@ import isObject from 'lodash.isobject'
import { BREAKPOINT_EXTRA_SMALL } from '../constants'
import ColumnIndicator from '../components/column_indicator'
import Responsive from './ui/util/responsive_component'
import GroupInfoPanel from '../components/panel/group_info_panel'
import Bundle from '../features/ui/util/bundle'
import {
GroupInfoPanel
} from '../features/ui/util/async_components'
const mapStateToProps = (state, { params }) => {
const groupId = isObject(params) ? params['id'] : null
@ -34,7 +38,16 @@ class GroupAbout extends ImmutablePureComponent {
<ColumnIndicator type='missing' />
</Responsive>
<Responsive max={BREAKPOINT_EXTRA_SMALL}>
<GroupInfoPanel group={group} />
<Bundle
fetchComponent={GroupInfoPanel}
loading={this.renderLoading}
error={this.renderError}
renderDelay={150}
>
{
(Component) => <Component group={group} />
}
</Bundle>
</Responsive>
</div>
)

23
app/javascript/gabsocial/features/ui/util/async_components.js
View File

@ -1,4 +1,5 @@
export function About() { return import(/* webpackChunkName: "features/about/about" */'../../about/about') }
export function AboutSidebar() { return import(/* webpackChunkName: "components/about_sidebar" */'../../../components/about_sidebar') }
export function AccountTimeline() { return import(/* webpackChunkName: "features/account_timeline" */'../../account_timeline') }
export function AccountGallery() { return import(/* webpackChunkName: "features/account_gallery" */'../../account_gallery') }
export function BlockAccountModal() { return import(/* webpackChunkName: "components/block_account_modal" */'../../../components/modal/block_account_modal') }
@ -26,16 +27,19 @@ export function FollowRequests() { return import(/* webpackChunkName: "features/
export function LikedStatuses() { return import(/* webpackChunkName: "features/liked_statuses" */'../../liked_statuses') }
export function GenericNotFound() { return import(/* webpackChunkName: "features/generic_not_found" */'../../generic_not_found') }
export function GifPickerModal() { return import(/* webpackChunkName: "components/gif_picker_modal" */'../../../components/modal/gif_picker_modal') }
export function GlobalFooter() { return import(/* webpackChunkName: "components/global_footer" */'../../../components/global_footer') }
export function GroupsCollection() { return import(/* webpackChunkName: "features/groups_collection" */'../../groups_collection') }
export function GroupAbout() { return import(/* webpackChunkName: "features/group_about" */'../../group_about.js') }
export function GroupCollectionTimeline() { return import(/* webpackChunkName: "features/group_collection_timeline" */'../../group_collection_timeline') }
export function GroupCreate() { return import(/* webpackChunkName: "features/group_create" */'../../group_create') }
export function GroupCreateModal() { return import(/* webpackChunkName: "components/group_create_modal" */'../../../components/modal/group_create_modal') }
export function GroupDeleteModal() { return import(/* webpackChunkName: "components/group_delete_modal" */'../../../components/modal/group_delete_modal') }
export function GroupInfoPanel() { return import(/* webpackChunkName: "components/group_info_panel" */'../../../components/panel/group_info_panel') }
export function GroupListSortOptionsPopover() { return import(/* webpackChunkName: "components/group_list_sort_options_popover" */'../../../components/popover/group_list_sort_options_popover') }
export function GroupMemberOptionsPopover() { return import(/* webpackChunkName: "components/group_member_options_popover" */'../../../components/popover/group_member_options_popover') }
export function GroupMembers() { return import(/* webpackChunkName: "features/group_members" */'../../group_members') }
export function GroupOptionsPopover() { return import(/* webpackChunkName: "components/group_options_popover" */'../../../components/popover/group_options_popover') }
export function GroupsPanel() { return import(/* webpackChunkName: "components/groups_panel" */'../../../components/panel/groups_panel') }
export function GroupRemovedAccounts() { return import(/* webpackChunkName: "features/group_removed_accounts" */'../../group_removed_accounts') }
export function GroupTimeline() { return import(/* webpackChunkName: "features/group_timeline" */'../../group_timeline') }
export function GroupTimelineSortOptionsPopover() { return import(/* webpackChunkName: "components/group_timeline_sort_options_popover" */'../../../components/popover/group_timeline_sort_options_popover') }
@ -47,36 +51,51 @@ export function HomeTimelineSettingsModal() { return import(/* webpackChunkName:
export function HotkeysModal() { return import(/* webpackChunkName: "components/hotkeys_modal" */'../../../components/modal/hotkeys_modal') }
export function Introduction() { return import(/* webpackChunkName: "features/introduction" */'../../introduction') }
export function Investors() { return import(/* webpackChunkName: "features/about/investors" */'../../about/investors') }
export function LinkFooter() { return import(/* webpackChunkName: "components/link_footer" */'../../../components/link_footer') }
export function ListAddUserModal() { return import(/* webpackChunkName: "features/list_add_user_modal" */'../../../components/modal/list_add_user_modal') }
export function ListCreate() { return import(/* webpackChunkName: "features/list_create" */'../../list_create') }
export function ListCreateModal() { return import(/* webpackChunkName: "components/list_create_modal" */'../../../components/modal/list_create_modal') }
export function ListDeleteModal() { return import(/* webpackChunkName: "components/list_delete_modal" */'../../../components/modal/list_delete_modal') }
export function ListDetailsPanel() { return import(/* webpackChunkName: "components/list_details_panel" */'../../../components/panel/list_details_panel') }
export function ListsDirectory() { return import(/* webpackChunkName: "features/lists_directory" */'../../lists_directory') }
export function ListEdit() { return import(/* webpackChunkName: "features/list_editor" */'../../list_edit') }
export function ListEditorModal() { return import(/* webpackChunkName: "components/list_editor_modal" */'../../../components/modal/list_editor_modal') }
export function ListsPanel() { return import(/* webpackChunkName: "components/lists_panel" */'../../../components/panel/lists_panel') }
export function ListTimeline() { return import(/* webpackChunkName: "features/list_timeline" */'../../list_timeline') }
export function ListTimelineSettingsModal() { return import(/* webpackChunkName: "components/list_timeline_settings_modal" */'../../../components/modal/list_timeline_settings_modal') }
export function MediaGallery() { return import(/* webpackChunkName: "components/media_gallery" */'../../../components/media_gallery') }
export function MediaGalleryPanel() { return import(/* webpackChunkName: "components/media_gallery_panel" */'../../../components/panel/media_gallery_panel') }
export function MediaModal() { return import(/* webpackChunkName: "components/media_modal" */'../../../components/modal/media_modal') }
export function Mutes() { return import(/* webpackChunkName: "features/mutes" */'../../mutes') }
export function MuteModal() { return import(/* webpackChunkName: "modals/mute_modal" */'../../../components/modal/mute_modal') }
export function NavSettingsPopover() { return import(/* webpackChunkName: "modals/nav_settings_popover" */'../../../components/popover/nav_settings_popover') }
export function News() { return import(/* webpackChunkName: "features/news" */'../../news') }
export function Notifications() { return import(/* webpackChunkName: "features/notifications" */'../../notifications') }
export function NotificationFilterPanel() { return import(/* webpackChunkName: "components/notification_filter_panel" */'../../../components/panel/notification_filter_panel') }
export function PrivacyPolicy() { return import(/* webpackChunkName: "features/about/privacy_policy" */'../../about/privacy_policy') }
export function ProTimeline() { return import(/* webpackChunkName: "features/pro_timeline" */'../../pro_timeline') }
export function ProfileOptionsPopover() { return import(/* webpackChunkName: "components/profile_options_popover" */'../../../components/popover/profile_options_popover') }
export function ProfileInfoPanel() { return import(/* webpackChunkName: "components/profile_info_panel" */'../../../components/panel/profile_info_panel') }
export function ProfileStatsPanel() { return import(/* webpackChunkName: "components/profile_info_panel" */'../../../components/panel/profile_stats_panel') }
export function ProgressPanel() { return import(/* webpackChunkName: "components/progress_panel" */'../../../components/panel/progress_panel') }
export function ProPanel() { return import(/* webpackChunkName: "components/pro_panel" */'../../../components/panel/pro_panel') }
export function ProUpgradeModal() { return import(/* webpackChunkName: "components/pro_upgrade_modal" */'../../../components/modal/pro_upgrade_modal') }
export function ReportModal() { return import(/* webpackChunkName: "modals/report_modal" */'../../../components/modal/report_modal') }
export function Search() { return import(/*webpackChunkName: "features/search" */'../../search') }
export function Shortcuts() { return import(/*webpackChunkName: "features/shortcuts" */'../../shortcuts') }
export function Status() { return import(/* webpackChunkName: "components/status" */'../../../components/status') }
export function StatusFeature() { return import(/* webpackChunkName: "features/status" */'../../status') }
export function SearchFilterPanel() { return import(/* webpackChunkName: "components/search_filter_panel" */'../../../components/panel/search_filter_panel') }
export function SearchPopover() { return import(/* webpackChunkName: "components/search_popover" */'../../../components/popover/search_popover') }
export function ShopPanel() { return import(/* webpackChunkName: "components/shop_panel" */'../../../components/panel/shop_panel') }
export function SidebarMorePopover() { return import(/* webpackChunkName: "components/sidebar_more_popover" */'../../../components/popover/sidebar_more_popover') }
export function SignUpLogInPanel() { return import(/* webpackChunkName: "components/sign_up_log_in_panel" */'../../../components/panel/sign_up_log_in_panel') }
export function SidebarXS() { return import(/* webpackChunkName: "components/sidebar_xs" */'../../../components/sidebar_xs') }
export function SignUpPanel() { return import(/* webpackChunkName: "components/sign_up_panel" */'../../../components/panel/sign_up_panel') }
export function StatusExpirationOptionsPopover() { return import(/* webpackChunkName: "components/status_expiration_options_popover" */'../../../components/popover/status_expiration_options_popover') }
export function StatusLikes() { return import(/* webpackChunkName: "features/status_likes" */'../../status_likes') }
export function StatusOptionsPopover() { return import(/* webpackChunkName: "components/status_options_popover" */'../../../components/popover/status_options_popover') }
export function StatusPromotionPanel() { return import(/* webpackChunkName: "components/status_promotion_panel" */'../../../components/panel/status_promotion_panel') }
export function StatusReposts() { return import(/* webpackChunkName: "features/status_reposts" */'../../status_reposts') }
export function StatusLikesModal() { return import(/* webpackChunkName: "modals/status_likes_modal" */'../../../components/modal/status_likes_modal') }
export function StatusRepostsModal() { return import(/* webpackChunkName: "modals/status_reposts_modal" */'../../../components/modal/status_reposts_modal') }
@ -84,9 +103,13 @@ export function StatusRevisionsModal() { return import(/* webpackChunkName: "mod
export function StatusVisibilityPopover() { return import(/* webpackChunkName: "components/status_visibility_popover" */'../../../components/popover/status_visibility_popover') }
export function TermsOfSale() { return import(/* webpackChunkName: "features/about/terms_of_sale" */'../../about/terms_of_sale') }
export function TermsOfService() { return import(/* webpackChunkName: "features/about/terms_of_service" */'../../about/terms_of_service') }
export function TrendsPanel() { return import(/* webpackChunkName: "components/trends_panel" */'../../../components/panel/trends_panel') }
export function UnauthorizedModal() { return import(/* webpackChunkName: "components/unauthorized_modal" */'../../../components/modal/unauthorized_modal') }
export function UnfollowModal() { return import(/* webpackChunkName: "components/unfollow_modal" */'../../../components/modal/unfollow_modal') }
export function UserInfoPopover() { return import(/* webpackChunkName: "components/user_info_popover" */'../../../components/popover/user_info_popover') }
export function UserPanel() { return import(/* webpackChunkName: "components/user_panel" */'../../../components/panel/user_panel') }
export function VerifiedAccountsPanel() { return import(/* webpackChunkName: "components/verified_accounts_panel" */'../../../components/panel/verified_accounts_panel') }
export function Video() { return import(/* webpackChunkName: "components/video" */'../../../components/video') }
export function VideoModal() { return import(/* webpackChunkName: "components/video_modal" */'../../../components/modal/video_modal') }
export function VideoStatsPopover() { return import(/* webpackChunkName: "components/video_stats_popover" */'../../../components/popover/video_stats_popover') }
export function WhoToFollowPanel() { return import(/* webpackChunkName: "components/who_to_follow_panel" */'../../../components/panel/who_to_follow_panel') }

40
app/javascript/gabsocial/features/ui/util/wrapped_bundle.js Normal file
View File

@ -0,0 +1,40 @@
import Bundle from './bundle'
class WrappedBundle extends PureComponent {
render() {
const {
component,
componentParams,
errorComponent,
loadingComponent,
} = this.props
console.log("WrappedBundle:", this.props)
return (
<Bundle
fetchComponent={component}
loading={loadingComponent}
error={errorComponent}
>
{
Component =>
(
<Component {...componentParams} />
)
}
</Bundle>
)
}
}
WrappedBundle.propTypes = {
component: PropTypes.func.isRequired,
componentParams: PropTypes.object,
errorComponent: PropTypes.object,
loadingComponent: PropTypes.object,
}
export default WrappedBundle

17
app/javascript/gabsocial/layouts/about_layout.js
View File

@ -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 />

15
app/javascript/gabsocial/layouts/explore_layout.js
View File

@ -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>

21
app/javascript/gabsocial/layouts/group_layout.js
View File

@ -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>

31
app/javascript/gabsocial/layouts/profile_layout.js
View File

@ -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>

7
app/javascript/gabsocial/layouts/settings_layout.js
View File

@ -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

14
app/javascript/gabsocial/pages/basic_page.js
View File

@ -1,8 +1,10 @@
import PageTitle from '../features/ui/util/page_title'
import DefaultLayout from '../layouts/default_layout'
import LinkFooter from '../components/link_footer'
import TrendsPanel from '../components/panel/trends_panel'
import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
import {
LinkFooter,
TrendsPanel,
WhoToFollowPanel,
} from '../features/ui/util/async_components'
export default class BasicPage extends PureComponent {
@ -26,9 +28,9 @@ export default class BasicPage extends PureComponent {
title={title}
page={page}
layout={[
<TrendsPanel key='basic-page-trends-panel' />,
<WhoToFollowPanel key='basic-page-wtf-panel' />,
<LinkFooter key='basic-page-link-footer' />,
TrendsPanel,
WhoToFollowPanel,
LinkFooter,
]}
>
<PageTitle path={title} />

22
app/javascript/gabsocial/pages/community_page.js
View File

@ -1,12 +1,14 @@
import { defineMessages, injectIntl } from 'react-intl'
import { openModal } from '../actions/modal'
import PageTitle from '../features/ui/util/page_title'
import GroupSidebarPanel from '../components/panel/groups_panel'
import LinkFooter from '../components/link_footer'
import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
import ProgressPanel from '../components/panel/progress_panel'
import TrendsPanel from '../components/panel/trends_panel'
import DefaultLayout from '../layouts/default_layout'
import {
LinkFooter,
GroupSidebarPanel,
ProgressPanel,
TrendsPanel,
WhoToFollowPanel,
} from '../features/ui/util/async_components'
const messages = defineMessages({
community: { 'id': 'column.community', 'defaultMessage': 'Community feed' },
@ -45,11 +47,11 @@ class CommunityPage extends PureComponent {
},
]}
layout={[
<ProgressPanel key='community-page-progress-panel' />,
<TrendsPanel key='community-page-progress-panel' />,
<WhoToFollowPanel key='community-page-wtf-panel' />,
<GroupSidebarPanel key='community-page-groups-panel' />,
<LinkFooter key='community-page-link-footer' />,
ProgressPanel,
TrendsPanel,
WhoToFollowPanel,
GroupSidebarPanel,
LinkFooter,
]}
>
<PageTitle path={title} />

11
app/javascript/gabsocial/pages/groups_page.js
View File

@ -2,11 +2,14 @@ import { Fragment } from 'react'
import { me } from '../initial_state'
import { defineMessages, injectIntl } from 'react-intl'
import PageTitle from '../features/ui/util/page_title'
import LinkFooter from '../components/link_footer'
import Text from '../components/text'
import GroupsPanel from '../components/panel/groups_panel'
import DefaultLayout from '../layouts/default_layout'
import GroupsCollection from '../features/groups_collection'
import WrappedBundle from '../features/ui/util/wrapped_bundle'
import {
GroupsPanel,
LinkFooter,
} from '../features/ui/util/async_components'
const messages = defineMessages({
groups: { id: 'groups', defaultMessage: 'Groups' },
@ -80,9 +83,9 @@ class GroupsPage extends PureComponent {
const layout = []
if (!!me) {
layout.push(<GroupsPanel key='groups-page-groups-panel' groupType='member' />)
layout.push(<WrappedBundle component={GroupsPanel} componentParams={{ groupType: 'member' }} />)
}
layout.push(<LinkFooter key='groups-page-link-footer' />)
layout.push(LinkFooter)
return (
<DefaultLayout

18
app/javascript/gabsocial/pages/hashtag_page.js
View File

@ -2,11 +2,13 @@ import { openModal } from '../actions/modal'
import { defineMessages, injectIntl } from 'react-intl'
import isObject from 'lodash.isobject'
import PageTitle from '../features/ui/util/page_title'
import LinkFooter from '../components/link_footer'
import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
import ProgressPanel from '../components/panel/progress_panel'
import TrendsPanel from '../components/panel/trends_panel'
import DefaultLayout from '../layouts/default_layout'
import {
LinkFooter,
ProgressPanel,
TrendsPanel,
WhoToFollowPanel,
} from '../features/ui/util/async_components'
const messages = defineMessages({
hashtag: { id: 'hashtag', defaultMessage: 'Hashtag' },
@ -54,10 +56,10 @@ class HashtagPage extends PureComponent {
},
]}
layout={[
<ProgressPanel key='hashtag-page-progress-panel' />,
<TrendsPanel key='hashtag-page-trends-panel' />,
<WhoToFollowPanel key='hashtag-page-wtf-panel' />,
<LinkFooter key='hashtag-page-link-footer' />,
ProgressPanel,
TrendsPanel,
WhoToFollowPanel,
LinkFooter,
]}
>
<PageTitle path={intl.formatMessage(messages.hashtag)} />

39
app/javascript/gabsocial/pages/home_page.js
View File

@ -4,19 +4,22 @@ import { defineMessages, injectIntl } from 'react-intl'
import { MODAL_HOME_TIMELINE_SETTINGS } from '../constants'
import { me } from '../initial_state'
import PageTitle from '../features/ui/util/page_title'
import GroupsPanel from '../components/panel/groups_panel'
import ListsPanel from '../components/panel/lists_panel'
import LinkFooter from '../components/link_footer'
import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
import ShopPanel from '../components/panel/shop_panel'
import ProgressPanel from '../components/panel/progress_panel'
import ProPanel from '../components/panel/pro_panel'
import UserPanel from '../components/panel/user_panel'
import TrendsPanel from '../components/panel/trends_panel'
import DefaultLayout from '../layouts/default_layout'
import TimelineComposeBlock from '../components/timeline_compose_block'
import Divider from '../components/divider'
import PullToRefresher from '../components/pull_to_refresher'
import WrappedBundle from '../features/ui/util/wrapped_bundle'
import {
UserPanel,
GroupsPanel,
LinkFooter,
ListsPanel,
TrendsPanel,
WhoToFollowPanel,
ProPanel,
ShopPanel,
ProgressPanel,
} from '../features/ui/util/async_components'
const messages = defineMessages({
home: { id: 'home', defaultMessage: 'Home' },
@ -99,15 +102,15 @@ class HomePage extends PureComponent {
},
]}
layout={[
<UserPanel key='home-page-user-panel' />,
<ProgressPanel key='home-page-progress-panel' />,
<ProPanel isPro={isPro} key='home-page-pro-panel' />,
<TrendsPanel key='home-page-trends-panel' />,
<ShopPanel isLazy shouldLoad={lazyLoaded} key='home-page-shop-panel' />,
<ListsPanel isLazy shouldLoad={lazyLoaded} key='home-page-lists-panel' />,
<WhoToFollowPanel isLazy shouldLoad={lazyLoaded} key='home-page-wtf-panel' />,
<GroupsPanel isLazy shouldLoad={lazyLoaded} key='home-page-groups-panel' />,
<LinkFooter key='home-page-link-footer' />,
UserPanel,
ProgressPanel,
<WrappedBundle component={ProPanel} componentParams={{ isPro: isPro }} />,
TrendsPanel,
<WrappedBundle component={ShopPanel} componentParams={{ isLazy: true, shouldLoad: lazyLoaded }} />,
<WrappedBundle component={ListsPanel} componentParams={{ isLazy: true, shouldLoad: lazyLoaded }} />,
<WrappedBundle component={WhoToFollowPanel} componentParams={{ isLazy: true, shouldLoad: lazyLoaded }} />,
<WrappedBundle component={GroupsPanel} componentParams={{ isLazy: true, shouldLoad: lazyLoaded, groupType: 'member' }} />,
LinkFooter,
]}
>

19
app/javascript/gabsocial/pages/list_page.js
View File

@ -7,11 +7,14 @@ import {
// MODAL_LIST_TIMELINE_SETTINGS,
} from '../constants'
import PageTitle from '../features/ui/util/page_title'
import LinkFooter from '../components/link_footer'
import DefaultLayout from '../layouts/default_layout'
import ListDetailsPanel from '../components/panel/list_details_panel'
import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
import TrendsPanel from '../components/panel/trends_panel'
import WrappedBundle from '../features/ui/util/wrapped_bundle'
import {
ListDetailsPanel,
LinkFooter,
TrendsPanel,
WhoToFollowPanel,
} from '../features/ui/util/async_components'
const messages = defineMessages({
list: { id: 'list', defaultMessage: 'List' },
@ -77,10 +80,10 @@ class ListPage extends ImmutablePureComponent {
// },
]}
layout={[
<ListDetailsPanel list={list} onEdit={this.handleOnOpenListEditModal} key='list-page-list-panel' />,
<TrendsPanel key='list-page-trends-panel' />,
<WhoToFollowPanel key='list-page-wtf-panel' />,
<LinkFooter key='list-page-link-footer' />,
<WrappedBundle component={ListDetailsPanel} componentParams={{ list: list, onEdit: this.handleOnOpenListEditModal }} />,
TrendsPanel,
WhoToFollowPanel,
LinkFooter,
]}
>
<PageTitle path={[title, intl.formatMessage(messages.list)]} />

14
app/javascript/gabsocial/pages/lists_page.js
View File

@ -1,10 +1,12 @@
import { openModal } from '../actions/modal'
import { defineMessages, injectIntl } from 'react-intl'
import PageTitle from '../features/ui/util/page_title'
import LinkFooter from '../components/link_footer'
import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
import TrendsPanel from '../components/panel/trends_panel'
import DefaultLayout from '../layouts/default_layout'
import {
LinkFooter,
TrendsPanel,
WhoToFollowPanel,
} from '../features/ui/util/async_components'
const messages = defineMessages({
lists: { id: 'lists', defaultMessage: 'Lists' },
@ -45,9 +47,9 @@ class ListsPage extends PureComponent {
},
]}
layout={[
<TrendsPanel key='lists-page-trends-panel' />,
<WhoToFollowPanel key='lists-page-wtf-panel' />,
<LinkFooter key='lists-page-link-footer' />,
TrendsPanel,
WhoToFollowPanel,
LinkFooter,
]}
showBackBtn
>

14
app/javascript/gabsocial/pages/modal_page.js
View File

@ -1,8 +1,10 @@
import PageTitle from '../features/ui/util/page_title'
import LinkFooter from '../components/link_footer'
import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
import Block from '../components/block'
import DefaultLayout from '../layouts/default_layout'
import {
LinkFooter,
WhoToFollowPanel,
} from '../features/ui/util/async_components'
export default class ModalPage extends PureComponent {
@ -23,11 +25,11 @@ export default class ModalPage extends PureComponent {
<DefaultLayout
title={title}
page={page}
layout={[
<WhoToFollowPanel key='modal-page-wtf-panel' />,
<LinkFooter key='search-page-link-footer' />,
]}
showBackBtn
layout={[
WhoToFollowPanel,
LinkFooter,
]}
>
<PageTitle path={title} />

22
app/javascript/gabsocial/pages/news_page.js
View File

@ -1,10 +1,12 @@
import PageTitle from '../features/ui/util/page_title'
import DefaultLayout from '../layouts/default_layout'
import ProgressPanel from '../components/panel/progress_panel'
import VerifiedAccountsPanel from '../components/panel/verified_accounts_panel'
import ShopPanel from '../components/panel/shop_panel'
import SignupPanel from '../components/panel/sign_up_panel'
import LinkFooter from '../components/link_footer'
import {
LinkFooter,
ProgressPanel,
ShopPanel,
SignUpPanel,
VerifiedAccountsPanel,
} from '../features/ui/util/async_components'
export default class NewsPage extends PureComponent {
@ -23,11 +25,11 @@ export default class NewsPage extends PureComponent {
noComposeButton
showBackBtn
layout={[
<SignupPanel key='explore-page-signup-panel' />,
<ProgressPanel key='explore-page-progress-panel' />,
<VerifiedAccountsPanel key='explore-page-verified-panel' />,
<ShopPanel key='explore-page-shop-panel' />,
<LinkFooter key='explore-page-link-footer' />,
SignUpPanel,
ProgressPanel,
VerifiedAccountsPanel,
ShopPanel,
LinkFooter,
]}
>
<PageTitle path={title} />

18
app/javascript/gabsocial/pages/notifications_page.js
View File

@ -4,11 +4,13 @@ import { setFilter } from '../actions/notifications'
import { me } from '../initial_state'
import { NOTIFICATION_FILTERS } from '../constants'
import PageTitle from '../features/ui/util/page_title'
import LinkFooter from '../components/link_footer'
import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
import NotificationFilterPanel from '../components/panel/notification_filter_panel'
import TrendsPanel from '../components/panel/trends_panel'
import DefaultLayout from '../layouts/default_layout'
import {
LinkFooter,
NotificationFilterPanel,
TrendsPanel,
WhoToFollowPanel,
} from '../features/ui/util/async_components'
const messages = defineMessages({
notifications: { id: 'tabs_bar.notifications', defaultMessage: 'Notifications' },
@ -88,10 +90,10 @@ class NotificationsPage extends PureComponent {
title={intl.formatMessage(messages.notifications)}
page='notifications'
layout={[
<NotificationFilterPanel key='notification-page-filter-panel' />,
<TrendsPanel key='notification-page-trends-panel' />,
<WhoToFollowPanel key='notification-page-wtf-panel' />,
<LinkFooter key='notification-page-link-footer' />,
NotificationFilterPanel,
TrendsPanel,
WhoToFollowPanel,
LinkFooter,
]}
tabs={tabs}
>

14
app/javascript/gabsocial/pages/pro_page.js
View File

@ -1,9 +1,11 @@
import { defineMessages, injectIntl } from 'react-intl'
import PageTitle from '../features/ui/util/page_title'
import LinkFooter from '../components/link_footer'
import VerifiedAccountsPanel from '../components/panel/verified_accounts_panel'
import ProgressPanel from '../components/panel/progress_panel'
import DefaultLayout from '../layouts/default_layout'
import {
LinkFooter,
VerifiedAccountsPanel,
ProgressPanel,
} from '../features/ui/util/async_components'
const messages = defineMessages({
title: { 'id': 'column.pro', 'defaultMessage': 'Pro feed' },
@ -28,9 +30,9 @@ class ProPage extends PureComponent {
title={title}
page='pro'
layout={[
<ProgressPanel key='pro-page-progress-panel' />,
<VerifiedAccountsPanel key='pro-page-verified-panel' />,
<LinkFooter key='pro-page-link-footer' />,
ProgressPanel,
VerifiedAccountsPanel,
LinkFooter,
]}
>
<PageTitle path={title} />

18
app/javascript/gabsocial/pages/search_page.js
View File

@ -2,12 +2,14 @@ import { defineMessages, injectIntl } from 'react-intl'
import { BREAKPOINT_EXTRA_SMALL } from '../constants'
import Responsive from '../features/ui/util/responsive_component'
import PageTitle from '../features/ui/util/page_title'
import LinkFooter from '../components/link_footer'
import SearchFilterPanel from '../components/panel/search_filter_panel'
import TrendsPanel from '../components/panel/trends_panel'
import SignupPanel from '../components/panel/sign_up_panel'
import Search from '../components/search'
import Layout from '../layouts/layout'
import {
LinkFooter,
TrendsPanel,
SearchFilterPanel,
SignUpPanel,
} from '../features/ui/util/async_components'
const messages = defineMessages({
search: { id: 'search', defaultMessage: 'Search' },
@ -65,10 +67,10 @@ class SearchPage extends PureComponent {
tabs={tabs}
page={`search.${qos}`}
layout={[
<SignupPanel key='search-page-signup-panel' />,
<SearchFilterPanel key='search-page-search-panel' />,
<TrendsPanel key='search-page-trends-panel' />,
<LinkFooter key='search-page-link-footer' />,
SignUpPanel,
SearchFilterPanel,
TrendsPanel,
LinkFooter,
]}
>
<PageTitle path={title} />

14
app/javascript/gabsocial/pages/shortcuts_page.js
View File

@ -2,10 +2,12 @@ import { defineMessages, injectIntl } from 'react-intl'
import { openModal } from '../actions/modal'
import { MODAL_EDIT_SHORTCUTS } from '../constants'
import PageTitle from '../features/ui/util/page_title'
import LinkFooter from '../components/link_footer'
import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
import TrendsPanel from '../components/panel/trends_panel'
import DefaultLayout from '../layouts/default_layout'
import {
LinkFooter,
TrendsPanel,
WhoToFollowPanel,
} from '../features/ui/util/async_components'
const messages = defineMessages({
shortcuts: { id: 'shortcuts', defaultMessage: 'Shortcuts' },
@ -47,9 +49,9 @@ class ShortcutsPage extends PureComponent {
},
]}
layout={[
<TrendsPanel key='shortcuts-page-trends-panel' />,
<WhoToFollowPanel key='shortcuts-page-wtf-panel' />,
<LinkFooter key='shortcuts-page-link-footer' />,
TrendsPanel,
WhoToFollowPanel,
LinkFooter,
]}
>
<PageTitle path={title} />