refactor(typescript): containers

app/components/A/tests/index.test.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import { mount } from 'enzyme' // eslint-disable-next-line import/no-unassigned-import
 
+// eslint-disable-next-line import/no-unassigned-import
 import 'jest-styled-components'
 import A from '..'
 

app/components/AutoLockScroll/index.tsx

@@ -11,6 +11,8 @@ function getElementBody() {
 }
 
 class AutoLockScroll extends React.Component<Props> {
+  locked: boolean = false
+
   componentDidMount() {
     if (this.props.lock === true) {
       this.preventScrolling()
@@ -33,8 +35,6 @@ class AutoLockScroll extends React.Component<Props> {
     this.allowScrolling()
   }
 
-  locked: boolean = false
-
   preventScrolling() {
     if (this.locked) {
       return
@@ -61,8 +61,9 @@ class AutoLockScroll extends React.Component<Props> {
       body.style.overflow = originalBodyOverflow || ''
       originalBodyOverflow = null
     }
-  } // eslint-disable-next-line class-methods-use-this
+  }
 
+  // eslint-disable-next-line class-methods-use-this
   render() {
     return null
   }

app/components/Chip/index.tsx

@@ -3,10 +3,11 @@ import styled from 'styled-components'
 import DeleteIcon from '../Icons/DeleteIcon'
 
 export interface Props {
-  children?: React.Node | null | undefined
-  onClick?: Function
-  onRequestDelete?: Function
+  children?: React.ReactNode
+  onClick?: any
+  onRequestDelete?: any
 }
+
 const StyledChip = styled.div`
   display: flex;
   box-sizing: border-box;
@@ -22,6 +23,7 @@ const StyledChip = styled.div`
   vertical-align: baseline;
   border-radius: 16px;
 `
+
 const InnerChip = styled.span`
   color: rgba(0, 0, 0, 0.87);
   font-size: 14px;
@@ -32,13 +34,14 @@ const InnerChip = styled.span`
   user-select: none;
   white-space: nowrap;
 `
+
 const icnonStyle = {
   cursor: 'pointer',
   margin: '4px 4px 0px -8px',
 }
 
 class Chip extends React.PureComponent<Props> {
-  handleRequestDelete = (e: Event) => {
+  handleRequestDelete = (e: any) => {
     e.stopPropagation()
 
     if (this.props.onRequestDelete) {

app/components/ColumnHeaderBookmark/index.tsx

@@ -18,22 +18,23 @@ class ColumnHeaderSetting extends React.PureComponent<Props, State> {
     minBookmarks: 0,
   }
 
+  _sendBookmark = debounce(() => {
+    this.props.setMinBookmarks(this.state.minBookmarks)
+  }, 400)
+
   componentWillMount() {
     this.setState({
       minBookmarks: this.props.minBookmarks,
     })
   }
 
-  handleSlider = (event: Event, value: number) => {
+  handleSlider = (event: any, value: number) => {
     this.setState({
       minBookmarks: value,
     })
 
     this._sendBookmark()
   }
-  _sendBookmark = debounce(() => {
-    this.props.setMinBookmarks(this.state.minBookmarks)
-  }, 400)
 
   render() {
     const { minBookmarks } = this.state
@@ -59,4 +60,5 @@ const Wrap = styled.div`
   flex-direction: column;
   color: #eee;
 `
+
 export default ColumnHeaderSetting

app/containers/AddColumnModal/AddColumnModal.js → app/containers/AddColumnModal/AddColumnModal.tsx

@@ -1,26 +1,24 @@
-// @flow
 import * as React from 'react'
-import { injectIntl, FormattedMessage, type IntlShape } from 'react-intl'
-import type { Mode } from 'containers/ColumnRanking/reducer'
+import { injectIntl, FormattedMessage, IntlShape } from 'react-intl'
+import { Mode } from 'containers/ColumnRanking/reducer'
 import rankingMessages from 'containers/ColumnRanking/messages'
-import type { R18Mode } from 'containers/ColumnRankingR18/reducer'
+import { R18Mode } from 'containers/ColumnRankingR18/reducer'
 import rankingR18Messages from 'containers/ColumnRankingR18/messages'
 import Card from './Card'
 import LinkButton from './LinkButton'
 import messages from './messages'
 import { Content, Header, Wrap } from './styles'
 
-export type Props = {
-  addRecommended: () => void,
-  addBookmark: () => void,
-  addBookmarkPrivate: () => void,
-  addFollow: () => void,
-  addFollowPrivate: () => void,
-  addHistory: () => void,
-  addIllustRanking: (mode: Mode) => void,
-  addIllustR18Ranking: (mode: R18Mode) => void,
+export interface Props {
+  addRecommended: () => undefined
+  addBookmark: () => undefined
+  addBookmarkPrivate: () => undefined
+  addFollow: () => undefined
+  addFollowPrivate: () => undefined
+  addHistory: () => undefined
+  addIllustRanking: (mode: Mode) => undefined
+  addIllustR18Ranking: (mode: R18Mode) => undefined
 }
-
 const rankingMode = [
   'day',
   'week',
@@ -30,7 +28,6 @@ const rankingMode = [
   'week_original',
   'week_rookie',
 ]
-
 const rankingR18Mode = [
   'day_r18',
   'week_r18',
@@ -39,9 +36,14 @@ const rankingR18Mode = [
   'week_r18g',
 ]
 
-function SelectColumnModal(props: Props & { intl: IntlShape }) {
+function SelectColumnModal(
+  props: Props & {
+    intl: IntlShape
+  }
+) {
   const IllustRankingLinks = rankingMode.map(v => {
     const handleClick = () => props.addIllustRanking(v)
+
     return (
       <LinkButton
         text={props.intl.formatMessage(rankingMessages[v])}
@@ -50,9 +52,9 @@ function SelectColumnModal(props: Props & { intl: IntlShape }) {
       />
     )
   })
-
   const IllustR18RankingLinks = rankingR18Mode.map(v => {
     const handleClick = () => props.addIllustR18Ranking(v)
+
     return (
       <LinkButton
         text={props.intl.formatMessage(rankingR18Messages[v])}
@@ -61,7 +63,6 @@ function SelectColumnModal(props: Props & { intl: IntlShape }) {
       />
     )
   })
-
   const {
     addBookmark,
     addBookmarkPrivate,
@@ -70,7 +71,6 @@ function SelectColumnModal(props: Props & { intl: IntlShape }) {
     addHistory,
     addRecommended,
   } = props
-
   return (
     <Wrap>
       <Header>

app/containers/AddColumnModal/Card.js → app/containers/AddColumnModal/Card.tsx

@@ -1,4 +1,3 @@
-// @flow
 import * as React from 'react'
 import styled from 'styled-components'
 
@@ -16,7 +15,6 @@ const Wrap = styled.div`
   background: #fff;
   overflow-y: auto;
 `
-
 const Title = styled.div`
   font-size: 14px;
   padding-left: 16px;
@@ -26,7 +24,6 @@ const Title = styled.div`
   box-sizing: border-box;
   line-height: 40px;
 `
-
 const ListWrap = styled.div`
   padding: 0;
   margin: 0;
@@ -38,8 +35,8 @@ const List = ({ children }: { children?: React.Node }) => (
 )
 
 interface Props {
-  title: string | React.Element<any>;
-  children?: React.Node;
+  title: string | React.Element
+  children?: React.Node
 }
 
 const Card = ({ title, children }: Props) => (

app/containers/AddColumnModal/LinkButton.js → app/containers/AddColumnModal/LinkButton.tsx

@@ -1,4 +1,3 @@
-// @flow
 import * as React from 'react'
 import styled from 'styled-components'
 
@@ -18,14 +17,12 @@ const Wrap = styled.div`
     background-color: rgba(0, 0, 0, 0.098);
   }
 `
-
 const InnerButton = styled.div`
   padding: 10px 16px 10px 17px;
 `
-
 interface Props {
-  text: string | React.Element<any>;
-  onClick: () => void;
+  text: string | React.Element
+  onClick: () => undefined
 }
 
 const LinkButton = ({ text, onClick }: Props) => (

app/containers/AddColumnModal/index.js → app/containers/AddColumnModal/index.tsx

@@ -1,40 +1,46 @@
-// @flow
-import { connect, type Connector } from 'react-redux'
-import type { Dispatch } from 'types'
+import { connect, Connector } from 'react-redux'
+import { Dispatch } from 'types'
 import { addColumn as addRankingColumn } from 'containers/ColumnRanking/actions'
 import { addColumn as addRankingR18Column } from 'containers/ColumnRankingR18/actions'
 import { addColumn as addBookmarkColumn } from 'containers/ColumnBookmark/actions'
 import { addColumn as addFollowColumn } from 'containers/ColumnFollow/actions'
 import { addColumn as addRecommendedColumn } from 'containers/ColumnRecommended/actions'
 import { addColumnHistory } from 'containers/ColumnHistory/actions'
-import type { Mode } from 'containers/ColumnRanking/reducer'
-import type { R18Mode } from 'containers/ColumnRankingR18/reducer'
+import { Mode } from 'containers/ColumnRanking/reducer'
+import { R18Mode } from 'containers/ColumnRankingR18/reducer'
 import Modal from './AddColumnModal'
-import type { Props } from './AddColumnModal'
+import { Props } from './AddColumnModal'
 
 function mapDispatchToProps(dispatch: Dispatch) {
   return {
     addRecommended() {
       dispatch(addRecommendedColumn('recommended'))
     },
+
     addHistory() {
       dispatch(addColumnHistory())
     },
+
     addBookmark() {
       dispatch(addBookmarkColumn('public'))
     },
+
     addBookmarkPrivate() {
       dispatch(addBookmarkColumn('private'))
     },
+
     addFollow() {
       dispatch(addFollowColumn('public'))
     },
+
     addFollowPrivate() {
       dispatch(addFollowColumn('private'))
     },
+
     addIllustRanking(mode: Mode) {
       dispatch(addRankingColumn(mode))
     },
+
     addIllustR18Ranking(mode: R18Mode) {
       dispatch(addRankingR18Column(mode))
     },
@@ -45,5 +51,4 @@ const connector: Connector<{}, Props> = connect(
   undefined,
   mapDispatchToProps
 )
-
 export default connector(Modal)

app/containers/AddNewColumnButton/Button.js → app/containers/AddNewColumnButton/Button.tsx

@@ -1,15 +1,19 @@
-// @flow
 import * as React from 'react'
 import { FormattedMessage } from 'react-intl'
 import Button from 'components/common/Button'
 import messages from './messages'
 
 export interface Props {
-  onClick: () => void;
+  onClick: () => undefined
 }
 
 const AddColumnButton = ({ onClick }: Props) => (
-  <a style={{ margin: '0 10px' }} onClick={onClick}>
+  <a
+    style={{
+      margin: '0 10px',
+    }}
+    onClick={onClick}
+  >
     <Button label={<FormattedMessage {...messages.addColumn} />} />
   </a>
 )

app/containers/AddNewColumnButton/index.js → app/containers/AddNewColumnButton/index.tsx

@@ -1,12 +1,11 @@
-// @flow
-import { connect, type Connector } from 'react-redux'
-import type { Dispatch } from 'types'
-import type { User } from 'types/user'
+import { connect, Connector } from 'react-redux'
+import { Dispatch } from 'types'
+import { User } from 'types/user'
 import { addColumn } from '../ColumnUserIllust/actions'
-import AddColumnButton, { type Props } from './Button'
+import AddColumnButton, { Props } from './Button'
 
-type OP = {
-  user: User,
+interface OP {
+  user: User
 }
 
 const mapDispatchToProps = (dispatch: Dispatch, { user }) => ({

app/containers/App/index.js → app/containers/App/index.tsx

@@ -1,4 +1,3 @@
-// @flow
 import * as React from 'react'
 import MainView from 'components/MainView'
 import Table from 'containers/Table'

app/containers/BookmarkButton/BookmarkButton.js → app/containers/BookmarkButton/BookmarkButton.tsx

@@ -1,10 +1,8 @@
-// @flow
 import * as React from 'react'
 import IconButton from 'material-ui/IconButton'
 import FavoriteIcon from 'material-ui/svg-icons/action/favorite'
 
 const iconSize = 18
-
 const styles = {
   button: {
     width: 32,
@@ -15,13 +13,11 @@ const styles = {
     height: iconSize,
   },
 }
-
 const hoverColor = '#b94343'
-
 export interface Props {
-  addBookmark: () => void;
-  deleteBookmark: () => void;
-  isBookmarked: boolean;
+  addBookmark: () => undefined
+  deleteBookmark: () => undefined
+  isBookmarked: boolean
 }
 
 const BookmarkButton = ({
@@ -30,7 +26,6 @@ const BookmarkButton = ({
   deleteBookmark,
 }: Props) => {
   const onClick = isBookmarked ? deleteBookmark : addBookmark
-
   return (
     <IconButton onClick={onClick} style={styles.button} iconStyle={styles.icon}>
       <FavoriteIcon