typescriptize toc

packages/app/src/components/TableOfContents.jsx → packages/app/src/components/TableOfContents.tsx

@@ -1,37 +1,31 @@
 import React, { useCallback, useEffect, useState } from 'react';
 
-import PropTypes from 'prop-types';
-
-
-import PageContainer from '~/client/services/PageContainer';
 import { blinkElem } from '~/client/util/blink-section-header';
 import { addSmoothScrollEvent } from '~/client/util/smooth-scroll';
+import { CustomWindow } from '~/interfaces/global';
+import { useIsUserPage } from '~/stores/context';
 import loggerFactory from '~/utils/logger';
 
 
 import { StickyStretchableScroller } from './StickyStretchableScroller';
-import { withUnstatedContainers } from './UnstatedUtils';
 
 // eslint-disable-next-line no-unused-vars
 const logger = loggerFactory('growi:TableOfContents');
 
-/**
- * @author Yuki Takei <yuki@weseek.co.jp>
- *
- */
-const TableOfContents = (props) => {
+const TableOfContents = (): JSX.Element => {
 
-  const { pageContainer } = props;
-  const { pageUser } = pageContainer.state;
-  const isUserPage = pageUser != null;
+  const { data: isUserPage } = useIsUserPage();
 
   const [tocHtml, setTocHtml] = useState('');
 
   const calcViewHeight = useCallback(() => {
     // calculate absolute top of '#revision-toc' element
     const parentElem = document.querySelector('.grw-side-contents-container');
-    const parentBottom = parentElem.getBoundingClientRect().bottom;
     const containerElem = document.querySelector('#revision-toc');
+    if (parentElem == null || containerElem == null) {
+      return 0;
+    }
+    const parentBottom = parentElem.getBoundingClientRect().bottom;
     const containerTop = containerElem.getBoundingClientRect().top;
     const containerComputedStyle = getComputedStyle(containerElem);
     const containerPaddingTop = parseFloat(containerComputedStyle['padding-top']);
@@ -49,6 +43,7 @@ const TableOfContents = (props) => {
 
   useEffect(() => {
     const tocDom = document.getElementById('revision-toc-content');
+    if (tocDom == null) { return }
     const anchorsInToc = Array.from(tocDom.getElementsByTagName('a'));
     addSmoothScrollEvent(anchorsInToc, blinkElem);
   }, [tocHtml]);
@@ -56,10 +51,10 @@ const TableOfContents = (props) => {
   // set handler to render ToC
   useEffect(() => {
     const handler = html => setTocHtml(html);
-    window.globalEmitter.on('renderTocHtml', handler);
+    (window as CustomWindow).globalEmitter.on('renderTocHtml', handler);
 
     return function cleanup() {
-      window.globalEmitter.removeListener('renderTocHtml', handler);
+      (window as CustomWindow).globalEmitter.removeListener('renderTocHtml', handler);
     };
   }, []);
 
@@ -90,13 +85,4 @@ const TableOfContents = (props) => {
 
 };
 
-/**
- * Wrapper component for using unstated
- */
-const TableOfContentsWrapper = withUnstatedContainers(TableOfContents, [PageContainer]);
-
-TableOfContents.propTypes = {
-  pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
-};
-
-export default TableOfContentsWrapper;
+export default TableOfContents;