forgeplus-react/src/forge/Main/Diff.jsx

import React, { useEffect, useState } from "react";
import styled from "styled-components";
import { Button ,Spin } from "antd";
import { truncateCommitId } from '../common/util';
import { getImageUrl } from 'educoder';
import Files from '../Merge/Files';

import User from "../Component/User";
import Keys from "../Component/Keys";

import axios from "axios";

const Infos = styled.div`
  border: 1px solid #dddddd;
  margin-bottom:15px;
  & .commitinfos {
    background-color: #f1f8ff;
    border-bottom: 1px solid #ddd;
    padding: 20px;
  }
  & > .f-wrap-between {
    padding: 10px 20px;
  }
`;

export default ({ match , history }) => {
  const [data, setData] = useState({undefined});
  const [commit, setCommit] = useState(undefined);
  const [parents, setParents] = useState(undefined);
  const [committer, setCommitter] = useState(undefined);
  const [isSpin, setIsSpin] = useState(true);

  const { sha , projectsId, owner } = match.params;
  useEffect(() => {
    if (projectsId && owner && sha) {
      const url = `/${owner}/${projectsId}/commits/${sha}.json`;
      axios
        .get(url)
        .then(result => {
          if (result) {
            setData(result.data);
            setCommit(result.data.commit);
            setParents(result.data.parents);
            setCommitter(result.data.committer || (result.data.commit && result.data.commit.committer));
            setIsSpin(false);
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  }, [projectsId , owner, sha]);
  return (
    <div className="main">
      <Spin spinning={isSpin}>
        <Infos>
          <div className="commitinfos">
            <div className="f-wrap-between">
              {commit && commit.message &&
                <pre className="task-hide" style={{marginBottom:"0px",height:"28px",whiteSpace:"pre-wrap"}}>{commit.message}</pre>
              }
              <Button type="primary" onClick={()=>{history.push(`/projects/${owner}/${projectsId}/tree/${truncateCommitId(sha)}`)}} className="ml30">浏览代码</Button>
            </div>
          </div>
          <div className="f-wrap-between" style={{ alignItems: "center" }}>
            <ul className="df">
              <User
                url={(committer && getImageUrl(`/${committer.image_url}`))|| "https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3025493530,1989042357&fm=26&gp=0.jpg"}
                name={committer && committer.name}
              />
              {committer && committer.time_from_now && <li className="ml20 mt2">{committer.time_from_now}</li>}
            </ul>
            <li className="df">
              {
                parents && parents.length > 0 && parents.map((item,key)=>{
                  return(
                    <Keys title="父节点" value={truncateCommitId(item.sha)} key={key} className="mr20"></Keys>
                  )
                })
              }
              <Keys title="当前节点" value={truncateCommitId(sha)}></Keys>
            </li>
          </div>
        </Infos>
        <Files 
          history={history} 
          data={data} 
          owner={owner} 
          projectsId={projectsId} 
        />
      </Spin>
    </div>
  );
};