import * as React from 'react' ; import { connect } from 'react-redux' ; import { Memo } from '../models' ; import MemoListPage from '../pages/memo/MemoList' ; import { Dispatch , bindActionCreators } from 'redux' ; import { fetchMemoList } from '../actions' ; import { FetchMemoListAction } from '../reducers/memo' ; import { RootState } from '../reducers' ; import { RouteComponentProps , Redirect } from 'react-router' ; interface MatchProps { id : string ; } interface Props { memos : Memo [ ] ; apiCalling : boolean ; fetchMemoList ( ) : FetchMemoListAction ; } class MemoListContainer extends React . Component < Props & RouteComponentProps < MatchProps > > { componentDidMount ( ) { const { fetchMemoList } = this . props ; fetchMemoList ( ) ; } render ( ) { const { memos , match : { isExact , url } , location : { pathname } } = this . props ; const hasMemos = memos . length > 0 ; const isAddPath = pathname === `${ url }/add` ; if ( isExact && hasMemos ) { return < Redirect to = { `${ url }/${ memos [ 0 ] . id }` } />; } return < MemoListPage { ... this . props } hasAddMemoBtn = { ! isAddPath } />; } } const mapStateToProps = ( state ) => ( { memos : state . memo . memos , apiCalling : state . app . apiCalling } ) ; const mapDispatchToProps = ( dispatch ) => bindActionCreators ( { fetchMemoList } , dispatch ) ; export default connect ( mapStateToProps , mapDispatchToProps ) ( MemoListContainer ) ;