add gql

libs/remix-ui/git/src/components/gitui.tsx

@@ -27,6 +27,8 @@ import { GitHubNavigation } from './navigation/github'
 import { GitHubAuth } from './panels/github'
 import { GitHubCredentials } from './panels/githubcredentials'
 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 loaderContext = React.createContext<loaderState>(defaultLoaderState)
@@ -38,6 +40,7 @@ interface IGitUi {
 export const GitUI = (props: IGitUi) => {
   const plugin = props.plugin
   const [gitState, gitDispatch] = useReducer(gitReducer, defaultGitState)
+  const [apolloClient, setApolloClient] = useState<ApolloClient<NormalizedCacheObject>>(client)
   const [loaderState, loaderDispatch] = useReducer(loaderReducer, defaultLoaderState)
   const [activePanel, setActivePanel] = useState<string>("0");
   const [timeOut, setTimeOut] = useState<number>(null)
@@ -70,17 +73,20 @@ export const GitUI = (props: IGitUi) => {
   useEffect(() => {
 
 
-    async function updatestate(){
+    async function updatestate() {
       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)
       }
+      if(gitState.gitHubAccessToken) {
+        client.setLink(getApolloLink(gitState.gitHubAccessToken))
+      }
     }
     setTimeout(() => {
       updatestate()
     })
 
-  }, [gitState.gitHubUser, gitState.currentBranch, gitState.remotes])
+  }, [gitState.gitHubUser, gitState.currentBranch, gitState.remotes, gitState.gitHubAccessToken])
 
 
   const gitActionsProviderValue = {
@@ -119,6 +125,7 @@ export const GitUI = (props: IGitUi) => {
 
   return (
     <div className="m-1">
+      <ApolloProvider client={apolloClient}>
         <gitPluginContext.Provider value={gitState}>
           <loaderContext.Provider value={loaderState}>
             <gitActionsContext.Provider value={gitActionsProviderValue}>
@@ -183,6 +190,7 @@ export const GitUI = (props: IGitUi) => {
             </gitActionsContext.Provider>
           </loaderContext.Provider>
         </gitPluginContext.Provider>
+      </ApolloProvider>
     </div>
   )
 }

libs/remix-ui/git/src/components/panels/branches/branchCommits.tsx

@@ -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>
+  );
+};

libs/remix-ui/git/src/components/panels/branches/branchedetails.tsx

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

libs/remix-ui/git/src/state/apolloClient.tsx

@@ -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(),
+});

package.json

@@ -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"
   },
   "dependencies": {
+    "@apollo/client": "^3.9.5",
     "@babel/plugin-proposal-class-properties": "^7.16.0",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@erebos/bzz-node": "^0.13.0",
@@ -190,6 +191,7 @@
     "from-exponential": "1.1.1",
     "fs-extra": "^3.0.1",
     "ganache": "^7.9.1",
+    "graphql": "^16.8.1",
     "html-react-parser": "^3.0.4",
     "http-server": "^14.1.1",
     "intro.js": "^4.1.0",
@@ -208,6 +210,7 @@
     "path-browserify": "^1.0.1",
     "prettier": "^2.8.4",
     "prettier-plugin-solidity": "^1.0.0-beta.24",
+    "ra-data-graphql": "^4.16.11",
     "raw-loader": "^4.0.2",
     "react": "^18.2.0",
     "react-beautiful-dnd": "^13.1.0",
@@ -262,6 +265,9 @@
     "@babel/register": "^7.4.4",
     "@electron-forge/cli": "^6.1.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",
     "@nrwl/cli": "15.7.1",
     "@nrwl/eslint-plugin-nx": "15.7.1",
@@ -392,7 +398,7 @@
     "timers-browserify": "^2.0.12",
     "ts-node": "10.9.1",
     "tslint": "~6.0.0",
-    "typescript": "^4.8.4",
+    "typescript": "^5.3.3",
     "uglify-js": "^2.8.16",
     "url": "^0.11.0",
     "vm-browserify": "^1.1.2",