page branches

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 GitUIButton from "../buttons/gituibutton";
 import { gitPluginContext } from "../gitui";
@@ -7,39 +6,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>
-              {context.branches && context.branches.filter((branch, index) => !branch.remote).map((branch, index) => {
+              <label className="text-uppercase">local branches </label><div className="badge badge-info badge-pill ml-2">{localBranches.length}</div>
+              {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>
-                  {context.branches && context.branches.filter((branch, index) => branch.remote && branch.remote.name === context.upstream.name).map((branch, index) => {
-                    return (
-                      <RemoteBranchDetails allowCheckout={true} key={index} branch={branch}></RemoteBranchDetails>
-                    );
-                  })}
+                  <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 && 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/components/panels/commits.tsx

@@ -49,7 +49,7 @@ export const Commits = () => {
       {context.commits && context.commits.length ?
         <><BranchDifferences branch={context.currentBranch}></BranchDifferences><div>
           <div data-id={`commits-current-branch-${context.currentBranch && context.currentBranch.name}`} className="pt-1">
-            {context.commits && context.commits.map((commit, index) => {
+            {context.commits && context.commits.slice(0,5).map((commit, index) => {
               return (
                 <CommitDetails branch={context.currentBranch} getCommitChanges={getCommitChanges} key={index} checkout={checkout} commit={commit}></CommitDetails>
               );

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

@@ -1,4 +1,3 @@
-import { branch, checkout, ReadCommitResult } from "isomorphic-git";
 import React, { useEffect, useState } from "react";
 import { gitActionsContext } from "../../state/context";
 import { gitPluginContext } from "../gitui";
@@ -10,33 +9,55 @@ import { RemoteBranchDetails } from "./branches/remotebranchedetails";
 import GitUIButton from "../buttons/gituibutton";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faSync } from "@fortawesome/free-solid-svg-icons";
+import { branch } from "@remix-api";
 
 export interface RemoteSelectProps {
   remote: remote
   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