Progress

app/javascript/gabsocial/pages/group_page.js

@@ -1,62 +1,90 @@
-import { Fragment } from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { fetchGroup } from '../actions/groups';
-import HeaderContainer from '../features/groups/timeline/containers/header_container';
-import GroupPanel from '../features/groups/timeline/components/panel';
-// import GroupSidebarPanel from '../features/groups/sidebar_panel';
-import DefaultLayout from '../layouts/default_layout';
-import { WhoToFollowPanel } from '../components/panel';
-import LinkFooter from '../components/link_footer';
+import { Fragment } from 'react'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { fetchGroup } from '../actions/groups'
+import GroupInfoPanel from '../components/panel/group_info_panel'
+import GroupLayout from '../layouts/group_layout'
+import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
+import LinkFooter from '../components/link_footer'
+import TimelineComposeBlock from '../components/timeline_compose_block'
+import Divider from '../components/divider'
 
 const mapStateToProps = (state, { params: { id } }) => ({
 	group: state.getIn(['groups', id]),
 	relationships: state.getIn(['group_relationships', 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;
-
-		dispatch(fetchGroup(id));
 	}
 
-	render () {
-		const { children, group, relationships } = this.props;
-		const top = group ? <HeaderContainer groupId={group.get('id')} /> : null;
+	componentWillMount() {
+		const { params: { id }, dispatch } = this.props
+
+		dispatch(fetchGroup(id))
+	}
+
+	render() {
+		const { children, group, relationships } = this.props
+
+		// <div className="column-header__wrapper">
+		// 	<h1 className="column-header">
+		// 		<Link to={`/groups/${id}`} className={classNames('btn grouped active')}>
+		// 			{intl.formatMessage(messages.tabLatest)}
+		// 		</Link>
+
+		// 		<div className='column-header__buttons'>
+		// 			<button
+		// 				className={classNames('column-header__button', { 'active': !collapsed })}
+		// 				title={intl.formatMessage(collapsed ? messages.show : messages.hide)}
+		// 				aria-label={intl.formatMessage(collapsed ? messages.show : messages.hide)}
+		// 				aria-pressed={collapsed ? 'false' : 'true'}
+		// 				onClick={this.handleToggleClick}
+		// 			><Icon id='sliders' /></button>
+		// 		</div>
+		// 	</h1>
+		// 	{!collapsed && <div className='column-header__collapsible'>
+		// 		<div className='column-header__collapsible-inner'>
+		// 			<div className='column-header__collapsible__extra'>
+		// 				<ColumnSettingsContainer />
+		// 			</div>
+		// 		</div>
+		// 	</div>}
+		// </div>
 
 		return (
-			<DefaultLayout
-				layout={{
-					TOP: top,
-					RIGHT: (
-						<Fragment>
-							<WhoToFollowPanel />
-						</Fragment>
-					),
-					LEFT: (
-						<Fragment>
-							{group && relationships &&
-								<GroupPanel
-									group={group}
-									relationships={relationships}
-								/>}
-							<LinkFooter />
-						</Fragment>
-					)
-				}}
+			<GroupLayout
+				title={'group name'}
+				actions={[
+					{
+						icon: 'ellipsis',
+						onClick: null,
+					},
+				]}
+				layout={(
+					<Fragment>
+						<GroupInfoPanel />
+						<WhoToFollowPanel />
+						<LinkFooter />
+					</Fragment>
+				)}
+				showBackBtn
 			>
+				{
+					!!relationships && relationships.get('member') &&
+					<Fragment>
+						<TimelineComposeBlock size={46} group={group} autoFocus />
+						<Divider />
+					</Fragment>
+				}
 				{children}
-			</DefaultLayout>
+			</GroupLayout>
 		)
 	}
 }

app/javascript/gabsocial/pages/home_page.js

@@ -40,7 +40,7 @@ export default class HomePage extends PureComponent {
           </Fragment>
         )}
       >
-        <TimelineComposeBlock autoFocus={false} shouldCondense />
+        <TimelineComposeBlock autoFocus={false} />
         <Divider />
         {children}
       </DefaultLayout>

app/javascript/gabsocial/pages/profile_page.js

@@ -1,7 +1,10 @@
 import { Fragment } from 'react'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
+import { fetchAccountByUsername } from '../actions/accounts'
+import { makeGetAccount } from '../selectors'
 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 ProfileLayout from '../layouts/profile_layout'
@@ -10,24 +13,15 @@ const mapStateToProps = (state, { params: { username }, withReplies = false }) =
   const accounts = state.getIn(['accounts'])
   const accountFetchError = (state.getIn(['accounts', -1, 'username'], '').toLowerCase() == username.toLowerCase())
 
-  let accountId = -1
   let account = null
-  let accountUsername = username
-  if (accountFetchError) {
-    accountId = null
-  }
-  else {
+  if (!accountFetchError) {
     account = accounts.find(acct => username.toLowerCase() == acct.getIn(['acct'], '').toLowerCase())
-    accountId = account ? account.getIn(['id'], null) : -1
-    accountUsername = account ? account.getIn(['acct'], '') : ''
   }
 
-  //Children components fetch information
+  const getAccount = makeGetAccount()
 
   return {
-    account,
-    accountId,
-    accountUsername,
+    account: account ? getAccount(state, account.get('id')) : null,
   }
 }
 
@@ -35,30 +29,33 @@ export default
 @connect(mapStateToProps)
 class ProfilePage extends ImmutablePureComponent {
   static propTypes = {
+    params: PropTypes.object.isRequired,
     account: ImmutablePropTypes.map,
-    accountUsername: PropTypes.string.isRequired,
-    accountId: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-    ]).isRequired,
+    dispatch: PropTypes.func.isRequired,
     children: PropTypes.node,
   }
 
+  componentWillMount() {
+    const { dispatch, params: { username } } = this.props
+    dispatch(fetchAccountByUsername(username))
+  }
+
   render() {
-    const { accountId, account, accountUsername } = this.props
+    const { account } = this.props
 
     return (
       <ProfileLayout
         account={account}
         layout={(
           <Fragment>
-            <ProfileInfoPanel />
-            <MediaGalleryPanel />
+            <ProfileStatsPanel account={account} />
+            <ProfileInfoPanel account={account} />
+            <MediaGalleryPanel account={account} />
             <LinkFooter />
           </Fragment>
         )}
       >
-        { /* this.props.children */ }
+        { this.props.children }
       </ProfileLayout>
     )
   }