From a09d330a7ed9f71bc58a8f1d8a52a96f4609269a Mon Sep 17 00:00:00 2001 From: yuzhantian <2205129388@qq.com> Date: Tue, 12 Oct 2021 16:12:16 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=96=B0=E5=BB=BA=E5=90=88?= =?UTF-8?q?=E5=B9=B6=E8=AF=B7=E6=B1=82=E8=B7=AF=E7=94=B1=E6=94=B9=E9=80=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 10 +- src/forge/Main/CoderDepot.jsx | 2 +- src/forge/Main/Detail.js | 20 +- src/forge/Main/tree/Index.jsx | 2 +- src/forge/Merge/CreateMerge.js | 413 ++++++++++++++++++++++++++++ src/forge/Merge/MergeLinkFooter.jsx | 10 +- src/forge/Merge/MessageCount.js | 2 +- src/forge/Merge/NewMerge.js | 4 +- src/forge/Merge/merge.js | 2 +- src/forge/Merge/merge_footer.js | 227 +++++---------- src/forge/Merge/merge_form.js | 3 +- src/forge/Merge/no_data.js | 2 +- 12 files changed, 514 insertions(+), 183 deletions(-) create mode 100644 src/forge/Merge/CreateMerge.js diff --git a/src/App.js b/src/App.js index 442d4f323..3072aca5b 100644 --- a/src/App.js +++ b/src/App.js @@ -97,10 +97,10 @@ const ProjectIndex = Loadable({ loading: Loading, }); -const CreateMerge = Loadable({ - loader: () => import('./forge/Merge/NewMerge'), - loading: Loading, -}) +// const CreateMerge = Loadable({ +// loader: () => import('./forge/Merge/NewMerge'), +// loading: Loading, +// }) // 此处仅维护前端可能的一级路由，不用进行项目或者组织判断的字段。 const keyWord = ["explore", "settings", "setting", "mulan", "wiki", "issues", "setting", "trending", "code", "projects", "pulls", "mine", "login", "register", "email", "export", "nopage", "404", "403", "500", "501", "search", "organize"]; @@ -279,7 +279,7 @@ class App extends Component { } /> {/* 项目PR */} - () } diff --git a/src/forge/Main/CoderDepot.jsx b/src/forge/Main/CoderDepot.jsx index 70d1901eb..df5e2449b 100644 --- a/src/forge/Main/CoderDepot.jsx +++ b/src/forge/Main/CoderDepot.jsx @@ -425,7 +425,7 @@ function CoderDepot(props){
{ baseOperate && - urlLink(`/${owner}/${projectsId}/pulls/new/${branchName || defaultBranch}`)} >+ 合并请求 + urlLink(`/${owner}/${projectsId}/compare/${branchName || defaultBranch}`)} >+ 合并请求 } { baseOper && diff --git a/src/forge/Main/Detail.js b/src/forge/Main/Detail.js index bc35344f4..70283d310 100644 --- a/src/forge/Main/Detail.js +++ b/src/forge/Main/Detail.js @@ -70,7 +70,7 @@ const MergeIndexDetail = Loadable({ }) const CreateMerge = Loadable({ - loader: () => import('../Merge/NewMerge'), + loader: () => import('../Merge/CreateMerge'), loading: Loading, }) @@ -150,7 +150,9 @@ function checkPathname(projectsId, owner, pathname) { name = "about" } else if (url.indexOf("/issues") > -1 || url.indexOf("Milepost") > 0) { name = "issues"; - } else if (url.indexOf("/pulls") > -1) { + } else if (url.indexOf("/pulls") > -1 || url.indexOf("/compare") > -1) { + // /pulls，合并请求除新建合并请求外， + // /compare，新建合并请求 name = "pulls" } else if (url.indexOf("/milestones") > -1) { name = "milestones" @@ -713,17 +715,17 @@ class Detail extends Component { } > {/* 新建合并请求 */} - () + } + > */} + () } > - () - } - > - () } diff --git a/src/forge/Main/tree/Index.jsx b/src/forge/Main/tree/Index.jsx index 84220a0bb..00953b052 100644 --- a/src/forge/Main/tree/Index.jsx +++ b/src/forge/Main/tree/Index.jsx @@ -91,7 +91,7 @@ function Index(props) {
{ (isManager || isDeveloper) && (projectDetail && projectDetail.type!==2) && - + 合并请求 + + 合并请求 } 下载 diff --git a/src/forge/Merge/CreateMerge.js b/src/forge/Merge/CreateMerge.js new file mode 100644 index 000000000..2ee29c39f --- /dev/null +++ b/src/forge/Merge/CreateMerge.js @@ -0,0 +1,413 @@ +import React, { Component } from 'react'; +import { Input, Select, Spin, Alert } from 'antd'; +import axios from 'axios'; +import MergeForm from './merge_form'; +import MergeFooter from './merge_footer'; + +import '../Order/order.css'; +import './merge.css'; + +/** + * 根据url获取目标仓库、目标分支、源仓库、源分支 + * 路由规则：owner/projectId/compare/merge...pullowner:pullBranch + * 可能存在的情况 + * 1、代码库首页跳转，仓库相同，目标分支为默认分支，owner/projectId/compare/pullBranch + * 2、代码库分支列表，仓库相同，目标分支为默认分支，owner/projectId/compare/pullBranch + * 3、合并请求列表页（新建、无数据时的提示），仓库相同，源、目标都为默认分支，owner/projectId/compare + * 4、新建页面，切换分支、切换目标仓库、刷新页面等，存在所有可能情况 + */ +function getBranchParams(pathname) { + const result = { + // 目标仓库所有者 + mergeOwner: undefined, + // 目标分支 + mergeBranch: 'master', + // 源仓库所有者 + pullOwner: undefined, + // 源分支 + pullBranch: 'master', + // 仓库名称 + projectId: undefined, + }; + // 去掉第一个字符/ + const _pathname = pathname.slice(1); + const [ownerProject, branchUrl] = _pathname.split('/compare'); + const [mergeOwner, projectId] = ownerProject.split('/'); + // 同仓库时 + result.mergeOwner = mergeOwner; + result.pullOwner = mergeOwner; + result.projectId = projectId; + if (branchUrl) { + // 如果存在具体的分支 + const _branchUrl = branchUrl.slice(1); + if (_branchUrl.indexOf('...') > -1) { + // 存在源分支与目标分支 + const [mergeBranch, pullObj] = _branchUrl.split('...'); + result.mergeBranch = mergeBranch; + if (pullObj.indexOf(':') > -1) { + // 存在源仓库 + const [pullOwner, pullBranch] = pullObj.split(':'); + result.pullOwner = pullOwner; + result.pullBranch = pullBranch; + } else { + result.pullBranch = pullObj; + } + } else { + result.pullBranch = _branchUrl; + } + } + return result; +} + +const Option = Select.Option; + +class CreateMerge extends Component { + constructor(props) { + super(props); + const { pullBranch, mergeBranch } = getBranchParams( + this.props.location.pathname + ); + this.state = { + data: undefined, + pullBranches: undefined, + mergeBranches: undefined, + mergeProjects: undefined, + merge: mergeBranch || 'master', + pull: pullBranch || 'master', + id: undefined, + // isFork: false, + projects_names: undefined, + isSpin: true, + showMessage: false, + merge_head: false, // 是否向fork后的源项目发起合并请求 + defaultMessage: '必须选择不同的分支', + project_id: undefined, // 当前项目的id，也即开始发送合并请求的源项目id + merge_project_user: undefined, + comparesData: undefined, //提交和文件的内容，保存compare接口返回的数据 + // 比较分支时的加载效果 + isCompareSpin: true, + // 是否是初次加载，用这个字段来控制提示组件和文件组件的显示、隐藏比直接用isCompareSpin交互友好些 + isFirstLoading: true, + }; + } + + componentDidMount = () => { + // 初始化时根据url获取目标仓库、分支，源仓库、分支； + // 再获取对应的仓库列表、分支列表 + // 再调用比较接口 + const branchParams = getBranchParams(this.props.location.pathname); + console.log('componentDidMount branchParams', branchParams); + this.getMergeInfo(branchParams); + }; + + componentDidUpdate = (preProps) => { + // url变化触发时（切换源分支、切换目标仓库、切换目标分支；回退） + const oldPathname = preProps.location.pathname; + const newPathname = this.props.location.pathname; + if (oldPathname !== newPathname) { + const branchParams = getBranchParams(newPathname); + console.log('componentDidUpdate branchParams', branchParams); + this.getMergeInfo(branchParams); + } + }; + + //获取新建合并请求数据 + getMergeInfo = (branchParams) => { + this.setState({ isSpin: true }); + const { pullOwner, pullBranch, mergeOwner, mergeBranch, projectId } = + branchParams; + const url = `/${pullOwner}/${projectId}/pulls/new.json`; + axios + .get(url) + .then((result) => { + if (result) { + this.setState({ + // isFork: result.data.is_fork, + projects_names: result.data.projects_names, + mergeProjects: result.data.merge_projects, + pullBranches: result.data.branches, + mergeBranches: result.data.branches, + project_id: result.data.project_id, + id: result.data.id, + merge: mergeBranch, + pull: pullBranch, + }); + } + if (pullOwner !== mergeOwner) { + this.getBranchList(mergeOwner, projectId); + } + this.compareProject(result.data.id, branchParams); + this.setState({ isSpin: false }); + }) + .catch((error) => { + this.setState({ isSpin: false }); + console.log(error); + }); + }; + + // compare接口，获取分支对比信息 + compareProject = (baseid, branchParams) => { + // const { project } = this.props; + // const { owner, projectsId } = this.props.match.params; + const projectObj = this.props.project; + const { pullOwner, pullBranch, mergeOwner, mergeBranch, projectId } = + branchParams; + + let url = `/${mergeOwner}/${projectId}/compare`; + if (projectObj) { + if (baseid === projectObj.id) { + url += `/${pullBranch}...${mergeBranch}.json`; + } else { + url += `/${mergeBranch}...${pullOwner}/${projectId}:${pullBranch}.json`; + } + this.setState({ isSpin: false, isCompareSpin: true }); + axios + .get(url) + .then((result) => { + if (result) { + if (result.data.status === 0) { + this.setState({ + showMessage: false, + }); + } else { + this.setState({ + showMessage: true, + defaultMessage: result.data.message, + }); + } + this.setState({ + comparesData: result.data, + }); + } + this.setState({ + isFirstLoading: false, + isSpin: false, + isCompareSpin: false, + }); + }) + .catch((error) => { + this.setState({ isSpin: false, isCompareSpin: false }); + }); + } + }; + + // 根据所有者、仓库名，获取分支列表，目前仅涉及目标仓库分支查询 + getBranchList = (login, projectId) => { + this.setState({ isSpin: true }); + const url = `/${login}/${projectId}/pulls/get_branches.json`; + axios + .get(url) + .then((result) => { + if (result) { + this.setState({ + mergeBranches: result.data, + }); + } + this.setState({ isSpin: false }); + }) + .catch((error) => { + this.setState({ isSpin: false }); + console.log(error); + }); + }; + + // 切换分支事件 + selectBrach = (type, value) => { + const { pullOwner, pullBranch, mergeOwner, mergeBranch, projectId } = + getBranchParams(this.props.location.pathname); + let _url = `/${mergeOwner}/${projectId}/compare/`; + // type为pull时，pullBranch取value，否则取原有值 + // type为pull时，mergeBranch取原有值，否则取value + let _pullBranch = type === 'pull' ? value : pullBranch; + let _mergeBranch = type === 'pull' ? mergeBranch : value; + if (pullOwner === mergeOwner) { + // 如果仓库相同, compare/目标分支...源分支 + _url += `${_mergeBranch}...${_pullBranch}`; + } else { + // 如果仓库不同, compare/目标分支...源分支 + _url += `${_mergeBranch}...${pullOwner}:${_pullBranch}`; + } + this.props.history.push(_url); + }; + + // 切换仓库响应事件，目前仅目标分支可切换仓库 + selectProjectName = (value) => { + const { projects_names, id } = this.state; + const { pullOwner, pullBranch } = getBranchParams( + this.props.location.pathname + ); + let arr = + projects_names && projects_names.filter((item) => item.id === value); + let identifier = arr && arr[0].project_id; + let login = arr && arr[0].project_user_login; + // 目标仓库与源仓库不是一个仓库 + let is_fork = parseInt(value, 10) !== parseInt(id, 10); + this.setState({ + isSpin: true, + // merge_head: is_fork, + data: { + is_original: is_fork, + fork_project_id: is_fork ? id : '', + merge_user_login: is_fork + ? projects_names[0].project_user_login + : undefined, + }, + }); + if (login === pullOwner) { + // 如果切换后, 仓库与源仓库一致了 + this.props.history.push( + `/${login}/${identifier}/compare/master...${pullBranch}` + ); + } else { + this.props.history.push( + `/${login}/${identifier}/compare/master...${pullOwner}:${pullBranch}` + ); + } + // this.newMergelist(login, identifier); + }; + + // 渲染分支列表 + renderBrances = (list) => { + if (list && list.length > 0) { + return list.map((item, key) => { + return ( + + ); + }); + } + }; + + // 渲染项目列表 + renderProjectNames = (list) => { + if (list && list.length > 0) { + return list.map((item, key) => { + return ( + + ); + }); + } + }; + + // 渲染html内容 + withHtml = (html) => { + return
; + }; + + render() { + const { + data, + pullBranches, + mergeBranches, + mergeProjects, + pull, + merge, + isSpin, + isCompareSpin, + isFirstLoading, + showMessage, + defaultMessage, + projects_names, + id, + comparesData, + } = this.state; + + let { project } = this.props; + + return ( +
+ +
+
+
+
源分支:
+ + + + +
+
+ +
+
+
+
目标分支:
+ + + + +
+
+
+ {/* 非加载状态且有提示 */} + {!isCompareSpin && showMessage && ( +
+ +
+ )} + {/* 非加载状态且可以提交 */} + {!isCompareSpin && !showMessage && ( + + )} +
+ {!isFirstLoading && ( + + )} + +
+ ); + } +} + +export default CreateMerge; diff --git a/src/forge/Merge/MergeLinkFooter.jsx b/src/forge/Merge/MergeLinkFooter.jsx index 104d2168b..9f43086a9 100644 --- a/src/forge/Merge/MergeLinkFooter.jsx +++ b/src/forge/Merge/MergeLinkFooter.jsx @@ -111,10 +111,10 @@ class MergeFooter extends Component { } = this.state; // 评论数量优先取Comment组件中列表接口返回的，其次取合并请求详情接口中的，都没有取默认值0 - const commentsTotalCount = - this.state.commentsTotalCount || - (data.comments_total_count && parseInt(data.comments_total_count, 10)) || - 0; + const commentsTotalCount = parseInt( + this.state.commentsTotalCount || data.comments_total_count || 0, + 10 + ); return (
@@ -128,7 +128,7 @@ class MergeFooter extends Component { tab={ 评论 - {commentsTotalCount && ( + {commentsTotalCount > 0 && ( {commentsTotalCount} )} diff --git a/src/forge/Merge/MessageCount.js b/src/forge/Merge/MessageCount.js index 6409bd7f1..abdea3dd4 100644 --- a/src/forge/Merge/MessageCount.js +++ b/src/forge/Merge/MessageCount.js @@ -445,7 +445,7 @@ class MessageCount extends Component { type="green" ghost className="ml20" - onClick={()=>{this.props.history.push(`/${owner}/${projectsId}/pulls/${mergeId}/UpdateMerge`);}} + onClick={()=>{this.props.history.push(`/${owner}/${projectsId}/pulls/${mergeId}/updatemerge`);}} > 编辑 diff --git a/src/forge/Merge/NewMerge.js b/src/forge/Merge/NewMerge.js index 8913b0d1c..c5c5e2df6 100644 --- a/src/forge/Merge/NewMerge.js +++ b/src/forge/Merge/NewMerge.js @@ -194,7 +194,7 @@ class NewMerge extends Component { // this.ischeckmerge(); let { id ,merge , pull } = this.state; if(type==="pull"){ - this.props.history.push(`/${owner}/${projectsId}/pulls/new/${pull}`) + this.props.history.push(`/${owner}/${projectsId}/compare/${pull}`) this.compareProject(id,value,merge); }else{ this.compareProject(id,pull,value); @@ -216,7 +216,7 @@ class NewMerge extends Component { merge_user_login: is_fork_id ? projects_names[0].project_user_login : undefined } }) - this.props.history.push(`/${login}/${identifier}/pulls/new`); + this.props.history.push(`/${login}/${identifier}/compare`); this.newMergelist(login,identifier); }; diff --git a/src/forge/Merge/merge.js b/src/forge/Merge/merge.js index 399c9bd91..2e742d720 100644 --- a/src/forge/Merge/merge.js +++ b/src/forge/Merge/merge.js @@ -213,7 +213,7 @@ class merge extends Component { checkOperation() { const { projectsId,owner } = this.props.match.params; - this.props.history.push(`/${owner}/${projectsId}/pulls/new`); + this.props.history.push(`/${owner}/${projectsId}/compare`); } render() { const { projectsId , owner } = this.props.match.params; diff --git a/src/forge/Merge/merge_footer.js b/src/forge/Merge/merge_footer.js index 5e3a75560..868e736fe 100644 --- a/src/forge/Merge/merge_footer.js +++ b/src/forge/Merge/merge_footer.js @@ -1,169 +1,84 @@ -import React, { Component } from "react"; -import { Tabs, Spin } from "antd"; -import "../Order/order.css"; -import "./merge.css"; -import Commits from "./Commits"; -import Comments from "../comments/comments"; -import Files from "./Files"; -import axios from 'axios'; +import React, { Component } from 'react'; +import { Tabs } from 'antd'; +import Commits from './Commits'; +import Files from './Files'; + +import '../Order/order.css'; +import './merge.css'; + const { TabPane } = Tabs; class MergeFooter extends Component { - constructor(props){ + constructor(props) { super(props); - this.state={ - pageData:undefined, - commitsData:undefined, - filesData:undefined, - isSpin:false, - activeKey:"1", - commitCount:0, - filesCount:0 - } - } - componentDidMount=()=>{ - const { footer_type ,data } = this.props; - if(footer_type){ - const { projectsId , owner , mergeId } = this.props.match.params; - this.getCommit(owner,projectsId,mergeId); - this.getFile(owner,projectsId,mergeId); - } - this.setState({ - activeKey:footer_type ? "1" : "2", - commitCount:data && data.commits_count, - filesCount:data && data.files_count - }) - } - componentDidUpdate=(prevProps)=>{ - const { comparesData } = this.props; - const { footer_type } = this.props; - if(footer_type){ - const { data } = this.props; - if(data !== prevProps.data){ - this.setState({ - commitCount:data && data.commits_count, - filesCount:data && data.files_count - }) - } - } - if(comparesData !== prevProps.comparesData){ - this.setState({ - activeKey:footer_type ? "1" : "2" - }) - this.changeTab(footer_type ? "1" : "2"); - } + this.state = { + activeKey: '1', + }; } - changeTab=(index)=>{ + changeTab = (index) => { this.setState({ - isSpin:true - }) - this.setState({ - activeKey:index - }) - const { footer_type , comparesData } = this.props; - const { projectsId , owner , mergeId } = this.props.match.params; - - if(footer_type){ - if(index === "2"){ - this.getCommit(owner,projectsId,mergeId); - }else if(index === "3"){ - this.getFile(owner,projectsId,mergeId); - }else{ - this.setState({ - isSpin:false - }) - } - }else{ - this.setState({ - commitsData:comparesData.commits, - filesData:comparesData.diff, - commitCount:comparesData.commits_count, - filesCount:comparesData.diff && comparesData.diff.files_count, - isSpin:false - }) - } - } - - getCommit =(owner,projectsId,mergeId)=>{ - const url = `/${owner}/${projectsId}/pulls/${mergeId}/commits.json`; - axios.get(url).then(result=>{ - if(result){ - this.setState({ - commitsData:result.data.commits, - isSpin:false, - commitCount:result.data.commits_count - }) - } - }).catch(error=>{}) - } - - getFile =(owner,projectsId,mergeId)=>{ - const url = `/${owner}/${projectsId}/pulls/${mergeId}/files.json`; - axios.get(url).then(result=>{ - if(result){ - this.setState({ - filesData:result.data, - isSpin:false, - filesCount:result.data.files_count, - }) - } - }).catch(error=>{}) - } + activeKey: index, + }); + }; render() { - const { projectsId , owner } = this.props.match.params; + const { projectsId, owner } = this.props.match.params; + const { comparesData = {} } = this.props; + const { commits, diff, commits_count } = comparesData; + const { activeKey } = this.state; - const { footer_type, order_id, data , comparesData } = this.props; - let { isSpin , activeKey , filesCount, commitCount , filesData , commitsData } = this.state; - - return ( - !footer_type && !comparesData || (comparesData && ((comparesData.commits && comparesData.commits.length===0)||(comparesData && !comparesData.diff)) )?"": -
- - - { - footer_type && - 评论 - {data && parseInt(data.comments_count) > 0 && {data.comments_count}} - - } key="1"> - - - } - { - commitsData && commitsData.length > 0 && - 提交 - {commitCount > 0 && {commitCount}} - } key="2"> - - - } - { - filesData && filesData.files && filesData.files.length>0 && - 文件 - {filesCount > 0 && {filesCount}} - - } key="3"> - - - } - - - + return (commits && commits.length === 0) || !diff ? ( + '' + ) : ( +
+ + {commits && commits.length > 0 && ( + + 提交 + {commits_count > 0 && ( + {commits_count} + )} + + } + key="1" + > + + + )} + {diff && diff.files && diff.files.length > 0 && ( + + 文件 + {diff.files_count > 0 && ( + {diff.files_count} + )} + + } + key="3" + > + + + )} +
); } diff --git a/src/forge/Merge/merge_form.js b/src/forge/Merge/merge_form.js index 1f03a433e..4716bdfca 100644 --- a/src/forge/Merge/merge_form.js +++ b/src/forge/Merge/merge_form.js @@ -165,7 +165,8 @@ class MergeForm extends Component { this.setState({ isSpin: false, }); - this.props.history.push(`/${owner}/${projectsId}/pulls`); + const { pull_request_id } = result.data; + this.props.history.push(`/${owner}/${projectsId}/pulls/${pull_request_id}`); const { getDetail } = this.props; getDetail && getDetail(); } else { diff --git a/src/forge/Merge/no_data.js b/src/forge/Merge/no_data.js index d5584797f..f403bb4ea 100644 --- a/src/forge/Merge/no_data.js +++ b/src/forge/Merge/no_data.js @@ -12,7 +12,7 @@ class Nodata extends Component{

欢迎使用合并请求！

- 合并请求可以帮助您与他人协作编写代码。在使用之前，请先创建一个 合并请求 + 合并请求可以帮助您与他人协作编写代码。在使用之前，请先创建一个 合并请求