app.jsx 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  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 DisplaySwitcher from './components/Page/DisplaySwitcher';
  10. import { defaultEditorOptions, defaultPreviewOptions } from './components/PageEditor/OptionsSelector';
  11. import Page from './components/Page';
  12. import PageComments from './components/PageComments';
  13. import PageContentFooter from './components/PageContentFooter';
  14. import PageTimeline from './components/PageTimeline';
  15. import CommentEditorLazyRenderer from './components/PageComment/CommentEditorLazyRenderer';
  16. import PageManagement from './components/Page/PageManagement';
  17. import ShareLinkAlert from './components/Page/ShareLinkAlert';
  18. import TrashPageList from './components/TrashPageList';
  19. import TrashPageAlert from './components/Page/TrashPageAlert';
  20. import NotFoundPage from './components/NotFoundPage';
  21. import NotFoundAlert from './components/Page/NotFoundAlert';
  22. import PageStatusAlert from './components/PageStatusAlert';
  23. import RecentCreated from './components/RecentCreated/RecentCreated';
  24. import RecentlyCreatedIcon from './components/Icons/RecentlyCreatedIcon';
  25. import MyDraftList from './components/MyDraftList/MyDraftList';
  26. import BookmarkIcon from './components/Icons/BookmarkIcon';
  27. import BookmarkList from './components/PageList/BookmarkList';
  28. import LikerList from './components/User/LikerList';
  29. import TableOfContents from './components/TableOfContents';
  30. import PageAccessories from './components/PageAccessories';
  31. import UserInfo from './components/User/UserInfo';
  32. import Fab from './components/Fab';
  33. import PersonalSettings from './components/Me/PersonalSettings';
  34. import UserContentsLinks from './components/UserContentsLinks';
  35. import GrowiSubNavigation from './components/Navbar/GrowiSubNavigation';
  36. import GrowiSubNavigationSwitcher from './components/Navbar/GrowiSubNavigationSwitcher';
  37. import NavigationContainer from './services/NavigationContainer';
  38. import PageContainer from './services/PageContainer';
  39. import PageHistoryContainer from './services/PageHistoryContainer';
  40. import CommentContainer from './services/CommentContainer';
  41. import EditorContainer from './services/EditorContainer';
  42. import TagContainer from './services/TagContainer';
  43. import PersonalContainer from './services/PersonalContainer';
  44. import { appContainer, componentMappings } from './base';
  45. const logger = loggerFactory('growi:cli:app');
  46. appContainer.initContents();
  47. const { i18n } = appContainer;
  48. const socketIoContainer = appContainer.getContainer('SocketIoContainer');
  49. // create unstated container instance
  50. const navigationContainer = new NavigationContainer(appContainer);
  51. const pageContainer = new PageContainer(appContainer);
  52. const pageHistoryContainer = new PageHistoryContainer(appContainer, pageContainer);
  53. const commentContainer = new CommentContainer(appContainer);
  54. const editorContainer = new EditorContainer(appContainer, defaultEditorOptions, defaultPreviewOptions);
  55. const tagContainer = new TagContainer(appContainer);
  56. const personalContainer = new PersonalContainer(appContainer);
  57. const injectableContainers = [
  58. appContainer, socketIoContainer, navigationContainer, pageContainer, pageHistoryContainer, commentContainer, editorContainer, tagContainer, personalContainer,
  59. ];
  60. logger.info('unstated containers have been initialized');
  61. /**
  62. * define components
  63. * key: id of element
  64. * value: React Element
  65. */
  66. Object.assign(componentMappings, {
  67. 'search-page': <SearchPage crowi={appContainer} />,
  68. // 'revision-history': <PageHistory pageId={pageId} />,
  69. 'tags-page': <TagsList crowi={appContainer} />,
  70. 'grw-page-status-alert-container': <PageStatusAlert />,
  71. 'trash-page-alert': <TrashPageAlert />,
  72. 'trash-page-list': <TrashPageList />,
  73. 'not-found-page': <NotFoundPage />,
  74. 'not-found-alert': <NotFoundAlert
  75. onPageCreateClicked={navigationContainer.setEditorMode}
  76. isHidden={pageContainer.state.isForbidden || pageContainer.state.isNotCreatable || pageContainer.state.isTrashPage}
  77. />,
  78. 'page-timeline': <PageTimeline />,
  79. 'personal-setting': <PersonalSettings crowi={personalContainer} />,
  80. 'my-drafts': <MyDraftList />,
  81. 'grw-fab-container': <Fab />,
  82. 'share-link-alert': <ShareLinkAlert />,
  83. });
  84. // additional definitions if data exists
  85. if (pageContainer.state.pageId != null) {
  86. Object.assign(componentMappings, {
  87. 'page-comments-list': <PageComments />,
  88. 'page-comment-write': <CommentEditorLazyRenderer />,
  89. 'page-management': <PageManagement />,
  90. 'page-accessories': <PageAccessories />,
  91. 'revision-toc': <TableOfContents />,
  92. 'liker-list': <LikerList />,
  93. 'page-content-footer': <PageContentFooter />,
  94. 'recent-created-icon': <RecentlyCreatedIcon />,
  95. 'user-bookmark-icon': <BookmarkIcon />,
  96. 'grw-user-contents-links': <UserContentsLinks />,
  97. });
  98. }
  99. if (pageContainer.state.creator != null) {
  100. Object.assign(componentMappings, {
  101. 'user-created-list': <RecentCreated userId={pageContainer.state.creator._id} />,
  102. 'user-bookmark-list': <BookmarkList userId={pageContainer.state.creator._id} />,
  103. });
  104. }
  105. if (pageContainer.state.path != null) {
  106. Object.assign(componentMappings, {
  107. // eslint-disable-next-line quote-props
  108. 'page': <Page />,
  109. 'grw-subnav-container': <GrowiSubNavigation />,
  110. 'grw-subnav-switcher-container': <GrowiSubNavigationSwitcher />,
  111. 'user-info': <UserInfo pageUser={pageContainer.state.pageUser} />,
  112. 'display-switcher': <DisplaySwitcher />,
  113. });
  114. }
  115. Object.keys(componentMappings).forEach((key) => {
  116. const elem = document.getElementById(key);
  117. if (elem) {
  118. ReactDOM.render(
  119. <I18nextProvider i18n={i18n}>
  120. <ErrorBoundary>
  121. <Provider inject={injectableContainers}>
  122. {componentMappings[key]}
  123. </Provider>
  124. </ErrorBoundary>
  125. </I18nextProvider>,
  126. elem,
  127. );
  128. }
  129. });
  130. // initialize scrollpos-styler
  131. ScrollPosStyler.init();