filip mertens
7 months ago
parent
59ac71f571
commit
ede22d886a
@ -1,108 +0,0 @@ |
|||||||
import React, { useEffect } from 'react'; |
|
||||||
import { gql, useQuery } from '@apollo/client'; |
|
||||||
|
|
||||||
const GET_COMMITS = gql(/* GraphQL */` |
|
||||||
query GetCommits($name: String!, $owner: String!, $cursor: String, $limit: Int = 10) { |
|
||||||
repository(name: $name, owner: $owner) { |
|
||||||
ref(qualifiedName: "master") { |
|
||||||
target { |
|
||||||
... on Commit { |
|
||||||
history(first: $limit, after: $cursor) { |
|
||||||
pageInfo { |
|
||||||
endCursor |
|
||||||
hasNextPage |
|
||||||
} |
|
||||||
edges { |
|
||||||
node { |
|
||||||
oid |
|
||||||
messageHeadline |
|
||||||
message |
|
||||||
committedDate |
|
||||||
author { |
|
||||||
name |
|
||||||
email |
|
||||||
date |
|
||||||
} |
|
||||||
parents(first: 1) { |
|
||||||
edges { |
|
||||||
node { |
|
||||||
oid |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
tree { |
|
||||||
oid |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
`);
|
|
||||||
|
|
||||||
|
|
||||||
export const BranchCommits = ({ owner, name }) => { |
|
||||||
const { data, loading, fetchMore } = useQuery(GET_COMMITS, { |
|
||||||
variables: { owner, name }, |
|
||||||
}); |
|
||||||
|
|
||||||
if (loading) return <p>Loading...</p>; |
|
||||||
|
|
||||||
const { edges, pageInfo } = (data.repository.ref.target.__typename === "Commit")? data.repository.ref.target.history : { edges: [], pageInfo: { endCursor: null, hasNextPage: false } }; |
|
||||||
|
|
||||||
const loadNextPage= ()=>{ |
|
||||||
fetchMore({ |
|
||||||
variables: { |
|
||||||
cursor: pageInfo.endCursor, |
|
||||||
}, |
|
||||||
updateQuery: (prevResult, { fetchMoreResult }) => { |
|
||||||
const newEdges = (fetchMoreResult.repository.ref.target.__typename === "Commit"? fetchMoreResult.repository.ref.target.history.edges : []) |
|
||||||
const pageInfo = (fetchMoreResult.repository.ref.target.__typename === "Commit"? fetchMoreResult.repository.ref.target.history.pageInfo : {}) |
|
||||||
|
|
||||||
return newEdges.length && prevResult.repository.ref.target.__typename === "Commit" |
|
||||||
? { |
|
||||||
repository: { |
|
||||||
__typename: prevResult.repository.__typename, |
|
||||||
ref: { |
|
||||||
__typename: prevResult.repository.ref.__typename, |
|
||||||
target: { |
|
||||||
__typename: prevResult.repository.ref.target.__typename, |
|
||||||
history: { |
|
||||||
__typename: prevResult.repository.ref.target.history.__typename, |
|
||||||
edges: [...prevResult.repository.ref.target.history.edges, ...newEdges], |
|
||||||
pageInfo, |
|
||||||
}, |
|
||||||
}, |
|
||||||
}, |
|
||||||
}, |
|
||||||
} as any |
|
||||||
: prevResult; |
|
||||||
}, |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<ul> |
|
||||||
{edges.map(({ node }) => { |
|
||||||
console.log(node) |
|
||||||
return( |
|
||||||
<li key={node.oid}> |
|
||||||
<p>{node.messageHeadline} - {node.author.name} ({new Date(node.author.date).toLocaleDateString()})</p> |
|
||||||
</li> |
|
||||||
) |
|
||||||
})} |
|
||||||
</ul> |
|
||||||
{pageInfo.hasNextPage && ( |
|
||||||
<button |
|
||||||
onClick={() => loadNextPage()} |
|
||||||
> |
|
||||||
Load More |
|
||||||
</button> |
|
||||||
)} |
|
||||||
</div> |
|
||||||
); |
|
||||||
}; |
|
||||||
@ -0,0 +1,47 @@ |
|||||||
|
import { branch, remote } from "../../../types"; |
||||||
|
import React, { useEffect, useState } from "react"; |
||||||
|
import { gitPluginContext } from "../../gitui"; |
||||||
|
import { CommitDetails } from "../commits/commitdetails"; |
||||||
|
|
||||||
|
export interface BrancheDetailsProps { |
||||||
|
branch: branch; |
||||||
|
} |
||||||
|
|
||||||
|
export const BranchDifferences = (props: BrancheDetailsProps) => { |
||||||
|
const { branch } = props; |
||||||
|
const context = React.useContext(gitPluginContext) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
console.log('GET BRANCH DIFF', branch) |
||||||
|
}, []) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
console.log('BRANCH DIFF', context.branchDifferences) |
||||||
|
}, [context.branchDifferences]) |
||||||
|
|
||||||
|
const commitsAhead = (remote: remote) => { |
||||||
|
return context.branchDifferences[`${remote.remote}/${branch.name}`]?.uniqueHeadCommits || []; |
||||||
|
} |
||||||
|
|
||||||
|
const commitsBehind = (remote: remote) => { |
||||||
|
return context.branchDifferences[`${remote.remote}/${branch.name}`]?.uniqueRemoteCommits || []; |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<div> |
||||||
|
{context.remotes.map((remote, index) => { |
||||||
|
return ( |
||||||
|
<div key={index}> |
||||||
|
<h5>{remote.remote}</h5> |
||||||
|
<ul> |
||||||
|
<li>ahead by {commitsAhead(remote).length} commit(s)</li> |
||||||
|
<li>behind by {commitsBehind(remote).length} commits(s)</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
); |
||||||
|
})} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,77 @@ |
|||||||
|
import { ReadCommitResult } from "isomorphic-git" |
||||||
|
import React, { useEffect, useState } from "react"; |
||||||
|
import { Accordion } from "react-bootstrap"; |
||||||
|
import { CommitDetailsNavigation } from "../../navigation/commitdetails"; |
||||||
|
import { gitActionsContext } from "../../../state/context"; |
||||||
|
import { gitPluginContext } from "../../gitui"; |
||||||
|
import { branch } from "../../../types"; |
||||||
|
import { BrancheDetailsNavigation } from "../../navigation/branchedetails"; |
||||||
|
import { CommitDetailsItems } from "../commits/commitdetailsitem"; |
||||||
|
import { CommitDetails } from "../commits/commitdetails"; |
||||||
|
import { BranchDifferences } from "./branchdifferences"; |
||||||
|
|
||||||
|
export interface BrancheDetailsProps { |
||||||
|
branch: branch; |
||||||
|
} |
||||||
|
|
||||||
|
export const LocalBranchDetails = (props: BrancheDetailsProps) => { |
||||||
|
const { branch } = props; |
||||||
|
const actions = React.useContext(gitActionsContext) |
||||||
|
const context = React.useContext(gitPluginContext) |
||||||
|
const [activePanel, setActivePanel] = useState<string>(""); |
||||||
|
const [hasNextPage, setHasNextPage] = useState<boolean>(false) |
||||||
|
const [lastPageNumber, setLastPageNumber] = useState<number>(0) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (activePanel === "0") { |
||||||
|
console.log('GET BRANCH COMMITS', branch) |
||||||
|
if(lastPageNumber === 0) |
||||||
|
actions.getBranchCommits(branch, 1) |
||||||
|
} |
||||||
|
}, [activePanel]) |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const checkout = (branch: branch) => { |
||||||
|
actions.checkout({ |
||||||
|
ref: branch.name, |
||||||
|
remote: branch.remote && branch.remote.remote || null |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
const loadNextPage = () => { |
||||||
|
console.log('LOAD NEXT PAGE', lastPageNumber+1) |
||||||
|
actions.getBranchCommits(branch, lastPageNumber+1) |
||||||
|
} |
||||||
|
|
||||||
|
const checkoutCommit = async (oid: string) => { |
||||||
|
try { |
||||||
|
//await ModalRef.current?.show();
|
||||||
|
actions.checkout({ ref: oid }) |
||||||
|
//Utils.log("yes");
|
||||||
|
} catch (e) { |
||||||
|
//Utils.log("no");
|
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
return (<Accordion activeKey={activePanel} defaultActiveKey=""> |
||||||
|
<BrancheDetailsNavigation checkout={checkout} branch={branch} eventKey="0" activePanel={activePanel} callback={setActivePanel} /> |
||||||
|
<Accordion.Collapse className="pl-2 border-left ml-1" eventKey="0"> |
||||||
|
<> |
||||||
|
<div className="ml-1"> |
||||||
|
<BranchDifferences branch={branch}></BranchDifferences> |
||||||
|
{context.localBranchCommits && Object.entries(context.localBranchCommits).map(([key, value]) => { |
||||||
|
if(key == branch.name){ |
||||||
|
return value.map((commit, index) => { |
||||||
|
return(<CommitDetails key={index} checkout={checkoutCommit} commit={commit}></CommitDetails>) |
||||||
|
}) |
||||||
|
} |
||||||
|
})} |
||||||
|
|
||||||
|
|
||||||
|
</div> |
||||||
|
{hasNextPage && <a href="#" className="cursor-pointer mb-1 ml-2" onClick={loadNextPage}>Load more</a>} |
||||||
|
</> |
||||||
|
</Accordion.Collapse> |
||||||
|
</Accordion>) |
||||||
|
} |
||||||
Loading…
Reference in new issue