From 79c1c82b65e5f539d2c37749d0865d074a529809 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sun, 10 Nov 2019 15:06:53 +0800
Subject: [PATCH] refactor: remove warnings

---
 src/components/FileExplorer.tsx  | 16 ++-----
 src/components/Node.tsx          | 72 ++++++++++++++--------------
 src/components/Portal.tsx        | 10 ++--
 src/components/ResizeHandler.tsx | 81 +++++++++++++++-----------------
 src/components/SettingsBar.tsx   |  4 +-
 src/components/SideBar.tsx       |  8 +---
 src/components/SizeObserver.tsx  | 20 ++++----
 src/utils/DOMHelper.ts           |  2 +-
 8 files changed, 98 insertions(+), 115 deletions(-)

diff --git a/src/components/FileExplorer.tsx b/src/components/FileExplorer.tsx
index e0e2b35..8f4bb73 100644
--- a/src/components/FileExplorer.tsx
+++ b/src/components/FileExplorer.tsx
@@ -19,25 +19,19 @@ class RawFileExplorer extends React.Component<Props & ConnectorState> {
     visibleNodes: null,
   }
 
-  componentWillMount() {
+  componentDidMount() {
     const { init, setUpTree, treeData, metaData, compressSingletonFolder, accessToken } = this.props
     init()
     setUpTree({ treeData, metaData, compressSingletonFolder, accessToken })
-  }
-
-  componentDidMount() {
     const { execAfterRender } = this.props
     execAfterRender()
   }
 
-  componentWillReceiveProps(nextProps: Props & ConnectorState) {
-    if (nextProps.treeData !== this.props.treeData) {
-      const { setUpTree, treeData, metaData, compressSingletonFolder, accessToken } = nextProps
+  componentDidUpdate(prevProps: Props & ConnectorState) {
+    if (this.props.treeData !== prevProps.treeData) {
+      const { setUpTree, treeData, metaData, compressSingletonFolder, accessToken } = this.props
       setUpTree({ treeData, metaData, compressSingletonFolder, accessToken })
     }
-  }
-
-  componentDidUpdate() {
     const { execAfterRender } = this.props
     execAfterRender()
   }
@@ -114,7 +108,7 @@ class RawFileExplorer extends React.Component<Props & ConnectorState> {
     )
   })
 
-  private renderActions: Node['props']['renderActions'] = node => {
+  private renderActions: React.ComponentProps<typeof Node>['renderActions'] = node => {
     const { searchKey, goTo } = this.props
     return (
       searchKey && (
diff --git a/src/components/Node.tsx b/src/components/Node.tsx
index 70947d9..943e9bc 100644
--- a/src/components/Node.tsx
+++ b/src/components/Node.tsx
@@ -24,42 +24,42 @@ type Props = {
   renderActions?(node: TreeNode): React.ReactNode
   style?: React.CSSProperties
 }
-export class Node extends React.PureComponent<Props> {
-  onClick: React.MouseEventHandler = event => {
-    if (
-      (os === OperatingSystems.macOS && event.metaKey) ||
-      (os === OperatingSystems.Windows && event.ctrlKey)
-    ) {
-      // Open in new tab
-      return
-    }
-    event.preventDefault()
-    const { node, onClick } = this.props
-    onClick(node)
-  }
+export function Node({ node, depth, expanded, focused, renderActions, style, onClick }: Props) {
+  const onClickNode: React.MouseEventHandler = React.useCallback(
+    event => {
+      if (
+        (os === OperatingSystems.macOS && event.metaKey) ||
+        (os === OperatingSystems.Windows && event.ctrlKey)
+      ) {
+        // The default behavior, open in new tab
+        return
+      }
+      event.preventDefault()
 
-  render() {
-    const { node, depth, expanded, focused, renderActions, style } = this.props
-    const { name, path } = node
-    return (
-      <div
-        className={cx(`node-item-row`, { focused, disabled: node.accessDenied })}
-        style={style}
-        title={path}
-      >
-        <a href={node.url} onClick={this.onClick}>
-          <div
-            className={cx('node-item', { expanded })}
-            style={{ paddingLeft: `${10 + 20 * depth}px` }}
-          >
-            <div className={'node-item-label'}>
-              <Icon type={getIconType(node)} />
-              <span className={'node-item-name'}>{name}</span>
-            </div>
-            {renderActions && <div>{renderActions(node)}</div>}
+      onClick(node)
+    },
+    [node, onClick],
+  )
+
+  const { name, path } = node
+  return (
+    <div
+      className={cx(`node-item-row`, { focused, disabled: node.accessDenied })}
+      style={style}
+      title={path}
+    >
+      <a href={node.url} onClick={onClickNode}>
+        <div
+          className={cx('node-item', { expanded })}
+          style={{ paddingLeft: `${10 + 20 * depth}px` }}
+        >
+          <div className={'node-item-label'}>
+            <Icon type={getIconType(node)} />
+            <span className={'node-item-name'}>{name}</span>
           </div>
-        </a>
-      </div>
-    )
-  }
+          {renderActions && <div>{renderActions(node)}</div>}
+        </div>
+      </a>
+    </div>
+  )
 }
diff --git a/src/components/Portal.tsx b/src/components/Portal.tsx
index 3a8cd3e..2497954 100644
--- a/src/components/Portal.tsx
+++ b/src/components/Portal.tsx
@@ -5,10 +5,8 @@ type Props = {
   into: Element | null
 }
 
-export class Portal extends React.PureComponent<Props> {
-  render() {
-    const { into, children } = this.props
-    if (!(into instanceof Element)) return null
-    return ReactDOM.createPortal(children, into)
-  }
+export function Portal(props: React.PropsWithChildren<Props>) {
+  const { into, children } = props
+  if (!(into instanceof Element)) return null
+  return ReactDOM.createPortal(children, into)
 }
diff --git a/src/components/ResizeHandler.tsx b/src/components/ResizeHandler.tsx
index d49e562..a3b9fd8 100644
--- a/src/components/ResizeHandler.tsx
+++ b/src/components/ResizeHandler.tsx
@@ -8,51 +8,46 @@ type Props = {
   style?: React.CSSProperties
 }
 
-export class HorizontalResizeHandler extends React.PureComponent<Props> {
-  pointerDown = false
-  startX = 0
-  baseSize = this.props.size
+export function HorizontalResizeHandler({ onResize, size, style }: Props) {
+  const pointerDown = React.useRef(false)
+  const startX = React.useRef(0)
+  const baseSize = React.useRef(size)
+  const latestPropSize = React.useRef(size)
 
-  componentWillReceiveProps(nextProps: Props) {
-    if (!this.pointerDown) {
-      // update baseSize when not resizing
-      this.baseSize = nextProps.size
+  React.useEffect(() => {
+    latestPropSize.current = size
+  }, [size])
+
+  const onPointerDown = React.useCallback(({ clientX }: React.MouseEvent) => {
+    startX.current = clientX
+    pointerDown.current = true
+    baseSize.current = latestPropSize.current
+  }, [])
+
+  React.useEffect(() => {
+    const onPointerMove = ({ clientX }: MouseEvent) => {
+      if (!pointerDown.current) return
+      const shift = clientX - startX.current
+      onResize(baseSize.current + shift)
     }
-  }
+    window.addEventListener('mousemove', onPointerMove)
+    return () => window.removeEventListener('mousemove', onPointerMove)
+  }, [onResize])
 
-  subscribeEvents = () => {
-    window.addEventListener('mousemove', this.onPointerMove)
-    window.addEventListener('mouseup', this.onPointerUp)
-  }
+  React.useEffect(() => {
+    const onPointerUp = () => {
+      if (pointerDown.current) {
+        pointerDown.current = false
+        baseSize.current = latestPropSize.current
+      }
+    }
+    window.addEventListener('mouseup', onPointerUp)
+    return () => window.removeEventListener('mouseup', onPointerUp)
+  }, [])
 
-  unsubscribeEvents = () => {
-    window.removeEventListener('mousemove', this.onPointerMove)
-    window.removeEventListener('mouseup', this.onPointerUp)
-  }
-
-  onPointerDown = ({ clientX }: React.MouseEvent) => {
-    this.startX = clientX
-    this.pointerDown = true
-    this.subscribeEvents()
-  }
-
-  onPointerMove = ({ clientX }: MouseEvent) => {
-    if (!this.pointerDown) return
-    this.props.onResize(clientX - this.startX + this.baseSize)
-  }
-
-  onPointerUp = () => {
-    this.pointerDown = false
-    this.baseSize = this.props.size
-    this.unsubscribeEvents()
-  }
-
-  render() {
-    const { style } = this.props
-    return (
-      <div className={'gitako-resize-handler'} onMouseDown={this.onPointerDown} style={style}>
-        <Icon type={'grabber'} className={'grabber-icon'} />
-      </div>
-    )
-  }
+  return (
+    <div className={'gitako-resize-handler'} onMouseDown={onPointerDown} style={style}>
+      <Icon type={'grabber'} className={'grabber-icon'} />
+    </div>
+  )
 }
diff --git a/src/components/SettingsBar.tsx b/src/components/SettingsBar.tsx
index 8f8a57d..85a6087 100644
--- a/src/components/SettingsBar.tsx
+++ b/src/components/SettingsBar.tsx
@@ -104,9 +104,9 @@ export class SettingsBar extends React.PureComponent<Props, State> {
     if (!this.props.accessToken) this.trySetUpAccessTokenWithCode()
   }
 
-  componentWillReceiveProps({ toggleShowSideBarShortcut }: Props) {
+  componentDidUpdate({ toggleShowSideBarShortcut }: Props) {
     if (toggleShowSideBarShortcut !== this.props.toggleShowSideBarShortcut) {
-      this.setState({ toggleShowSideBarShortcut })
+      this.setState({ toggleShowSideBarShortcut: this.props.toggleShowSideBarShortcut })
     }
   }
 
diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index f7f16e7..6b4cbbe 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -24,13 +24,9 @@ class RawGitako extends React.PureComponent<Props & ConnectorState> {
     disabled: false,
   }
 
-  componentWillMount() {
-    const { init } = this.props
-    init()
-  }
-
   componentDidMount() {
-    const { useListeners } = this.props
+    const { init, useListeners } = this.props
+    init()
     useListeners(true)
   }
 
diff --git a/src/components/SizeObserver.tsx b/src/components/SizeObserver.tsx
index 4b394c4..ca64c30 100644
--- a/src/components/SizeObserver.tsx
+++ b/src/components/SizeObserver.tsx
@@ -19,6 +19,16 @@ export function SizeObserver({ type = 'div', children, ...rest }: Props) {
     height: undefined,
   })
 
+  const safeSetSize = React.useCallback(function safeSetSize(rect: DOMRectReadOnly) {
+    // requestAnimationFrame fixes "ResizeObserver loop limit exceeded" error
+    requestAnimationFrame(() =>
+      setSize({
+        width: rect.width,
+        height: rect.height,
+      }),
+    )
+  }, [])
+
   React.useLayoutEffect(() => {
     if (features.resize) {
       const observer = new window.ResizeObserver(entries => {
@@ -43,14 +53,4 @@ export function SizeObserver({ type = 'div', children, ...rest }: Props) {
   const props: any = { ...rest, ref } // :)
 
   return React.createElement(type, props, children(size))
-
-  function safeSetSize(rect: DOMRectReadOnly) {
-    // requestAnimationFrame fixes "ResizeObserver loop limit exceeded" error
-    requestAnimationFrame(() =>
-      setSize({
-        width: rect.width,
-        height: rect.height,
-      }),
-    )
-  }
 }
diff --git a/src/utils/DOMHelper.ts b/src/utils/DOMHelper.ts
index 0917b96..19dab59 100644
--- a/src/utils/DOMHelper.ts
+++ b/src/utils/DOMHelper.ts
@@ -102,7 +102,7 @@ export function insertLogoMountPoint() {
 
 function createLogoMountPoint() {
   const logoMountElement = document.createElement('div')
-  logoMountElement.setAttribute('class', 'gitako-logo-mount-point')
+  logoMountElement.classList.add('gitako-logo-mount-point')
   document.body.appendChild(logoMountElement)
   return logoMountElement
 }