attemptedfilechange.js

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Link } from 'react-router';

import { getAuthAccount } from 'shared/auth';
import { usersSelector, getActiveUsers } from 'data/user/selectors/activeUsers';
import { Panel, PanelBody, PanelTitle } from 'shared/ui/Panel';
import Avatar from 'shared/ui/Avatar';

import { upperFirst } from 'lodash';

import 'dashboard/modules/freemium/styles/CoworkersCard.scss';

const USERS_TO_SHOW = 6;
export class Card extends Component {

  static propTypes = {
    users: PropTypes.object.isRequired,
    usersLoading: PropTypes.bool.isRequired,
    usersLoaded: PropTypes.bool.isRequired,
    userCount: PropTypes.number,
    getAuthAccount: PropTypes.func.isRequired,
    account: PropTypes.object.isRequired,
    hasAvatar: PropTypes.array,
  }

  static defaultProps = {
    userCount: 0,
    account: {},
  }

  renderAvatars() {
    const users = this.props.users.take(USERS_TO_SHOW);
    const remainder = this.props.users.size - users.size;
    return (
      <div className="col-md-12">
        <div className="row user-avatars">
          {users.toIndexedSeq().toArray().map((user) => {
            const trimmedLastName = user.last_name.charAt(0).toUpperCase();
            return (
              <div className="col-md user-info" key={user.id}>
                <a href="/employees/coworkers">
                  <Avatar user={user} />
                  <span className="user-name">
                  {upperFirst(user.first_name)} {trimmedLastName}.
                </span>
                </a>
              </div>
            );
          })}
          {remainder >= 1 &&
          <div className="col-md user-info" key="viewall">
            <a href="/employees/coworkers">
              <div className="inital-bubble">
                <span>+{remainder}</span>
              </div>
              <span className="user-name">
              View All
            </span>
            </a>
          </div>}
        </div>
      </div>
    );
  }

  render() {
    if (!this.props.usersLoaded || this.props.users.size < 2) {
      return null;
    }
    return (
      <div className="col-md-12 coworker-card">
        <Panel>
          <PanelTitle>
            <div className="header">
              <div className="row flex-items-md-middle">
                <div className="col-lg-9 col-md-8" id="users">
                  <h3>{this.props.userCount} peoples at {this.props.account.company}</h3>
                </div>
                <div className="col-md">
                  <Link
                    className="btn btn-md btn-secondary pull-right"
                    to="/employees/coworkers">
                    View all coworkers
                  </Link>
                </div>
              </div>
            </div>
          </PanelTitle>
          <PanelBody>
            <div className="col-md">
              <div className="row flex-items-md-middle flex-items-md-center">
                {this.renderAvatars()}
              </div>
            </div>
          </PanelBody>
        </Panel>
      </div>
    );
  }
}

export default connect(
  (state) => {
    return {
      users: getActiveUsers(state),
      userCount: getActiveUsers(state).size,
      usersLoaded: usersSelector(state).loaded,
      usersLoading: usersSelector(state).loading,
      account: getAuthAccount(state),
    };
  },
  (dispatch) => bindActionCreators({
    getAuthAccount,
  }, dispatch),
)(Card);

Main.js

import React, { Component, PropTypes } from 'react';
import { Provider } from 'react-redux';
import { Router, browserHistory } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux';

class Main extends Component {

  static propTypes = {
  }


  render() {
    const { store, routes } = this.props;
    // Create an enhanced history that syncs navigation events with the store
    let history = syncHistoryWithStore(browserHistory, store);

    return (
      <Provider store={ store }>
        <Router history={ history } routes={ routes() } />
      </Provider>
    );
  }
}

export default Main;

main.js

import 'react-hot-loader/patch';
import 'babel-polyfill';
import 'whatwg-fetch';
import React from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import createStore from './store';
import routes from './routes';
import 'styles/app.scss';

import Main from 'shared/Main';

// Create redux global store
const store = createStore();

ReactDOM.render(
  <AppContainer>
    <Main store={store} routes={routes} />
  </AppContainer>,
  document.getElementById('wheniwork-app')
);

// Hot Module Replacement API
if (module.hot) {
  module.hot.accept('shared/Main', () => {
    const NextApp = require('shared/Main').default;
    ReactDOM.render(
      <AppContainer>
        <NextApp store={store} routes={routes} />,
      </AppContainer>,
      document.getElementById('root')
    );
  });
}

webpack.config.dev.js

var webpack = require('webpack');
var path = require('path');
var config = require('./webpack.config');
var Dashboard = require('webpack-dashboard');
var DashboardPlugin = require('webpack-dashboard/plugin');
var dashboard = new Dashboard();

module.exports = {
  ...config,
  debug: true,
  devtool: 'eval-source-map',
  entry: {
    dev: [
      'webpack-dev-server/client?http://localhost:3000',
      'webpack/hot/only-dev-server',
    ],
    ...config.entry,
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new DashboardPlugin(dashboard.setData),
    ...config.plugins,
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: ['babel'],
        include: path.join(__dirname, 'app'),
        plugins: ['react-hot-loader/babel'],
      },
      {
        test: /\.(scss|css)$/,
        loaders: ['style', 'css?sourceMap', 'postcss', 'sass?sourceMap'],
      },
      {
        test: /\.(png|jpe?g|gif|woff|woff2|eot|ttf|svg)$/,
        loader: 'url?name=assets/img/[name]-[hash:6].[ext]',
      },
    ],
  },
};