|
|
import React from 'react'
|
|
|
import ReactDOM from 'react-dom'
|
|
|
import axios from 'axios'
|
|
|
import update from 'immutability-helper'
|
|
|
import PostItem from './PostItem'
|
|
|
|
|
|
import { CircularProgress } from 'material-ui/Progress';
|
|
|
|
|
|
import { queryString } from 'educoder'
|
|
|
import { on, off, updatePageParams } from 'educoder'
|
|
|
import './Post.css'
|
|
|
const $ = window.$
|
|
|
|
|
|
function urlStringify(params) {
|
|
|
let noParams = true;
|
|
|
let paramsUrl = '';
|
|
|
for (let key in params) {
|
|
|
noParams = false;
|
|
|
paramsUrl += `${key}=${params[key]}&`
|
|
|
}
|
|
|
if (noParams) {
|
|
|
return '';
|
|
|
}
|
|
|
paramsUrl = paramsUrl.substring(0, paramsUrl.length - 1);
|
|
|
return paramsUrl;
|
|
|
}
|
|
|
export function postPaginationHOC(options = {}) {
|
|
|
// options.isMyPublish
|
|
|
return function wrap(WrappedComponent) {
|
|
|
|
|
|
return class II extends React.Component {
|
|
|
constructor(props) {
|
|
|
super(props)
|
|
|
|
|
|
this.state = {
|
|
|
currentPage: 1,
|
|
|
loadingMemos: true
|
|
|
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
componentDidMount() {
|
|
|
$('body>#root').on('onMemoDelete', (event) => {
|
|
|
// const val = $('body>#root').data('onMemoDelete')
|
|
|
const val = window.onMemoDelete ;
|
|
|
this.onMemoDelete( JSON.parse(decodeURIComponent(val)) )
|
|
|
})
|
|
|
window.$('#shixun_search_input').val('')
|
|
|
|
|
|
this.props.setSearchValue('')
|
|
|
|
|
|
this.fetchMemos(null, '')
|
|
|
|
|
|
const that = this;
|
|
|
$(window).on('popstate', (e) => {
|
|
|
var state = e.originalEvent.state;
|
|
|
console.log('popstate', state)
|
|
|
if (state !== null) {
|
|
|
|
|
|
let currentPage = that.state.currentPage;;
|
|
|
// // 浏览器地址改变了
|
|
|
const search = that.props.history.location.search
|
|
|
const parsed = queryString.parse(search);
|
|
|
if (parsed.page != currentPage) {
|
|
|
currentPage = parseInt( parsed.page || 1)
|
|
|
// that.setSearchValue('')
|
|
|
that.fetchMemos(currentPage)
|
|
|
this.setState({
|
|
|
currentPage,
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// RightMyPublish组件发过来的消息
|
|
|
// $(window).on('setSearchValue', (event, val, noFetch)=>{
|
|
|
|
|
|
// })
|
|
|
|
|
|
on('hotTagClick', (event, tagName, index) => {
|
|
|
this.props.setHotLabelIndex(tagName.selectedHotLabelIndex, () => {
|
|
|
this.fetchMemos(1, undefined)
|
|
|
})
|
|
|
})
|
|
|
}
|
|
|
componentWillReceiveProps(newProps, newContext) {
|
|
|
if (newProps.enterKeyFlag !== this.props.enterKeyFlag) {
|
|
|
const childPath = this.props.match.path.split('/:')[0]
|
|
|
// 加入一个浏览地址
|
|
|
const _search = this.props.location.search;
|
|
|
if (_search) {
|
|
|
const parsed = queryString.parse(_search);
|
|
|
if (parsed.page != 1) {
|
|
|
parsed.page = 1;
|
|
|
this.props.history.push(`${this.props.match.url}?${queryString.stringify(parsed)}`)
|
|
|
}
|
|
|
}
|
|
|
this.fetchMemos(1, newProps.searchValue, newProps.selectedHotLabelIndex) // 搜索框模糊搜索，重置为第一页
|
|
|
|
|
|
}
|
|
|
}
|
|
|
componentWillUnmount() {
|
|
|
// 要移除掉，不然到了MemoDetail页面，可能会有2个onMemoDelete监听
|
|
|
$('body>#root').off('onMemoDelete')
|
|
|
$(window).off('setSearchValue')
|
|
|
$(window).off('popstate')
|
|
|
off('hotTagClick')
|
|
|
}
|
|
|
fetchMemos(arg_currentPage, arg_searchValue, arg_selectedHotLabelIndex) {
|
|
|
let { match, history } = this.props
|
|
|
|
|
|
let searchValue = arg_searchValue != undefined ? arg_searchValue : this.props.searchValue
|
|
|
// 根据参数初始化页数
|
|
|
|
|
|
const memoType = match.params.memoType;
|
|
|
const urlArray = match.url.split('/')
|
|
|
const lastPath = urlArray[2]
|
|
|
|
|
|
// 1 问题反馈
|
|
|
// 3 操作指南 5 技术分享
|
|
|
|
|
|
const memoTypeMap = {
|
|
|
'guide': 3,
|
|
|
'techShare': 5
|
|
|
}
|
|
|
const orderTypeMap = {
|
|
|
'hottest': 'replies_count',
|
|
|
'newest': 'created_at', // 'created_at',
|
|
|
}
|
|
|
const _search = this.props.history.location.search;
|
|
|
const parsed = queryString.parse(_search);
|
|
|
|
|
|
let currentPage = parseInt( arg_currentPage ? arg_currentPage : (parsed.page || 1) )
|
|
|
|
|
|
const params = {
|
|
|
// replies_count最热 created_at 最新
|
|
|
// s_order: 'replies_count',
|
|
|
page: currentPage,
|
|
|
|
|
|
// forum: // forum_id
|
|
|
// user_id
|
|
|
}
|
|
|
if (searchValue) {
|
|
|
params.search = searchValue.trim()
|
|
|
}
|
|
|
let orderType = ''
|
|
|
if (memoType==='all') {
|
|
|
orderType = parsed.order || 'hottest';
|
|
|
params.order = orderTypeMap[orderType]
|
|
|
} else if (options.isMyPublish) {
|
|
|
params.user_id = -1
|
|
|
} else if (memoType) {
|
|
|
params.forum = memoType
|
|
|
if (memoType == 5) { // 讨论区的技术分享tab按照创建时间倒序
|
|
|
params.order = 'created_at'
|
|
|
}
|
|
|
}
|
|
|
|
|
|
let { selectedHotLabelIndex, hot_tags } = this.props;
|
|
|
selectedHotLabelIndex = arg_selectedHotLabelIndex ? arg_selectedHotLabelIndex : selectedHotLabelIndex
|
|
|
if (selectedHotLabelIndex !== -1 && hot_tags[selectedHotLabelIndex]) {
|
|
|
params.tag_repertoire_id = hot_tags[selectedHotLabelIndex].tag_repertoire_id // encodeURIComponent()
|
|
|
}
|
|
|
|
|
|
|
|
|
let paramsUrl = queryString.stringify(params)
|
|
|
const memosUrl = '/memos.json?' + paramsUrl // /${challenge.identifier}/star
|
|
|
|
|
|
this.setState({
|
|
|
currentPage,
|
|
|
loadingMemos: true,
|
|
|
orderType: orderType
|
|
|
})
|
|
|
// 获取memo list
|
|
|
axios.get(memosUrl,{
|
|
|
// withCredentials: true,
|
|
|
})
|
|
|
.then((response) => {
|
|
|
const memo_count = response.data.memo_count
|
|
|
if (memo_count>=0) {
|
|
|
|
|
|
const maxPage = Math.ceil( memo_count / 15 )
|
|
|
// page超出，显示最后一页
|
|
|
if (maxPage != 0 && maxPage < currentPage) {
|
|
|
this.fetchMemos(maxPage);
|
|
|
return;
|
|
|
}
|
|
|
// const user = response.data.current_user;
|
|
|
// user.tidding_count = response.data.tidding_count;
|
|
|
// this.props.initCommonState(user)
|
|
|
this.props.initForumState(response.data)
|
|
|
this.setState({
|
|
|
p_forum_id: params.forum,
|
|
|
p_s_order: params.s_order,
|
|
|
loadingMemos: false
|
|
|
})
|
|
|
}
|
|
|
|
|
|
}).catch((error) => {
|
|
|
console.log(error)
|
|
|
})
|
|
|
}
|
|
|
|
|
|
|
|
|
onCurrentPageChange(pageNum) {
|
|
|
this.setState({
|
|
|
currentPage: pageNum
|
|
|
})
|
|
|
}
|
|
|
|
|
|
onPaginationChange(pageNum, pageSize) {
|
|
|
window.$("html,body").animate({"scrollTop":0})
|
|
|
|
|
|
updatePageParams(pageNum, this.props)
|
|
|
|
|
|
// 加入一个浏览地址
|
|
|
// const params = {
|
|
|
// page: pageNum
|
|
|
// }
|
|
|
// if (this.state.orderType) {
|
|
|
// params.order = this.state.orderType;
|
|
|
// }
|
|
|
// this.props.history.push(`${url}?${queryString.stringify(parsed)}`)
|
|
|
|
|
|
this.fetchMemos(pageNum);
|
|
|
|
|
|
// this.setState({
|
|
|
// currentPage: pageNum
|
|
|
// })
|
|
|
}
|
|
|
|
|
|
// 置顶
|
|
|
setTop(memo) {
|
|
|
const params = {
|
|
|
sticky: memo.sticky ? 0 : 1,
|
|
|
}
|
|
|
if (this.state.p_s_order) {
|
|
|
params.order = this.state.p_s_order;
|
|
|
}
|
|
|
if (this.state.p_forum_id) {
|
|
|
params.forum_id = this.state.p_forum_id;
|
|
|
}
|
|
|
let paramsUrl = urlStringify(params)
|
|
|
const set_top_or_down_Url = `/memos/${memo.id}/sticky_or_cancel.json?${paramsUrl}`;
|
|
|
// 获取memo list
|
|
|
axios.post(set_top_or_down_Url, {
|
|
|
// withCredentials: true,
|
|
|
})
|
|
|
.then((response) => {
|
|
|
const status = response.data.status
|
|
|
if (status === 0) {
|
|
|
this.fetchMemos(1, '')
|
|
|
|
|
|
// const { memo_list } = response.data;
|
|
|
// this.props.initForumState({ memo_list })
|
|
|
// 刷新列表
|
|
|
// TODO 服务端直接返回第一页列表
|
|
|
// this.props.history.replace('/')
|
|
|
}
|
|
|
}).catch((error) => {
|
|
|
console.log(error)
|
|
|
})
|
|
|
}
|
|
|
// 取消置顶
|
|
|
setDown(memo) {
|
|
|
this.setTop(memo);
|
|
|
}
|
|
|
onMemoDelete(memo) {
|
|
|
const deleteUrl = `/memos/${memo.id}.json`;
|
|
|
// 获取memo list
|
|
|
axios.delete(deleteUrl, {
|
|
|
// withCredentials: true,
|
|
|
})
|
|
|
.then((response) => {
|
|
|
const status = response.data.status
|
|
|
if (status === 0) {
|
|
|
|
|
|
this.props.showSnackbar('删除成功');
|
|
|
// 刷新列表
|
|
|
this.fetchMemos();
|
|
|
}
|
|
|
}).catch((error) => {
|
|
|
console.log(error)
|
|
|
})
|
|
|
}
|
|
|
// item渲染
|
|
|
//
|
|
|
renderMemoList() {
|
|
|
const { memo_list, user } = this.props;
|
|
|
if (!memo_list) {
|
|
|
return ''
|
|
|
}
|
|
|
return memo_list.map( (item, index) => {
|
|
|
return (
|
|
|
<PostItem key={item.id} user={user} index={index} {...this.props}
|
|
|
setTop={(memo)=>this.setTop(memo)}
|
|
|
setDown={(memo)=>this.setDown(memo)}
|
|
|
memo={item}
|
|
|
></PostItem>
|
|
|
)
|
|
|
})
|
|
|
}
|
|
|
|
|
|
render() {
|
|
|
const { loadingMemos } = this.state;
|
|
|
const { memo_list, searchValue, showSearchValue, memo_count, selectedHotLabelIndex, hot_tags} = this.props;
|
|
|
|
|
|
// 规则： 搜索框输入了值 或者 选择了热门标签的时候显示该提示
|
|
|
const _showSearchValue = showSearchValue || selectedHotLabelIndex != -1
|
|
|
let _searchValue;
|
|
|
if (showSearchValue) {
|
|
|
_searchValue = searchValue
|
|
|
} else if (selectedHotLabelIndex != -1){
|
|
|
_searchValue = hot_tags[selectedHotLabelIndex].name || hot_tags[selectedHotLabelIndex]
|
|
|
}
|
|
|
|
|
|
return (
|
|
|
|
|
|
<div className="edu-back-white" id="forum_index_list"> {/* fl with100 */}
|
|
|
<div className="clearfix">
|
|
|
{ _showSearchValue &&
|
|
|
<div className="noMemosTip" style={{display: loadingMemos ? 'none' : 'block'}}>
|
|
|
<span className="fr pr20" id="search_result">
|
|
|
共找到
|
|
|
<span className="color-orange03">{memo_count}</span>个"
|
|
|
<span className="color-orange03">{_searchValue}</span>"相关的结果
|
|
|
</span>
|
|
|
</div> }
|
|
|
|
|
|
<CircularProgress size={40} thickness={3}
|
|
|
style={{ marginLeft: 'auto', marginRight: 'auto', paddingTop: '20%'
|
|
|
, display: loadingMemos ? 'block': 'none' }}/>
|
|
|
{ !loadingMemos &&
|
|
|
<WrappedComponent {...this.props} {...this.state}
|
|
|
|
|
|
onPaginationChange={(pageNum, pageSize) => this.onPaginationChange(pageNum, pageSize)}
|
|
|
onCurrentPageChange={(pageNum, pageSize) => this.onCurrentPageChange(pageNum, pageSize)}
|
|
|
|
|
|
renderMemoList={() => this.renderMemoList()}
|
|
|
fetchMemos={(arg1, arg2) => this.fetchMemos(arg1, arg2)}
|
|
|
|
|
|
></WrappedComponent>
|
|
|
}
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
} |
