Added list functionality to home page, updated column header buttons for list

app/javascript/gabsocial/components/home_column_header.js

@@ -1,20 +1,39 @@
 'use strict';
 
 import React from 'react';
+import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
 import classNames from 'classnames';
 import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
 import { Link } from 'react-router-dom';
 import Icon from 'gabsocial/components/icon';
+import { me } from 'gabsocial/initial_state';
+import { fetchLists } from 'gabsocial/actions/lists';
+import { createSelector } from 'reselect';
 
 const messages = defineMessages({
   show: { id: 'column_header.show_settings', defaultMessage: 'Show settings' },
   hide: { id: 'column_header.hide_settings', defaultMessage: 'Hide settings' },
   homeTitle: { id: 'home_column_header.home', defaultMessage: 'Home' },
   allTitle: { id: 'home_column_header.all', defaultMessage: 'All' },
+  listTitle: { id: 'home_column.lists', defaultMessage: 'Lists' },
 });
 
-export default @injectIntl
+const getOrderedLists = createSelector([state => state.get('lists')], lists => {
+  if (!lists) {
+    return lists;
+  }
+
+  return lists.toList().filter(item => !!item).sort((a, b) => a.get('title').localeCompare(b.get('title')));
+});
+
+const mapStateToProps = state => {
+  return {
+    lists: getOrderedLists(state),
+  };
+};
+
 class ColumnHeader extends React.PureComponent {
 
   static contextTypes = {
@@ -23,16 +42,24 @@ class ColumnHeader extends React.PureComponent {
 
   static propTypes = {
     intl: PropTypes.object.isRequired,
+    dispatch: PropTypes.func.isRequired,
     active: PropTypes.bool,
     children: PropTypes.node,
     activeItem: PropTypes.string,
+    activeSubItem: PropTypes.string,
+    lists: ImmutablePropTypes.list,
   };
 
   state = {
     collapsed: true,
     animating: false,
+    expandedFor: null, //lists, groups, etc.
   };
 
+  componentDidMount() {
+    this.props.dispatch(fetchLists());
+  }
+
   handleToggleClick = (e) => {
     e.stopPropagation();
     this.setState({ collapsed: !this.state.collapsed, animating: true });
@@ -42,9 +69,15 @@ class ColumnHeader extends React.PureComponent {
     this.setState({ animating: false });
   }
 
+  expandLists = () => {
+    this.setState({
+      expandedFor: 'lists',
+    });
+  }
+
   render () {
-    const { active, children, intl: { formatMessage }, activeItem } = this.props;
-    const { collapsed, animating } = this.state;
+    const { active, children, intl: { formatMessage }, activeItem, activeSubItem, lists } = this.props;
+    const { collapsed, animating, expandedFor } = this.state;
 
     const wrapperClassName = classNames('column-header__wrapper', {
       'active': active,
@@ -63,6 +96,10 @@ class ColumnHeader extends React.PureComponent {
       'active': !collapsed,
     });
 
+    const expansionClassName = classNames('column-header column-header__expansion', {
+      'open': expandedFor,
+    });
+
     let extraContent, collapseButton;
 
     if (children) {
@@ -79,6 +116,23 @@ class ColumnHeader extends React.PureComponent {
       extraContent,
     ];
 
+    let expandedContent = null;
+    if ((expandedFor === 'lists' || activeItem === 'lists') && lists) {
+      expandedContent = lists.map(list =>
+        <Link
+          key={list.get('id')}
+          to={`/list/${list.get('id')}`}
+          className={
+            classNames('btn btn--sub grouped', {
+              'active': list.get('id') === activeSubItem
+            })
+          }
+        >
+          {list.get('title')}
+        </Link>
+      )
+    }
+
     return (
       <div className={wrapperClassName}>
         <h1 className={buttonClassName}>
@@ -92,11 +146,25 @@ class ColumnHeader extends React.PureComponent {
             {formatMessage(messages.allTitle)}
           </Link>
 
+          {
+            <a onClick={this.expandLists} className={classNames('btn grouped', {'active': 'lists' === activeItem})}>
+              <Icon id='list' fixedWidth className='column-header__icon' />
+              {formatMessage(messages.listTitle)}
+            </a>
+          }
+
           <div className='column-header__buttons'>
             {collapseButton}
           </div>
         </h1>
 
+        {
+          expandedContent &&
+          <h1 className={expansionClassName}>
+            {expandedContent}
+          </h1>
+        }
+
         <div className={collapsibleClassName} tabIndex={collapsed ? -1 : null} onTransitionEnd={this.handleTransitionEnd}>
           <div className='column-header__collapsible-inner'>
             {(!collapsed || animating) && collapsedContent}
@@ -105,5 +173,6 @@ class ColumnHeader extends React.PureComponent {
       </div>
     );
   }
-
 }
+
+export default injectIntl(connect(mapStateToProps)(ColumnHeader));

app/javascript/gabsocial/features/home_timeline/index.js

@@ -70,10 +70,7 @@ class HomeTimeline extends React.PureComponent {
 
     return (
       <Column label={intl.formatMessage(messages.title)}>
-        <HomeColumnHeader
-          activeItem='home'
-          active={hasUnread}
-        >
+        <HomeColumnHeader activeItem='home' active={hasUnread}>
           <ColumnSettingsContainer />
         </HomeColumnHeader>
         <StatusListContainer

app/javascript/gabsocial/features/list_timeline/index.js

@@ -12,6 +12,8 @@ import { openModal } from '../../actions/modal';
 import MissingIndicator from '../../components/missing_indicator';
 import LoadingIndicator from '../../components/loading_indicator';
 import Icon from 'gabsocial/components/icon';
+import HomeColumnHeader from '../../components/home_column_header';
+import { Link } from 'react-router-dom';
 
 const messages = defineMessages({
   deleteMessage: { id: 'confirmations.delete_list.message', defaultMessage: 'Are you sure you want to permanently delete this list?' },
@@ -102,7 +104,7 @@ class ListTimeline extends React.PureComponent {
 
     return (
       <Column label={title}>
-        <ColumnHeader icon='list-ul' active={hasUnread} title={title} >
+        <HomeColumnHeader activeItem='lists' activeSubItem={id} active={hasUnread}>
           <div className='column-header__links'>
             <button className='text-btn column-header__setting-btn' tabIndex='0' onClick={this.handleEditClick}>
               <Icon id='pencil' /> <FormattedMessage id='lists.edit' defaultMessage='Edit list' />
@@ -111,10 +113,15 @@ class ListTimeline extends React.PureComponent {
             <button className='text-btn column-header__setting-btn' tabIndex='0' onClick={this.handleDeleteClick}>
               <Icon id='trash' /> <FormattedMessage id='lists.delete' defaultMessage='Delete list' />
             </button>
-          </div>
 
-          <hr />
-        </ColumnHeader>
+            <hr/>
+
+            <Link to='/lists' className='text-btn column-header__setting-btn column-header__setting-btn--link'>
+              <FormattedMessage id='lists.view_all' defaultMessage='View all lists' />
+              <Icon id='arrow-right' />
+            </Link>
+          </div>
+        </HomeColumnHeader>
 
         <StatusListContainer
           scrollKey='list_timeline'

app/javascript/gabsocial/features/ui/index.js

@@ -53,6 +53,8 @@ import {
   Explore,
   Groups,
   GroupTimeline,
+  ListTimeline,
+  Lists,
 } from './util/async-components';
 import { me, meUsername } from '../../initial_state';
 import { previewState as previewMediaState } from './components/media_modal';
@@ -177,8 +179,8 @@ class SwitchingColumnsArea extends React.PureComponent {
 
         <WrappedRoute path='/tags/:id' component={HashtagTimeline} content={children} />
 
-        <Redirect from='/lists' to='/home' />
-        <Redirect from='/list' to='/home' />
+        <WrappedRoute path='/lists' layout={LAYOUT.DEFAULT} component={Lists} content={children} />
+        <WrappedRoute path='/list/:id' page={HomePage} component={ListTimeline} content={children} />
 
         <WrappedRoute path='/notifications' layout={LAYOUT.DEFAULT} component={Notifications} content={children} />
 

app/javascript/styles/gabsocial/components.scss

@@ -2495,11 +2495,14 @@ a.status-card.compact:hover {
 		background: transparent;
 		font: inherit;
 		text-align: left;
-		text-overflow: ellipsis;
 		text-decoration: none;
-		overflow: hidden;
 		white-space: nowrap;
 
+		&--sub {
+			font-size: 14px;
+    	padding: 6px 10px;
+		}
+
 		&.grouped {
 			margin: 6px;
 		}
@@ -2597,6 +2600,13 @@ a.status-card.compact:hover {
 }
 
 .column-header__setting-btn {
+	&--link {
+		text-decoration: none;
+
+		.fa {
+			margin-left: 10px;
+		}
+	}
 	&:hover {
 		color: $darker-text-color;
 		text-decoration: underline;
@@ -2615,6 +2625,12 @@ a.status-card.compact:hover {
 	}
 }
 
+.column-header__expansion {
+	overflow-x: scroll;
+	overflow-y: hidden;
+	white-space: nowrap;
+}
+
 .text-btn {
 	display: inline-block;
 	padding: 0;