import { connect } from 'react-redux'
import { Dispatch } from 'redux'

import { createSetVisibilityFilter } from '../actions/createSetVisibilityFilter'
import { Filter } from '../model/Filter'
import { Link } from '../components/Link'
import { RootStore } from '../model/RootStore'

interface StateProps {
  active: boolean
}

interface DispatchProps {
  onClick: () => void
}

interface OwnProps {
  filter: Filter
}

const mapStateToProps = (state: RootStore, ownProps: OwnProps): StateProps => {
  return {
    active: ownProps.filter === state.visibilityFilter
  }
}

const mapDispatchToProps = (dispatch: Dispatch<RootStore>, ownProps: OwnProps): DispatchProps => {
  return {
    onClick: () => {
      dispatch(createSetVisibilityFilter(ownProps.filter))
    }
  }
}

// TODO: 'as any' is required to make it build. Hopefully this will soon get fixed, so it's no longer necessary.
// tslint:disable-next-line variable-name
export const FilterLink = connect(
  mapStateToProps,
  mapDispatchToProps
)(Link) as any
import { connect } from 'react-redux'
import { Dispatch } from 'redux'

import { createSetVisibilityFilter } from '../actions/createSetVisibilityFilter'
import { Filter } from '../model/Filter'
import { Link } from '../components/Link'
import { RootStore } from '../model/RootStore'

interface StateProps {
  active: boolean
}

interface DispatchProps {
  onClick: () => void
}

interface OwnProps {
  filter: Filter
}

interface LinkPropTypes {
  active: boolean,
  children: React.ReactChildren,
  onClick: () => void
}

interface MergedProps {
  active: boolean,
  filter: Filter,
  onClick: () => void
}

const mapStateToProps = (state: RootStore, ownProps: OwnProps): StateProps => {
  return {
    active: ownProps.filter === state.visibilityFilter
  }
}

const mapDispatchToProps = (dispatch: Dispatch<RootStore>, ownProps: OwnProps): DispatchProps => {
  return {
    onClick: () => {
      dispatch(createSetVisibilityFilter(ownProps.filter))
    }
  }
}

// TODO: Add types to the connect method: TStateProps, TDispatchProps, TOwnProps and maybe also TMergedProps. Adding the merged properties might fix the build issue in Link.tsx.
// tslint:disable-next-line variable-name
export const FilterLink = connect<StateProps, DispatchProps, OwnProps, LinkPropTypes>(
  mapStateToProps,
  mapDispatchToProps
)(Link)
--- 
+++ 
@@ -18,18 +18,6 @@
   filter: Filter
 }
 
-interface LinkPropTypes {
-  active: boolean,
-  children: React.ReactChildren,
-  onClick: () => void
-}
-
-interface MergedProps {
-  active: boolean,
-  filter: Filter,
-  onClick: () => void
-}
-
 const mapStateToProps = (state: RootStore, ownProps: OwnProps): StateProps => {
   return {
     active: ownProps.filter === state.visibilityFilter
@@ -44,9 +32,9 @@
   }
 }
 
-// TODO: Add types to the connect method: TStateProps, TDispatchProps, TOwnProps and maybe also TMergedProps. Adding the merged properties might fix the build issue in Link.tsx.
+// TODO: 'as any' is required to make it build. Hopefully this will soon get fixed, so it's no longer necessary.
 // tslint:disable-next-line variable-name
-export const FilterLink = connect<StateProps, DispatchProps, OwnProps, LinkPropTypes>(
+export const FilterLink = connect(
   mapStateToProps,
   mapDispatchToProps
-)(Link)
+)(Link) as any
Fix the build and clean up
