pagination

libs/remix-ui/git/src/components/buttons/sourcecontrolbuttons.tsx

@@ -4,7 +4,7 @@ import { CustomTooltip } from "@remix-ui/helper"
 import React, { useEffect, useState } from "react"
 import { FormattedMessage } from "react-intl"
 import { gitActionsContext } from "../../state/context"
-import { branch, gitMatomoEventTypes, remote } from "../../types"
+import { branch, defaultGitState, gitMatomoEventTypes, remote } from "../../types"
 import { gitPluginContext } from "../gitui"
 import GitUIButton from "./gituibutton"
 import { syncStateContext } from "./sourceControlBase"
@@ -54,7 +54,7 @@ export const SourceControlButtons = () => {
   const refresh = async() => {
     await sendToMatomo(gitMatomoEventTypes.REFRESH)
     await actions.getFileStatusMatrix(null)
-    await actions.gitlog()
+    actions.setStateGitLogCount(defaultGitState.gitLogCount)
   }
 
   const buttonsDisabled = () => {

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

@@ -1,5 +1,5 @@
-import React, { useEffect, useReducer, useState } from 'react'
+import React, { useEffect, useReducer, useState, useContext } from 'react'
-import { add, addall, checkout, checkoutfile, clone, commit, createBranch, remoteBranches, repositories, rm, getCommitChanges, diff, resolveRef, getBranchCommits, setUpstreamRemote, loadGitHubUserFromToken, getBranches, getRemotes, remoteCommits, saveGitHubCredentials, getGitHubCredentialsFromLocalStorage, fetch, pull, push, setDefaultRemote, addRemote, removeRemote, sendToGitLog, clearGitLog, getBranchDifferences, getFileStatusMatrix, init, showAlert, gitlog } from '../lib/gitactions'
+import { add, addall, checkout, checkoutfile, clone, commit, createBranch, remoteBranches, repositories, rm, getCommitChanges, diff, resolveRef, getBranchCommits, setUpstreamRemote, loadGitHubUserFromToken, getBranches, getRemotes, remoteCommits, saveGitHubCredentials, getGitHubCredentialsFromLocalStorage, fetch, pull, push, setDefaultRemote, addRemote, removeRemote, sendToGitLog, clearGitLog, getBranchDifferences, getFileStatusMatrix, init, showAlert, gitlog, setStateGitLogCount } from '../lib/gitactions'
 import { loadFiles, setCallBacks } from '../lib/listeners'
 import { openDiff, openFile, saveToken, sendToMatomo, setModifiedDecorator, setPlugin, setUntrackedDecorator, statusChanged } from '../lib/pluginActions'
 import { gitActionsContext, pluginActionsContext } from '../state/context'
@@ -70,6 +70,11 @@ export const GitUI = (props: IGitUi) => {
 
   }, [appLoaded])
 
+  useEffect(() => {
+    if (!appLoaded) return
+    gitlog(gitState.gitLogCount)
+  }, [gitState.timestamp, gitState.gitLogCount])
+
   useEffect(() => {
     if (!appLoaded) return
     async function checkconfig() {
@@ -155,7 +160,8 @@ export const GitUI = (props: IGitUi) => {
     clearGitLog,
     getFileStatusMatrix,
     gitlog,
-    init
+    init,
+    setStateGitLogCount
   }
 
   const pluginActionsProviderValue = {

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

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react";
-import { Alert } from "react-bootstrap";
 import { gitActionsContext } from "../../state/context";
 import { remote } from "../../types";
 import GitUIButton from "../buttons/gituibutton";
@@ -8,39 +7,76 @@ 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;
 
 export const Branches = () => {
   const context = React.useContext(gitPluginContext)
   const actions = React.useContext(gitActionsContext)
+  const [localBranchPage, setLocalBranchPage] = useState(1);
+  const [remoteBranchPage, setRemoteBranchPage] = useState(1);
   const [newBranch, setNewBranch] = useState({ value: "" });
+  const [localBranches, setLocalBranches] = useState<branch[]>([]);
+  const [remoteBranches, setRemoteBranches] = useState<branch[]>([]);
+  const [currentBranch, setCurrentBranch] = useState<branch | null>(null);
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setNewBranch({ value: e.currentTarget.value });
   };
 
+  useEffect(() => {
+    if (context.branches) {
+
+      if (context.currentBranch && context.currentBranch.name !== '') {
+        setCurrentBranch(context.branches.filter((branch, index) => !branch.remote && branch.name === context.currentBranch.name)[0]);
+        setLocalBranches(context.branches.filter((branch, index) => !branch.remote && branch.name !== context.currentBranch.name));
+      } else {
+        setLocalBranches(context.branches.filter((branch, index) => !branch.remote));
+      }
+      if (context.upstream) {
+        setRemoteBranches(context.branches.filter((branch, index) => branch.remote && branch.remote.name === context.upstream.name));
+      } else {
+        setRemoteBranches([]);
+      }
+    } else {
+      setLocalBranches([]);
+      setRemoteBranches([]);
+    }
+  }, [context.branches, context.defaultRemote, context.upstream, context.currentBranch]);
+
   return (
     <>
       <div data-id='branches-panel-content' className="pt-2">
         {context.branches && context.branches.length ?
           <div>
             <div data-id='branches-panel-content-local-branches'>
-              <label className="text-uppercase">local branches</label>
+              <label className="text-uppercase">local branches </label><div className="badge badge-info badge-pill ml-2">{localBranches.length}</div>
-              {context.branches && context.branches.filter((branch, index) => !branch.remote).map((branch, index) => {
+              {currentBranch && <LocalBranchDetails branch={currentBranch}></LocalBranchDetails>}
+              {context.branches && localBranches.slice(0, localBranchPage * pageLength).map((branch, index) => {
                 return (
                   <LocalBranchDetails key={index} branch={branch}></LocalBranchDetails>
                 );
               })}
+              {context.branches && localBranches.length > localBranchPage * pageLength && <GitUIButton className="btn btn-sm" onClick={() => {
+                setLocalBranchPage(localBranchPage + 1)
+              }}>Show more</GitUIButton>}
             </div>
             <hr />
             {context.upstream ?
               <>
                 <div data-id='branches-panel-content-remote-branches'>
-                  <label className="text-uppercase">remote branches on {context.upstream ? context.upstream.name : null}</label>
+                  <label className="text-uppercase">remote branches on {context.upstream ? context.upstream.name : null}</label><div className="badge badge-info badge-pill ml-2">{remoteBranches.length}</div>
-                  {context.branches && context.branches.filter((branch, index) => branch.remote && branch.remote.name === context.upstream.name).map((branch, index) => {
+                  {context.branches && remoteBranches
+                    .slice(0, remoteBranchPage * pageLength)
+                    .map((branch, index) => {
                       return (
                         <RemoteBranchDetails allowCheckout={true} 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-${context.upstream.name}`} className="btn btn-sm" onClick={async () => {
                     await actions.fetch({
                       remote: context.upstream

libs/remix-ui/git/src/lib/gitactions.ts

@@ -1,6 +1,6 @@
 import { ReadBlobResult, ReadCommitResult } from "isomorphic-git";
 import React from "react";
-import { fileStatus, fileStatusMerge, setRemoteBranchCommits, resetRemoteBranchCommits, setBranches, setCanCommit, setCommitChanges, setCommits, setCurrentBranch, setGitHubUser, setLoading, setRemoteBranches, setRemotes, setRepos, setUpstream, setLocalBranchCommits, setBranchDifferences, setRemoteAsDefault, setScopes, setLog, clearLog, setUserEmails, setCurrenHead, setStoragePayload, resetBranchDifferences } from "../state/gitpayload";
+import { fileStatus, fileStatusMerge, setRemoteBranchCommits, resetRemoteBranchCommits, setBranches, setCanCommit, setCommitChanges, setCommits, setCurrentBranch, setGitHubUser, setLoading, setRemoteBranches, setRemotes, setRepos, setUpstream, setLocalBranchCommits, setBranchDifferences, setRemoteAsDefault, setScopes, setLog, clearLog, setUserEmails, setCurrenHead, setStoragePayload, resetBranchDifferences, setGitLogCount, setTimestamp } from "../state/gitpayload";
 import { GitHubUser, branch, commitChange, gitActionDispatch, statusMatrixType, gitState, branchDifference, remote, gitLog, fileStatusResult, customGitApi, IGitApi, cloneInputType, fetchInputType, pullInputType, pushInputType, checkoutInput, rmInput, addInput, repository, userEmails, storage, gitMatomoEventTypes } from '../types';
 import { removeSlash } from "../utils";
 import { disableCallBacks, enableCallBacks } from "./listeners";
@@ -41,7 +41,7 @@ export const setPlugin = (p: Plugin, dispatcher: React.Dispatch<gitActionDispatc
 export const init = async () => {
   await sendToMatomo(gitMatomoEventTypes.INIT)
   await plugin.call('dgitApi', "init");
-  await gitlog();
+  dispatch(setTimestamp(Date.now()))
   await getBranches();
 }
 
@@ -81,13 +81,13 @@ export const getFileStatusMatrix = async (filepaths: string[]) => {
   dispatch(setLoading(false))
 }
 
-export const getCommits = async () => {
+export const getCommits = async (depth: number) => {
 
   try {
     const commits: ReadCommitResult[] = await plugin.call(
       'dgitApi',
       "log",
-      { ref: "HEAD" }
+      { ref: "HEAD", depth: depth }
     );
 
     return commits;
@@ -96,11 +96,12 @@ export const getCommits = async () => {
   }
 }
 
-export const gitlog = async () => {
+export const gitlog = async (depth: number) => {
+  console.log('gitlog start')
   dispatch(setLoading(true))
   let commits = []
   try {
-    commits = await getCommits()
+    commits = await getCommits(depth)
   } catch (e) {
   }
   dispatch(setCommits(commits))
@@ -108,6 +109,10 @@ export const gitlog = async () => {
   dispatch(setLoading(false))
 }
 
+export const setStateGitLogCount = async (count: number) => {
+  dispatch(setGitLogCount(count))
+}
+
 export const showCurrentBranch = async () => {
   try {
     const branch = await currentBranch();
@@ -342,7 +347,7 @@ export const fetch = async (input: fetchInputType) => {
   try {
     await plugin.call('dgitApi', 'fetch', input);
     if (!input.quiet) {
-      await gitlog()
+      dispatch(setTimestamp(Date.now()))
       await getBranches()
     }
   } catch (e: any) {
@@ -359,7 +364,7 @@ export const pull = async (input: pullInputType) => {
   await disableCallBacks()
   try {
     await plugin.call('dgitApi', 'pull', input)
-    await gitlog()
+    dispatch(setTimestamp(Date.now()))
   } catch (e: any) {
     console.log(e)
     await parseError(e)
@@ -393,6 +398,8 @@ const tokenWarning = async () => {
 
 const parseError = async (e: any) => {
   console.trace(e)
+  if(!e.message) return
+
   // if message conttains 401 Unauthorized, show token warning
   if (e.message.includes('401')) {
     await sendToMatomo(gitMatomoEventTypes.ERROR, ['401'])

libs/remix-ui/git/src/lib/listeners.ts

@@ -1,6 +1,6 @@
 
 import React from "react";
-import { setCanUseApp, setLoading, setRepoName, setGItHubToken, setLog, setGitHubUser, setUserEmails } from "../state/gitpayload";
+import { setCanUseApp, setLoading, setRepoName, setGItHubToken, setLog, setGitHubUser, setUserEmails, setTimestamp } from "../state/gitpayload";
 import { gitActionDispatch, gitUIPanels, storage } from "../types";
 import { Plugin } from "@remixproject/engine";
 import { getBranches, getFileStatusMatrix, loadGitHubUserFromToken, getRemotes, gitlog, setPlugin, setStorage } from "./gitactions";
@@ -72,7 +72,7 @@ export const setCallBacks = (viewPlugin: Plugin, gitDispatcher: React.Dispatch<g
       loadFiles()
     })
     loadFileQueue.enqueue(async () => {
-      gitlog()
+      gitDispatch(setTimestamp(Date.now()))
     })
     loadFileQueue.enqueue(async () => {
       getBranches()
@@ -84,7 +84,7 @@ export const setCallBacks = (viewPlugin: Plugin, gitDispatcher: React.Dispatch<g
 
   plugin.on('dgitApi', 'checkout', async () => {
     loadFileQueue.enqueue(async () => {
-      gitlog()
+      gitDispatch(setTimestamp(Date.now()))
     })
     loadFileQueue.enqueue(async () => {
       getBranches()
@@ -111,7 +111,7 @@ export const setCallBacks = (viewPlugin: Plugin, gitDispatcher: React.Dispatch<g
   })
   plugin.on('dgitApi', 'commit', async () => {
     loadFileQueue.enqueue(async () => {
-      gitlog()
+      gitDispatch(setTimestamp(Date.now()))
     }, 10)
     loadFileQueue.enqueue(async () => {
       getBranches()
@@ -123,7 +123,7 @@ export const setCallBacks = (viewPlugin: Plugin, gitDispatcher: React.Dispatch<g
   })
   plugin.on('dgitApi', 'branch', async () => {
     loadFileQueue.enqueue(async () => {
-      gitlog()
+      gitDispatch(setTimestamp(Date.now()))
     })
     loadFileQueue.enqueue(async () => {
       getBranches()
@@ -145,7 +145,7 @@ export const setCallBacks = (viewPlugin: Plugin, gitDispatcher: React.Dispatch<g
       getBranches()
     })
     loadFileQueue.enqueue(async () => {
-      gitlog()
+      gitDispatch(setTimestamp(Date.now()))
     })
   })
   plugin.on('manager', 'pluginActivated', async (p: Profile<any>) => {

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

@@ -44,6 +44,8 @@ export interface ActionPayloadTypes {
   CLEAR_LOG: void
   SET_USER_EMAILS: userEmails
   SET_STORAGE: storage
+  SET_TIMESTAMP: number
+  SET_GIT_LOG_COUNT: number
 }
 
 export interface Action<T extends keyof ActionPayloadTypes> {

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

@@ -185,6 +185,8 @@ export type gitState = {
     gitHubScopes: string[]
     gitHubAccessToken: string
     log: gitLog[]
+    timestamp: number
+    gitLogCount: number
 }
 export type gitLog = {
     type: 'error' | 'warning' | 'info' | 'success',
@@ -304,7 +306,9 @@ export const defaultGitState: gitState = {
   userEmails: [] as userEmails,
   gitHubScopes: [],
   gitHubAccessToken: "",
-  log: []
+  log: [],
+  timestamp: 0,
+  gitLogCount: 22
 }
 
 export const defaultLoaderState: loaderState = {
@@ -494,4 +498,9 @@ export interface clearLogAction {
     type: string
 }
 
-export type gitActionDispatch = setCurrentHeadAction | clearLogAction | setLogAction | setDefaultRemoteAction | setTokenAction | setUpstreamAction | setRemoteBranchCommitsAction | setLocalBranchCommitsAction | setBranchDifferencesAction | setRemotesAction | setCurrentBranchAction | fileStatusAction | setLoadingAction | setCanUseAppAction | setRepoNameAction | setCommitsAction | setBranchesAction | setReposAction | setRemoteBranchesAction
+export interface setTimeStampAction {
+    type: string,
+    payload: number
+}
+
+export type gitActionDispatch = setTimeStampAction | setCurrentHeadAction | clearLogAction | setLogAction | setDefaultRemoteAction | setTokenAction | setUpstreamAction | setRemoteBranchCommitsAction | setLocalBranchCommitsAction | setBranchDifferencesAction | setRemotesAction | setCurrentBranchAction | fileStatusAction | setLoadingAction | setCanUseAppAction | setRepoNameAction | setCommitsAction | setBranchesAction | setReposAction | setRemoteBranchesAction