// ./reducer/index.js

import {combineReducers} from 'redux'
import {boardSize} from './boardReducer'
import {undoReducer} from './undoReducer'
// the id must be unique for each reducer!  there will be shared state if the reducer has same id
const createBoard = (size, id) => undoReducer(boardSize(size), id)
export const allReducer = combineReducers({
  board9: createBoard(9,'id-3'),
  board13: createBoard(13,'id-4'),
  board19: createBoard(19,'id-5'),
  board9_6: createBoard(9,'id-6'),
  board9_7: createBoard(9,'id-7'),
})

// MyPage.js

// CustomBoard need 3 props
// - st type object (contain most of game state)
// - size type number (board size)
// - id type string (board id)

import React, {Component} from 'react';
import {connect} from 'react-redux';
// import CustomBoard from your directory
import CustomBoard from './CustomBoard'

class MyPage extends Component {
  render() {
    return (
      <div style={{float: 'left', display:"flex"}}>
        <CustomBoard st={this.props.board19} size={19} boardId='id-5'/>
        <CustomBoard st={this.props.board13} size={13} boardId='id-4'/>
        <CustomBoard st={this.props.board9} size={9} boardId='id-3'/>
        <CustomBoard st={this.props.board9_6} size={9} boardId='id-6'/>
        <CustomBoard st={this.props.board9_7} size={9} boardId='id-7'/>
      </div>
    )
  }
}

// map state to props
const stateToProps = (state, props) => {
  return {
    // because we use undo reducer we must declare every props with .present
    board19: state.board19.present,
    board13: state.board13.present,
    board9: state.board9.present,
    board9_6: state.board9_6.present,
    board9_7: state.board9_7.present,
  }
}

export default connect(stateToProps, null)(MyPage)