pagination

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

@@ -1,13 +1,12 @@
 import React, { useEffect, useState } from "react";
 import { gitActionsContext } from "../../state/context";
-import { remote } from "../../types";
+import { branch, remote } from "../../types";
 import GitUIButton from "../buttons/gituibutton";
 import { gitPluginContext } from "../gitui";
 import { LocalBranchDetails } from "./branches/localbranchdetails";
 import { RemoteBranchDetails } from "./branches/remotebranchedetails";
 import { faSync } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { branch } from "@remix-api";
 
 const pageLength = 5;
 

libs/remix-ui/git/src/components/panels/commits.tsx

@@ -1,12 +1,10 @@
-import { checkout, ReadCommitResult } from "isomorphic-git";
+import { ReadCommitResult } from "isomorphic-git";
 import React from "react";
 import { gitActionsContext } from "../../state/context";
 import GitUIButton from "../buttons/gituibutton";
 import { gitPluginContext } from "../gitui";
-import LoaderIndicator from "../navigation/loaderindicator";
 import { BranchDifferences } from "./branches/branchdifferences";
 import { CommitDetails } from "./commits/commitdetails";
-import { CommitSummary } from "./commits/commitsummary";
 
 export const Commits = () => {
   const [hasNextPage, setHasNextPage] = React.useState(true)
@@ -22,14 +20,15 @@ export const Commits = () => {
   };
 
   const loadNextPage = () => {
+    actions.setStateGitLogCount(context.gitLogCount + 5)
     actions.fetch({
       remote: null,
       ref: context.currentBranch,
       relative: true,
       depth: 5,
-      singleBranch: true
+      singleBranch: true,
+      quiet: true
     })
-
   }
 
   const getRemote = () => {

libs/remix-ui/git/src/components/panels/remoteselect.tsx

@@ -1,11 +1,10 @@
-import { branch, checkout, ReadCommitResult } from "isomorphic-git";
 import React, { useEffect, useState } from "react";
 import { gitActionsContext } from "../../state/context";
 import { gitPluginContext } from "../gitui";
 import { default as dateFormat } from "dateformat";
 import { RemotesDetailsNavigation } from "../navigation/remotesdetails";
 import { Accordion } from "react-bootstrap";
-import { remote } from "../../types";
+import { branch, remote } from "../../types";
 import { RemoteBranchDetails } from "./branches/remotebranchedetails";
 import GitUIButton from "../buttons/gituibutton";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -16,27 +15,48 @@ export interface RemoteSelectProps {
   openDefault: boolean
 }
 
+const pageLength = 5;
+
 export const Remoteselect = (props: RemoteSelectProps) => {
   const { remote, openDefault } = props;
   const context = React.useContext(gitPluginContext)
   const actions = React.useContext(gitActionsContext)
   const [activePanel, setActivePanel] = useState<string>("");
+  const [remoteBranchPage, setRemoteBranchPage] = useState(1);
+  const [remoteBranches, setRemoteBranches] = useState<branch[]>([]);
 
   useEffect(() => {
     setActivePanel(openDefault ? "0" : "")
   }, [openDefault])
 
+  useEffect(() => {
+    if (context.branches) {
+      if (remote && remote.name) {
+        setRemoteBranches(context.branches.filter((branch, index) => branch.remote && branch.remote.name === remote.name))
+      } else {
+        setRemoteBranches([]);
+      }
+    } else {
+      setRemoteBranches([]);
+    }
+  }, [context.branches, context.defaultRemote, context.upstream, remote]);
+
   return (
     <>
       <Accordion activeKey={activePanel} defaultActiveKey=''>
         <RemotesDetailsNavigation callback={setActivePanel} eventKey="0" activePanel={activePanel} remote={remote} />
         <Accordion.Collapse className="pl-2 border-left ml-1" eventKey="0">
           <>
-            {context.branches && context.branches.filter((branch, index) => branch.remote && branch.remote.name === remote.name).map((branch, index) => {
-              return (
-                <RemoteBranchDetails allowCheckout={false} key={index} branch={branch}></RemoteBranchDetails>
-              );
-            })}
+            {context.branches && remoteBranches
+              .slice(0, remoteBranchPage * pageLength)
+              .map((branch, index) => {
+                return (
+                  <RemoteBranchDetails allowCheckout={false} key={index} branch={branch}></RemoteBranchDetails>
+                );
+              })}
+            {context.branches && remoteBranches.length > remoteBranchPage * pageLength && <><GitUIButton className="btn btn-sm" onClick={() => {
+              setRemoteBranchPage(remoteBranchPage + 1);
+            }}>Show more</GitUIButton><br></br></>}
             <GitUIButton data-id={`remote-sync-${remote.name}`} className="btn btn-sm" onClick={async () => {
               await actions.fetch({
                 remote

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

@@ -31,8 +31,9 @@ export interface gitActions {
     sendToGitLog: (message: gitLog) => Promise<void>
     clearGitLog: () => Promise<void>
     getFileStatusMatrix(filespaths:[]): Promise<void>
-    gitlog(): Promise<void>
+    gitlog(depth: number): Promise<void>
     init(): Promise<void>
+    setStateGitLogCount(count: number): Promise<void>
 }
 
 export const gitActionsContext = React.createContext<gitActions>(null)

libs/remix-ui/git/src/state/gitpayload.ts

@@ -231,3 +231,17 @@ export const setStoragePayload = (storage: storage) => {
     payload: storage
   }
 }
+
+export const setTimestamp = (timestamp: number) => {
+  return {
+    type: 'SET_TIMESTAMP',
+    payload: timestamp
+  }
+}
+
+export const setGitLogCount = (count: number) => {
+  return {
+    type: 'SET_GIT_LOG_COUNT',
+    payload: count
+  }
+}

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

@@ -215,6 +215,17 @@ export const gitReducer = (state: gitState = defaultGitState, action: Actions):
       ...state,
       storage: action.payload
     }
-
+  case 'SET_TIMESTAMP':
+    return {
+      ...state,
+      timestamp: action.payload
+    }
+  
+  case 'SET_GIT_LOG_COUNT':
+    return {
+      ...state,
+      gitLogCount: action.payload
+    }
   }
+
 }

libs/remix-ui/git/src/types/index.ts

@@ -21,7 +21,7 @@ export interface IGitApi {
         clone(input: cloneInputType): Promise<any>
         branches(input?: branchesInput): Promise<branch[]>,
         remotes(): Promise<remote[]>,
-        log(cmd: { ref: string }): Promise<ReadCommitResult[]>,
+        log(cmd: { ref: string, depth?: number }): Promise<ReadCommitResult[]>,
         remotecommits(input: remoteCommitsInputType): Promise<pagedCommits[]>
         fetch(input: fetchInputType): Promise<any>
         pull(input: pullInputType): Promise<any>