refactor: 合并请求路由改造以及评论数量bug修复

2021-10-09 16:39:47 +08:00 · 2021-10-09 16:39:47 +08:00 · da7ff8c749
parent f23d00167e
commit da7ff8c749
8 changed files with 236 additions and 25 deletions
--- a/src/forge/Activity/ActivityItem.js
+++ b/src/forge/Activity/ActivityItem.js
@ -27,7 +27,7 @@ class ActivityItem extends Component {
            :
            // 如果是合并请求
            <p className="itemLine">
-              <Link to={`/${owner}/${projectsId}/pulls/${item.trend_id}/Messagecount`} className="color-blue font-16">{item.name}</Link>
+              <Link to={`/${owner}/${projectsId}/pulls/${item.trend_id}`} className="color-blue font-16">{item.name}</Link>
              <span className="activity_type">{item.trend_type}</span>
            </p >
          }
--- a/src/forge/Main/Detail.js
+++ b/src/forge/Main/Detail.js
@ -727,7 +727,17 @@ class Detail extends Component {
                    (props) => (<UpdateMerge {...this.props} {...props} {...this.state} {...common} />)
                  }
                ></Route>
-                <Route path="/:owner/:projectsId/pulls/:mergeId/Messagecount"
+                <Route path="/:owner/:projectsId/pulls/:mergeId"
+                  render={
+                    (props) => (<MessageCount {...this.props} {...props} {...this.state} {...common} />)
+                  }
+                ></Route>
+                <Route path="/:owner/:projectsId/pulls/:mergeId/commits"
+                  render={
+                    (props) => (<MessageCount {...this.props} {...props} {...this.state} {...common} />)
+                  }
+                ></Route>
+                <Route path="/:owner/:projectsId/pulls/:mergeId/files"
                  render={
                    (props) => (<MessageCount {...this.props} {...props} {...this.state} {...common} />)
                  }
--- a/src/forge/Merge/MergeItem.js
+++ b/src/forge/Merge/MergeItem.js
@ -62,7 +62,7 @@ class MergeItem extends Component {
                <p className="mb15 df" style={{ alignItems: "center" }}>
                  <i className={`iconfont icon-hebingqingqiu1 font-14 mr3 i_${status}`}></i>
                  <Link
-                    to={`/${owner}/${projectsId}/pulls/${item.pull_request_id}/Messagecount`}
+                    to={`/${owner}/${projectsId}/pulls/${item.pull_request_id}`}
                    className="hide-1 font-15 color-grey-3 fwb lineh-30 mr10"
                    style={{ maxWidth: "300px" }}
                  >
@ -175,7 +175,7 @@ class MergeItem extends Component {
                    {item.journals_count ? (
                      <Link
                        className="mr5 color-grey-8"
-                        to={`/${owner}/${projectsId}/pulls/${item.pull_request_id}/Messagecount`}
+                        to={`/${owner}/${projectsId}/pulls/${item.pull_request_id}`}
                      >
                        <i className="iconfont icon-huifu1 font-15 mr5 ver-middle"></i>
                        {item.journals_count}
--- a/src/forge/Merge/MergeLinkFooter.jsx
+++ b/src/forge/Merge/MergeLinkFooter.jsx
@ -0,0 +1,192 @@
+import React, { Component } from 'react';
+import { Tabs, Spin } from 'antd';
+import { Link } from 'react-router-dom';
+import axios from 'axios';
+
+import Commits from './Commits';
+import Comments from '../comments/comments';
+import Files from './Files';
+
+import '../Order/order.css';
+import './merge.css';
+
+const { TabPane } = Tabs;
+
+class MergeFooter extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      commitsData: undefined,
+      filesData: undefined,
+      isSpin: false,
+      activeKey: '1',
+      commitCount: 0,
+      filesCount: 0,
+      // 总评论数量，包含回复
+      commentsTotalCount: 0,
+    };
+  }
+  componentDidMount() {
+    this.Init();
+  }
+
+  componentDidUpdate(prevProps) {
+    // 解决切换tab后浏览器回退不刷新的问题、点击tab后url变化但tab未切换的问题
+    const newPathname = this.props.location.pathname;
+    const prevPathname = prevProps.location.pathname;
+    if (newPathname !== prevPathname) {
+      this.Init();
+    }
+  }
+
+  Init = () => {
+    const { data, location, match } = this.props;
+    const { pathname } = location;
+    const { projectsId, owner, mergeId } = match.params;
+
+    let activeKey = '1';
+    if (pathname.indexOf('commits') > -1) {
+      activeKey = '2';
+      this.getCommit(owner, projectsId, mergeId);
+    } else if (pathname.indexOf('files') > -1) {
+      activeKey = '3';
+      this.getFile(owner, projectsId, mergeId);
+    }
+    this.setState({
+      activeKey: activeKey,
+      commitCount: data && data.commits_count,
+      filesCount: data && data.files_count,
+    });
+  };
+
+  getCommit = (owner, projectsId, mergeId) => {
+    this.setState({ isSpin: true });
+    const url = `/${owner}/${projectsId}/pulls/${mergeId}/commits.json`;
+    axios
+      .get(url)
+      .then((result) => {
+        if (result) {
+          this.setState({
+            commitsData: result.data.commits,
+            commitCount: result.data.commits_count,
+          });
+        }
+        this.setState({ isSpin: false });
+      })
+      .catch((error) => {
+        this.setState({ isSpin: false });
+      });
+  };
+
+  getFile = (owner, projectsId, mergeId) => {
+    this.setState({ isSpin: true });
+    const url = `/${owner}/${projectsId}/pulls/${mergeId}/files.json`;
+    axios
+      .get(url)
+      .then((result) => {
+        if (result) {
+          this.setState({
+            filesData: result.data,
+            filesCount: result.data.files_count,
+          });
+        }
+        this.setState({ isSpin: false });
+      })
+      .catch((error) => {
+        this.setState({ isSpin: false });
+      });
+  };
+
+  render() {
+    const { projectsId, owner, mergeId } = this.props.match.params;
+
+    const { order_id, data = {} } = this.props;
+    const {
+      isSpin,
+      activeKey,
+      filesCount,
+      commitCount,
+      filesData,
+      commitsData,
+    } = this.state;
+
+    // 评论数量优先取Comment组件中列表接口返回的，其次取合并请求详情接口中的，都没有取默认值0
+    const commentsTotalCount =
+      this.state.commentsTotalCount ||
+      (data.comments_total_count && parseInt(data.comments_total_count, 10)) ||
+      0;
+
+    return (
+      <div className="main" style={{ paddingTop: '0px' }}>
+        <Spin spinning={isSpin}>
+          <Tabs
+            activeKey={activeKey}
+            className="custom-commit-tabs"
+            animated={false}
+          >
+            <TabPane
+              tab={
+                <Link to={`/${owner}/${projectsId}/pulls/${mergeId}`}>
+                  <span className="font-16">评论</span>
+                  {commentsTotalCount && (
+                    <span className="tabNum">{commentsTotalCount}</span>
+                  )}
+                </Link>
+              }
+              key="1"
+            >
+              <Comments
+                order_id={order_id}
+                showNotification={this.props.showNotification}
+                only_show_content={true}
+                updateCommentsNum={(commentsCount) => {
+                  this.setState({ commentsTotalCount: commentsCount || 0 });
+                }}
+                {...this.props}
+              />
+            </TabPane>
+            <TabPane
+              tab={
+                <Link to={`/${owner}/${projectsId}/pulls/${mergeId}/commits`}>
+                  <span className="font-16">提交</span>
+                  {commitCount > 0 && (
+                    <span className="tabNum">{commitCount}</span>
+                  )}
+                </Link>
+              }
+              key="2"
+            >
+              {commitsData && (
+                <Commits
+                  {...this.props}
+                  commits={commitsData}
+                  projectsId={projectsId}
+                  owner={owner}
+                ></Commits>
+              )}
+            </TabPane>
+            <TabPane
+              tab={
+                <Link to={`/${owner}/${projectsId}/pulls/${mergeId}/files`}>
+                  <span className="font-16">文件</span>
+                  {filesCount > 0 && (
+                    <span className="tabNum">{filesCount}</span>
+                  )}
+                </Link>
+              }
+              key="3"
+            >
+              <Files
+                {...this.props}
+                data={filesData}
+                projectsId={projectsId}
+                owner={owner}
+              />
+            </TabPane>
+          </Tabs>
+        </Spin>
+      </div>
+    );
+  }
+}
+export default MergeFooter;
--- a/src/forge/Merge/MessageCount.js
+++ b/src/forge/Merge/MessageCount.js
@ -1,7 +1,6 @@
 import React, { Component } from "react";
 import { Tabs } from 'antd';
 import { Link } from "react-router-dom";
-import { AlignCenter } from '../Component/layout';
 import axios from "axios";
 import { getImageUrl } from "educoder";
 import {
@ -11,7 +10,6 @@ import {
  Dropdown,
  Icon,
  Menu,
-  Select,
  Tag,
  Button,
  Alert,
@ -19,9 +17,8 @@ import {
 import "./merge.css";
 import RenderHtml from "../../components/render-html";
 import "../Order/order.css";
-import MergeFooter from "./merge_footer";
+import MergeLinkFooter from "./MergeLinkFooter";

-const Option = Select.Option;
 const TextArea = Input.TextArea;

 function turnbar(str){
@ -283,13 +280,13 @@ class MessageCount extends Component {
          conflict_files && conflict_files.length>0 && 
          <div>
            <p className="mt10 font-16 pt10" style={{borderTop:"1px solid #f9d7d5"}}>如下文件有代码冲突：</p>
-            <p>
+            <div>
              {
                conflict_files.map((i,k)=>{
-                  return <p>{i}</p>
+                  return <p key={k}>{i}</p>
                })
              }
-            </p>
+            </div>
          </div>
        }
      </div>
@ -543,7 +540,7 @@ class MessageCount extends Component {
                          onChange={this.changbodypr}
                        />
                      </div>
-                      <p
+                      <div
                        className="clearfix mt15"
                        style={{ display: this.state.buttonshow }}
                      >
@ -558,19 +555,18 @@ class MessageCount extends Component {
                            取消
                          </Button>
                        </Spin>
-                      </p>
+                      </div>
                    </div>
                  </Spin>
                )}
              </div>
            </div>

-            <MergeFooter
-              footer_type={true}
+            <MergeLinkFooter
              order_id={data && data.issue.id}
              {...this.props}
              {...this.state}
-            ></MergeFooter>
+            ></MergeLinkFooter>
          </div>
        ) : (
          ""
--- a/src/forge/Merge/merge_form.js
+++ b/src/forge/Merge/merge_form.js
@ -195,7 +195,7 @@ class MergeForm extends Component {
                isSpin: false,
              });
              this.props.history.push(
-                `/${owner}/${projectsId}/pulls/${mergeId}/Messagecount`
+                `/${owner}/${projectsId}/pulls/${mergeId}`
              );
            } else {
              this.setState({
@ -287,7 +287,7 @@ class MergeForm extends Component {
                    type="default"
                    className="ml30"
                    onClick={()=>{
-                      this.props.history.push(merge_type === "new" ? `/${owner}/${projectsId}/pulls` : `/${owner}/${projectsId}/pulls/${mergeId}/detail`)
+                      this.props.history.push(merge_type === "new" ? `/${owner}/${projectsId}/pulls` : `/${owner}/${projectsId}/pulls/${mergeId}`)
                    }}
                  >
                    <span className="plr10">取消</span>
--- a/src/forge/comments/children_comments.js
+++ b/src/forge/comments/children_comments.js
@ -17,6 +17,7 @@ class children_comments extends Component {
      page: 1,
      journal_spin: false,
      search_count: 0,
+      isSpin: false,
    };
  }

@ -71,6 +72,9 @@ class children_comments extends Component {
      .then((result) => {
        if (result) {
          this.getChildrenJournals();
+          // 删除回复后，如果需手动调用父组件查询评论列表的接口，以保持角标（评论数量）的一致（合并请求页面），
+          // 否则直接查顶级评论列表，否则只查询当前子评论列表（易修页面）
+          this.props.refreshCommentList && this.props.refreshCommentList();
        }
      })
      .catch((error) => {
@ -80,9 +84,15 @@ class children_comments extends Component {

  // 翻页
  ChangePage = (page) => {
-    this.state.page = page;
-    this.state.isSpin = true;
-    this.getChildrenJournals();
+    // this.state.page = page;
+    // this.state.isSpin = true;
+    // 使用回调的写法，这样在getChildrenJournals中使用的就是最新的state
+    this.setState({
+      page,
+      isSpin: true
+    }, () => {
+      this.getChildrenJournals();
+    });
  };

  commentCtx = (v) => {
@ -183,7 +193,7 @@ class children_comments extends Component {
              size="large"
              loading={isSpin}
              dataSource={journalsdata.issue_journals}
-              renderItem={(item) => <List.Item>{this.renderList(item)}</List.Item>}
+              renderItem={(item) => <List.Item key={item.id}>{this.renderList(item)}</List.Item>}
            />
            {this.Paginations()}
          </div>
--- a/src/forge/comments/comments.js
+++ b/src/forge/comments/comments.js
@ -151,6 +151,8 @@ class comments extends Component {
            isSpin: false,
            fileList: undefined,
          });
+          const { updateCommentsNum } = this.props;
+          updateCommentsNum && updateCommentsNum(result.data.journals_total_count);
        }
      })
      .catch((error) => {
@ -372,7 +374,7 @@ class comments extends Component {

    const renderList = (item) => {
      return (
-        <div className="width100">
+        <div className="width100" key={item.id}>
          <div className="pb5">
            <Link
              to={`/${item && item.user_login}`}
@ -456,6 +458,7 @@ class comments extends Component {
              parent_id={item.id}
              onRef={this.onRef}
              children_comment_id={new_journal_id}
+              refreshCommentList={this.getjournalslist}
              {...this.props}
            ></ChildrenComments>
          </div>
@ -500,7 +503,7 @@ class comments extends Component {
                loading={isSpin}
                header=""
                dataSource={journalsdata.issue_journals}
-                renderItem={(item) => <List.Item>{renderList(item)}</List.Item>}
+                renderItem={(item) => <List.Item key={item.id}>{renderList(item)}</List.Item>}
              />
            )}
            {this.Paginations()}
@ -558,7 +561,7 @@ class comments extends Component {
                      header=""
                      dataSource={journalsdata.issue_journals}
                      renderItem={(item) => (
-                        <List.Item>{renderList(item)}</List.Item>
+                        <List.Item key={item.id}>{renderList(item)}</List.Item>
                      )}
                    />
                  )}