refactor: migrate few components

src/components/Icon.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import Submodule from 'assets/icons/octicons/file-submodule.svg?svgr'
 import Grabber from 'assets/icons/octicons/grabber.svg?svgr'
 import Octoface from 'assets/icons/octicons/octoface.svg?svgr'
@@ -17,7 +17,7 @@ import X from 'assets/icons/octicons/x.svg?svgr'
 import Gear from 'assets/icons/octicons/gear.svg?svgr'
 import cx from 'utils/cx'
 
-function getSVGIconComponent(type) {
+function getSVGIconComponent(type: string) {
   switch (type) {
     case 'submodule':
       return Submodule
@@ -69,7 +69,12 @@ function getSVGIconComponent(type) {
 
 const iconStyle = { width: '100%', height: '100%' }
 
-export default function Icon({ type, className = undefined, ...otherProps }) {
+type Props = {
+  type: string
+  className?: string
+}
+
+export default function Icon({ type, className = undefined, ...otherProps }: Props) {
   return (
     <div className={cx('octicon-wrapper', className)} {...otherProps}>
       {React.createElement(getSVGIconComponent(type), iconStyle)}

src/components/LoadingIndicator.tsx

@@ -1,7 +1,10 @@
-import React from 'react'
-import Icon from 'components/Icon';
+import * as React from 'react'
+import Icon from 'components/Icon'
 
-export default function LoadingIndicator({ text }) {
+type Props = {
+  text: React.ReactNode
+}
+export default function LoadingIndicator({ text }: Props) {
   return (
     <div className={'loading-indicator-container'}>
       <div className={'loading-indicator'}>

src/components/MetaBar.tsx

@@ -1,6 +1,11 @@
-import React from 'react'
+import * as React from 'react'
+import { MetaData } from 'utils/GitHubHelper'
 
-export default function MetaBar({ metaData }) {
+type Props = {
+  metaData: MetaData
+}
+
+export default function MetaBar({ metaData }: Props) {
   const userUrl = metaData ? metaData.api && metaData.api.owner.html_url : undefined
   const repoUrl = metaData ? metaData.api && metaData.api.html_url : undefined
   return (

src/components/PJAXLink.jsx

@@ -1,8 +0,0 @@
-import React from 'react'
-import DOMHelper from 'utils/DOMHelper'
-
-export default function PJAXLink({ to, children }) {
-  return React.cloneElement(children, {
-    onClick: () => DOMHelper.loadWithPJAX(to),
-  })
-}

src/components/PJAXLink.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react'
+import DOMHelper from 'utils/DOMHelper'
+
+type Props<P> = {
+  to: string
+  children: React.ReactElement<P>
+}
+
+export default function PJAXLink<P>({ to, children }: Props<P>) {
+  return React.cloneElement(children, {
+    ...children.props,
+    onClick: () => DOMHelper.loadWithPJAX(to),
+  })
+}

src/components/Portal.jsx

@@ -1,15 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-
-class Portal extends React.PureComponent {
-  render() {
-    const { into, children } = this.props
-    if (!(into instanceof window.Element)) return null
-    return ReactDOM.createPortal(
-      children,
-      into,
-    )
-  }
-}
-
-export default Portal

src/components/Portal.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react'
+import * as ReactDOM from 'react-dom'
+
+type Props = {
+  into: HTMLElement
+}
+
+class Portal extends React.PureComponent<Props> {
+  render() {
+    const { into, children } = this.props
+    if (!(into instanceof Element)) return null
+    return ReactDOM.createPortal(children, into)
+  }
+}
+
+export default Portal

src/components/Resizable.tsx

@@ -1,18 +1,19 @@
-import React from 'react'
-import PropTypes from 'prop-types'
+import * as React from 'react'
 import ResizeHandler from 'components/ResizeHandler'
-import cx from 'utils/cx';
+import cx from 'utils/cx'
 
-export default class Resizable extends React.PureComponent {
-  static propTypes = {
-    baseSize: PropTypes.number.isRequired,
-  }
+export type Size = number
+type Props = {
+  baseSize: Size
+  className?: string
+}
 
+export default class Resizable extends React.PureComponent<Props> {
   state = {
     size: this.props.baseSize,
   }
 
-  onResize = size => this.setState({ size: Math.max(this.props.baseSize, size) })
+  onResize = (size: Size) => this.setState({ size: Math.max(this.props.baseSize, size) })
 
   render() {
     const { className, children } = this.props

src/components/ResizeHandler.tsx

@@ -1,7 +1,14 @@
-import React from 'react'
+import * as React from 'react'
 import Icon from 'components/Icon'
+import Resizable, { Size } from './Resizable'
 
-export default class ResizeHandler extends React.PureComponent {
+type Props = {
+  size: Size
+  onResize: Resizable['onResize']
+  style?: React.CSSProperties
+}
+
+export default class ResizeHandler extends React.PureComponent<Props> {
   pointerDown = false
   startX = 0
   delta = 0
@@ -17,19 +24,14 @@ export default class ResizeHandler extends React.PureComponent {
     window.removeEventListener('mouseup', this.onPointerUp)
   }
 
-  /**
-   *
-   * @param {MouseEvent} e
-   * @memberof ResizeHandler
-   */
-  onPointerDown = e => {
+  onPointerDown = (e: React.MouseEvent) => {
     this.pointerDown = true
     const { clientX } = e
     this.startX = clientX
     this.subscribeEvents()
   }
 
-  onPointerMove = e => {
+  onPointerMove = (e: MouseEvent) => {
     if (!this.pointerDown) return
     const { clientX } = e
     const { onResize } = this.props
@@ -46,11 +48,7 @@ export default class ResizeHandler extends React.PureComponent {
   render() {
     const { style } = this.props
     return (
-      <div
-        className={'gitako-resize-handler'}
-        onMouseDown={this.onPointerDown}
-        style={style}
-      >
+      <div className={'gitako-resize-handler'} onMouseDown={this.onPointerDown} style={style}>
         <Icon type={'grabber'} className={'grabber-icon'} />
       </div>
     )

src/components/SearchBar.tsx

@@ -1,6 +1,11 @@
-import React from 'react'
+import * as React from 'react'
 
-export default function SearchBar({ onSearchKeyChange, onFocus }) {
+type Props = {
+  onSearchKeyChange: React.FormEventHandler
+  onFocus: React.FocusEventHandler
+}
+
+export default function SearchBar({ onSearchKeyChange, onFocus }: Props) {
   return (
     <div className={'search-input-wrapper'}>
       <input

src/components/ToggleShowButton.tsx

@@ -1,8 +1,13 @@
-import React from 'react'
+import * as React from 'react'
 import Icon from 'components/Icon'
 import cx from 'utils/cx'
 
-export default function Logo({ error, shouldShow, toggleShowSideBar }) {
+type Props = {
+  error: boolean
+  shouldShow: boolean
+  toggleShowSideBar: React.MouseEventHandler
+}
+export default function Logo({ error, shouldShow, toggleShowSideBar }: Props) {
   return (
     <div
       className={cx('gitako-toggle-show-button-wrapper', {

src/global.d.ts

@@ -0,0 +1,6 @@
+interface SvgrComponent extends React.StatelessComponent<React.SVGAttributes<SVGElement>> {}
+
+declare module '*.svg?svgr' {
+  const component: SvgrComponent
+  export default component
+}

src/utils/GitHubHelper.ts

@@ -43,6 +43,7 @@ export type MetaData = {
   repoName?: string
   branchName?: string
   accessToken?: string
+  api?: any
 }
 
 async function getRepoMeta({ userName, repoName, accessToken }: MetaData) {