Large update for all components
reorganization, linting, updating file imports, consolidation warning: there will be errors in this commit todo: update webpack, add missing styles, scss files, consolidate the rest of components within features/*
This commit is contained in:
@@ -1,13 +1,15 @@
|
||||
import { Fragment } from 'react';
|
||||
import { PropTypes } from 'prop-types';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import WhoToFollowPanel from '../features/ui/components/who_to_follow_panel';
|
||||
import LinkFooter from '../features/ui/components/link_footer';
|
||||
import PromoPanel from '../features/ui/components/promo_panel';
|
||||
import WhoToFollowPanel from '../components/panel';
|
||||
import LinkFooter from '../components/link_footer';
|
||||
import PromoPanel from '../components/panel';
|
||||
import HeaderContainer from '../features/groups/timeline/containers/header_container';
|
||||
import GroupPanel from '../features/groups/timeline/components/panel';
|
||||
import { fetchGroup } from '../actions/groups';
|
||||
import GroupSidebarPanel from '../features/groups/sidebar_panel';
|
||||
import ColumnsArea from '../components/columns_area';
|
||||
|
||||
const mapStateToProps = (state, { params: { id } }) => ({
|
||||
group: state.getIn(['groups', id]),
|
||||
@@ -17,12 +19,12 @@ const mapStateToProps = (state, { params: { id } }) => ({
|
||||
export default @connect(mapStateToProps)
|
||||
class GroupPage extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
group: ImmutablePropTypes.map,
|
||||
static propTypes = {
|
||||
group: ImmutablePropTypes.map,
|
||||
relationships: ImmutablePropTypes.map,
|
||||
dispatch: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
|
||||
componentWillMount() {
|
||||
const { params: { id }, dispatch } = this.props;
|
||||
|
||||
@@ -31,41 +33,33 @@ class GroupPage extends ImmutablePureComponent {
|
||||
|
||||
render () {
|
||||
const { children, group, relationships } = this.props;
|
||||
const top = group ? <HeaderContainer groupId={group.get('id')} /> : null;
|
||||
|
||||
return (
|
||||
<div className='page group'>
|
||||
{group && <HeaderContainer groupId={group.get('id')} />}
|
||||
|
||||
<div className='page__columns'>
|
||||
<div className='columns-area__panels'>
|
||||
<div className='columns-area__panels__pane columns-area__panels__pane--left'>
|
||||
<div className='columns-area__panels__pane__inner'>
|
||||
{group && relationships &&
|
||||
<GroupPanel
|
||||
group={group}
|
||||
relationships={relationships}
|
||||
/>}
|
||||
|
||||
<PromoPanel />
|
||||
<LinkFooter />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='columns-area__panels__main'>
|
||||
<div className='columns-area columns-area--mobile'>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='columns-area__panels__pane columns-area__panels__pane--right'>
|
||||
<div className='columns-area__panels__pane__inner'>
|
||||
<GroupSidebarPanel />
|
||||
<WhoToFollowPanel />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ColumnsArea
|
||||
layout={{
|
||||
top: top,
|
||||
right: (
|
||||
<Fragment>
|
||||
<GroupSidebarPanel />
|
||||
<WhoToFollowPanel />
|
||||
</Fragment>
|
||||
),
|
||||
left: (
|
||||
<Fragment>
|
||||
{group && relationships &&
|
||||
<GroupPanel
|
||||
group={group}
|
||||
relationships={relationships}
|
||||
/>}
|
||||
<PromoPanel />
|
||||
<LinkFooter />
|
||||
</Fragment>
|
||||
)
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</ColumnsArea>
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,53 +0,0 @@
|
||||
import { me } from 'gabsocial/initial_state';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import WhoToFollowPanel from '../features/ui/components/who_to_follow_panel';
|
||||
import LinkFooter from '../features/ui/components/link_footer';
|
||||
import PromoPanel from '../features/ui/components/promo_panel';
|
||||
import UserPanel from '../features/ui/components/user_panel';
|
||||
import GroupSidebarPanel from '../features/groups/sidebar_panel';
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
account: state.getIn(['accounts', me]),
|
||||
});
|
||||
|
||||
export default @connect(mapStateToProps)
|
||||
class GroupsPage extends ImmutablePureComponent {
|
||||
static propTypes = {
|
||||
account: ImmutablePropTypes.map
|
||||
};
|
||||
|
||||
render () {
|
||||
const { children } = this.props;
|
||||
|
||||
return (
|
||||
<div className='page'>
|
||||
<div className='page__columns'>
|
||||
<div className='columns-area__panels'>
|
||||
|
||||
<div className='columns-area__panels__pane columns-area__panels__pane--left'>
|
||||
<div className='columns-area__panels__pane__inner'>
|
||||
<UserPanel />
|
||||
<PromoPanel />
|
||||
<LinkFooter />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='columns-area__panels__main'>
|
||||
<div className='columns-area columns-area--mobile'>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='columns-area__panels__pane columns-area__panels__pane--right'>
|
||||
<div className='columns-area__panels__pane__inner'>
|
||||
<GroupSidebarPanel />
|
||||
<WhoToFollowPanel />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -1,12 +1,14 @@
|
||||
import { me } from 'gabsocial/initial_state';
|
||||
import { Fragment } from 'react';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import WhoToFollowPanel from '../features/ui/components/who_to_follow_panel';
|
||||
import LinkFooter from '../features/ui/components/link_footer';
|
||||
import PromoPanel from '../features/ui/components/promo_panel';
|
||||
import UserPanel from '../features/ui/components/user_panel';
|
||||
import WhoToFollowPanel from '../components/panel';
|
||||
import LinkFooter from '../components/link_footer';
|
||||
import PromoPanel from '../components/promo_panel';
|
||||
import UserPanel from '../components/user_panel';
|
||||
import ComposeFormContainer from '../features/compose/containers/compose_form_container';
|
||||
import Avatar from '../components/avatar';
|
||||
import GroupSidebarPanel from '../features/groups/sidebar_panel';
|
||||
import { me } from '../initial_state';
|
||||
import ColumnsArea from '../components/columns_area';
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
account: state.getIn(['accounts', me]),
|
||||
@@ -18,40 +20,33 @@ class HomePage extends ImmutablePureComponent {
|
||||
const {children, account} = this.props;
|
||||
|
||||
return (
|
||||
<div className='page'>
|
||||
<div className='page__columns'>
|
||||
<div className='columns-area__panels'>
|
||||
|
||||
<div className='columns-area__panels__pane columns-area__panels__pane--left'>
|
||||
<div className='columns-area__panels__pane__inner'>
|
||||
<UserPanel />
|
||||
<PromoPanel />
|
||||
<LinkFooter />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='columns-area__panels__main'>
|
||||
<div className='columns-area columns-area--mobile'>
|
||||
<div className='timeline-compose-block'>
|
||||
<div className='timeline-compose-block__avatar'>
|
||||
<Avatar account={account} size={46} />
|
||||
</div>
|
||||
<ComposeFormContainer shouldCondense={true} autoFocus={false}/>
|
||||
</div>
|
||||
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='columns-area__panels__pane columns-area__panels__pane--right'>
|
||||
<div className='columns-area__panels__pane__inner'>
|
||||
<GroupSidebarPanel />
|
||||
<WhoToFollowPanel />
|
||||
</div>
|
||||
</div>
|
||||
<ColumnsArea
|
||||
layout={{
|
||||
top: null,
|
||||
right: (
|
||||
<Fragment>
|
||||
<GroupSidebarPanel />
|
||||
{/*<WhoToFollowPanel />*/}
|
||||
</Fragment>
|
||||
),
|
||||
left: (
|
||||
<Fragment>
|
||||
<UserPanel />
|
||||
<PromoPanel />
|
||||
<LinkFooter />
|
||||
</Fragment>
|
||||
)
|
||||
}}
|
||||
>
|
||||
<div className='timeline-compose-block'>
|
||||
<div className='timeline-compose-block__avatar'>
|
||||
<Avatar account={account} size={46} />
|
||||
</div>
|
||||
<ComposeFormContainer shouldCondense={true} autoFocus={false} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{children}
|
||||
</ColumnsArea>
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,16 +1,11 @@
|
||||
import { Fragment } from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import { fetchAccount, fetchAccountByUsername } from '../actions/accounts';
|
||||
import { List as ImmutableList } from 'immutable';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import HeaderContainer from '../features/account_timeline/containers/header_container';
|
||||
import { NavLink } from 'react-router-dom';
|
||||
import WhoToFollowPanel from '../features/ui/components/who_to_follow_panel';
|
||||
// import TrendsPanel from '../features/ui/components/trends_panel';
|
||||
import LinkFooter from '../features/ui/components/link_footer';
|
||||
import SignUpPanel from '../features/ui/components/sign_up_panel';
|
||||
import ProfileInfoPanel from '../features/ui/components/profile_info_panel';
|
||||
|
||||
const emptyList = ImmutableList();
|
||||
import {WhoToFollowPanel, SignUpPanel} from '../components/panel';
|
||||
import LinkFooter from '../components/link_footer';
|
||||
import ProfileInfoPanel from '../features/account_timeline/components/profile_info_panel';
|
||||
import ColumnsArea from '../components/columns_area';
|
||||
|
||||
const mapStateToProps = (state, { params: { username }, withReplies = false }) => {
|
||||
const accounts = state.getIn(['accounts']);
|
||||
@@ -42,45 +37,29 @@ class ProfilePage extends ImmutablePureComponent {
|
||||
static propTypes = {
|
||||
account: ImmutablePropTypes.map,
|
||||
accountUsername: PropTypes.string.isRequired,
|
||||
accountId: PropTypes.number.isRequired,
|
||||
children: PropTypes.node,
|
||||
};
|
||||
|
||||
render () {
|
||||
const {children, accountId, account, accountUsername} = this.props;
|
||||
const {accountId, account, accountUsername} = this.props;
|
||||
|
||||
return (
|
||||
<div className='page'>
|
||||
<div className='page__top'>
|
||||
<HeaderContainer accountId={accountId} username={accountUsername}/>
|
||||
</div>
|
||||
|
||||
<div className='page__columns'>
|
||||
<div className='columns-area__panels'>
|
||||
|
||||
<div className='columns-area__panels__pane columns-area__panels__pane--left'>
|
||||
<div className='columns-area__panels__pane__inner'>
|
||||
<ProfileInfoPanel username={accountUsername} account={account} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='columns-area__panels__main'>
|
||||
<div className='columns-area columns-area--mobile'>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='columns-area__panels__pane columns-area__panels__pane--right'>
|
||||
<div className='columns-area__panels__pane__inner'>
|
||||
<SignUpPanel />
|
||||
<WhoToFollowPanel />
|
||||
{/* <TrendsPanel /> */}
|
||||
<LinkFooter />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<ColumnsArea
|
||||
layout={{
|
||||
top: <HeaderContainer accountId={accountId} username={accountUsername} />,
|
||||
right: (
|
||||
<Fragment>
|
||||
<SignUpPanel />
|
||||
<WhoToFollowPanel />
|
||||
<LinkFooter />
|
||||
</Fragment>
|
||||
),
|
||||
left: <ProfileInfoPanel username={accountUsername} account={account} />,
|
||||
}}
|
||||
>
|
||||
{this.props.children}
|
||||
</ColumnsArea>
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,43 +1,32 @@
|
||||
import { Fragment } from 'react';
|
||||
import Header from '../features/search/components/header';
|
||||
import WhoToFollowPanel from '../features/ui/components/who_to_follow_panel';
|
||||
// import TrendsPanel from '../features/ui/components/trends_panel';
|
||||
import LinkFooter from '../features/ui/components/link_footer';
|
||||
import SignUpPanel from '../features/ui/components/sign_up_panel';
|
||||
import LinkFooter from '../components/link_footer';
|
||||
import { WhoToFollowPanel, SignUpPanel } from '../components/panel';
|
||||
import ColumnsArea from '../components/columns_area';
|
||||
|
||||
const SearchPage = ({children}) => (
|
||||
<div className='page'>
|
||||
<div className='page__top'>
|
||||
<Header />
|
||||
</div>
|
||||
<div className='page__columns'>
|
||||
<div className='columns-area__panels'>
|
||||
export default class SearchPage extends PureComponent {
|
||||
|
||||
<div className='columns-area__panels__pane columns-area__panels__pane--left'>
|
||||
<div className='columns-area__panels__pane__inner'>
|
||||
{/* <TrendsPanel /> */}
|
||||
<LinkFooter />
|
||||
</div>
|
||||
</div>
|
||||
static propTypes = {
|
||||
children: PropTypes.node,
|
||||
};
|
||||
|
||||
<div className='columns-area__panels__main'>
|
||||
<div className='columns-area columns-area--mobile'>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
render() {
|
||||
return (
|
||||
<ColumnsArea
|
||||
layout={{
|
||||
top: <Header/>,
|
||||
right: (
|
||||
<Fragment>
|
||||
<SignUpPanel />
|
||||
<WhoToFollowPanel />
|
||||
</Fragment>
|
||||
),
|
||||
left: <LinkFooter/>,
|
||||
}}
|
||||
>
|
||||
{this.props.children}
|
||||
</ColumnsArea>
|
||||
)
|
||||
}
|
||||
|
||||
<div className='columns-area__panels__pane columns-area__panels__pane--right'>
|
||||
<div className='columns-area__panels__pane__inner'>
|
||||
<SignUpPanel />
|
||||
<WhoToFollowPanel />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
SearchPage.propTypes = {
|
||||
children: PropTypes.node,
|
||||
};
|
||||
|
||||
export default SearchPage;
|
||||
};
|
||||
Reference in New Issue
Block a user