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