最後 我們來看 列表組成剩下的幾個元件

包含我們如何 render Tag1 + Tag2 + title + createdTimeString 作為 ListTitle
還有簡單一點的 ReplyCount

先看成果

ListTile

=> Tag1 + ' - ' + Tag2 + ' - ' + titleString + ' - ' + CreatedTimeString

當然這中間需要去判斷 有的並沒有 tagID 所以就要判斷 null 等狀態

ListTitle Component render()

render(){
// 承接呼叫的地方送進來的參數
const {eventtagid, custagid, title, createdon, progress, isRead} = this.props;

var _ResultPage;

let _eventTagName = this.props.eventtagid == null ? "" : this.props.EventTags.filter(x => x.get('SubjTagID') == this.props.eventtagid).getIn(['0', 'SubjTagName']) + " - ";
let _cusTagName = this.props.custagid == null ? "" : this.props.CusTags.filter(x => x.get('SubjTagID') == this.props.custagid).getIn(['0', 'SubjTagName']) + " - ";
let _progressIcon = null;
let _createdOnAddTimeZone = new Date(this.props.createdon).setHours(new Date(this.props.createdon).getHours() + this.props.TimeZone);
let _createdOnString = " - " + this.renderCreatedTime(_createdOnAddTimeZone);

switch (this.props.progress) {
  case 2 :
    _progressIcon = <Icon color='green' name='wait' size='small'></Icon>;
    break;
  case 5 :
    _progressIcon = <Icon color='red' name='repeat' size='small'></Icon>;
    break;
  case 9 :
    _progressIcon = <Icon color='green' name='checkmark' size='small'></Icon>;
    break;
  default :
}    

// 未讀狀況
if (this.props.isRead == 0) {
  _ResultPage = <span style={{color:'#428BCD'}}>
                  {_eventTagName}
                  {_cusTagName}
                  {this.props.title}
                  {_createdOnString}
                  {_progressIcon}
                </span>;
} else{
  _ResultPage = <span>
                  {_eventTagName}
                  {_cusTagName}
                  {this.props.title}
                  {_createdOnString}
                  {_progressIcon}
                </span>;
}

return(
  <div>
    {_ResultPage}
  </div>
)
}

其實就是要判斷很多狀態 當然這些狀態也都是從 container 來的

ListTitle Container

// loading Library
import {
	connect
} from 'react-redux';
// loading Component
import ListTitle_CP from '../../../components/ListModules/ListTitle';

export default connect(
	(state) => ({
		EventTags: state.getIn(['InitReducer', 'EventTags']),
		CusTags: state.getIn(['InitReducer', 'CusTags']),
		TimeZone: state.getIn(['InitReducer', 'CurrentComp', 'TimeZone'])
	}),
	(dispatch) => ({}),
)(ListTitle_CP);

最後 就看一下 其中一個列表如何使用它囉

<ListTitle eventtagid={_subjItem.getIn(['subject_data', 'SubjTagID'])}
         custagid={_subjItem.getIn(['subject_data', 'CusTagID'])}
         title={_subjItem.getIn(['subject_data', 'Title'])}
         createdon={_subjItem.getIn(['subject_data', 'CreatedOn'])}
         progress={_subjItem.getIn(['subject_data', 'Progress'])}
         isRead={_subjItem.get('is_ins_data') == null ? 1:_subjItem.getIn(['is_ins_data', 'isRead'])}>
</ListTitle>

再來 我們來看 ReplyCount 我們是怎麼做的 當然這個簡單多了

ReplyCount Component

// Initial Library
import React from 'react';
// Semantic UI
import { Icon, Responsive, Table } from 'semantic-ui-react';

class ReplyCount_CP extends React.Component {

	constructor(props){
    	super(props);
  	}

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

  		return(
  			<div style={{textAlign:'center', height:'32px', lineHeight:'32px', padding:'0px', display:'inline-block', float:'left'}}>
  				{
  					this.props.replycount == 0 ?
					<div></div> : 
					<div>
						<Icon style={{display:'block'}} color='grey' name='chat' size='big'>
						</Icon>
						<label style={{color:'white', position: 'relative', fontSize:'14px', textAlign:'center',bottom: '30px',right: '2px'}}>
							{ this.props.replycount }
						</label>
					</div>
  				}
  			</div>
  		)
  	} 	
}

export default ReplyCount_CP;

UserFavPage Component

這裡會這樣用 就是因為上一篇所提到的 Semantic Ui Td 預設給的 Style 是有問題的

<Responsive as={Table.Cell} colSpan='1' minWidth={767}>
    <ReplyCount replycount={_subjItem.getIn(['subject_data', 'ReplyCount'])}></ReplyCount>
</Responsive>
<Responsive as={Table.Cell} colSpan='1' style={styles.listTableTd} maxWidth={766}>
    <ReplyCount replycount={_subjItem.getIn(['subject_data', 'ReplyCount'])}></ReplyCount>
</Responsive>

另外 附帶一提 我看過有些人 都會把每個 component 對應成 一個 container 我覺得這是有問題的

1. 又不是每個都會去跟 redux tree 做要參數的動作 或者是更新的動作
2. 我認為 組建就要要被人家組起來 container 就是可以廣泛的拉他們進來 所以摟 我覺得那樣的寫法怪怪的

Finally ~ 明天我們就會用 Semantic Ui Tab 把討論組的列表 分成幾個部分來 Loading
先看一下 尚未成形的畫面 哈