現在正在寫後端 主要是幾個雷同 MyBox List 的主題列表 但又不是完全一樣

ＯＫ 那我們開始來看另外一個 資料列表 收藏匣
顧名思義 他就是我們按下星星之後 要把它從 Table 的資料拉出來

後端的部分 我想沒有什麼重點 前端的部分比較有什麼

Action and Model and Reducer 與之前雷同 這邊不再多說

先看 container

// loading Library
import { connect } from 'react-redux';
// loading Component
import UserFavPage_CP from '../../components/UserFavPage';
// loading Action
import {
	GetUserFav,
	ChangeDiscVisible
} from '../../redux/actions/UserFavActions';

export default connect(
	(state) => ({
		IsLogin: state.getIn(['InitReducer', 'IsLogin']),
		CompID: state.getIn(['InitReducer', 'CurrentUser', 'CompID']),
		UserID: state.getIn(['InitReducer', 'CurrentUser', 'UserID']),
		Token: state.getIn(['InitReducer', 'Token']),
		UserFavList: state.getIn(['UserFavReducers', 'UserFavList']),
		AllDiscs: state.getIn(['InitReducer', 'AllDiscs'])
	}),
	(dispatch) => ({
		onGetUserFav: (_compid, _userid, _token) => {
			dispatch(GetUserFav(_compid, _userid, _token))
		},
		onChangeDiscVisible: (_discindex, _discid) => {
			dispatch(ChangeDiscVisible(_discindex, _discid))
		},
	}),
	
)(UserFavPage_CP);

主要的動作就是 去跟後端拿 收藏匣的列表資料 還有 討論組分類顯示的開關
如圖

好 接下來看一下 component 的部分
因為這邊我做了幾個列表後 有重新更新 render 的部分 幾項重點

1. semantic UI 原生的css 在 device width < 767px 之後，td 自動灌入 display:block!important 的屬性，問題是 改原始碼很怕以後有更動彈不得的可能性 所以我們先用 其他方式解決
2. 把大部分的列表元素 都拉出去變成 component 利用 prop 來控制些微差距

我先舉 人頭這個功能 （控制主題能否留在 我的信箱）

MyBox component

<IsIns  subjid={_subjItem.get('SubjID')}
        discid={_subjItem.get('DiscID')}
        visible={_subjItem.get('is_ins_data') == null ? 0:_subjItem.getIn(['is_ins_data', 'Visible'])}
        location='userfav'>
</IsIns>

傳入參數

IsIns Component

主要就是要判斷一些狀態 還有等等要給 container 處理的方法 onSetIsIns 要配的參數
一個重要的部分 就是我有在每個 component 都定義它是哪一個列表來的 location param
這樣我們才有辦法根據這個 去對 redux 的哪一個 reducer 去做更新

render(){
// 承接呼叫的地方送進來的參數
const {discid, subjid, visible, location} = this.props;

var _ResultPage;

if (this.props.visible == 1) {
  _ResultPage = <Icon color='blue' 
                      name='user' 
                      size='large' 
                      style={{cursor:'pointer'}} 
                      onClick={() => this.props.onSetIsIns(this.props.location, this.props.MyBoxCount, this.props.CompID, this.props.UserID, this.props.discid, this.props.subjid, 0, this.props.Token)} />;
} else{
  _ResultPage = <Icon color='grey' 
                      name='user' 
                      size='large' 
                      style={{cursor:'pointer'}}
                      onClick={() => this.props.onSetIsIns(this.props.location, this.props.MyBoxCount, this.props.CompID, this.props.UserID, this.props.discid, this.props.subjid, 1, this.props.Token)} />;
}

return(
  <Responsive as={Table.Cell} colSpan='1' collapsing minWidth={767}>
    <div>
      {_ResultPage}
    </div>
  </Responsive>
)
}

IsIns Container

最後就是要跟redux 做串連的相關參數 還有方法

// loading Library
import {
	connect
} from 'react-redux';
// loading Component
import IsIns_CP from '../../../components/ListModules/IsIns';
// loading Action
import { 
	SetIsIns
} from '../../../redux/actions/ListActions';

export default connect(
	(state) => ({
		Token: state.getIn(['InitReducer', 'Token']),
		CompID: state.getIn(['InitReducer', 'CurrentUser', 'CompID']),
		UserID: state.getIn(['InitReducer', 'CurrentUser', 'UserID']),
		MyBoxCount: state.getIn(['InitReducer', 'MyBoxCount'])
	}),
	(dispatch) => ({
		onSetIsIns: (_location, _myboxcount, _compid, _userid, _discid, _subjid, _visible, _token) => {
			// 這裡的 visible 就是要送進去更改的值
			dispatch(SetIsIns(_location, _myboxcount, _compid, _userid, _discid, _subjid, _visible, _token));
		}
	}),
)(IsIns_CP);

OK 這一篇先到這裡 我們下一篇來看 剛剛提到的 Semantic UI Td 的問題如何解決