mirror
/
remix-project
mirror of https://github.com/ethereum/remix-project.git
2
0
Fork 0
Code Issues Releases Wiki Activity

add gql

Browse Source
git4refactor
filip mertens 9 months ago
parent 6beeda8c6f
commit 0a5d2e2c84
6 changed files with 1809 additions and 126 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 142
      libs/remix-ui/git/src/components/gitui.tsx
  2. 93
      libs/remix-ui/git/src/components/panels/branches/branchCommits.tsx
  3. 8
      libs/remix-ui/git/src/components/panels/branches/branchedetails.tsx
  4. 22
      libs/remix-ui/git/src/state/apolloClient.tsx
  5. 8
      package.json
  6. 1660
      yarn.lock

142
libs/remix-ui/git/src/components/gitui.tsx
Unescape View File

@ -27,6 +27,8 @@ import { GitHubNavigation } from './navigation/github'
import { GitHubAuth } from './panels/github' import { GitHubAuth } from './panels/github'
import { GitHubCredentials } from './panels/githubcredentials' import { GitHubCredentials } from './panels/githubcredentials'
import { loaderReducer } from '../state/loaderReducer' import { loaderReducer } from '../state/loaderReducer'
import { ApolloClient, ApolloProvider, NormalizedCacheObject } from '@apollo/client'
import { client, getApolloLink } from '../state/apolloClient'
export const gitPluginContext = React.createContext<gitState>(defaultGitState) export const gitPluginContext = React.createContext<gitState>(defaultGitState)
export const loaderContext = React.createContext<loaderState>(defaultLoaderState) export const loaderContext = React.createContext<loaderState>(defaultLoaderState)
@ -38,6 +40,7 @@ interface IGitUi {
export const GitUI = (props: IGitUi) => { export const GitUI = (props: IGitUi) => {
const plugin = props.plugin const plugin = props.plugin
const [gitState, gitDispatch] = useReducer(gitReducer, defaultGitState) const [gitState, gitDispatch] = useReducer(gitReducer, defaultGitState)
const [apolloClient, setApolloClient] = useState<ApolloClient<NormalizedCacheObject>>(client)
const [loaderState, loaderDispatch] = useReducer(loaderReducer, defaultLoaderState) const [loaderState, loaderDispatch] = useReducer(loaderReducer, defaultLoaderState)
const [activePanel, setActivePanel] = useState<string>("0"); const [activePanel, setActivePanel] = useState<string>("0");
const [timeOut, setTimeOut] = useState<number>(null) const [timeOut, setTimeOut] = useState<number>(null)
@ -70,17 +73,20 @@ export const GitUI = (props: IGitUi) => {
useEffect(() => { useEffect(() => {
async function updatestate(){ async function updatestate() {
console.log('updatestate', gitState) console.log('updatestate', gitState)
if(gitState.currentBranch && gitState.currentBranch.remote && gitState.currentBranch.remote.url){ if (gitState.currentBranch && gitState.currentBranch.remote && gitState.currentBranch.remote.url) {
remoteCommits(gitState.currentBranch.remote.url, gitState.currentBranch.name, 1) remoteCommits(gitState.currentBranch.remote.url, gitState.currentBranch.name, 1)
} }
if(gitState.gitHubAccessToken) {
client.setLink(getApolloLink(gitState.gitHubAccessToken))
}
} }
setTimeout(() => { setTimeout(() => {
updatestate() updatestate()
}) })
}, [gitState.gitHubUser, gitState.currentBranch, gitState.remotes]) }, [gitState.gitHubUser, gitState.currentBranch, gitState.remotes, gitState.gitHubAccessToken])
const gitActionsProviderValue = { const gitActionsProviderValue = {
@ -119,70 +125,72 @@ export const GitUI = (props: IGitUi) => {
return ( return (
<div className="m-1"> <div className="m-1">
<gitPluginContext.Provider value={gitState}> <ApolloProvider client={apolloClient}>
<loaderContext.Provider value={loaderState}> <gitPluginContext.Provider value={gitState}>
<gitActionsContext.Provider value={gitActionsProviderValue}> <loaderContext.Provider value={loaderState}>
<pluginActionsContext.Provider value={pluginActionsProviderValue}> <gitActionsContext.Provider value={gitActionsProviderValue}>
{gitState.loading && <div className="text-center py-5"><i className="fas fa-spinner fa-pulse fa-2x"></i></div>} <pluginActionsContext.Provider value={pluginActionsProviderValue}>
{!gitState.loading && {gitState.loading && <div className="text-center py-5"><i className="fas fa-spinner fa-pulse fa-2x"></i></div>}
<Accordion activeKey={activePanel} defaultActiveKey="0"> {!gitState.loading &&
<SourceControlNavigation eventKey="0" activePanel={activePanel} callback={setActivePanel} /> <Accordion activeKey={activePanel} defaultActiveKey="0">
<SourceControlNavigation eventKey="0" activePanel={activePanel} callback={setActivePanel} />
<Accordion.Collapse className='bg-light' eventKey="0">
<> <Accordion.Collapse className='bg-light' eventKey="0">
<CommitMessage /> <>
<SourceControl /> <CommitMessage />
</> <SourceControl />
</Accordion.Collapse> </>
<hr></hr> </Accordion.Collapse>
<CommandsNavigation eventKey="1" activePanel={activePanel} callback={setActivePanel} /> <hr></hr>
<Accordion.Collapse className='bg-light' eventKey="1"> <CommandsNavigation eventKey="1" activePanel={activePanel} callback={setActivePanel} />
<> <Accordion.Collapse className='bg-light' eventKey="1">
<Commands></Commands> <>
</> <Commands></Commands>
</Accordion.Collapse> </>
<hr></hr> </Accordion.Collapse>
<CommitslNavigation eventKey="3" activePanel={activePanel} callback={setActivePanel} /> <hr></hr>
<Accordion.Collapse className='bg-light' eventKey="3"> <CommitslNavigation eventKey="3" activePanel={activePanel} callback={setActivePanel} />
<> <Accordion.Collapse className='bg-light' eventKey="3">
<Commits /> <>
</> <Commits />
</Accordion.Collapse> </>
<hr></hr> </Accordion.Collapse>
<BranchesNavigation eventKey="2" activePanel={activePanel} callback={setActivePanel} /> <hr></hr>
<Accordion.Collapse className='bg-light' eventKey="2"> <BranchesNavigation eventKey="2" activePanel={activePanel} callback={setActivePanel} />
<> <Accordion.Collapse className='bg-light' eventKey="2">
<Branches /></> <>
</Accordion.Collapse> <Branches /></>
<hr></hr> </Accordion.Collapse>
<CloneNavigation eventKey="4" activePanel={activePanel} callback={setActivePanel} /> <hr></hr>
<Accordion.Collapse className='bg-light' eventKey="4"> <CloneNavigation eventKey="4" activePanel={activePanel} callback={setActivePanel} />
<> <Accordion.Collapse className='bg-light' eventKey="4">
<Clone /></> <>
</Accordion.Collapse> <Clone /></>
<hr></hr> </Accordion.Collapse>
<RemotesNavigation eventKey="5" activePanel={activePanel} callback={setActivePanel} /> <hr></hr>
<Accordion.Collapse className='bg-light' eventKey="5"> <RemotesNavigation eventKey="5" activePanel={activePanel} callback={setActivePanel} />
<> <Accordion.Collapse className='bg-light' eventKey="5">
<Remotes></Remotes> <>
</> <Remotes></Remotes>
</Accordion.Collapse> </>
<hr></hr> </Accordion.Collapse>
<GitHubNavigation eventKey="7" activePanel={activePanel} callback={setActivePanel} /> <hr></hr>
<Accordion.Collapse className='bg-light' eventKey="7"> <GitHubNavigation eventKey="7" activePanel={activePanel} callback={setActivePanel} />
<> <Accordion.Collapse className='bg-light' eventKey="7">
<GitHubAuth></GitHubAuth> <>
<GitHubCredentials></GitHubCredentials> <GitHubAuth></GitHubAuth>
</> <GitHubCredentials></GitHubCredentials>
</Accordion.Collapse> </>
</Accordion.Collapse>
</Accordion>}
</pluginActionsContext.Provider> </Accordion>}
</gitActionsContext.Provider> </pluginActionsContext.Provider>
</loaderContext.Provider> </gitActionsContext.Provider>
</gitPluginContext.Provider> </loaderContext.Provider>
</gitPluginContext.Provider>
</ApolloProvider>
</div> </div>
) )
} }

93
libs/remix-ui/git/src/components/panels/branches/branchCommits.tsx
Unescape View File

@ -0,0 +1,93 @@
import React from 'react';
import { gql, useQuery } from '@apollo/client';
const GET_COMMITS = gql`
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
author {
name
date
}
}
}
}
}
}
}
}
}
`;
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.history;
const loadNextPage= ()=>{
fetchMore({
variables: {
cursor: pageInfo.endCursor,
},
updateQuery: (prevResult, { fetchMoreResult }) => {
const newEdges = fetchMoreResult.repository.ref.target.history.edges;
const pageInfo = fetchMoreResult.repository.ref.target.history.pageInfo;
return newEdges.length
? {
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,
},
},
},
},
}
: prevResult;
},
});
}
return (
<div>
<h3>Commits</h3>
<ul>
{edges.map(({ node }) => (
<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>
);
};

8
libs/remix-ui/git/src/components/panels/branches/branchedetails.tsx
Unescape View File

@ -8,6 +8,7 @@ import { branch } from "../../../types";
import { BrancheDetailsNavigation } from "../../navigation/branchedetails"; import { BrancheDetailsNavigation } from "../../navigation/branchedetails";
import { CommitDetailsItems } from "../commits/commitdetailsitem"; import { CommitDetailsItems } from "../commits/commitdetailsitem";
import { CommitDetails } from "../commits/commitdetails"; import { CommitDetails } from "../commits/commitdetails";
import { BranchCommits } from "./branchCommits";
export interface BrancheDetailsProps { export interface BrancheDetailsProps {
branch: branch; branch: branch;
@ -22,7 +23,7 @@ export const BranchDetails = (props: BrancheDetailsProps) => {
useEffect(() => { useEffect(() => {
if (activePanel === "0") { if (activePanel === "0") {
console.log('GET BRANCH COMMITS', branch) console.log('GET BRANCH COMMITS', branch)
actions.getBranchCommits(branch) //actions.getBranchCommits(branch)
} }
}, [activePanel]) }, [activePanel])
@ -47,13 +48,14 @@ export const BranchDetails = (props: BrancheDetailsProps) => {
<BrancheDetailsNavigation checkout={checkout} branch={branch} eventKey="0" activePanel={activePanel} callback={setActivePanel} /> <BrancheDetailsNavigation checkout={checkout} branch={branch} eventKey="0" activePanel={activePanel} callback={setActivePanel} />
<Accordion.Collapse className="pl-2 border-left ml-1" eventKey="0"> <Accordion.Collapse className="pl-2 border-left ml-1" eventKey="0">
<div className="ml-1"> <div className="ml-1">
{context.branchCommits && Object.entries(context.branchCommits).map(([key, value]) => { {/* {context.branchCommits && Object.entries(context.branchCommits).map(([key, value]) => {
if(key == branch.name){ if(key == branch.name){
return value.map((commit, index) => { return value.map((commit, index) => {
return(<CommitDetails key={index} checkout={checkoutCommit} commit={commit}></CommitDetails>) return(<CommitDetails key={index} checkout={checkoutCommit} commit={commit}></CommitDetails>)
}) })
} }
})} })} */}
<BranchCommits owner={'ethereum'} name={'remix-project'}/>
</div> </div>
</Accordion.Collapse> </Accordion.Collapse>

22
libs/remix-ui/git/src/state/apolloClient.tsx
Unescape View File

@ -0,0 +1,22 @@
// ApolloClient.js
import { ApolloClient, InMemoryCache, createHttpLink, ApolloLink } from '@apollo/client';
export const getApolloLink = (token: string, uri = 'https://api.github.com/graphql')=>{
const authLink = new ApolloLink((operation, forward) => {
operation.setContext({
headers: {
Authorization: `Bearer ${token}`,
},
});
return forward(operation);
});
const httpLink = createHttpLink({
uri, // Replace with your GraphQL endpoint
});
return authLink.concat(httpLink)
}
export const client = new ApolloClient({
link: getApolloLink(''),
cache: new InMemoryCache(),
});

8
package.json
Unescape View File

@ -125,6 +125,7 @@
"build-contracts": "find ./node_modules/@openzeppelin/contracts | grep -i '.sol' > libs/remix-ui/editor/src/lib/providers/completion/contracts/contracts.txt && find ./node_modules/@uniswap/v3-core/contracts | grep -i '.sol' >> libs/remix-ui/editor/src/lib/providers/completion/contracts/contracts.txt" "build-contracts": "find ./node_modules/@openzeppelin/contracts | grep -i '.sol' > libs/remix-ui/editor/src/lib/providers/completion/contracts/contracts.txt && find ./node_modules/@uniswap/v3-core/contracts | grep -i '.sol' >> libs/remix-ui/editor/src/lib/providers/completion/contracts/contracts.txt"
}, },
"dependencies": { "dependencies": {
"@apollo/client": "^3.9.5",
"@babel/plugin-proposal-class-properties": "^7.16.0", "@babel/plugin-proposal-class-properties": "^7.16.0",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6", "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
"@erebos/bzz-node": "^0.13.0", "@erebos/bzz-node": "^0.13.0",
@ -190,6 +191,7 @@
"from-exponential": "1.1.1", "from-exponential": "1.1.1",
"fs-extra": "^3.0.1", "fs-extra": "^3.0.1",
"ganache": "^7.9.1", "ganache": "^7.9.1",
"graphql": "^16.8.1",
"html-react-parser": "^3.0.4", "html-react-parser": "^3.0.4",
"http-server": "^14.1.1", "http-server": "^14.1.1",
"intro.js": "^4.1.0", "intro.js": "^4.1.0",
@ -208,6 +210,7 @@
"path-browserify": "^1.0.1", "path-browserify": "^1.0.1",
"prettier": "^2.8.4", "prettier": "^2.8.4",
"prettier-plugin-solidity": "^1.0.0-beta.24", "prettier-plugin-solidity": "^1.0.0-beta.24",
"ra-data-graphql": "^4.16.11",
"raw-loader": "^4.0.2", "raw-loader": "^4.0.2",
"react": "^18.2.0", "react": "^18.2.0",
"react-beautiful-dnd": "^13.1.0", "react-beautiful-dnd": "^13.1.0",
@ -262,6 +265,9 @@
"@babel/register": "^7.4.4", "@babel/register": "^7.4.4",
"@electron-forge/cli": "^6.1.1", "@electron-forge/cli": "^6.1.1",
"@fortawesome/fontawesome-free": "^5.8.1", "@fortawesome/fontawesome-free": "^5.8.1",
"@graphql-codegen/cli": "^5.0.2",
"@graphql-codegen/client-preset": "^4.2.4",
"@graphql-typed-document-node/core": "^3.2.0",
"@monaco-editor/react": "4.6.0", "@monaco-editor/react": "4.6.0",
"@nrwl/cli": "15.7.1", "@nrwl/cli": "15.7.1",
"@nrwl/eslint-plugin-nx": "15.7.1", "@nrwl/eslint-plugin-nx": "15.7.1",
@ -392,7 +398,7 @@
"timers-browserify": "^2.0.12", "timers-browserify": "^2.0.12",
"ts-node": "10.9.1", "ts-node": "10.9.1",
"tslint": "~6.0.0", "tslint": "~6.0.0",
"typescript": "^4.8.4", "typescript": "^5.3.3",
"uglify-js": "^2.8.16", "uglify-js": "^2.8.16",
"url": "^0.11.0", "url": "^0.11.0",
"vm-browserify": "^1.1.2", "vm-browserify": "^1.1.2",

1660
yarn.lock
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save