forgeplus-react/src/forge/users/Infos.js

import React, { Component } from "react";
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,
})
class Infos extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isSpin: false,
      user: undefined,
      project_type: undefined,
      route_type: undefined,
    };
  }

  componentDidMount = () => {
    this.fetchUser();
  };
  componentDidUpdate=(prevProps)=>{
    const { username } = this.props.match.params;
    const prevUser = prevProps.match.params.username;
    if(prevUser && username && prevUser !== username){
      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 ,
      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`)
  }


  render() {
    const { current_user, main_web_site_url } = this.props;
    const { username } = this.props.match.params;

    const { user, isSpin, project_type, route_type } = this.state;
    return (
      <div className="newMain clearfix">
        <Spin spinning={isSpin}>
          <div className="new-content-flex">
            <div className="list-left">
              <div className="bgcF mb20">
                <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"
                          href={`${main_web_site_url || "https://osredm.com/"}users/${user.login}/profiles`}
                        >
                          {" "}
                          <i className="iconfont icon-shezhi4 font-15 mr5"></i>
                          修改资料
                        </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"}
                        />
                      </div>
                    )}
                  </div>
                  <div className="width100 inline-block mt20">
                    <a
                      href={`/users/${user && user.login}/user_watchlist`}
                      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>
                    </a>
                    <a
                      href={`/users/${user && user.login}/user_fanslist`}
                      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>
                    </a>
                  </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()}>
                    <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 && current_user.login === username &&
                <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.user_org_count}
                    </span>
                  </p>
                </div>
              </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/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;