520 lines
18 KiB
JavaScript
520 lines
18 KiB
JavaScript
import React, { Component } from "react";
|
|
import { Link } from "react-router-dom";
|
|
import { Avatar, Tag, Button, Spin } from "antd";
|
|
import FocusButton from "../UsersList/focus_button";
|
|
|
|
import axios from "axios";
|
|
import { getImageUrl } from "educoder";
|
|
import { Route, Switch } from "react-router-dom";
|
|
|
|
import "./new_user.css";
|
|
import "../css/index.scss";
|
|
import './Index.scss';
|
|
|
|
import Loadable from "react-loadable";
|
|
import Loading from "../../Loading";
|
|
|
|
|
|
const InfosDevOps = Loadable({
|
|
loader: () => import("./devOpsCI"),
|
|
loading: Loading,
|
|
});
|
|
const InfosDevOpsCD = Loadable({
|
|
loader: () => import("./devOpsCD"),
|
|
loading: Loading,
|
|
});
|
|
const InfosUser = Loadable({
|
|
loader: () => import("./InfosUser"),
|
|
loading: Loading,
|
|
});
|
|
const Organize = Loadable({
|
|
loader: () => import("./Team"),
|
|
loading: Loading,
|
|
});
|
|
|
|
const WatchsUser = Loadable({
|
|
loader: () => import("./watch_users"),
|
|
loading: Loading,
|
|
})
|
|
const FanUser = Loadable({
|
|
loader: () => import("./fan_users"),
|
|
loading: Loading,
|
|
})
|
|
|
|
const UndoEvents = Loadable({
|
|
loader: () => import("./undo_events"),
|
|
loading: Loading,
|
|
})
|
|
const Wallet = Loadable({
|
|
loader: () => import("./sponsor/wallet"),
|
|
loading: Loading,
|
|
});
|
|
const SponsorManagement = Loadable({
|
|
loader: () => import("./sponsor/SponsorManagement"),
|
|
loading: Loading,
|
|
});
|
|
const SponsorDataCharts = Loadable({
|
|
loader: () => import("./sponsor/communityData"),
|
|
loading: Loading,
|
|
});
|
|
|
|
class Infos extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
isSpin: false,
|
|
user: undefined,
|
|
project_type: undefined,
|
|
route_type: undefined,
|
|
c: undefined,
|
|
sponsor_management: undefined,
|
|
choose_chart: undefined,
|
|
};
|
|
}
|
|
|
|
componentDidMount = () => {
|
|
this.fetchUser();
|
|
};
|
|
|
|
fetchUser = () => {
|
|
this.setState({
|
|
isSpin: true,
|
|
});
|
|
const { current_user } = this.props;
|
|
const { username } = this.props.match.params;
|
|
|
|
let url = `/users/${username || (current_user && current_user.login)}.json`;
|
|
axios
|
|
.get(url)
|
|
.then((result) => {
|
|
this.setState({
|
|
user: result.data,
|
|
isSpin: false,
|
|
});
|
|
})
|
|
.catch((error) => {
|
|
console.log(error);
|
|
this.setState({
|
|
isSpin: false,
|
|
});
|
|
});
|
|
};
|
|
|
|
change_project_type = (type) => {
|
|
const {user} = this.state
|
|
this.setState({
|
|
project_type: type,
|
|
choose_wallet: false,
|
|
sponsor_management: undefined,
|
|
choose_chart: undefined,
|
|
route_type: undefined
|
|
})
|
|
let url = `/users/${user && user.login}`
|
|
if (type){
|
|
url = `/users/${user && user.login}/projects/${type}`
|
|
}
|
|
this.props.history.push(url)
|
|
|
|
};
|
|
|
|
change_devops_type=(type)=>{
|
|
const {user} = this.state;
|
|
this.setState({
|
|
project_type: type ,
|
|
route_type: undefined
|
|
})
|
|
this.props.history.push(`/users/${user && user.login}/devops/${type}`);
|
|
}
|
|
|
|
undo_link = () => {
|
|
const {user} = this.state
|
|
this.setState({
|
|
route_type: undefined
|
|
})
|
|
this.props.history.push(`/users/${user && user.login}/undo_events`)
|
|
}
|
|
|
|
route_link = (type) => {
|
|
this.setState({
|
|
route_type: type
|
|
})
|
|
}
|
|
|
|
organize_link = () => {
|
|
const {user} = this.state
|
|
this.setState({
|
|
route_type: undefined
|
|
})
|
|
this.props.history.push(`/users/${user && user.login}/organizes`)
|
|
}
|
|
|
|
sponsor_link = () => {
|
|
const {user} = this.state
|
|
this.setState({
|
|
route_type: undefined
|
|
})
|
|
this.props.history.push(`/sponsor/${user && user.login}`)
|
|
}
|
|
|
|
sponsor_management_link = () => {
|
|
const {user} = this.state
|
|
this.setState({
|
|
route_type: undefined,
|
|
sponsor_management: true,
|
|
project_type: undefined,
|
|
choose_wallet: undefined,
|
|
choose_chart: undefined,
|
|
})
|
|
this.props.history.push(`/users/${user && user.login}/sponsor_management`)
|
|
}
|
|
|
|
wallet_link = () => {
|
|
const {user} = this.state
|
|
this.setState({
|
|
project_type: undefined,
|
|
choose_wallet: true,
|
|
route_type: undefined,
|
|
sponsor_management: undefined,
|
|
choose_chart: undefined,
|
|
})
|
|
this.props.history.push(`/users/${user && user.login}/wallet`)
|
|
}
|
|
|
|
sponsor_setting_link = () => {
|
|
const {user} = this.state
|
|
this.setState({
|
|
route_type: undefined
|
|
})
|
|
this.props.history.push(`/users/${user && user.login}/sponsor_setting`)
|
|
}
|
|
|
|
sponsor_statistic = () => {
|
|
const {user} = this.state
|
|
this.setState({
|
|
project_type: undefined,
|
|
choose_wallet: undefined,
|
|
route_type: undefined,
|
|
sponsor_management: undefined,
|
|
choose_chart: true
|
|
})
|
|
this.props.history.push(`/users/${user && user.login}/sponsor_community_data`)
|
|
}
|
|
|
|
render() {
|
|
const { current_user, mygetHelmetapi } = this.props;
|
|
const { user, isSpin, project_type, route_type, choose_wallet, choose_chart, sponsor_management } = this.state;
|
|
// console.log("current", current_user)
|
|
// console.log("user", user)
|
|
return (
|
|
<div className="newMain clearfix">
|
|
<Spin spinning={isSpin}>
|
|
<div className="new-content-flex">
|
|
<div className="list-left">
|
|
<div className="bgcF">
|
|
<div className="list-l-Menu text-center pd20 ">
|
|
<Avatar
|
|
size={110}
|
|
src={getImageUrl(`images/${user && user.image_url}`)}
|
|
/>
|
|
{user && user.user_identity && (
|
|
<div className="mt-n15 position-relative">
|
|
<Tag color="#FF6E21" style={{marginRight:"0px"}}>{user && user.user_identity}</Tag>
|
|
</div>
|
|
)}
|
|
<div className="text-center mt15 font-16 fwb">
|
|
{user && user.username}
|
|
</div>
|
|
|
|
<div>
|
|
{user && current_user && user.login === current_user.login && (
|
|
<div className="user-info-star-button">
|
|
<Button
|
|
block
|
|
className="text-button-grey mr5"
|
|
href={`${
|
|
mygetHelmetapi &&mygetHelmetapi.new_course&&
|
|
mygetHelmetapi.new_course.edit_account
|
|
}`}
|
|
target="_blank"
|
|
>
|
|
{" "}
|
|
<i className="iconfont icon-shezhi4 font-15"></i>
|
|
修改资料
|
|
</Button>
|
|
<Button
|
|
block
|
|
className="text-button-grey"
|
|
href={`/sponsor/${user && user.login}`}
|
|
>
|
|
赞助信息修改
|
|
</Button>
|
|
|
|
</div>
|
|
|
|
)}
|
|
{current_user && user && user.login !== current_user.login && (
|
|
<div className="user-info-star-button ">
|
|
<FocusButton
|
|
is_block={true}
|
|
is_watch={user.is_watch}
|
|
id={user.login}
|
|
fontClass={"font-14 ml5"}
|
|
starText={"关注TA"}
|
|
/>
|
|
<Button
|
|
block
|
|
className="text-button-grey ml-5"
|
|
href={`/sponsor/${user && user.login}`}
|
|
>
|
|
赞助
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="width100 inline-block mt20">
|
|
<Link
|
|
to={`/users/${user && user.login}/watchers`}
|
|
className={`with50 text-center pull-left ${route_type === "watchers" ? "text-primary" : ""}`}
|
|
onClick={() =>this.route_link("watchers")}
|
|
>
|
|
<div>{current_user && user && user.login === current_user.login ? "我关注的" : "TA关注的"}</div>
|
|
<span>{user && user.watching_count}</span>
|
|
</Link>
|
|
<Link
|
|
to={`/users/${user && user.login}/fan_users`}
|
|
onClick={() =>this.route_link("fan_users")}
|
|
className={`with50 text-center pull-left ${route_type === "fan_users" ? "text-primary" : ""}`}
|
|
>
|
|
<div>{current_user && user && user.login === current_user.login ? "关注我的" : "关注TA的"}</div>
|
|
<span>{user && user.watched_count}</span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* {current_user && user && current_user.id === user.id && (
|
|
<div className="bgcF">
|
|
<div className="list-l-Menu">
|
|
<p className="list-l-p pd20" onClick={() => this.undo_link()}>
|
|
<span className="font-16 color-grey-3">
|
|
<i className="iconfont icon-dahuizhongzuo3x font-15 mr5"></i>
|
|
待办事项
|
|
</span>
|
|
<span className="text-yellow font-16">
|
|
{user.undo_events}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)} */}
|
|
|
|
<div className="bgcF">
|
|
<ul className="list-l-Menu">
|
|
<li className="MenuTitle" onClick={() => this.change_project_type(undefined)}>
|
|
<i className="iconfont icon-xiangmuleixing font-15 mr5"></i>
|
|
项目类型
|
|
<i className="iconfont icon-youjiantou font-15 mr20 color-grey-9 pull-right"></i>
|
|
</li>
|
|
<li className={project_type && project_type === "common" ? "active" : ""} onClick={() => this.change_project_type("common")}>
|
|
<p>
|
|
<span className="font-16">开源托管项目</span>
|
|
<span className="color-blue">
|
|
{user && user.common_projects_count}
|
|
</span>
|
|
</p>
|
|
</li>
|
|
<li className={project_type && project_type === "mirror" ? "active" : ""} onClick={() => this.change_project_type("mirror")}>
|
|
<p>
|
|
<span className="font-16">开源镜像项目</span>
|
|
<span className="color-blue">
|
|
{user && user.mirror_projects_count}
|
|
</span>
|
|
</p>
|
|
</li>
|
|
<li className={project_type && project_type === "sync_mirror" ? "active" : ""} onClick={() => this.change_project_type("sync_mirror")}>
|
|
<p>
|
|
<span className="font-16">镜像托管项目</span>
|
|
<span className="color-blue">
|
|
{user && user.sync_mirror_projects_count}
|
|
</span>
|
|
</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
{
|
|
current_user && current_user.login &&
|
|
<div className="bgcF">
|
|
<ul className="list-l-Menu">
|
|
<li className="MenuTitle">
|
|
<i className="iconfont icon-gongzuoliu font-15 mr5"></i>
|
|
DevOps工作流
|
|
<i className="iconfont icon-youjiantou font-15 mr20 color-grey-9 pull-right"></i>
|
|
</li>
|
|
<li className={project_type && project_type === "CIService" ? "active" : ""} onClick={() => this.change_devops_type("CIService")}>
|
|
<p>
|
|
<span className="font-16 color-grey-3">CI服务</span>
|
|
</p>
|
|
</li>
|
|
{/* <li className={project_type && project_type === "CDService" ? "active" : ""} onClick={() => this.change_devops_type("CDService")}>
|
|
<p>
|
|
<span className="font-16">CD服务</span>
|
|
<span className="color-blue">
|
|
{user && user.common_projects_count}
|
|
</span>
|
|
</p>
|
|
</li> */}
|
|
</ul>
|
|
</div>
|
|
}
|
|
|
|
|
|
{/* <div className="bgcF">
|
|
<div className="list-l-Menu">
|
|
<p className="list-l-p pd20" onClick={() => this.organize_link()} >
|
|
<span className="font-16 color-grey-3">
|
|
<i className="iconfont icon-itsm-liuchengguanli font-15 mr5"></i>
|
|
组织
|
|
</span>
|
|
<span className="color-blue font-16">
|
|
{user && user.undo_events}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div> */}
|
|
{current_user && user && user.login == current_user.login && (
|
|
|
|
<div className="bgcF">
|
|
<ul className="list-l-Menu">
|
|
<li className="MenuTitle">
|
|
<i className="iconfont icon-bianzu1 font-15 mr5"></i>
|
|
赞助管理
|
|
<i className="iconfont icon-youjiantou font-15 mr20 color-grey-9 pull-right"></i>
|
|
</li>
|
|
<li className={choose_wallet ? "active" : ""} onClick={() => this.wallet_link()}>
|
|
<p>
|
|
<span className="font-16">我的钱包</span>
|
|
<span className="color-blue">
|
|
{/* {user && user.common_projects_count} */}
|
|
</span>
|
|
</p>
|
|
</li>
|
|
<li className={sponsor_management ? "active" : ""} onClick={() => this.sponsor_management_link()}>
|
|
<p>
|
|
<span className="font-16">赞助管理</span>
|
|
<span className="color-blue">
|
|
{/* {user && user.sync_mirror_projects_count} */}
|
|
</span>
|
|
</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
)}
|
|
|
|
{current_user && user && user.login == current_user.login && current_user.admin &&(
|
|
|
|
<div className="bgcF">
|
|
<ul className="list-l-Menu">
|
|
<li className="MenuTitle">
|
|
<i className="iconfont icon-dashujucunchu font-15 mr5"></i>
|
|
社区统计信息
|
|
<i className="iconfont icon-youjiantou font-15 mr20 color-grey-9 pull-right"></i>
|
|
</li>
|
|
<li className={choose_chart ? "active" : ""} onClick={() => this.sponsor_statistic()}>
|
|
<p>
|
|
<span className="font-16">赞助信息统计</span>
|
|
<span className="color-blue">
|
|
{/* {user && user.common_projects_count} */}
|
|
</span>
|
|
</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="list-right">
|
|
{user && (
|
|
<div>
|
|
<Switch {...this.props}>
|
|
<Route
|
|
path="/users/:username/watchers"
|
|
render={() => {
|
|
return <WatchsUser {...this.props} {...this.state} userType="watchers" />;
|
|
}}
|
|
></Route>
|
|
<Route
|
|
path="/users/:username/undo_events"
|
|
render={() => {
|
|
return <UndoEvents {...this.props} {...this.state} />;
|
|
}}
|
|
></Route>
|
|
<Route
|
|
path="/users/:username/wallet"
|
|
render={(props) => {
|
|
return <Wallet {...this.props} {...this.state} />;
|
|
}}
|
|
></Route>
|
|
<Route
|
|
path="/users/:username/sponsor_management"
|
|
render={(props) => {
|
|
return <SponsorManagement {...this.props} {...this.state} />;
|
|
}}
|
|
></Route>
|
|
<Route
|
|
path="/users/:username/sponsor_community_data"
|
|
render={(props) => {
|
|
return <SponsorDataCharts {...this.props} {...this.state} is_sponsor={true}/>;
|
|
}}
|
|
></Route>
|
|
<Route
|
|
path="/users/:username/fan_users"
|
|
render={() => {
|
|
return <FanUser {...this.props} {...this.state} userType="fan_users"/>;
|
|
}}
|
|
></Route>
|
|
<Route
|
|
path="/users/:username/devops/CDService"
|
|
render={() => {
|
|
return <InfosDevOpsCD {...this.props} {...this.state} />;
|
|
}}
|
|
></Route>
|
|
<Route
|
|
path="/users/:username/devops/CIService"
|
|
render={() => {
|
|
return <InfosDevOps {...this.props} {...this.state} />;
|
|
}}
|
|
></Route>
|
|
<Route
|
|
path="/users/:username/projects/:project_type"
|
|
render={() => {
|
|
return <InfosUser {...this.props} {...this.state} />;
|
|
}}
|
|
></Route>
|
|
<Route
|
|
path="/users/:username/organizes"
|
|
render={() => {
|
|
return <Organize {...this.props} {...this.state} />;
|
|
}}
|
|
></Route>
|
|
<Route
|
|
path="/users/:username"
|
|
render={(props) => {
|
|
return <InfosUser {...this.props} {...this.state} />;
|
|
}}
|
|
></Route>
|
|
<Route
|
|
path="/"
|
|
render={(props) => {
|
|
return <InfosUser {...this.props} {...this.state} />;
|
|
}}
|
|
></Route>
|
|
</Switch>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Spin>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
export default Infos;
|