portal.js

// @flow

import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router';
import { compose } from 'recompose';
import {
  NOTIFICATIONS,
  SOFTWARE_UPDATE_TIMEOUT,
  MINER_ERROR_TIMEOUT,
} from 'src/constants/portal';
import { SHOW_NOTIFICATION } from 'src/actions/notification';
import { UPDATE_PREFERENCES } from 'src/actions/middleware';
import { injectMinerConsumables } from 'src/components/middleware';
import { find } from 'lodash';
import uuid from 'shared/utilities/uuid';
import { NOTIFICATION_TYPE } from 'shared/constants';
import Header from 'src/components/Portal/Header/Header';
import Tabs from 'src/components/common/Tabs/Tabs';
import { PORTAL_TABS } from 'src/constants/navigation';
import Sidebar from './Sidebar/Sidebar';
import Modal from './Modal/Modal';
import Store from './Store/Store';
import Notification from './Notification/Notification';
import MyGames from './MyGames/MyGames';
import './Portal.scss';

class Portal extends PureComponent {
  constructor(props) {
    super(props);

    this.handleTabSelect = this.handleTabSelect.bind(this);
    this.getActiveTabFromUrl = this.getActiveTabFromUrl.bind(this);

    const activeTab = this.getActiveTabFromUrl();

    this.state = {
      activeTabKey: activeTab.tabKey,
    };
  }

  componentWillUpdate() {
    const nextTab = this.getActiveTabFromUrl();
    const { location: { pathname: currentPath } } = this.props;

    if (nextTab.path !== currentPath) {
      this.setActiveTab(nextTab);
    }
  }

  setActiveTab(activeTab) {
    this.props.showNotification({
      notificationName: NOTIFICATIONS.UPDATE_ANNOUNCEMENT,
      timeout: SOFTWARE_UPDATE_TIMEOUT,
    });

    this.setState({
      activeTabKey: activeTab.tabKey,
    });
  }

  getActiveTabFromUrl() {
    const { history: { location: { pathname: url } } } = this.props;
    return find(PORTAL_TABS, portalTab => {
      return portalTab.path === url;
    });
  }

  handleTabSelect(key) {
    const { history } = this.props;
    const nextTab = find(PORTAL_TABS, portalTab => {
      return portalTab.tabKey === key;
    });

    history.push(nextTab.path);
  }

  render() {
    const { activeTabKey } = this.state;

    return (
      <div className="gc-portal">
        <Header />
        <Sidebar />
        <Modal />
        <div className="gc-portal__content">
          <div className="gc-layout gc-layout--hr">
            <div className="gc-layout--max">
              <Tabs
                activeKey={activeTabKey}
                onSelect={this.handleTabSelect}
                id="portalTabs"
              >
                <Tabs.List>
                  <Tabs.Item eventKey={1}>Store</Tabs.Item>
                  <Tabs.Item eventKey={2}> My Games</Tabs.Item>
                </Tabs.List>
                <Tabs.Content>
                  <Tabs.Tab eventKey={1}>
                    <Store />
                  </Tabs.Tab>
                  <Tabs.Tab eventKey={2}>
                    <MyGames />
                  </Tabs.Tab>
                </Tabs.Content>
              </Tabs>
            </div>
          </div>
        </div>
        <Notification />
      </div>
    );
  }
}

const actions = {
  showNotification: (payload: Object) => ({
    type: SHOW_NOTIFICATION,
    payload: {
      ...payload,
      id: uuid(),
    },
  }),
  remoteUpdatePreferences: (payload: Object) => ({
    type: UPDATE_PREFERENCES,
    payload,
  }),
};

export default compose(
  withRouter,
  connect(null, actions),
  injectMinerConsumables({
    releaseNotes: (releaseNotes, { showNotification }) => {
      showNotification({
        notificationName: NOTIFICATIONS.UPDATE_ANNOUNCEMENT,
        timeout: SOFTWARE_UPDATE_TIMEOUT,
      });
    },
    notification: (notification, { showNotification }) => {
      switch (notification.type) {
        case NOTIFICATION_TYPE.ERROR: {
          showNotification({
            notificationName: NOTIFICATIONS.SIMPLE_NOTIFICATION,
            timeout: MINER_ERROR_TIMEOUT,
            data: {
              message: notification.error.message,
              type: notification.type,
              size: 'full',
              links: notification.error.links,
            },
          });
          break;
        }
        default:
          break;
      }
    },
    updatePreferences: (
      { preferences, name },
      { remoteUpdatePreferences, minerMiddleware: middleware },
    ) => remoteUpdatePreferences({ preferences, name, middleware }),
    downloadProgress: (_, { showNotification }) =>
      showNotification({
        notificationName: NOTIFICATIONS.MINER_DOWNLOAD,
        timeout: SOFTWARE_UPDATE_TIMEOUT,
      }),
  }),
)(Portal);