Dcard App.jsx 2017/02/21

App.jsx

import React, {PropTypes} from 'react';
import {connect} from 'react-redux';
import {provideHooks} from 'redial';
import {goBack, push as pushPath} from 'react-router-redux';
import {getMe, clearLocalStorage} from '../../actions/app';
import {listConfigs} from '../../actions/configs';
import {listNotification, readNotification, readAllNotification, seeAllNotification, getNotificationStatus, getNotificationListKey} from '../../actions/notifications';
import {getDcardStatus} from '../../actions/dcard'
import {pushModal, popModal, replaceModal} from '../../actions/modals';
import {setConfig} from '../../actions/configs';

import Header from '../app/Header';
import ToastContainer from '../common/ToastContainer';
import ModalContainer from '../common/ModalContainer';
import Gallery from '../common/Gallery';
import Meta from '../common/Meta';

import landingImage from '../../images/landing.png';
import styles from '../../styles/app/App.css';

require('../../utils/FacebookSDK');
require('../../utils/Alexa');

@provideHooks({
  fetch: ({dispatch, params, getState}) => {
    const {app} = getState();

    if (!app.isLogin || app.me) return;

    return Promise.all([
      dispatch(getMe()),
      dispatch(listConfigs()),
      dispatch(getNotificationStatus()),
      dispatch(getDcardStatus())
    ]);
  }
})
@connect(state => {
  const key = getNotificationListKey();
  const notificationPagination = state.notificationPagination.store.get(key);

  const configs = state.configs.store;
  const personaSearchShown = state.app.me && configs.get('personaSearchShown');
  const isShowPersonaSearchAnnouncement = state.app.me && (!personaSearchShown || !personaSearchShown.get('value'));

  return {
    app: state.app,
    isLogin: state.app.isLogin,
    notifications: notificationPagination && notificationPagination.get('index').map(id => state.notifications.store.get(id)),
    notificationsUnseen: state.notifications.unseen,
    notificationPagination,
    forums: state.forums.store,
    dcardStatus: state.dcard.get('dcardStatus'),
    isShowPersonaSearchAnnouncement
  };
}, {
  listNotification,
  readNotification,
  readAllNotification,
  seeAllNotification,
  clearLocalStorage,
  setConfig,
  pushModal,
  popModal,
  replaceModal,
  goBack,
  pushPath
})
export default class App extends React.Component {
  static propTypes = {
    location: PropTypes.object.isRequired,
    app: PropTypes.object.isRequired,
    isLogin: PropTypes.bool.isRequired,
    notifications: PropTypes.object,
    notificationsUnseen: PropTypes.number.isRequired,
    listNotification: PropTypes.func.isRequired,
    readNotification: PropTypes.func.isRequired,
    readAllNotification: PropTypes.func.isRequired,
    seeAllNotification: PropTypes.func.isRequired,
    dcardStatus: PropTypes.object,
    clearLocalStorage: PropTypes.func.isRequired,
    setConfig: PropTypes.func.isRequired,
    pushModal: PropTypes.func.isRequired,
    popModal: PropTypes.func.isRequired,
    replaceModal: PropTypes.func.isRequired,
    goBack: PropTypes.func.isRequired,
    pushPath: PropTypes.func.isRequired,
    forums: PropTypes.object,
    currentForum: PropTypes.object,
    isShowPersonaSearchAnnouncement: PropTypes.bool
  };

  componentDidMount() {
    console.log('%c跨殺小 (／‵Д′)／~ ╧╧', 'color: #f00; font-size: 50px;');
  }

  componentWillReceiveProps(nextProps) {
    const {pushModal, popModal, replaceModal, goBack} = nextProps;

    if (nextProps.location.key !== this.props.location.key) {
      if (nextProps.location.state && nextProps.location.state.modal) {
        const payload = {
          ...nextProps.location.state,
          element: nextProps.children,
          onClose: goBack
        };

        if (this.props.location.state && this.props.location.state.modal) {
          return replaceModal(payload);
        }

        this.prevChildren = this.props.children;
        pushModal(payload);
      } else {
        this.prevChildren = null;
        popModal();
      }
    }
  }

  render() {
    const {
      location,
      app,
      isLogin,
      params,
      notifications,
      listNotification,
      readNotification,
      readAllNotification,
      seeAllNotification,
      notificationsUnseen,
      notificationPagination,
      dcardStatus,
      clearLocalStorage,
      forums,
      isShowPersonaSearchAnnouncement,
      setConfig,
      popModal,
      pushModal,
      pushPath
    } = this.props;
    const isModal = location.state && location.state.modal && this.prevChildren;
    const currentForum = forums.find(forum => forum.get('alias') === this.props.params.alias || forum.get('alias') === (location.query &&location.query.forum));
    const origin = (typeof window !== 'undefined' ? window.location.origin : `https://${app.host}`);
    const landingImageUrl = `${origin}${landingImage}`;

    return (
      <div>
        <Meta
          location={location}
          title='Dcard'
          description='不想錯過任何有趣的話題嗎？趕快加入我們吧！'
          images={landingImageUrl}/>
        <Header
          isLogin={isLogin}
          location={location}
          notifications={notifications}
          notificationsUnseen={notificationsUnseen}
          listNotification={listNotification}
          readNotification={readNotification}
          readAllNotification={readAllNotification}
          seeAllNotification={seeAllNotification}
          notificationPagination={notificationPagination}
          dcardStatus={dcardStatus}
          clearLocalStorage={clearLocalStorage}
          currentForum={currentForum}
          currentAlias={this.props.params.alias || (location.query && location.query.forum)}
          isShowPersonaSearchAnnouncement={isShowPersonaSearchAnnouncement}
          setConfig={setConfig}
          popModal={popModal}
          pushModal={pushModal}
          pushPath={pushPath}/>
        <div className={styles.main}>
          {isModal ? this.prevChildren : this.props.children}
        </div>
        <ModalContainer location={location}/>
        <ToastContainer/>
        <Gallery location={location} params={params}/>
      </div>
    );
  }
}