app/javascript/mastodon/containers/mastodon.js

   1 import React from 'react';
   2 import { Provider } from 'react-redux';
   3 import PropTypes from 'prop-types';
   4 import configureStore from '../store/configureStore';
   5 import {
   6   updateTimeline,
   7   deleteFromTimelines,
   8   refreshHomeTimeline,
   9   connectTimeline,
  10   disconnectTimeline,
  11 } from '../actions/timelines';
  12 import { showOnboardingOnce } from '../actions/onboarding';
  13 import { updateNotifications, refreshNotifications } from '../actions/notifications';
  14 import BrowserRouter from 'react-router-dom/BrowserRouter';
  15 import Route from 'react-router-dom/Route';
  16 import ScrollContext from 'react-router-scroll/lib/ScrollBehaviorContext';
  17 import UI from '../features/ui';
  18 import { hydrateStore } from '../actions/store';
  19 import createStream from '../stream';
  20 import { IntlProvider, addLocaleData } from 'react-intl';
  21 import { getLocale } from '../locales';
  22 const { localeData, messages } = getLocale();
  23 addLocaleData(localeData);
  24
  25 const store = configureStore();
  26 const initialState = JSON.parse(document.getElementById('initial-state').textContent);
  27 store.dispatch(hydrateStore(initialState));
  28
  29 class Mastodon extends React.PureComponent {
  30
  31   componentDidMount() {
  32     const { locale }  = this.props;
  33     const streamingAPIBaseURL = store.getState().getIn(['meta', 'streaming_api_base_url']);
  34     const accessToken = store.getState().getIn(['meta', 'access_token']);
  35
  36     const setupPolling = () => {
  37       this.polling = setInterval(() => {
  38         store.dispatch(refreshHomeTimeline());
  39         store.dispatch(refreshNotifications());
  40       }, 20000);
  41     };
  42
  43     const clearPolling = () => {
  44       clearInterval(this.polling);
  45       this.polling = undefined;
  46     };
  47
  48     this.subscription = createStream(streamingAPIBaseURL, accessToken, 'user', {
  49
  50       connected () {
  51         clearPolling();
  52         store.dispatch(connectTimeline('home'));
  53       },
  54
  55       disconnected () {
  56         setupPolling();
  57         store.dispatch(disconnectTimeline('home'));
  58       },
  59
  60       received (data) {
  61         switch(data.event) {
  62         case 'update':
  63           store.dispatch(updateTimeline('home', JSON.parse(data.payload)));
  64           break;
  65         case 'delete':
  66           store.dispatch(deleteFromTimelines(data.payload));
  67           break;
  68         case 'notification':
  69           store.dispatch(updateNotifications(JSON.parse(data.payload), messages, locale));
  70           break;
  71         }
  72       },
  73
  74       reconnected () {
  75         clearPolling();
  76         store.dispatch(connectTimeline('home'));
  77         store.dispatch(refreshHomeTimeline());
  78         store.dispatch(refreshNotifications());
  79       },
  80
  81     });
  82
  83     // Desktop notifications
  84     if (typeof window.Notification !== 'undefined' && Notification.permission === 'default') {
  85       Notification.requestPermission();
  86     }
  87
  88     store.dispatch(showOnboardingOnce());
  89   }
  90
  91   componentWillUnmount () {
  92     if (typeof this.subscription !== 'undefined') {
  93       this.subscription.close();
  94       this.subscription = null;
  95     }
  96
  97     if (typeof this.polling !== 'undefined') {
  98       clearInterval(this.polling);
  99       this.polling = null;
 100     }
 101   }
 102
 103   render () {
 104     const { locale } = this.props;
 105
 106     return (
 107       <IntlProvider locale={locale} messages={messages}>
 108         <Provider store={store}>
 109           <BrowserRouter basename='/web'>
 110             <ScrollContext>
 111               <Route path='/' component={UI} />
 112             </ScrollContext>
 113           </BrowserRouter>
 114         </Provider>
 115       </IntlProvider>
 116     );
 117   }
 118
 119 }
 120
 121 Mastodon.propTypes = {
 122   locale: PropTypes.string.isRequired,
 123 };
 124
 125 export default Mastodon;