From 014e476b5d8a4ca69af226edd6b7e2dea0d65917 Mon Sep 17 00:00:00 2001 From: mgabdev <> Date: Fri, 14 Aug 2020 12:45:59 -0500 Subject: [PATCH] Updated pages, layout component structures MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit • Updated: - pages, layout component structures --- .../gabsocial/layouts/default_layout.js | 28 ++-- .../gabsocial/layouts/group_layout.js | 30 ++-- app/javascript/gabsocial/layouts/layout.js | 34 +++-- app/javascript/gabsocial/pages/about_page.js | 23 ++- app/javascript/gabsocial/pages/basic_page.js | 18 ++- .../gabsocial/pages/community_page.js | 38 +++-- app/javascript/gabsocial/pages/error_page.js | 4 +- .../gabsocial/pages/explore_page.js | 21 ++- app/javascript/gabsocial/pages/group_page.js | 58 +++---- app/javascript/gabsocial/pages/groups_page.js | 67 ++++----- .../gabsocial/pages/hashtag_page.js | 52 ++++--- app/javascript/gabsocial/pages/home_page.js | 64 ++++---- .../gabsocial/pages/introduction_page.js | 4 +- app/javascript/gabsocial/pages/list_page.js | 78 ++++------ app/javascript/gabsocial/pages/lists_page.js | 50 +++--- app/javascript/gabsocial/pages/modal_page.js | 18 ++- app/javascript/gabsocial/pages/news_page.js | 16 +- .../gabsocial/pages/notifications_page.js | 142 +++++++++--------- app/javascript/gabsocial/pages/pro_page.js | 25 +-- .../gabsocial/pages/profile_page.js | 70 ++++----- app/javascript/gabsocial/pages/search_page.js | 63 ++++---- .../gabsocial/pages/settings_page.js | 24 ++- .../gabsocial/pages/shortcuts_page.js | 34 ++--- 23 files changed, 461 insertions(+), 500 deletions(-) diff --git a/app/javascript/gabsocial/layouts/default_layout.js b/app/javascript/gabsocial/layouts/default_layout.js index 5f9511f5..09c4ab2f 100644 --- a/app/javascript/gabsocial/layouts/default_layout.js +++ b/app/javascript/gabsocial/layouts/default_layout.js @@ -1,18 +1,6 @@ import Layout from './layout' -export default class DefaultLayout extends PureComponent { - - static propTypes = { - actions: PropTypes.array, - children: PropTypes.node.isRequired, - layout: PropTypes.object, - noComposeButton: PropTypes.bool, - noRightSidebar: PropTypes.bool, - page: PropTypes.string, - showBackBtn: PropTypes.bool, - tabs: PropTypes.array, - title: PropTypes.string.isRequired, - } +class DefaultLayout extends PureComponent { render() { const { @@ -44,3 +32,17 @@ export default class DefaultLayout extends PureComponent { } } + +DefaultLayout.propTypes = { + actions: PropTypes.array, + children: PropTypes.node.isRequired, + layout: PropTypes.object, + noComposeButton: PropTypes.bool, + noRightSidebar: PropTypes.bool, + page: PropTypes.string, + showBackBtn: PropTypes.bool, + tabs: PropTypes.array, + title: PropTypes.string.isRequired, +} + +export default DefaultLayout \ No newline at end of file diff --git a/app/javascript/gabsocial/layouts/group_layout.js b/app/javascript/gabsocial/layouts/group_layout.js index fe29a3fe..7096f502 100644 --- a/app/javascript/gabsocial/layouts/group_layout.js +++ b/app/javascript/gabsocial/layouts/group_layout.js @@ -14,37 +14,21 @@ import { GroupInfoPanel, } from '../features/ui/util/async_components' -export default class GroupLayout extends ImmutablePureComponent { - - static propTypes = { - actions: PropTypes.array, - children: PropTypes.node, - group: ImmutablePropTypes.map, - groupId: PropTypes.string, - isTimeline: PropTypes.bool, - layout: PropTypes.object, - relationships: ImmutablePropTypes.map, - showBackBtn: PropTypes.bool, - title: PropTypes.string, - } +class GroupLayout extends ImmutablePureComponent { render() { const { - actions, children, group, groupId, - isTimeline, relationships, - showBackBtn, title, } = this.props return ( @@ -97,3 +81,13 @@ export default class GroupLayout extends ImmutablePureComponent { } } + +GroupLayout.propTypes = { + children: PropTypes.node, + group: ImmutablePropTypes.map, + groupId: PropTypes.string, + relationships: ImmutablePropTypes.map, + title: PropTypes.string, +} + +export default GroupLayout \ No newline at end of file diff --git a/app/javascript/gabsocial/layouts/layout.js b/app/javascript/gabsocial/layouts/layout.js index 4f156c0b..799f8532 100644 --- a/app/javascript/gabsocial/layouts/layout.js +++ b/app/javascript/gabsocial/layouts/layout.js @@ -20,22 +20,7 @@ import { SidebarXS, } from '../features/ui/util/async_components' -export default class Layout extends PureComponent { - - static propTypes = { - actions: PropTypes.array, - children: PropTypes.node, - layout: PropTypes.array, - noComposeButton: PropTypes.bool, - noRightSidebar: PropTypes.bool, - noSidebar: PropTypes.bool, - page: PropTypes.string, - showBackBtn: PropTypes.bool, - showLinkFooterInSidebar: PropTypes.bool, - showGlobalFooter: PropTypes.bool, - tabs: PropTypes.array, - title: PropTypes.string, - } +class Layout extends PureComponent { render() { const { @@ -176,3 +161,20 @@ export default class Layout extends PureComponent { } } + +Layout.propTypes = { + actions: PropTypes.array, + children: PropTypes.node, + layout: PropTypes.array, + noComposeButton: PropTypes.bool, + noRightSidebar: PropTypes.bool, + noSidebar: PropTypes.bool, + page: PropTypes.string, + showBackBtn: PropTypes.bool, + showLinkFooterInSidebar: PropTypes.bool, + showGlobalFooter: PropTypes.bool, + tabs: PropTypes.array, + title: PropTypes.string, +} + +export default Layout \ No newline at end of file diff --git a/app/javascript/gabsocial/pages/about_page.js b/app/javascript/gabsocial/pages/about_page.js index eb0f6ac9..0e0f5ef9 100644 --- a/app/javascript/gabsocial/pages/about_page.js +++ b/app/javascript/gabsocial/pages/about_page.js @@ -1,27 +1,24 @@ import PageTitle from '../features/ui/util/page_title' import AboutLayout from '../layouts/about_layout' -export default class AboutPage extends PureComponent { - - static propTypes = { - title: PropTypes.string.isRequired, - children: PropTypes.node.isRequired, - } +class AboutPage extends PureComponent { render() { const { children, title } = this.props return ( - + {children} ) } -} \ No newline at end of file +} + +AboutPage.propTypes = { + title: PropTypes.string.isRequired, + children: PropTypes.node.isRequired, +} + +export default AboutPage \ No newline at end of file diff --git a/app/javascript/gabsocial/pages/basic_page.js b/app/javascript/gabsocial/pages/basic_page.js index b926cb5b..8de7f8ae 100644 --- a/app/javascript/gabsocial/pages/basic_page.js +++ b/app/javascript/gabsocial/pages/basic_page.js @@ -6,13 +6,7 @@ import { WhoToFollowPanel, } from '../features/ui/util/async_components' -export default class BasicPage extends PureComponent { - - static propTypes = { - children: PropTypes.node.isRequired, - page: PropTypes.string.isRequired, - title: PropTypes.string.isRequired, - } +class BasicPage extends PureComponent { render() { const { @@ -39,4 +33,12 @@ export default class BasicPage extends PureComponent { ) } -} \ No newline at end of file +} + +BasicPage.propTypes = { + children: PropTypes.node.isRequired, + page: PropTypes.string.isRequired, + title: PropTypes.string.isRequired, +} + +export default BasicPage \ No newline at end of file diff --git a/app/javascript/gabsocial/pages/community_page.js b/app/javascript/gabsocial/pages/community_page.js index 242174bf..d04a54c9 100644 --- a/app/javascript/gabsocial/pages/community_page.js +++ b/app/javascript/gabsocial/pages/community_page.js @@ -2,6 +2,7 @@ import { defineMessages, injectIntl } from 'react-intl' import { openModal } from '../actions/modal' import PageTitle from '../features/ui/util/page_title' import DefaultLayout from '../layouts/default_layout' +import { MODAL_COMMUNITY_TIMELINE_SETTINGS } from '../constants' import { LinkFooter, GroupsPanel, @@ -10,29 +11,14 @@ import { WhoToFollowPanel, } from '../features/ui/util/async_components' -const messages = defineMessages({ - community: { 'id': 'column.community', 'defaultMessage': 'Community feed' }, -}) - -const mapDispatchToProps = (dispatch) => ({ - onOpenCommunityPageSettingsModal() { - dispatch(openModal('COMMUNITY_TIMELINE_SETTINGS')) - }, -}) - -export default -@injectIntl -@connect(null, mapDispatchToProps) class CommunityPage extends PureComponent { - static propTypes = { - intl: PropTypes.object.isRequired, - children: PropTypes.node.isRequired, - onOpenCommunityPageSettingsModal: PropTypes.func.isRequired, + onOpenCommunityPageSettingsModal = () => { + this.props.dispatch(openModal(MODAL_COMMUNITY_TIMELINE_SETTINGS)) } render() { - const { intl, children, onOpenCommunityPageSettingsModal } = this.props + const { children, intl } = this.props const title = intl.formatMessage(messages.community) @@ -43,7 +29,7 @@ class CommunityPage extends PureComponent { actions={[ { icon: 'ellipsis', - onClick: onOpenCommunityPageSettingsModal, + onClick: this.onOpenCommunityPageSettingsModal, }, ]} layout={[ @@ -59,4 +45,16 @@ class CommunityPage extends PureComponent { ) } -} \ No newline at end of file +} + +const messages = defineMessages({ + community: { 'id': 'column.community', 'defaultMessage': 'Community feed' }, +}) + +CommunityPage.propTypes = { + children: PropTypes.node.isRequired, + dispatch: PropTypes.func.isRequired, + intl: PropTypes.object.isRequired, +} + +export default injectIntl(connect()(CommunityPage)) diff --git a/app/javascript/gabsocial/pages/error_page.js b/app/javascript/gabsocial/pages/error_page.js index 07d84e85..b911ae2d 100644 --- a/app/javascript/gabsocial/pages/error_page.js +++ b/app/javascript/gabsocial/pages/error_page.js @@ -1,9 +1,7 @@ export default class ErrorPage extends PureComponent { render() { - const { children } = this.props; - - // : todo : + const { children } = this.props return (
diff --git a/app/javascript/gabsocial/pages/explore_page.js b/app/javascript/gabsocial/pages/explore_page.js index 15dece3d..5664dd10 100644 --- a/app/javascript/gabsocial/pages/explore_page.js +++ b/app/javascript/gabsocial/pages/explore_page.js @@ -1,25 +1,24 @@ import PageTitle from '../features/ui/util/page_title' import ExploreLayout from '../layouts/explore_layout' -export default class ExplorePage extends PureComponent { - - static propTypes = { - title: PropTypes.string.isRequired, - children: PropTypes.node.isRequired, - } +class ExplorePage extends PureComponent { render() { const { children, title } = this.props return ( - + {children} ) } -} \ No newline at end of file +} + +ExplorePage.propTypes = { + title: PropTypes.string.isRequired, + children: PropTypes.node.isRequired, +} + +export default ExplorePage \ No newline at end of file diff --git a/app/javascript/gabsocial/pages/group_page.js b/app/javascript/gabsocial/pages/group_page.js index e010f704..e586a0b1 100644 --- a/app/javascript/gabsocial/pages/group_page.js +++ b/app/javascript/gabsocial/pages/group_page.js @@ -8,39 +8,10 @@ import GroupLayout from '../layouts/group_layout' import TimelineComposeBlock from '../components/timeline_compose_block' import Divider from '../components/divider' -const messages = defineMessages({ - group: { id: 'group', defaultMessage: 'Group' }, -}) - -const mapStateToProps = (state, { params: { id } }) => ({ - group: state.getIn(['groups', id]), - relationships: state.getIn(['group_relationships', id]), -}) - -const mapDispatchToProps = (dispatch) => ({ - onFetchGroup(groupId) { - dispatch(fetchGroup(groupId)) - }, -}) - -export default -@injectIntl -@connect(mapStateToProps, mapDispatchToProps) class GroupPage extends ImmutablePureComponent { - static propTypes = { - intl: PropTypes.object.isRequired, - group: ImmutablePropTypes.map, - children: PropTypes.node.isRequired, - relationships: ImmutablePropTypes.map, - onFetchGroup: PropTypes.func.isRequired, - sortByValue: PropTypes.string.isRequired, - sortByTopValue: PropTypes.string.isRequired, - } - componentDidMount() { - this.props.onFetchGroup(this.props.params.id) - // this.props.onFetchGroup(this.props.params.slug) + this.props.dispatch(fetchGroup(this.props.params.id)) } render() { @@ -54,15 +25,13 @@ class GroupPage extends ImmutablePureComponent { const groupTitle = !!group ? group.get('title') : '' const groupId = !!group ? group.get('id') : undefined - + return ( @@ -78,4 +47,25 @@ class GroupPage extends ImmutablePureComponent { ) } -} \ No newline at end of file +} + +const messages = defineMessages({ + group: { id: 'group', defaultMessage: 'Group' }, +}) + +const mapStateToProps = (state, { params: { id } }) => ({ + group: state.getIn(['groups', id]), + relationships: state.getIn(['group_relationships', id]), +}) + +GroupPage.propTypes = { + intl: PropTypes.object.isRequired, + group: ImmutablePropTypes.map, + children: PropTypes.node.isRequired, + relationships: ImmutablePropTypes.map, + dispatch: PropTypes.func.isRequired, + sortByValue: PropTypes.string.isRequired, + sortByTopValue: PropTypes.string.isRequired, +} + +export default injectIntl(connect(mapStateToProps)(GroupPage)) \ No newline at end of file diff --git a/app/javascript/gabsocial/pages/groups_page.js b/app/javascript/gabsocial/pages/groups_page.js index 12e7e04f..4d4ed165 100644 --- a/app/javascript/gabsocial/pages/groups_page.js +++ b/app/javascript/gabsocial/pages/groups_page.js @@ -1,4 +1,3 @@ -import { Fragment } from 'react' import { me } from '../initial_state' import { defineMessages, injectIntl } from 'react-intl' import PageTitle from '../features/ui/util/page_title' @@ -11,31 +10,8 @@ import { LinkFooter, } from '../features/ui/util/async_components' -const messages = defineMessages({ - groups: { id: 'groups', defaultMessage: 'Groups' }, - new: { id: 'new', defaultMessage: 'Recently Added Groups' }, - featured: { id: 'featured', defaultMessage: 'Featured Groups' }, - myGroupsTimeline: { id: 'my_groups_timeline', defaultMessage: 'Timeline' }, - myGroups: { id: 'my_groups', defaultMessage: 'My Groups' }, - admin: { id: 'admin', defaultMessage: 'Admin' }, -}) - -const mapStateToProps = (state) => ({ - isPro: state.getIn(['accounts', me, 'is_pro']), -}) - -export default -@injectIntl -@connect(mapStateToProps) class GroupsPage extends PureComponent { - static propTypes = { - activeTab: PropTypes.string.isRequired, - intl: PropTypes.object.isRequired, - children: PropTypes.node.isRequired, - isPro: PropTypes.bool, - } - render() { const { activeTab, @@ -46,13 +22,6 @@ class GroupsPage extends PureComponent { const dontShowChildren = (activeTab === 'timeline' && !me) - const actions = isPro ? [ - { - icon: 'add', - to: '/groups/create', - }, - ] : [] - const tabs = !!me ? [ { title: intl.formatMessage(messages.myGroupsTimeline), @@ -80,7 +49,7 @@ class GroupsPage extends PureComponent { } const title = intl.formatMessage(messages.groups) - + const layout = [] if (!!me) { layout.push() @@ -90,14 +59,22 @@ class GroupsPage extends PureComponent { return ( - { !dontShowChildren && children } + { + !dontShowChildren && children + } { dontShowChildren && @@ -108,3 +85,25 @@ class GroupsPage extends PureComponent { } } + +const messages = defineMessages({ + groups: { id: 'groups', defaultMessage: 'Groups' }, + new: { id: 'new', defaultMessage: 'Recently Added Groups' }, + featured: { id: 'featured', defaultMessage: 'Featured Groups' }, + myGroupsTimeline: { id: 'my_groups_timeline', defaultMessage: 'Timeline' }, + myGroups: { id: 'my_groups', defaultMessage: 'My Groups' }, + admin: { id: 'admin', defaultMessage: 'Admin' }, +}) + +const mapStateToProps = (state) => ({ + isPro: state.getIn(['accounts', me, 'is_pro']), +}) + +GroupsPage.propTypes = { + activeTab: PropTypes.string.isRequired, + intl: PropTypes.object.isRequired, + children: PropTypes.node.isRequired, + isPro: PropTypes.bool, +} + +export default injectIntl(connect(mapStateToProps)(GroupsPage)) \ No newline at end of file diff --git a/app/javascript/gabsocial/pages/hashtag_page.js b/app/javascript/gabsocial/pages/hashtag_page.js index 9ebda8e4..a842a89c 100644 --- a/app/javascript/gabsocial/pages/hashtag_page.js +++ b/app/javascript/gabsocial/pages/hashtag_page.js @@ -3,6 +3,7 @@ import { defineMessages, injectIntl } from 'react-intl' import isObject from 'lodash.isobject' import PageTitle from '../features/ui/util/page_title' import DefaultLayout from '../layouts/default_layout' +import { MODAL_HASHTAG_TIMELINE_SETTINGS } from '../constants' import { LinkFooter, ProgressPanel, @@ -10,36 +11,23 @@ import { WhoToFollowPanel, } from '../features/ui/util/async_components' -const messages = defineMessages({ - hashtag: { id: 'hashtag', defaultMessage: 'Hashtag' }, - hashtagTimeline: { id: 'hashtag_timeline', defaultMessage: 'Hashtag timeline' }, -}) - -const mapDispatchToProps = (dispatch) => ({ - onOpenHashtagPageSettingsModal(hashtag) { - dispatch(openModal('HASHTAG_TIMELINE_SETTINGS', { - hashtag, - })) - }, -}) - -export default -@injectIntl -@connect(null, mapDispatchToProps) class HashtagPage extends PureComponent { - static propTypes = { - intl: PropTypes.object.isRequired, - children: PropTypes.node.isRequired, - onOpenHashtagPageSettingsModal: PropTypes.func.isRequired, - params: PropTypes.object.isRequired, + onOpenHashtagPageSettingsModal = () => { + const { params } = this.props + + const hashtag = isObject(params) ? params.id : '' + if (!hashtag) return + + this.props.dispatch(openModal(MODAL_HASHTAG_TIMELINE_SETTINGS, { + hashtag, + })) } render() { const { - intl, children, - onOpenHashtagPageSettingsModal, + intl, params, } = this.props @@ -52,7 +40,7 @@ class HashtagPage extends PureComponent { actions={[ { icon: 'ellipsis', - onClick: onOpenHashtagPageSettingsModal, + onClick: this.onOpenHashtagPageSettingsModal, }, ]} layout={[ @@ -67,4 +55,18 @@ class HashtagPage extends PureComponent { ) } -} \ No newline at end of file +} + +const messages = defineMessages({ + hashtag: { id: 'hashtag', defaultMessage: 'Hashtag' }, + hashtagTimeline: { id: 'hashtag_timeline', defaultMessage: 'Hashtag timeline' }, +}) + +HashtagPage.propTypes = { + children: PropTypes.node.isRequired, + dispatch: PropTypes.func.isRequired, + intl: PropTypes.object.isRequired, + params: PropTypes.object.isRequired, +} + +export default injectIntl(connect()(HashtagPage)) \ No newline at end of file diff --git a/app/javascript/gabsocial/pages/home_page.js b/app/javascript/gabsocial/pages/home_page.js index 8bb66ab3..dbae588d 100644 --- a/app/javascript/gabsocial/pages/home_page.js +++ b/app/javascript/gabsocial/pages/home_page.js @@ -21,34 +21,8 @@ import { ProgressPanel, } from '../features/ui/util/async_components' -const messages = defineMessages({ - home: { id: 'home', defaultMessage: 'Home' }, -}) - -const mapStateToProps = (state) => ({ - totalQueuedItemsCount: state.getIn(['timelines', 'home', 'totalQueuedItemsCount']), - isPro: state.getIn(['accounts', me, 'is_pro']), -}) - -const mapDispatchToProps = (dispatch) => ({ - onOpenHomePageSettingsModal() { - dispatch(openModal(MODAL_HOME_TIMELINE_SETTINGS)) - }, -}) - -export default -@injectIntl -@connect(mapStateToProps, mapDispatchToProps) class HomePage extends PureComponent { - static propTypes = { - children: PropTypes.node.isRequired, - intl: PropTypes.object.isRequired, - onOpenHomePageSettingsModal: PropTypes.func.isRequired, - totalQueuedItemsCount: PropTypes.number.isRequired, - isPro: PropTypes.bool, - } - state = { lazyLoaded: false, } @@ -81,24 +55,29 @@ class HomePage extends PureComponent { trailing: true, }) + onOpenHomePageSettingsModal = () => { + this.props.dispatch(openModal(MODAL_HOME_TIMELINE_SETTINGS)) + } + render() { const { - intl, children, - totalQueuedItemsCount, - onOpenHomePageSettingsModal, + intl, isPro, + totalQueuedItemsCount, } = this.props const { lazyLoaded } = this.state + const title = intl.formatMessage(messages.home) + return ( @@ -130,4 +109,23 @@ class HomePage extends PureComponent { ) } -} \ No newline at end of file +} + +const messages = defineMessages({ + home: { id: 'home', defaultMessage: 'Home' }, +}) + +const mapStateToProps = (state) => ({ + totalQueuedItemsCount: state.getIn(['timelines', 'home', 'totalQueuedItemsCount']), + isPro: state.getIn(['accounts', me, 'is_pro']), +}) + +HomePage.propTypes = { + children: PropTypes.node.isRequired, + dispatch: PropTypes.func.isRequired, + intl: PropTypes.object.isRequired, + isPro: PropTypes.bool, + totalQueuedItemsCount: PropTypes.number.isRequired, +} + +export default injectIntl(connect(mapStateToProps)(HomePage)) \ No newline at end of file diff --git a/app/javascript/gabsocial/pages/introduction_page.js b/app/javascript/gabsocial/pages/introduction_page.js index b98ffda4..087c09d8 100644 --- a/app/javascript/gabsocial/pages/introduction_page.js +++ b/app/javascript/gabsocial/pages/introduction_page.js @@ -4,12 +4,10 @@ import IntroductionLayout from '../layouts/introduction_layout' export default class IntroductionPage extends PureComponent { render() { - const { children } = this.props - return ( - {children} + {this.props.children} ) } diff --git a/app/javascript/gabsocial/pages/list_page.js b/app/javascript/gabsocial/pages/list_page.js index e2d3ea8c..d7f08601 100644 --- a/app/javascript/gabsocial/pages/list_page.js +++ b/app/javascript/gabsocial/pages/list_page.js @@ -4,7 +4,6 @@ import { defineMessages, injectIntl } from 'react-intl' import { openModal } from '../actions/modal' import { MODAL_LIST_EDITOR, - // MODAL_LIST_TIMELINE_SETTINGS, } from '../constants' import PageTitle from '../features/ui/util/page_title' import DefaultLayout from '../layouts/default_layout' @@ -16,68 +15,38 @@ import { WhoToFollowPanel, } from '../features/ui/util/async_components' -const messages = defineMessages({ - list: { id: 'list', defaultMessage: 'List' }, -}) - -const mapStateToProps = (state, props) => ({ - list: state.getIn(['lists', props.params.id]), -}) - -const mapDispatchToProps = (dispatch) => ({ - onOpenListEditModal(list) { - if (!list) return - const listId = list.get('id') - dispatch(openModal(MODAL_LIST_EDITOR, { id: listId })) - }, - // : todo : - // onOpenListTimelineSettingsModal() { - // dispatch(openModal(MODAL_LIST_TIMELINE_SETTINGS)) - // }, -}) - -export default -@injectIntl -@connect(mapStateToProps, mapDispatchToProps) class ListPage extends ImmutablePureComponent { - - static propTypes = { - intl: PropTypes.object.isRequired, - list: ImmutablePropTypes.map, - children: PropTypes.node.isRequired, - onOpenListEditModal: PropTypes.func.isRequired, - // onOpenListTimelineSettingsModal: PropTypes.func.isRequired, - } - handleOnOpenListEditModal = () => { - this.props.onOpenListEditModal(this.props.list) + onOpenListEditModal = () => { + const { list } = this.props + + if (!list) return + + this.props.dispatch(openModal(MODAL_LIST_EDITOR, { + id: list.get('id'), + })) } render() { const { - intl, children, + intl, list, - onOpenListEditModal, - // onOpenListTimelineSettingsModal } = this.props - const title = !!list ? list.get('title') : '' + const listTitle = !!list ? list.get('title') : '' + const title = intl.formatMessage(messages.list) return ( , @@ -86,9 +55,26 @@ class ListPage extends ImmutablePureComponent { LinkFooter, ]} > - + { children } ) } -} \ No newline at end of file +} + +const messages = defineMessages({ + list: { id: 'list', defaultMessage: 'List' }, +}) + +const mapStateToProps = (state, props) => ({ + list: state.getIn(['lists', props.params.id]), +}) + +ListPage.propTypes = { + children: PropTypes.node.isRequired, + dispatch: PropTypes.func.isRequired, + intl: PropTypes.object.isRequired, + list: ImmutablePropTypes.map, +} + +export default injectIntl(connect(mapStateToProps)(ListPage)) \ No newline at end of file diff --git a/app/javascript/gabsocial/pages/lists_page.js b/app/javascript/gabsocial/pages/lists_page.js index febce807..8e6ade00 100644 --- a/app/javascript/gabsocial/pages/lists_page.js +++ b/app/javascript/gabsocial/pages/lists_page.js @@ -2,48 +2,33 @@ import { openModal } from '../actions/modal' import { defineMessages, injectIntl } from 'react-intl' import PageTitle from '../features/ui/util/page_title' import DefaultLayout from '../layouts/default_layout' +import { MODAL_LIST_CREATE } from '../constants' import { LinkFooter, TrendsPanel, WhoToFollowPanel, } from '../features/ui/util/async_components' -const messages = defineMessages({ - lists: { id: 'lists', defaultMessage: 'Lists' }, -}) - -const mapDispatchToProps = (dispatch) => ({ - onOpenListCreateModal() { - dispatch(openModal('LIST_CREATE')) - }, -}) - -export default -@injectIntl -@connect(null, mapDispatchToProps) class ListsPage extends PureComponent { - static propTypes = { - intl: PropTypes.object.isRequired, - children: PropTypes.node.isRequired, - onOpenListCreateModal: PropTypes.func.isRequired, + onOpenListCreateModal = () => { + this.props.dispatch(openModal(MODAL_LIST_CREATE)) } render() { - const { - intl, - children, - onOpenListCreateModal, - } = this.props + const { children, intl } = this.props + + const title = intl.formatMessage(messages.lists) return ( - + {children} ) } -} \ No newline at end of file +} + +const messages = defineMessages({ + lists: { id: 'lists', defaultMessage: 'Lists' }, +}) + +ListsPage.propTypes = { + intl: PropTypes.object.isRequired, + children: PropTypes.node.isRequired, + dispatch: PropTypes.func.isRequired, +} + +export default injectIntl(connect()(ListsPage)) \ No newline at end of file diff --git a/app/javascript/gabsocial/pages/modal_page.js b/app/javascript/gabsocial/pages/modal_page.js index 052a4d92..37e1da97 100644 --- a/app/javascript/gabsocial/pages/modal_page.js +++ b/app/javascript/gabsocial/pages/modal_page.js @@ -6,13 +6,7 @@ import { WhoToFollowPanel, } from '../features/ui/util/async_components' -export default class ModalPage extends PureComponent { - - static propTypes = { - title: PropTypes.string, - page: PropTypes.string, - children: PropTypes.node, - } +class ModalPage extends PureComponent { render() { const { @@ -42,4 +36,12 @@ export default class ModalPage extends PureComponent { ) } -} \ No newline at end of file +} + +ModalPage.propTypes = { + title: PropTypes.string, + page: PropTypes.string, + children: PropTypes.node, +} + +export default ModalPage \ No newline at end of file diff --git a/app/javascript/gabsocial/pages/news_page.js b/app/javascript/gabsocial/pages/news_page.js index 632adaad..cc59df66 100644 --- a/app/javascript/gabsocial/pages/news_page.js +++ b/app/javascript/gabsocial/pages/news_page.js @@ -8,19 +8,14 @@ import { VerifiedAccountsPanel, } from '../features/ui/util/async_components' -export default class NewsPage extends PureComponent { - - static propTypes = { - title: PropTypes.string.isRequired, - children: PropTypes.node.isRequired, - } +class NewsPage extends PureComponent { render() { const { children, title } = this.props return ( -1) { + filters.splice(filters.indexOf('follow_requests')) + } + + const tabs = filters.map((filter) => ({ + title: intl.formatMessage(messages[filter]), + onClick: () => this.onChangeActiveFilter(filter), + active: selectedFilter.toLowerCase() === filter.toLowerCase(), + })) + + const title = intl.formatMessage(messages.notifications) + + return ( + + + {children} + + ) + } +} + const messages = defineMessages({ notifications: { id: 'tabs_bar.notifications', defaultMessage: 'Notifications' }, mention: { id: 'notifications.filter.mentions', defaultMessage: 'Mentions' }, @@ -29,80 +84,17 @@ const mapStateToProps = (state) => ({ locked: !!state.getIn(['accounts', me, 'locked']), }) -const mapDispatchToProps = (dispatch) => ({ - setFilter(value) { - dispatch(setFilter('active', value)) - }, -}) +NotificationsPage.contextTypes = { + router: PropTypes.object.isRequired, +} -export default -@injectIntl -@connect(mapStateToProps, mapDispatchToProps) -class NotificationsPage extends PureComponent { +NotificationsPage.propTypes = { + children: PropTypes.node.isRequired, + dispatch: PropTypes.func.isRequired, + intl: PropTypes.object.isRequired, + locked: PropTypes.bool, + notificationCount: PropTypes.number.isRequired, + selectedFilter: PropTypes.string.isRequired, +} - static contextTypes = { - router: PropTypes.object.isRequired, - } - - static propTypes = { - children: PropTypes.node.isRequired, - intl: PropTypes.object.isRequired, - notificationCount: PropTypes.number.isRequired, - setFilter: PropTypes.func.isRequired, - selectedFilter: PropTypes.string.isRequired, - locked: PropTypes.bool, - } - - onChangeActiveFilter(notificationType) { - this.props.setFilter(notificationType) - - if (notificationType === 'all') { - this.context.router.history.push('/notifications') - } else if (notificationType === 'follow_requests') { - this.context.router.history.push(`/notifications/follow_requests`) - } else { - this.context.router.history.push(`/notifications?view=${notificationType}`) - } - } - - render() { - const { - children, - intl, - notificationCount, - selectedFilter, - locked - } = this.props - - let filters = NOTIFICATION_FILTERS - if (!locked && filters.indexOf('follow_requests') > -1) { - filters.splice(filters.indexOf('follow_requests')) - } - - const tabs = filters.map((filter) => ({ - title: intl.formatMessage(messages[filter]), - onClick: () => this.onChangeActiveFilter(filter), - active: selectedFilter.toLowerCase() === filter.toLowerCase(), - })) - - return ( - - - {children} - - ) - } -}{} \ No newline at end of file +export default injectIntl(connect(mapStateToProps)(NotificationsPage)) \ No newline at end of file diff --git a/app/javascript/gabsocial/pages/pro_page.js b/app/javascript/gabsocial/pages/pro_page.js index 621b6e68..5c257909 100644 --- a/app/javascript/gabsocial/pages/pro_page.js +++ b/app/javascript/gabsocial/pages/pro_page.js @@ -7,19 +7,8 @@ import { ProgressPanel, } from '../features/ui/util/async_components' -const messages = defineMessages({ - title: { 'id': 'column.pro', 'defaultMessage': 'Pro feed' }, -}) - -export default -@injectIntl class ProPage extends PureComponent { - static propTypes = { - intl: PropTypes.object.isRequired, - children: PropTypes.node.isRequired, - } - render() { const { intl, children } = this.props @@ -40,4 +29,16 @@ class ProPage extends PureComponent { ) } -} \ No newline at end of file + +} + +const messages = defineMessages({ + title: { 'id': 'column.pro', 'defaultMessage': 'Pro feed' }, +}) + +ProPage.propTypes = { + children: PropTypes.node.isRequired, + intl: PropTypes.object.isRequired, +} + +export default injectIntl(ProPage) \ No newline at end of file diff --git a/app/javascript/gabsocial/pages/profile_page.js b/app/javascript/gabsocial/pages/profile_page.js index 4eb377dc..006a324e 100644 --- a/app/javascript/gabsocial/pages/profile_page.js +++ b/app/javascript/gabsocial/pages/profile_page.js @@ -9,46 +9,10 @@ import ColumnIndicator from '../components/column_indicator' import Block from '../components/block' import ProfileLayout from '../layouts/profile_layout' -const mapStateToProps = (state, { params: { username } }) => { - const accounts = state.getIn(['accounts']) - const account = accounts.find(acct => username.toLowerCase() === acct.getIn(['acct'], '').toLowerCase()) - - const accountId = !!account ? account.get('id') : -1 - const isBlocked = state.getIn(['relationships', accountId, 'blocked_by'], false) - const isLocked = state.getIn(['accounts', accountId, 'locked'], false) - const isFollowing = state.getIn(['relationships', accountId, 'following'], false) - - const unavailable = (me === accountId) ? false : (isBlocked || (isLocked && !isFollowing)) - - const getAccount = makeGetAccount() - - return { - unavailable, - account: accountId !== -1 ? getAccount(state, accountId) : null, - } -} - -const mapDispatchToProps = (dispatch) => ({ - onFetchAccountByUsername(username) { - dispatch(fetchAccountByUsername(username)) - }, -}) - -export default -@connect(mapStateToProps, mapDispatchToProps) class ProfilePage extends ImmutablePureComponent { - static propTypes = { - children: PropTypes.node, - params: PropTypes.object.isRequired, - account: ImmutablePropTypes.map, - onFetchAccountByUsername: PropTypes.func.isRequired, - unavailable: PropTypes.bool.isRequired, - noSidebar: PropTypes.bool, - } - componentDidMount() { - this.props.onFetchAccountByUsername(this.props.params.username) + this.props.dispatch(fetchAccountByUsername(this.props.params.username)) } render() { @@ -89,4 +53,34 @@ class ProfilePage extends ImmutablePureComponent { ) } -} \ No newline at end of file +} + +const mapStateToProps = (state, { params: { username } }) => { + const accounts = state.getIn(['accounts']) + const account = accounts.find(acct => username.toLowerCase() === acct.getIn(['acct'], '').toLowerCase()) + + const accountId = !!account ? account.get('id') : -1 + const isBlocked = state.getIn(['relationships', accountId, 'blocked_by'], false) + const isLocked = state.getIn(['accounts', accountId, 'locked'], false) + const isFollowing = state.getIn(['relationships', accountId, 'following'], false) + + const unavailable = (me === accountId) ? false : (isBlocked || (isLocked && !isFollowing)) + + const getAccount = makeGetAccount() + + return { + unavailable, + account: accountId !== -1 ? getAccount(state, accountId) : null, + } +} + +ProfilePage.propTypes = { + account: ImmutablePropTypes.map, + children: PropTypes.node, + dispatch: PropTypes.func.isRequired, + noSidebar: PropTypes.bool, + params: PropTypes.object.isRequired, + unavailable: PropTypes.bool.isRequired, +} + +export default connect(mapStateToProps)(ProfilePage) \ No newline at end of file diff --git a/app/javascript/gabsocial/pages/search_page.js b/app/javascript/gabsocial/pages/search_page.js index 801acc2e..daf9c722 100644 --- a/app/javascript/gabsocial/pages/search_page.js +++ b/app/javascript/gabsocial/pages/search_page.js @@ -11,34 +11,12 @@ import { SignUpPanel, } from '../features/ui/util/async_components' -const messages = defineMessages({ - search: { id: 'search', defaultMessage: 'Search' }, - top: { id: 'top', defaultMessage: 'Top' }, - people: { id: 'people', defaultMessage: 'People' }, - groups: { id: 'groups', defaultMessage: 'Groups' }, - hashtags: { id: 'hashtags', defaultMessage: 'Hashtags' }, -}) - -const mapStateToProps = (state) => ({ - value: state.getIn(['search', 'value']), -}) - -export default -@injectIntl -@connect(mapStateToProps) class SearchPage extends PureComponent { - static propTypes = { - intl: PropTypes.object.isRequired, - children: PropTypes.node.isRequired, - value: PropTypes.string, - } + componentWillMount() { + const { intl } = this.props - render() { - const { intl, children, value } = this.props - - const title = intl.formatMessage(messages.search) - const tabs = [ + this.tabs = [ { title: intl.formatMessage(messages.top), to: '/search' @@ -56,7 +34,16 @@ class SearchPage extends PureComponent { to: '/search/hashtags' }, ] + } + render() { + const { + children, + intl, + value, + } = this.props + + const title = intl.formatMessage(messages.search) const qos = !!value ? value : '' return ( @@ -64,7 +51,7 @@ class SearchPage extends PureComponent { noComposeButton title={title} showBackBtn - tabs={tabs} + tabs={this.tabs} page={`search.${qos}`} layout={[ SignUpPanel, @@ -74,7 +61,7 @@ class SearchPage extends PureComponent { ]} > - +
@@ -86,4 +73,24 @@ class SearchPage extends PureComponent { ) } -} \ No newline at end of file +} + +const messages = defineMessages({ + search: { id: 'search', defaultMessage: 'Search' }, + top: { id: 'top', defaultMessage: 'Top' }, + people: { id: 'people', defaultMessage: 'People' }, + groups: { id: 'groups', defaultMessage: 'Groups' }, + hashtags: { id: 'hashtags', defaultMessage: 'Hashtags' }, +}) + +const mapStateToProps = (state) => ({ + value: state.getIn(['search', 'value']), +}) + +SearchPage.propTypes = { + intl: PropTypes.object.isRequired, + children: PropTypes.node.isRequired, + value: PropTypes.string, +} + +export default injectIntl(connect(mapStateToProps)(SearchPage)) \ No newline at end of file diff --git a/app/javascript/gabsocial/pages/settings_page.js b/app/javascript/gabsocial/pages/settings_page.js index 7964f9b1..965ef1c3 100644 --- a/app/javascript/gabsocial/pages/settings_page.js +++ b/app/javascript/gabsocial/pages/settings_page.js @@ -1,14 +1,13 @@ import SettingsLayout from '../layouts/settings_layout' -export default class SettingsPage extends PureComponent { - - static propTypes = { - tabs: PropTypes.array, - title: PropTypes.string, - } +class SettingsPage extends PureComponent { render() { - const { children, title, tabs } = this.props; + const { + children, + tabs, + title, + } = this.props return ( ) } -} \ No newline at end of file + +} + +SettingsPage.propTypes = { + children: PropTypes.node.isRequired, + tabs: PropTypes.array, + title: PropTypes.string, +} + +export default SettingsPage \ No newline at end of file diff --git a/app/javascript/gabsocial/pages/shortcuts_page.js b/app/javascript/gabsocial/pages/shortcuts_page.js index cf96330c..1c5333d6 100644 --- a/app/javascript/gabsocial/pages/shortcuts_page.js +++ b/app/javascript/gabsocial/pages/shortcuts_page.js @@ -9,28 +9,10 @@ import { WhoToFollowPanel, } from '../features/ui/util/async_components' -const messages = defineMessages({ - shortcuts: { id: 'shortcuts', defaultMessage: 'Shortcuts' }, -}) - -const mapDispatchToProps = (dispatch) => ({ - onOpenEditShortcutsModal() { - dispatch(openModal(MODAL_EDIT_SHORTCUTS)) - }, -}) - -export default -@injectIntl -@connect(null, mapDispatchToProps) class ShortcutsPage extends PureComponent { - static propTypes = { - intl: PropTypes.object.isRequired, - onOpenEditShortcutsModal: PropTypes.func.isRequired, - } - handleOnOpenEditShortcutsModal = () => { - this.props.onOpenEditShortcutsModal() + this.props.dispatch(openModal(MODAL_EDIT_SHORTCUTS)) } render() { @@ -59,4 +41,16 @@ class ShortcutsPage extends PureComponent { ) } -} \ No newline at end of file +} + +const messages = defineMessages({ + shortcuts: { id: 'shortcuts', defaultMessage: 'Shortcuts' }, +}) + +ShortcutsPage.propTypes = { + children: PropTypes.node.isRequired, + dispatch: PropTypes.func.isRequired, + intl: PropTypes.object.isRequired, +} + +export default injectIntl(connect()(ShortcutsPage)) \ No newline at end of file