<commit_before>/*
 This file is a part of libertysoil.org website
 Copyright (C) 2015  Loki Education (Social Enterprise)

 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU Affero General Public License as published by
 the Free Software Foundation, either version 3 of the License, or
 (at your option) any later version.

 This program is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 GNU Affero General Public License for more details.

 You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
import React from 'react';
import {
  values,
  throttle
} from 'lodash';
import { connect } from 'react-redux';

import { toggleUISidebar } from '../actions';

import Navigation from './navigation';
import NavigationItem from './navigation-item';
import CurrentUser from './current-user';
import TagCloud from './tag-cloud';
import SidebarFollowedTags from './sidebar-followed-tags';
import currentUserSelector from '../selectors/currentUser';
import createSelector from '../selectors/createSelector';

class Sidebar extends React.Component {
  static displayName = 'Sidebar';

  constructor(props) {
    super(props);

    this.state = {
      clientWidth: 0
    };
  }

  componentDidMount() {
    window.addEventListener('resize', this.toggleVisible);
    document.addEventListener('DOMContentLoaded', this.toggleVisible);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.toggleVisible);
    document.removeEventListener('DOMContentLoaded', this.toggleVisible);
  }

  toggleVisible = throttle(() => {
    const {
      dispatch,
      ui
    } = this.props;
    const breakpointWidth = 1330;

    if (typeof document == 'undefined') {
      return;
    }

    const clientWidth = document.body.clientWidth;

    if (clientWidth == this.state.clientWidth) {
      return;
    }

    if (ui.get('sidebarIsVisible') && (clientWidth <= breakpointWidth) && (clientWidth < this.state.clientWidth)) {
      dispatch(toggleUISidebar(false));
    }

    if (!ui.get('sidebarIsVisible') && (clientWidth >= breakpointWidth) && (clientWidth > this.state.clientWidth)) {
      dispatch(toggleUISidebar(true));
    }

    // If DOMContentLoaded event and small screen width
    if (this.state.clientWidth == 0 && clientWidth <= breakpointWidth) {
      dispatch(toggleUISidebar(false));
    }

    this.setState({ clientWidth });
  }, 100);

  render() {
    const {
      ui,
      is_logged_in,
      routing
    } = this.props;
    const sidebarClassName = ['sidebar'];

    if (!is_logged_in) {
      return <script />;
    }

    if (ui.get('sidebarIsVisible')) {
      sidebarClassName.push('sidebar-visible');
    }

    const current_user = this.props.current_user.toJS();

    const followedTags = values(current_user.followed_hashtags);
    const followedSchools = values(current_user.followed_schools);
    const followedGeotags = values(current_user.followed_geotags);

    const showLikes =
      (current_user.likes && current_user.likes.length)
      || this.props.current_user.get('liked_hashtags').size
      || this.props.current_user.get('liked_geotags').size
      || this.props.current_user.get('liked_schools').size;
    const showFavorites = (current_user.favourites && current_user.favourites.length > 0);
    const showFollowedTags = followedTags.length || followedSchools.length || followedGeotags.length;
    const showUsedTags = current_user.hashtags.length || current_user.geotags.length || current_user.schools.length;

    let followedTagsSection;
    if (showFollowedTags) {
      followedTagsSection = (
        <div className="layout__row layout__row-double">
          <h4 className="sidebar__heading">I follow</h4>
          <Navigation>
            <SidebarFollowedTags geotags={followedGeotags} hashtags={followedTags} schools={followedSchools} />
          </Navigation>
        </div>
      );
    }

    let likesSection;
    if (showLikes) {
      likesSection = (
        <NavigationItem
          enabled
          icon="favorite"
          to={`/user/${current_user.user.username}/likes`}
        >
          My Likes
        </NavigationItem>
      );
    }

    let favouritesSection;
    if (showFavorites) {
      favouritesSection = (
        <NavigationItem
          enabled
          icon="star"
          to={`/user/${current_user.user.username}/favorites`}
        >
          My Favorites
        </NavigationItem>
      );
    }

    let usedTagsSection;
    if (showUsedTags) {
      usedTagsSection = (
        <div className="layout__row layout__row-double">
          <h4 className="sidebar__heading">I post to</h4>
          <div className="sidebar__user_tags">
            <TagCloud
              hashtags={current_user.hashtags}
              schools={current_user.schools}
              geotags={current_user.geotags}
              truncated
            />
          </div>
        </div>
      );
    }

    const username = current_user.user.username;
    const test = RegExp(`user\/${username}\/?$`);
    let currentUser;
    if (routing && routing.locationBeforeTransitions.pathname.match(test)) {
      currentUser = (
        <NavigationItem enabled to={`/user/${username}`} className="sidebar__user">
          <CurrentUser user={current_user.user} isLink={false} />
        </NavigationItem>
      );
    } else {
      currentUser = (
        <div className="navigation__item sidebar__user">
          <CurrentUser user={current_user.user} />
        </div>
      );
    }

    return (
      <div className={sidebarClassName.join(' ')}>
        <Navigation className="navigation-first">
          <NavigationItem enabled to="/" icon="public">News Feed</NavigationItem>
          {currentUser}
          {likesSection}
          {favouritesSection}
        </Navigation>

        {followedTagsSection}
        {usedTagsSection}
      </div>
    );
  }
}

const selector = createSelector(
  state => state.get('ui'),
  currentUserSelector,
  state => state.get('routing'),
  (ui, current_user, routing) => ({
    ui,
    ...current_user,
    routing
  })
);

export default connect(selector)(Sidebar);<commit_msg>Sidebar user profile link as a block<commit_after>/*
 This file is a part of libertysoil.org website
 Copyright (C) 2016  Loki Education (Social Enterprise)

 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU Affero General Public License as published by
 the Free Software Foundation, either version 3 of the License, or
 (at your option) any later version.

 This program is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 GNU Affero General Public License for more details.

 You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/
import React from 'react';
import { values, throttle } from 'lodash';
import { connect } from 'react-redux';
import { Link } from 'react-router';

import { toggleUISidebar } from '../actions';

import Navigation from './navigation';
import NavigationItem from './navigation-item';
import CurrentUser from './current-user';
import TagCloud from './tag-cloud';
import SidebarFollowedTags from './sidebar-followed-tags';
import currentUserSelector from '../selectors/currentUser';
import createSelector from '../selectors/createSelector';

class Sidebar extends React.Component {
  static displayName = 'Sidebar';

  constructor(props) {
    super(props);

    this.state = {
      clientWidth: 0
    };
  }

  componentDidMount() {
    window.addEventListener('resize', this.toggleVisible);
    document.addEventListener('DOMContentLoaded', this.toggleVisible);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.toggleVisible);
    document.removeEventListener('DOMContentLoaded', this.toggleVisible);
  }

  toggleVisible = throttle(() => {
    const {
      dispatch,
      ui
    } = this.props;
    const breakpointWidth = 1330;

    if (typeof document == 'undefined') {
      return;
    }

    const clientWidth = document.body.clientWidth;

    if (clientWidth == this.state.clientWidth) {
      return;
    }

    if (ui.get('sidebarIsVisible') && (clientWidth <= breakpointWidth) && (clientWidth < this.state.clientWidth)) {
      dispatch(toggleUISidebar(false));
    }

    if (!ui.get('sidebarIsVisible') && (clientWidth >= breakpointWidth) && (clientWidth > this.state.clientWidth)) {
      dispatch(toggleUISidebar(true));
    }

    // If DOMContentLoaded event and small screen width
    if (this.state.clientWidth == 0 && clientWidth <= breakpointWidth) {
      dispatch(toggleUISidebar(false));
    }

    this.setState({ clientWidth });
  }, 100);

  render() {
    const {
      ui,
      is_logged_in,
      routing
    } = this.props;
    const sidebarClassName = ['sidebar'];

    if (!is_logged_in) {
      return <script />;
    }

    if (ui.get('sidebarIsVisible')) {
      sidebarClassName.push('sidebar-visible');
    }

    const current_user = this.props.current_user.toJS();

    const followedTags = values(current_user.followed_hashtags);
    const followedSchools = values(current_user.followed_schools);
    const followedGeotags = values(current_user.followed_geotags);

    const showLikes =
      (current_user.likes && current_user.likes.length)
      || this.props.current_user.get('liked_hashtags').size
      || this.props.current_user.get('liked_geotags').size
      || this.props.current_user.get('liked_schools').size;
    const showFavorites = (current_user.favourites && current_user.favourites.length > 0);
    const showFollowedTags = followedTags.length || followedSchools.length || followedGeotags.length;
    const showUsedTags = current_user.hashtags.length || current_user.geotags.length || current_user.schools.length;

    let followedTagsSection;
    if (showFollowedTags) {
      followedTagsSection = (
        <div className="layout__row layout__row-double">
          <h4 className="sidebar__heading">I follow</h4>
          <Navigation>
            <SidebarFollowedTags geotags={followedGeotags} hashtags={followedTags} schools={followedSchools} />
          </Navigation>
        </div>
      );
    }

    let likesSection;
    if (showLikes) {
      likesSection = (
        <NavigationItem
          enabled
          icon="favorite"
          to={`/user/${current_user.user.username}/likes`}
        >
          My Likes
        </NavigationItem>
      );
    }

    let favouritesSection;
    if (showFavorites) {
      favouritesSection = (
        <NavigationItem
          enabled
          icon="star"
          to={`/user/${current_user.user.username}/favorites`}
        >
          My Favorites
        </NavigationItem>
      );
    }

    let usedTagsSection;
    if (showUsedTags) {
      usedTagsSection = (
        <div className="layout__row layout__row-double">
          <h4 className="sidebar__heading">I post to</h4>
          <div className="sidebar__user_tags">
            <TagCloud
              geotags={current_user.geotags}
              hashtags={current_user.hashtags}
              schools={current_user.schools}
              truncated
            />
          </div>
        </div>
      );
    }

    const username = current_user.user.username;
    const test = RegExp(`user\/${username}\/?$`);
    let currentUser;

    if (routing && routing.locationBeforeTransitions.pathname.match(test)) {
      currentUser = (
        <NavigationItem className="sidebar__user" enabled to={`/user/${username}`}>
          <CurrentUser isLink={false} user={current_user.user} />
        </NavigationItem>
      );
    } else {
      currentUser = (
        <Link className="navigation__item sidebar__user" to={`/user/${username}`}>
          <CurrentUser isLink={false} user={current_user.user} />
        </Link>
      );
    }

    return (
      <div className={sidebarClassName.join(' ')}>
        <Navigation className="navigation-first">
          <NavigationItem enabled icon="public" to="/">News Feed</NavigationItem>
          {currentUser}
          {likesSection}
          {favouritesSection}
        </Navigation>

        {followedTagsSection}
        {usedTagsSection}
      </div>
    );
  }
}

const selector = createSelector(
  state => state.get('ui'),
  currentUserSelector,
  state => state.get('routing'),
  (ui, current_user, routing) => ({
    ui,
    ...current_user,
    routing
  })
);

export default connect(selector)(Sidebar);
{'fraction_non_alphanumeric': 0.11680933852140078, 'fraction_numerical': 0.0029571984435797665, 'mean_word_length': 2.8754523522316044, 'pattern_counts': {'":': 0, '<': 73, '<?xml version=': 0, '>': 81, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '326350', 'n_tokens_mistral': 3711, 'n_tokens_neox': 3607, 'n_words': 833}