app.jsx 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Provider } from 'unstated';
  4. import { I18nextProvider } from 'react-i18next';
  5. import loggerFactory from '@alias/logger';
  6. import ErrorBoundary from './components/ErrorBoudary';
  7. import SearchPage from './components/SearchPage';
  8. import TagsList from './components/TagsList';
  9. import PageEditor from './components/PageEditor';
  10. import PagePathNavForEditor from './components/PageEditor/PagePathNavForEditor';
  11. import EditorNavbarBottom from './components/PageEditor/EditorNavbarBottom';
  12. import { defaultEditorOptions, defaultPreviewOptions } from './components/PageEditor/OptionsSelector';
  13. import PageEditorByHackmd from './components/PageEditorByHackmd';
  14. import Page from './components/Page';
  15. import PageHistory from './components/PageHistory';
  16. import PageComments from './components/PageComments';
  17. import PageTimeline from './components/PageTimeline';
  18. import CommentEditorLazyRenderer from './components/PageComment/CommentEditorLazyRenderer';
  19. import PageManagement from './components/Page/PageManagement';
  20. import TrashPageAlert from './components/Page/TrashPageAlert';
  21. import PageAttachment from './components/PageAttachment';
  22. import PageStatusAlert from './components/PageStatusAlert';
  23. import RecentCreated from './components/RecentCreated/RecentCreated';
  24. import MyDraftList from './components/MyDraftList/MyDraftList';
  25. import SeenUserList from './components/User/SeenUserList';
  26. import LikerList from './components/User/LikerList';
  27. import TableOfContents from './components/TableOfContents';
  28. import PersonalSettings from './components/Me/PersonalSettings';
  29. import NavigationContainer from './services/NavigationContainer';
  30. import PageContainer from './services/PageContainer';
  31. import PageHistoryContainer from './services/PageHistoryContainer';
  32. import CommentContainer from './services/CommentContainer';
  33. import EditorContainer from './services/EditorContainer';
  34. import TagContainer from './services/TagContainer';
  35. import GrowiSubNavigation from './components/Navbar/GrowiSubNavigation';
  36. import GrowiSubNavigationSwitcher from './components/Navbar/GrowiSubNavigationSwitcher';
  37. import PersonalContainer from './services/PersonalContainer';
  38. import { appContainer, componentMappings } from './base';
  39. const logger = loggerFactory('growi:cli:app');
  40. appContainer.initContents();
  41. const { i18n } = appContainer;
  42. const socketIoContainer = appContainer.getContainer('SocketIoContainer');
  43. // create unstated container instance
  44. const navigationContainer = new NavigationContainer(appContainer);
  45. const pageContainer = new PageContainer(appContainer);
  46. const pageHistoryContainer = new PageHistoryContainer(appContainer, pageContainer);
  47. const commentContainer = new CommentContainer(appContainer);
  48. const editorContainer = new EditorContainer(appContainer, defaultEditorOptions, defaultPreviewOptions);
  49. const tagContainer = new TagContainer(appContainer);
  50. const personalContainer = new PersonalContainer(appContainer);
  51. const injectableContainers = [
  52. appContainer, socketIoContainer, navigationContainer, pageContainer, pageHistoryContainer, commentContainer, editorContainer, tagContainer, personalContainer,
  53. ];
  54. logger.info('unstated containers have been initialized');
  55. /**
  56. * define components
  57. * key: id of element
  58. * value: React Element
  59. */
  60. Object.assign(componentMappings, {
  61. 'search-page': <SearchPage crowi={appContainer} />,
  62. // 'revision-history': <PageHistory pageId={pageId} />,
  63. 'tags-page': <TagsList crowi={appContainer} />,
  64. 'grw-page-status-alert-container': <PageStatusAlert />,
  65. 'trash-page-alert': <TrashPageAlert />,
  66. 'page-timeline': <PageTimeline />,
  67. 'personal-setting': <PersonalSettings crowi={personalContainer} />,
  68. });
  69. // additional definitions if data exists
  70. if (pageContainer.state.pageId != null) {
  71. Object.assign(componentMappings, {
  72. 'page-comments-list': <PageComments />,
  73. 'page-comment-write': <CommentEditorLazyRenderer />,
  74. 'page-attachment': <PageAttachment />,
  75. 'page-management': <PageManagement />,
  76. 'revision-toc': <TableOfContents />,
  77. 'seen-user-list': <SeenUserList />,
  78. 'liker-list': <LikerList />,
  79. 'user-created-list': <RecentCreated />,
  80. 'user-draft-list': <MyDraftList />,
  81. });
  82. }
  83. if (pageContainer.state.path != null) {
  84. Object.assign(componentMappings, {
  85. // eslint-disable-next-line quote-props
  86. 'page': <Page />,
  87. 'grw-subnav-container': <GrowiSubNavigation />,
  88. 'grw-subnav-switcher-container': <GrowiSubNavigationSwitcher />,
  89. });
  90. }
  91. // additional definitions if user is logged in
  92. if (appContainer.currentUser != null) {
  93. Object.assign(componentMappings, {
  94. 'page-editor': <PageEditor />,
  95. 'page-editor-path-nav': <PagePathNavForEditor />,
  96. 'page-editor-navbar-bottom-container': <EditorNavbarBottom />,
  97. });
  98. if (pageContainer.state.pageId != null) {
  99. Object.assign(componentMappings, {
  100. 'page-editor-with-hackmd': <PageEditorByHackmd />,
  101. });
  102. }
  103. }
  104. Object.keys(componentMappings).forEach((key) => {
  105. const elem = document.getElementById(key);
  106. if (elem) {
  107. ReactDOM.render(
  108. <I18nextProvider i18n={i18n}>
  109. <ErrorBoundary>
  110. <Provider inject={injectableContainers}>
  111. {componentMappings[key]}
  112. </Provider>
  113. </ErrorBoundary>
  114. </I18nextProvider>,
  115. elem,
  116. );
  117. }
  118. });
  119. // うわーもうー (commented by Crowi team -- 2018.03.23 Yuki Takei)
  120. $('a[data-toggle="tab"][href="#revision-history"]').on('show.bs.tab', () => {
  121. ReactDOM.render(
  122. <I18nextProvider i18n={i18n}>
  123. <ErrorBoundary>
  124. <Provider inject={injectableContainers}>
  125. <PageHistory />
  126. </Provider>
  127. </ErrorBoundary>
  128. </I18nextProvider>, document.getElementById('revision-history'),
  129. );
  130. });
  131. // initialize scrollpos-styler
  132. ScrollPosStyler.init();