From 1a91bdc2e9311b56d6db8e9aa602eba191b7af11 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sun, 15 Mar 2020 02:38:07 +0800
Subject: [PATCH] refactor: use more react-use

---
 src/components/Resizable.tsx     | 14 ++++++--------
 src/components/SideBar.tsx       |  5 ++---
 src/utils/hooks/useDidUpdate.ts  | 12 ------------
 src/utils/hooks/useWindowSize.ts | 12 ------------
 4 files changed, 8 insertions(+), 35 deletions(-)
 delete mode 100644 src/utils/hooks/useDidUpdate.ts
 delete mode 100644 src/utils/hooks/useWindowSize.ts

diff --git a/src/components/Resizable.tsx b/src/components/Resizable.tsx
index cb274c1..d2002d8 100644
--- a/src/components/Resizable.tsx
+++ b/src/components/Resizable.tsx
@@ -1,11 +1,11 @@
 import { HorizontalResizeHandler } from 'components/ResizeHandler'
 import { useConfigs } from 'containers/ConfigsContext'
 import * as React from 'react'
+import { useWindowSize } from 'react-use'
 import { cx } from 'utils/cx'
 import { bodySpacingClassName } from 'utils/DOMHelper'
 import * as features from 'utils/features'
 import { useMediaStyleSheet } from 'utils/hooks/useMediaStyleSheet'
-import { useWindowSize } from 'utils/hooks/useWindowSize'
 
 export type Size = number
 type Props = {
@@ -24,13 +24,11 @@ export function Resizable({ baseSize, className, children }: React.PropsWithChil
     setSize(baseSize)
   }, [baseSize])
 
-  useWindowSize(
-    width => {
-      if (size > width - MINIMAL_CONTENT_VIEWPORT_WIDTH)
-        setSize(width - MINIMAL_CONTENT_VIEWPORT_WIDTH)
-    },
-    [size],
-  )
+  const { width } = useWindowSize()
+  React.useEffect(() => {
+    if (size > width - MINIMAL_CONTENT_VIEWPORT_WIDTH)
+      setSize(width - MINIMAL_CONTENT_VIEWPORT_WIDTH)
+  }, [width, size])
 
   React.useEffect(() => {
     document.documentElement.style.setProperty('--gitako-width', size + 'px')
diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index 8085511..680895a 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -11,11 +11,10 @@ import { SideBarCore } from 'driver/core'
 import { ConnectorState, Props } from 'driver/core/SideBar'
 import { oauth } from 'env'
 import * as React from 'react'
-import { useEvent } from 'react-use'
+import { useEvent, useUpdateEffect } from 'react-use'
 import { cx } from 'utils/cx'
 import * as DOMHelper from 'utils/DOMHelper'
 import { JSONRequest, parseURLSearch } from 'utils/general'
-import { useDidUpdate } from 'utils/hooks/useDidUpdate'
 import * as keyHelper from 'utils/keyHelper'
 import * as URLHelper from 'utils/URLHelper'
 
@@ -83,7 +82,7 @@ const RawGitako: React.FC<Props & ConnectorState> = function RawGitako(props) {
   useEvent('pjax:complete', attachCopySnippetButton, window)
 
   // init again when setting new accessToken
-  useDidUpdate(() => {
+  useUpdateEffect(() => {
     props.init()
   }, [accessToken || '']) // fallback for preventing duplicated requests
 
diff --git a/src/utils/hooks/useDidUpdate.ts b/src/utils/hooks/useDidUpdate.ts
deleted file mode 100644
index 477199f..0000000
--- a/src/utils/hooks/useDidUpdate.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import * as React from 'react'
-
-export function useDidUpdate(effect: React.EffectCallback, deps?: React.DependencyList) {
-  const firstTime = React.useRef(true)
-  React.useEffect(() => {
-    if (firstTime.current) {
-      firstTime.current = false
-      return
-    }
-    return effect()
-  }, deps)
-}
diff --git a/src/utils/hooks/useWindowSize.ts b/src/utils/hooks/useWindowSize.ts
deleted file mode 100644
index 477f008..0000000
--- a/src/utils/hooks/useWindowSize.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import * as React from 'react'
-
-export function useWindowSize(
-  callback: (width: number) => void,
-  deps?: ReadonlyArray<any> | undefined,
-) {
-  React.useEffect(() => {
-    const resizeListener: (this: Window, ev: UIEvent) => void = () => callback(window.innerWidth)
-    window.addEventListener('resize', resizeListener)
-    return () => window.removeEventListener('resize', resizeListener)
-  }, deps)
-}