You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

340 lines
10 KiB

  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. refreshTimelineSuccess,
  7. updateTimeline,
  8. deleteFromTimelines,
  9. refreshTimeline,
  10. connectTimeline,
  11. disconnectTimeline
  12. } from '../actions/timelines';
  13. import { showOnboardingOnce } from '../actions/onboarding';
  14. import { updateNotifications, refreshNotifications } from '../actions/notifications';
  15. import createBrowserHistory from 'history/lib/createBrowserHistory';
  16. import {
  17. applyRouterMiddleware,
  18. useRouterHistory,
  19. Router,
  20. Route,
  21. IndexRedirect,
  22. IndexRoute
  23. } from 'react-router';
  24. import { useScroll } from 'react-router-scroll';
  25. import UI from '../features/ui';
  26. import Status from '../features/status';
  27. import GettingStarted from '../features/getting_started';
  28. import PublicTimeline from '../features/public_timeline';
  29. import CommunityTimeline from '../features/community_timeline';
  30. import AccountTimeline from '../features/account_timeline';
  31. import HomeTimeline from '../features/home_timeline';
  32. import Compose from '../features/compose';
  33. import Followers from '../features/followers';
  34. import Following from '../features/following';
  35. import Reblogs from '../features/reblogs';
  36. import Favourites from '../features/favourites';
  37. import HashtagTimeline from '../features/hashtag_timeline';
  38. import Notifications from '../features/notifications';
  39. import FollowRequests from '../features/follow_requests';
  40. import GenericNotFound from '../features/generic_not_found';
  41. import FavouritedStatuses from '../features/favourited_statuses';
  42. import Blocks from '../features/blocks';
  43. import Mutes from '../features/mutes';
  44. import Report from '../features/report';
  45. import { IntlProvider, addLocaleData } from 'react-intl';
  46. import ar from 'react-intl/locale-data/ar';
  47. import bg from 'react-intl/locale-data/bg';
  48. import de from 'react-intl/locale-data/de';
  49. import en from 'react-intl/locale-data/en';
  50. import eo from 'react-intl/locale-data/eo';
  51. import es from 'react-intl/locale-data/es';
  52. import fa from 'react-intl/locale-data/fa';
  53. import fi from 'react-intl/locale-data/fi';
  54. import fr from 'react-intl/locale-data/fr';
  55. import he from 'react-intl/locale-data/he';
  56. import hr from 'react-intl/locale-data/hr';
  57. import hu from 'react-intl/locale-data/hu';
  58. import id from 'react-intl/locale-data/id';
  59. import it from 'react-intl/locale-data/it';
  60. import ja from 'react-intl/locale-data/ja';
  61. import nl from 'react-intl/locale-data/nl';
  62. import no from 'react-intl/locale-data/no';
  63. import oc from '../locales/locale-data/oc';
  64. import pt from 'react-intl/locale-data/pt';
  65. import ru from 'react-intl/locale-data/ru';
  66. import uk from 'react-intl/locale-data/uk';
  67. import zh from 'react-intl/locale-data/zh';
  68. import tr from 'react-intl/locale-data/tr';
  69. import getMessagesForLocale from '../locales';
  70. import { hydrateStore } from '../actions/store';
  71. import createStream from '../stream';
  72. const store = configureStore();
  73. const initialState = JSON.parse(document.getElementById("initial-state").textContent);
  74. store.dispatch(hydrateStore(initialState));
  75. const browserHistory = useRouterHistory(createBrowserHistory)({
  76. basename: '/web'
  77. });
  78. addLocaleData([
  79. ...ar,
  80. ...bg,
  81. ...de,
  82. ...en,
  83. ...eo,
  84. ...es,
  85. ...fa,
  86. ...fi,
  87. ...fr,
  88. ...he,
  89. ...hr,
  90. ...hu,
  91. ...id,
  92. ...it,
  93. ...ja,
  94. ...nl,
  95. ...no,
  96. ...oc,
  97. ...pt,
  98. ...ru,
  99. ...uk,
  100. ...zh,
  101. ...tr,
  102. ]);
  103. const getTopWhenReplacing = (previous, { location }) => location && location.action === 'REPLACE' && [0, 0];
  104. const hiddenColumnContainerStyle = {
  105. position: 'absolute',
  106. left: '0',
  107. top: '0',
  108. visibility: 'hidden'
  109. };
  110. class Container extends React.PureComponent {
  111. constructor(props) {
  112. super(props);
  113. this.state = {
  114. renderedPersistents: [],
  115. unrenderedPersistents: [],
  116. };
  117. }
  118. componentWillMount () {
  119. this.unlistenHistory = null;
  120. this.setState(() => {
  121. return {
  122. mountImpersistent: false,
  123. renderedPersistents: [],
  124. unrenderedPersistents: [
  125. {pathname: '/timelines/home', component: HomeTimeline},
  126. {pathname: '/timelines/public', component: PublicTimeline},
  127. {pathname: '/timelines/public/local', component: CommunityTimeline},
  128. {pathname: '/notifications', component: Notifications},
  129. {pathname: '/favourites', component: FavouritedStatuses}
  130. ],
  131. };
  132. }, () => {
  133. if (this.unlistenHistory) {
  134. return;
  135. }
  136. this.unlistenHistory = browserHistory.listen(location => {
  137. const pathname = location.pathname.replace(/\/$/, '').toLowerCase();
  138. this.setState(oldState => {
  139. let persistentMatched = false;
  140. const newState = {
  141. renderedPersistents: oldState.renderedPersistents.map(persistent => {
  142. const givenMatched = persistent.pathname === pathname;
  143. if (givenMatched) {
  144. persistentMatched = true;
  145. }
  146. return {
  147. hidden: !givenMatched,
  148. pathname: persistent.pathname,
  149. component: persistent.component
  150. };
  151. }),
  152. };
  153. if (!persistentMatched) {
  154. newState.unrenderedPersistents = [];
  155. oldState.unrenderedPersistents.forEach(persistent => {
  156. if (persistent.pathname === pathname) {
  157. persistentMatched = true;
  158. newState.renderedPersistents.push({
  159. hidden: false,
  160. pathname: persistent.pathname,
  161. component: persistent.component
  162. });
  163. } else {
  164. newState.unrenderedPersistents.push(persistent);
  165. }
  166. });
  167. }
  168. newState.mountImpersistent = !persistentMatched;
  169. return newState;
  170. });
  171. });
  172. });
  173. }
  174. componentWillUnmount () {
  175. if (this.unlistenHistory) {
  176. this.unlistenHistory();
  177. }
  178. this.unlistenHistory = "done";
  179. }
  180. render () {
  181. // Hide some components rather than unmounting them to allow to show again
  182. // quickly and keep the view state such as the scrolled offset.
  183. const persistentsView = this.state.renderedPersistents.map((persistent) =>
  184. <div aria-hidden={persistent.hidden} key={persistent.pathname} className='mastodon-column-container' style={persistent.hidden ? hiddenColumnContainerStyle : null}>
  185. <persistent.component shouldUpdateScroll={persistent.hidden ? Function.prototype : getTopWhenReplacing} />
  186. </div>
  187. );
  188. return (
  189. <UI>
  190. {this.state.mountImpersistent && this.props.children}
  191. {persistentsView}
  192. </UI>
  193. );
  194. }
  195. }
  196. Container.propTypes = {
  197. children: PropTypes.node,
  198. };
  199. class Mastodon extends React.PureComponent {
  200. componentDidMount() {
  201. const { locale } = this.props;
  202. const streamingAPIBaseURL = store.getState().getIn(['meta', 'streaming_api_base_url']);
  203. const accessToken = store.getState().getIn(['meta', 'access_token']);
  204. const setupPolling = () => {
  205. this.polling = setInterval(() => {
  206. store.dispatch(refreshTimeline('home'));
  207. store.dispatch(refreshNotifications());
  208. }, 20000);
  209. };
  210. const clearPolling = () => {
  211. clearInterval(this.polling);
  212. this.polling = undefined;
  213. };
  214. this.subscription = createStream(streamingAPIBaseURL, accessToken, 'user', {
  215. connected () {
  216. clearPolling();
  217. store.dispatch(connectTimeline('home'));
  218. },
  219. disconnected () {
  220. setupPolling();
  221. store.dispatch(disconnectTimeline('home'));
  222. },
  223. received (data) {
  224. switch(data.event) {
  225. case 'update':
  226. store.dispatch(updateTimeline('home', JSON.parse(data.payload)));
  227. break;
  228. case 'delete':
  229. store.dispatch(deleteFromTimelines(data.payload));
  230. break;
  231. case 'notification':
  232. store.dispatch(updateNotifications(JSON.parse(data.payload), getMessagesForLocale(locale), locale));
  233. break;
  234. }
  235. },
  236. reconnected () {
  237. clearPolling();
  238. store.dispatch(connectTimeline('home'));
  239. store.dispatch(refreshTimeline('home'));
  240. store.dispatch(refreshNotifications());
  241. }
  242. });
  243. // Desktop notifications
  244. if (typeof window.Notification !== 'undefined' && Notification.permission === 'default') {
  245. Notification.requestPermission();
  246. }
  247. store.dispatch(showOnboardingOnce());
  248. }
  249. componentWillUnmount () {
  250. if (typeof this.subscription !== 'undefined') {
  251. this.subscription.close();
  252. this.subscription = null;
  253. }
  254. if (typeof this.polling !== 'undefined') {
  255. clearInterval(this.polling);
  256. this.polling = null;
  257. }
  258. }
  259. render () {
  260. const { locale } = this.props;
  261. return (
  262. <IntlProvider locale={locale} messages={getMessagesForLocale(locale)}>
  263. <Provider store={store}>
  264. <Router history={browserHistory} render={applyRouterMiddleware(useScroll())}>
  265. <Route path='/' component={Container}>
  266. <IndexRedirect to='/getting-started' />
  267. <Route path='getting-started' component={GettingStarted} />
  268. <Route path='timelines/tag/:id' component={HashtagTimeline} />
  269. <Route path='statuses/new' component={Compose} />
  270. <Route path='statuses/:statusId' component={Status} />
  271. <Route path='statuses/:statusId/reblogs' component={Reblogs} />
  272. <Route path='statuses/:statusId/favourites' component={Favourites} />
  273. <Route path='accounts/:accountId' component={AccountTimeline} />
  274. <Route path='accounts/:accountId/followers' component={Followers} />
  275. <Route path='accounts/:accountId/following' component={Following} />
  276. <Route path='follow_requests' component={FollowRequests} />
  277. <Route path='blocks' component={Blocks} />
  278. <Route path='mutes' component={Mutes} />
  279. <Route path='report' component={Report} />
  280. <Route path='*' component={GenericNotFound} />
  281. </Route>
  282. </Router>
  283. </Provider>
  284. </IntlProvider>
  285. );
  286. }
  287. }
  288. Mastodon.propTypes = {
  289. locale: PropTypes.string.isRequired
  290. };
  291. export default Mastodon;