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

import React, { Component } from "react";
import { Link } from "react-router-dom";
import { Avatar, Tag, Button, Pagination, Spin, Dropdown, Menu } from "antd";
import FocusButton from "../UsersList/focus_button";

import axios from "axios";
import { getImageUrl } from "educoder";
import { Route, Switch } from "react-router-dom";
import { withRouter } from "react-router";

import { SnackbarHOC } from "educoder";
import { CNotificationHOC } from "../../modules/courses/common/CNotificationHOC";
import { TPMIndexHOC } from "../../modules/tpm/TPMIndexHOC";
import "./new_user.css";
import "../css/index.css";

import Loadable from "react-loadable";
import Loading from "../../Loading";
import { ImageLayerOfCommentHOC } from "../../modules/page/layers/ImageLayerOfCommentHOC";

const InfosIndex = Loadable({
  loader: () => import("./InfosUser"),
  loading: Loading,
});

class Infos extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isSpin: false,
      user: undefined,
    };
  }

  componentDidMount = () => {
    this.fetchUser();
  };

  fetchUser = () => {
    let url = `/users/${this.props.match.params.username}.json`;
    axios
      .get(url)
      .then((result) => {
        this.setState({
          user: result.data,
        });
      })
      .catch((error) => {
        console.log(error);
        this.setState({
          isSpin: false,
        });
      });
  };

  render() {
    const { current_user, mygetHelmetapi } = this.props;
    const { user } = this.state;
    return (
      <div className="newMain clearfix">
        <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">{user && user.user_identity}</Tag>
                </div>
              )}

              <div>
                {user && current_user && user.login === current_user.login && (
                  <div className="user-info-star-button ">
                    <Button
                      block
                      className="text-button-grey"
                      href={`${
                        mygetHelmetapi && mygetHelmetapi.new_course.edit_account
                      }`}
                      target="_blank"
                    >
                      {" "}
                      <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">
                <Link
                  to={`/users/${user && user.login}/watchings`}
                  className="with50 text-center pull-left"
                >
                  <div>我关注的</div>
                  <span>{user && user.watching_count}</span>
                </Link>
                <Link
                  to={`/users/${user && user.login}/watched`}
                  className="with50 text-center pull-left"
                >
                  <div>关注我的</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">
                  <span className="font-16 fwb">
                    <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 class="list-l-Menu">
              <li class="MenuTitle fwb">
                <i class="iconfont icon-xiangmuleixing font-15 mr5"></i>
                项目类型
              </li>
              <li class="active">
                <p>
                  <span class="font-16">托管项目</span>
                  <span class="color-blue">3773</span>
                </p>
              </li>
              <li class="">
                <p>
                  <span class="font-16">镜像项目</span>
                  <span class="color-blue">3</span>
                </p>
              </li>
            </ul>
          </div>
          <div className="bgcF">
              <div className="list-l-Menu">
                <p className="list-l-p pd20">
                  <span className="font-16 fwb">
                    <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>
        </div>
          <div className="list-right">
            <Switch {...this.props}>
              <Route
                path="/users/:username/projects"
                render={(props) => {
                  return <InfosIndex {...this.props} {...this.state} />;
                }}
              ></Route>
            </Switch>
          </div>
        </div>
      </div>
    );
  }
}
export default withRouter(
  ImageLayerOfCommentHOC({
    imgSelector: ".imageLayerParent img, .imageLayerParent .imageTarget",
    parentSelector: ".newMain",
  })(CNotificationHOC()(SnackbarHOC()(TPMIndexHOC(Infos))))
);