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

app/javascript/gabsocial/components/panel/index.js

@@ -0,0 +1,9 @@
+import SignUpPanel from './sign_up_panel';
+import TrendsPanel from './trends_panel';
+import WhoToFollowPanel from './who_to_follow_panel';
+
+export {
+  SignUpPanel,
+  TrendsPanel,
+  WhoToFollowPanel,
+}

app/javascript/gabsocial/components/panel/panel.scss

@@ -0,0 +1,132 @@
+.panel {
+  display: flex;
+  width: 100%;
+  border-radius: 10px;
+  flex-direction: column;
+  height: auto;
+  box-sizing: border-box;
+  background: $gab-background-container;
+
+  body.theme-gabsocial-light & {
+    // @include light-theme-shadow();
+    background: $gab-background-container-light;
+  }
+
+  &:not(:last-of-type) {
+    margin-bottom: 10px;
+  }
+
+  &__content {
+    width: 100%;
+    padding-top: 8px;
+  }
+
+  &__list {
+    padding: 0 5px;
+  }
+
+  &__subtitle {
+    display: block;
+    padding: 0 15px;
+    color: $secondary-text-color;
+  }
+
+  &__form {
+    display: block;
+    padding: 15px;
+
+    &.button {
+      width: 100%;
+    }
+  }
+
+  .wtf-panel-list-item {
+    display: block;
+    padding-bottom: 10px;
+
+    &:not(:first-of-type) {
+      margin-top: 12px;
+    }
+
+    &:not(:last-of-type) {
+      border-bottom: 1px solid lighten($ui-base-color, 8%);
+    }
+
+    &__content {
+      display: flex;
+      flex-direction: row;
+      min-height: 46px;
+      margin-left: 58px;
+    }
+
+    &__account-block {
+      display: flex;
+      position: relative;
+      align-items: baseline;
+      padding-right: 10px;
+
+      &__avatar {
+        height: 46px;
+        width: 46px;
+        background-color: red;
+        left: -58px;
+        position: absolute;
+      }
+
+      &__name {
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: column;
+        margin-top: 6px;
+
+        &__name {
+          color: $primary-text-color;
+          font-size: 14px;
+          font-weight: bold;
+          line-height: 16px;
+          margin-bottom: 2px;
+          max-height: 32px; //2 lines of text
+          overflow: hidden;
+        }
+
+        &__username {
+          color: $lighter-text-color;
+          font-size: 12px;
+          line-height: 14px;
+        }
+      }
+    }
+
+    &__follow-block {
+      margin-left: auto;
+      padding-top: 6px;
+
+      &__button {
+        display: flex;
+      }
+
+      &__icon {
+        color: $primary-text-color;
+      }
+    }
+  }
+}
+
+.panel-header {
+  display: flex;
+  align-items: baseline;
+  margin-bottom: 10px;
+  padding: 15px 15px 0 15px;
+
+  &__icon {
+    margin-right: 10px;
+  }
+
+  &__title {
+    flex: 1 1;
+    color: $primary-text-color;
+    font-size: 16px;
+    font-weight: bold;
+    line-height: 19px;
+  }
+}

app/javascript/gabsocial/components/panel/panel_layout.js

@@ -0,0 +1,26 @@
+import './panel.scss';
+
+export default class PanelLayout extends PureComponent {
+  static propTypes = {
+    title: PropTypes.string,
+    icon: PropTypes.string,
+    children: PropTypes.node,
+  };
+
+  render() {
+    const {title, icon, children} = this.props;
+
+    return (
+      <div className='panel'>
+        <div className='panel-header'>
+          {icon && <Icon id={icon} className='panel-header__icon' />}
+          <span className='panel-header__title'>{title}</span>
+        </div>
+        <div className='panel__content'>
+          {children}
+        </div>
+      </div>
+    );
+  };
+
+};

app/javascript/gabsocial/components/panel/sign_up_panel.js

@@ -0,0 +1,31 @@
+import { injectIntl, defineMessages } from 'react-intl';
+import { me } from '../../initial_state';
+import PanelLayout from './panel_layout';
+
+const messages = defineMessages({
+  title: { id: 'signup_panel.title', defaultMessage: 'New to Gab?' },
+  subtitle: { id: 'signup_panel.subtitle', defaultMessage: 'Sign up now to speak freely.' },
+  register: { id: 'account.register', defaultMessage: 'Sign up?' },
+});
+
+export default @injectIntl
+class SignUpPanel extends PureComponent {
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+  }
+
+  render() {
+    if (me) return null;
+
+    const { intl } = this.props;
+
+    return (
+      <PanelLayout title={intl.formatMessage(messages.title)}>
+        <span className='panel__subtitle'>{intl.formatMessage(messages.subtitle)}</span>
+        <div className='panel__form'>
+          <a className='button' href="/auth/sign_up">{intl.formateMessage(messages.register)}</a>
+        </div>
+      </PanelLayout>
+    )
+  }
+}

app/javascript/gabsocial/components/panel/trends_panel.js

@@ -0,0 +1,53 @@
+import { injectIntl, defineMessages } from 'react-intl';
+import { fetchTrends } from '../../actions/trends';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import TrendingItem from '../../components/trending_item';
+import PanelLayout from './panel_layout';
+
+const messages = defineMessages({
+  title: { id:'trends.title', defaultMessage: 'Trends' },
+});
+
+const mapStateToProps = state => ({
+  trends: state.getIn(['trends', 'items']),
+});
+
+const mapDispatchToProps = dispatch => {
+  return {
+    fetchTrends: () => dispatch(fetchTrends()),
+  }
+};
+
+export default @connect(mapStateToProps, mapDispatchToProps)
+@injectIntl
+class TrendsPanel extends ImmutablePureComponent {
+
+  static propTypes = {
+    trends: ImmutablePropTypes.list.isRequired,
+    fetchTrends: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+  };
+
+  componentDidMount () {
+    this.props.fetchTrends();
+  }
+
+  render() {
+    const { intl, trends } = this.props;
+
+    if (trends.isEmpty()) {
+      return null;
+    }
+
+    return (
+      <PanelLayout id='hashtag' title={intl.formatMessage(messages.title)}>
+        <div className='panel__list'>
+          {trends && trends.map(hashtag => (
+            <TrendingItem key={hashtag.get('name')} hashtag={hashtag} />
+          ))}
+        </div>
+      </PanelLayout>
+    );
+  }
+};

app/javascript/gabsocial/components/panel/who_to_follow_panel.js

@@ -0,0 +1,62 @@
+import { defineMessages, injectIntl } from 'react-intl';
+import { fetchSuggestions, dismissSuggestion } from '../../actions/suggestions';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import AccountContainer from '../../containers/account_container';
+import PanelLayout from './panel_layout';
+
+const messages = defineMessages({
+  dismissSuggestion: { id: 'suggestions.dismiss', defaultMessage: 'Dismiss suggestion' },
+  title: { id: 'who_to_follow.title', defaultMessage: 'Who To Follow' },
+});
+
+const mapStateToProps = state => ({
+  suggestions: state.getIn(['suggestions', 'items']),
+});
+
+const mapDispatchToProps = dispatch => {
+  return {
+    fetchSuggestions: () => dispatch(fetchSuggestions()),
+    dismissSuggestion: account => dispatch(dismissSuggestion(account.get('id'))),
+  }
+};
+
+export default @connect(mapStateToProps, mapDispatchToProps)
+@injectIntl
+class WhoToFollowPanel extends ImmutablePureComponent {
+
+  static propTypes = {
+    suggestions: ImmutablePropTypes.list.isRequired,
+    fetchSuggestions: PropTypes.func.isRequired,
+    dismissSuggestion: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+  };
+
+  componentDidMount () {
+    this.props.fetchSuggestions();
+  }
+
+  render() {
+    const { intl, suggestions, dismissSuggestion } = this.props;
+
+    if (suggestions.isEmpty()) {
+      return null;
+    }
+
+    return (
+      <PanelLayout icon='users' title={intl.formatMessage(messages.title)}>
+        <div className='panel__list'>
+          {suggestions && suggestions.map(accountId => (
+            <AccountContainer
+              key={accountId}
+              id={accountId}
+              actionIcon='times'
+              actionTitle={intl.formatMessage(messages.dismissSuggestion)}
+              onActionClick={dismissSuggestion}
+            />
+          ))}
+        </div>
+      </PanelLayout>
+    );
+  };
+};