From 6fa8808a01cd47aa009c4001b86757b0f7cd60e5 Mon Sep 17 00:00:00 2001
From: harry <harry@fangmingyi.com>
Date: Wed, 4 Mar 2020 22:20:53 +0800
Subject: [PATCH] courses/2346/common_homeworks/39148/2883174/appraise

---
 public/react/src/index.js                     |   2 +-
 .../busyWork/reply/CommonWorkAppraiseReply.js |  29 +----
 .../tasks/GraduationTasksappraiseReply.js     |  15 +--
 .../graduation/tasks/Graduationtaskitem.js    | 122 ++++++++----------
 4 files changed, 58 insertions(+), 110 deletions(-)

diff --git a/public/react/src/index.js b/public/react/src/index.js
index 250d64642..18c11c03f 100644
--- a/public/react/src/index.js
+++ b/public/react/src/index.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import './index.css'
-import App from './components/test-panel'
+import App from './App'
 import * as serviceWorker from './serviceWorker'
 
 window.__useKindEditor = false;
diff --git a/public/react/src/modules/courses/busyWork/reply/CommonWorkAppraiseReply.js b/public/react/src/modules/courses/busyWork/reply/CommonWorkAppraiseReply.js
index 6ba8806d6..6beb9418c 100644
--- a/public/react/src/modules/courses/busyWork/reply/CommonWorkAppraiseReply.js
+++ b/public/react/src/modules/courses/busyWork/reply/CommonWorkAppraiseReply.js
@@ -15,9 +15,6 @@ import './CommonWorkAppraiseReply.css';
 import ModulationModal from "../../coursesPublic/ModulationModal";
 import Modals from '../../../modals/Modals';
 
-/* 
-
-*/
 class CommonWorkAppraiseReply extends Component {
   constructor(props) {
     super(props);
@@ -32,7 +29,6 @@ class CommonWorkAppraiseReply extends Component {
 
   fetchAllComments = () => {
     let category_id = this.props.match.params.category_id;
-    // const url = `/graduation_works/${category_id}/comment_list.json`
     const task_id = this.props.task_id
     const url = `/student_works/${task_id}/comment_list.json`
     axios.get(url).then((result) => {
@@ -246,27 +242,10 @@ class CommonWorkAppraiseReply extends Component {
               destroyOnClose={true}
               centered={true}
             /> : ""}
-
-            {/*<div style={{ width:'100%',height:'75px'}} >*/}
-            {/*<p className=" fl color-black mt25 summaryname">{datalist&&datalist.task_name}</p>*/}
-            {/*<a className="color-grey-6 fr font-16 mt10 mr20" onClick={this.goback}>返回</a>*/}
-            {/*{this.props.isStudent()?<a className={"fr color-blue font-16 mt10 mr20"} onClick={this.addAccessory}>补交附件</a>:""}*/}
-            {/*</div>*/}
-
-
-
-            {/* {
-           (!!comment_scores.length && 
-          <div className={"color-grey-6 mb10"}>
-            <span className="labal">全部评阅</span>
-            <span className="count">（{comment_scores.length}）</span> 
-           </div>)} */}
             <div className={`padding20-30 ${comment_scores.length ? 'bor-bottom-greyE' : ''}`}>
               {!!comment_scores.length && <div className={"color-grey-6 font-16"}>
                 全部评阅<span className="count">{comment_scores.length === 0 ? "" : `(${comment_scores.length})`}</span>
 
-                {/* <div style={{ width:'100%',height:'75px'}} ></div> */}
-
                 {/* true: 老师身份显示“调分”入口，false: 不显示调分入口 */}
                 {isAdmin && !allow_score &&
                   <a className={"fr color-blue font-16"} onClick={() => this.showModulationtype(this.props.task_id)}>调分</a>
@@ -281,15 +260,9 @@ class CommonWorkAppraiseReply extends Component {
                 showSameScore={isGroup && isAdmin}
               ></GraduationTasksappraiseMainEditor>}
             </div>
-            {/* ${!!comment_scores.length ? 'bor-bottom-greyE' : ''} */}
             <div className={`padding20  memoReplies commentsDelegateParent course-message`}
               style={{ paddingTop: '0px', paddingBottom: '0px' }}
             >
-              {/* 
-            .course-message .panel-comment_item {
-                margin-top: ${needNiPingEditor ? 56 : 28}px;
-              }
-             */}
               <style>{`
               
               .course-message .panel-comment_item .comment_orig_content {
@@ -305,7 +278,7 @@ class CommonWorkAppraiseReply extends Component {
             `}</style>
               {!!comment_scores.length && <div className="panel-comment_item">
                 {comment_scores.map((item, index) => {
-                  return <CCommentItem item={item} onDelete={this.onDelete} {...this.props} commentIndex={index} replySuccess={this.replySuccess}></CCommentItem>
+                  return <CCommentItem key={index} item={item} onDelete={this.onDelete} {...this.props} commentIndex={index} replySuccess={this.replySuccess}></CCommentItem>
                 })}
               </div>}
             </div>
diff --git a/public/react/src/modules/courses/graduation/tasks/GraduationTasksappraiseReply.js b/public/react/src/modules/courses/graduation/tasks/GraduationTasksappraiseReply.js
index d4b4e6b63..20ea1fb8e 100644
--- a/public/react/src/modules/courses/graduation/tasks/GraduationTasksappraiseReply.js
+++ b/public/react/src/modules/courses/graduation/tasks/GraduationTasksappraiseReply.js
@@ -7,7 +7,6 @@ import '../../../forums/Post.css'
 import '../../../comment/Comment.css'
 import '../../common/courseMessage.css'
 import './GraduationTasksappraiseReply.css'
-
 /* 
 
 */
@@ -91,8 +90,6 @@ class GraduationTasksappraiseReply extends Component {
   }
 
   showModulationtype = (id) => {
-    // console.log(id)
-
     this.setState({
       Modulationtype: true,
       operationId: id
@@ -178,14 +175,4 @@ class GraduationTasksappraiseReply extends Component {
     )
   }
 }
-export default ImageLayerOfCommentHOC()(GraduationTasksappraiseReply);
-{/*<div id="forum_list" className="forum_table">*/ }
-{/*<div className="mh650 edu-back-white">*/ }
-{/*<div*/ }
-{/*className="edu-tab-con-box clearfix edu-txt-center">*/ }
-{/*<img className="edu-nodata-img mb20"*/ }
-{/*src={getImageUrl("images/educoder/nodata.png")}/>*/ }
-{/*<p className="edu-nodata-p mb30">暂时还没有相关数据哦！</p>*/ }
-{/*</div>*/ }
-{/*</div>*/ }
-{/*</div>*/ }
\ No newline at end of file
+export default ImageLayerOfCommentHOC()(GraduationTasksappraiseReply);
\ No newline at end of file
diff --git a/public/react/src/modules/courses/graduation/tasks/Graduationtaskitem.js b/public/react/src/modules/courses/graduation/tasks/Graduationtaskitem.js
index 662369dd3..f6af7e0b9 100644
--- a/public/react/src/modules/courses/graduation/tasks/Graduationtaskitem.js
+++ b/public/react/src/modules/courses/graduation/tasks/Graduationtaskitem.js
@@ -1,83 +1,71 @@
-import React,{ Component } from "react";
-import { getImageUrl, markdownToHTML, WordsBtn } from 'educoder';
-import { Tooltip } from  'antd'
+import React, { useMemo } from "react";
+import { getImageUrl, markdownToHTML } from 'educoder';
+import { Tooltip } from 'antd'
+
 const _origin = ''
-class Graduationtaskitem extends Component{
-	constructor(props){
-		super(props);
+export default ({ item, onDelete, isChildCommentPagination, loadMoreChildComments }) => {
+	const { content, id, user_login, image_url, username, comment_role, score, is_invalid, time, children, isAllChildrenLoaded, } = item
+	const md = useMemo(() => {
+		return markdownToHTML(content)
+	}, [content])
 
+	function onDeleteHandler() {
+		onDelete(item)
 	}
-	parseCommentContent = (oldContent) => {
-		return markdownToHTML(oldContent);
-	}
-	renderChildenComments = () => {
 
+	function onLoadMoreComments() {
+		loadMoreChildComments(item)
 	}
-	render(){
-		let { item }=this.props;
-		const _content = item.content && this.parseCommentContent(item.content)
-		return(
-			<div className="comment_item_cont appraise df clearfix" key={item.id}>
-				<div className="J_Comment_Face fl">
-					<a href={`${_origin}/users/${item.user_login}`} target="_blank">
-						<img alt="用户头像" height="50" src={getImageUrl(`images/${item.image_url}`)} width="50"/>
-					</a>
-				</div>
 
-				<div className="t_content fl">
-					<div className="J_Comment_Reply">
-						<div className="comment_orig_content" style={{ margin:"0px" }}>
+	console.log(md, '-----------')
 
+	return (
+		<div className="comment_item_cont appraise df clearfix" key={id}>
+			<div className="J_Comment_Face fl">
+				<a href={`${_origin}/users/${user_login}`} target="_blank">
+					<img alt="用户头像" height="50" src={getImageUrl(`images/${image_url}`)} width="50" />
+				</a>
+			</div>
+			<div className="t_content fl">
+				<div className="J_Comment_Reply">
+					<div className="comment_orig_content" style={{ margin: "0px" }}>
+						<div className="J_Comment_Info clearfix mt3">
+							<div className="t_info fl">
+								<a href={`${_origin}/users/${user_login}`} className="content-username hide fl"> {username}（{comment_role}） </a>
+								<span className="t_area fl">{time}</span>
+								{score != null && score >= 0 && <span className="score_area fl">{score}分</span>}
 
-							<div className="J_Comment_Info clearfix mt3">
-								<div className="t_info fl">
-									<a href={`${_origin}/users/${item.user_login}`} className="content-username hide fl">
-										{item.username}（{item.comment_role}）
-									</a>
-									<span className="t_area fl">{item.time}</span>
-									{/* 分数 */}
-									{item.score != null && item.score >= 0 && <span className="score_area fl">{item.score}分</span>}
-
-									{ !item.is_invalid && item.delete && <Tooltip title={ "删除" } >
-										<i className="iconfont icon-shanchu mr5 fr" style={{marginLeft: '6px'}}
-											 onClick={() => this.props.onDelete(item)}>
-										</i>
-									</Tooltip>}
-									{/* <WordsBtn style="blue" className="fr">回复</WordsBtn> */}
-									{ item.is_invalid ? <span className="validate_area fr">失效</span> : ''}
-								</div>
+								{!is_invalid && item.delete && <Tooltip title={"删除"} >
+									<i className="iconfont icon-shanchu mr5 fr" style={{ marginLeft: '6px' }}
+										onClick={onDeleteHandler}>
+									</i>
+								</Tooltip>}
+								{is_invalid ? <span className="validate_area fr">失效</span> : ''}
 							</div>
+						</div>
 
-							{!!_content && <div className="comment_content  clearfix" id={`reply_content_${item.id}`}>
-								<div className="color-grey-3" id={`reply_content_${item.id}`}>
-									<div  className={"break_word_comments"} dangerouslySetInnerHTML={{__html: _content}}></div>
-									<div className="cl"></div>
-								</div>
-							</div>}
-							{!_content && <span className="color656565 mt2 color-grey-9 font-12 mr8" style={{ display: 'inline-block'}}>{"暂未写评语"}</span>}
-
-							<div className="childrenCommentsView">
-								{(item && item.children && item.children.length) ? <div className="trangle"></div>: ''}
-								{this.renderChildenComments(item)}
-								{ item.isAllChildrenLoaded != true && item.children && this.props.isChildCommentPagination == true && item.children.length >= 5?
-									<Tooltip title={ "点击查看更多回复" } disableFocusListener={true}>
-										<div className="loadMoreChildComments" onClick={() => {this.props.loadMoreChildComments && this.props.loadMoreChildComments(item)}}>
-											<i className="iconfont icon-xiajiantou"></i>
-										</div>
-									</Tooltip>
-									: ''}
+						{!!md ? <div className="comment_content  clearfix" id={`reply_content_${id}`}>
+							<div className="color-grey-3" id={`reply_content_${id}`}>
+								<div className={"break_word_comments"} dangerouslySetInnerHTML={{ __html: md }}></div>
+								<div className="cl"></div>
 							</div>
-							{/*mr10 */}
-							<p className="fr orig_reply">
-								{/* 第二排右侧按钮区域 */}
-							</p>
-
+						</div> : <span className="color656565 mt2 color-grey-9 font-12 mr8" style={{ display: 'inline-block' }}>{"暂未写评语"}</span>}
 
+						<div className="childrenCommentsView">
+							{(children && children.length) ? <div className="trangle"></div> : ''}
+							{isAllChildrenLoaded != true && children && isChildCommentPagination == true && children.length >= 5 ?
+								<Tooltip title={"点击查看更多回复"} disableFocusListener={true}>
+									<div className="loadMoreChildComments" onClick={onLoadMoreComments}>
+										<i className="iconfont icon-xiajiantou"></i>
+									</div>
+								</Tooltip>
+								: ''}
 						</div>
+						<p className="fr orig_reply"></p>
 					</div>
 				</div>
 			</div>
-		)
-	}
-}
-export default Graduationtaskitem;
\ No newline at end of file
+		</div>
+
+	)
+}
\ No newline at end of file