sc base

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

@@ -4,10 +4,12 @@ import { gitActionsContext } from "../../state/context"
 import { gitPluginContext } from "../gitui"
 import { faCheck } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { syncStateContext } from "./sourceControlBase";
 
 export const CommitMessage = () => {
     const context = React.useContext(gitPluginContext)
     const actions = React.useContext(gitActionsContext)
+    const syncState = React.useContext(syncStateContext)
 
     const [message, setMessage] = useState({ value: '' })
 
@@ -46,7 +48,7 @@ export const CommitMessage = () => {
             {context.canCommit ? <></> : <div className='alert alert-warning'>Cannot commit in detached state! Create a new branch and check it out first or checkout main.<br></br></div>}
             <button data-id='commitButton' className="btn btn-primary w-100" disabled={commitAllowed()} onClick={async () => await commit()} >
                 <FontAwesomeIcon icon={faCheck} className="mr-1" />
-                Commit
+                Commit {syncState.commitsAhead? `+${syncState.commitsAhead.length}` : ''} {syncState.commitsBehind? `-${syncState.commitsBehind.length}` : ''}
             </button>
             <hr></hr>
         </>

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

@@ -0,0 +1,87 @@
+import { faArrowDown, faArrowUp, faArrowsUpDown, faArrowRotateRight } from "@fortawesome/free-solid-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { CustomTooltip } from "@remix-ui/helper"
+import { ReadCommitResult } from "isomorphic-git"
+import React, { createContext, useEffect, useState } from "react"
+import { FormattedMessage } from "react-intl"
+import { gitActionsContext } from "../../state/context"
+import { branch, remote } from "../../types"
+import { gitPluginContext } from "../gitui"
+import GitUIButton from "./gituibutton"
+
+interface SourceControlButtonsProps {
+  remote?: remote,
+  branch?: branch,
+  children: React.ReactNode
+}
+
+export const syncStateContext = createContext<{commitsAhead: ReadCommitResult[], commitsBehind: ReadCommitResult[]}>({commitsAhead: [], commitsBehind: []})
+
+export const SourceControlBase = (props: SourceControlButtonsProps) => {
+  const [branch, setBranch] = useState(props.branch)
+  const [remote, setRemote] = useState(props.remote)
+  const context = React.useContext(gitPluginContext)
+  const actions = React.useContext(gitActionsContext)
+  const [commitsAhead, setCommitsAhead] = useState<ReadCommitResult[]>([])
+  const [commitsBehind, setCommitsBehind] = useState<ReadCommitResult[]>([])
+
+  useEffect(() => {
+    console.log('BRANCH DIFF SourceControlButtons',branch, remote, context.branchDifferences, context.currentBranch)
+    setDefaultRemote()
+    if (remote && branch && context.branchDifferences && context.branchDifferences[`${remote.remote}/${branch.name}`]) {
+      console.log('BRANCH DIFF found SourceControlButtons', context.branchDifferences[`${remote.remote}/${branch.name}`])
+      setCommitsAhead(context.branchDifferences[`${remote.remote}/${branch.name}`]?.uniqueHeadCommits)
+      setCommitsBehind(context.branchDifferences[`${remote.remote}/${branch.name}`]?.uniqueRemoteCommits)
+    }else{
+      setCommitsAhead([])
+      setCommitsBehind([])
+    }
+  }, [context.branchDifferences, context.currentBranch, branch, remote])
+
+
+  const setDefaultRemote = () => {
+  
+    if (context.remotes.length > 0) {
+      // find remote called origin
+      const origin = context.remotes.find(remote => remote.remote === 'origin')
+      console.log('DEFAULT REMOTE', origin)
+      if (origin) {
+        setRemote(origin)
+      } else {
+        setRemote(context.remotes[0])
+      }
+      return origin
+    }
+    return null
+  }
+
+  useEffect(() => {
+    if (!props.branch) {
+      setBranch(context.currentBranch)
+    }
+    if (!props.remote) {
+      setRemote(context.defaultRemote)
+    } else {
+      setDefaultRemote()
+    }
+  }, [])
+
+  useEffect(() => {
+    console.log('context', context.defaultRemote, context.currentBranch)
+    if (!props.branch) {
+      setBranch(context.currentBranch)
+    }
+    if (!props.remote) {
+      setRemote(context.defaultRemote)
+    } else {
+      setDefaultRemote()
+    }
+  }, [context.defaultRemote, context.currentBranch])
+
+  return (<>
+    <syncStateContext.Provider value={{commitsAhead, commitsBehind}}>
+      {props.children}
+    </syncStateContext.Provider>
+  </>)
+  
+}

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

@@ -21,7 +21,6 @@ export const SourceControlButtons = (props: SourceControlButtonsProps) => {
   const [commitsAhead, setCommitsAhead] = useState([])
   const [commitsBehind, setCommitsBehind] = useState([])
 
-
   useEffect(() => {
     console.log('BRANCH DIFF SourceControlButtons',branch, remote, context.branchDifferences, context.currentBranch)
     setDefaultRemote()

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

@@ -7,7 +7,7 @@ import { gitReducer } from '../state/gitreducer'
 import { defaultGitState, defaultLoaderState, gitState, loaderState } from '../types'
 import { SourceControl } from './panels/sourcontrol'
 import { Accordion } from "react-bootstrap";
-import { CommitMessage } from './panels/commitmessage'
+import { CommitMessage } from './buttons/commitmessage'
 import { Commits } from './panels/commits'
 import { Branches } from './panels/branches'
 import { SourceControlNavigation } from './navigation/sourcecontrol'
@@ -32,6 +32,7 @@ import { ApolloClient, ApolloProvider, NormalizedCacheObject } from '@apollo/cli
 import { GetDeviceCode } from './github/devicecode'
 import { LogNavigation } from './navigation/log'
 import LogViewer from './panels/log'
+import { SourceControlBase } from './buttons/sourceControlBase'
 
 export const gitPluginContext = React.createContext<gitState>(defaultGitState)
 export const loaderContext = React.createContext<loaderState>(defaultLoaderState)
@@ -139,7 +140,7 @@ export const GitUI = (props: IGitUi) => {
 
                     <Accordion.Collapse className='bg-light' eventKey="0">
                       <>
-                        <CommitMessage />
+                        <SourceControlBase children={<CommitMessage/>} />
                         <SourceControl />
                       </>
                     </Accordion.Collapse>