gitstatus changes

apps/remix-ide/src/app/components/status-bar.tsx

@@ -3,20 +3,22 @@ import { EventEmitter } from 'events'
 import { Plugin } from '@remixproject/engine'
 import packageJson from '../../../../../package.json'
 import { PluginViewWrapper } from '@remix-ui/helper'
-import { PluginProfile } from '../../types'
+import { PluginProfile, StatusBarInterface } from '../../types'
 import { RemixUIStatusBar } from '@remix-ui/statusbar'
 
 const statusBarProfile: PluginProfile = {
   name: 'statusBar',
   displayName: 'Status Bar',
   description: 'Remix IDE status bar panel',
-  version: packageJson.version
+  methods: ['getGitBranchName'],
+  version: packageJson.version,
 }
 
-export class StatusBar extends Plugin {
+export class StatusBar extends Plugin implements StatusBarInterface {
   htmlElement: HTMLDivElement
   events: EventEmitter
   dispatch: React.Dispatch<any> = () => {}
+  currentWorkspaceName: string = ''
   constructor() {
     super(statusBarProfile)
     this.events = new EventEmitter()
@@ -25,15 +27,27 @@ export class StatusBar extends Plugin {
   }
 
   onActivation(): void {
+    this.on('filePanel', 'setWorkspace', async () => {
+      await this.getGitBranchName()
+    })
     this.renderComponent()
   }
+
+  async getGitBranchName() {
+    const isGitRepo = await this.call('fileManager', 'isGitRepo')
+    if (!isGitRepo) return
+    const repoName = await this.call('filePanel', 'getCurrentWorkspace')
+    repoName && repoName?.name.length > 0 ? this.currentWorkspaceName = repoName.name : this.currentWorkspaceName = ''
+    return { repoWorkspaceName: repoName }
+  }
+
   setDispatch(dispatch: React.Dispatch<any>) {
     this.dispatch = dispatch
   }
 
   renderComponent() {
     this.dispatch({
-      plugins: this
+      plugins: this,
     })
   }
 
@@ -42,9 +56,10 @@ export class StatusBar extends Plugin {
   }
 
   render() {
-    return (<div data-id="status-bar-container">
-      <PluginViewWrapper plugin={this} />
-    </div>)
+    return (
+      <div data-id="status-bar-container">
+        <PluginViewWrapper plugin={this} />
+      </div>
+    )
   }
-
 }

apps/remix-ide/src/types/index.d.ts

@@ -1,4 +1,3 @@
-
 export interface PluginProfile {
   name: string
   displayName: string
@@ -11,10 +10,10 @@ export interface PluginProfile {
   version?: string
 }
 
-export interface StatusBarInterface extends Plugin {
+export interface StatusBarInterface {
   htmlElement: HTMLDivElement
   events: EventEmitter
   dispatch: React.Dispatch<any>
   setDispatch(dispatch: React.Dispatch<any>): void
+  getGitBranchName: () => Promise<any>
 }
-

libs/remix-ui/statusbar/src/lib/components/gitStatus.tsx

@@ -1,15 +1,20 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
+import { StatusBarInterface } from '../types'
 
 export interface GitStatusProps {
-  workspaceName: string
+  plugin: StatusBarInterface
 }
 
-export default function GitStatus({ workspaceName }: GitStatusProps) {
+export default function GitStatus({ plugin }: GitStatusProps) {
+
+  const [gitBranchName, setGitBranchName] = useState('')
 
   return (
-    <div className="d-flex flex-row p-1 text-white justify-content-center align-items-center">
+    <div
+      className="d-flex flex-row p-1 text-white justify-content-center align-items-center"
+    >
       <span className="fa-regular fa-code-branch ml-1"></span>
-      <span className="small mx-1">{`${workspaceName}`}</span>
+      <span className="small mx-1">{`${gitBranchName}`}</span>
       <span className="fa-solid fa-arrows-rotate fa-1"></span>
     </div>
   )

libs/remix-ui/statusbar/src/lib/remixui-statusbar-panel.tsx

@@ -6,8 +6,6 @@ import ScamAlertStatus from './components/scamAlertStatus'
 import ScamDetails from './components/scamDetails'
 import { FloatingFocusManager, autoUpdate, flip, offset, shift, useClick, useDismiss, useFloating, useInteractions, useRole } from '@floating-ui/react'
 import axios from 'axios'
-import { get } from 'lodash'
-import { current } from '@reduxjs/toolkit'
 
 export interface RemixUIStatusBarProps {
   statusBarPlugin: StatusBarInterface
@@ -18,12 +16,11 @@ export type ScamAlert = {
   url: string
 }
 
-type GetCurrentWorkspace =
-  {
-    name: string
-    isLocalhost: boolean
-    absolutePath: string
-  }
+type GetCurrentWorkspace = {
+  name: string
+  isLocalhost: boolean
+  absolutePath: string
+}
 
 export function RemixUIStatusBar({ statusBarPlugin }: RemixUIStatusBarProps) {
   const [showScamDetails, setShowScamDetails] = useState(false)
@@ -54,31 +51,13 @@ export function RemixUIStatusBar({ statusBarPlugin }: RemixUIStatusBarProps) {
     }
   }, [])
 
-  useEffect(() => {
-    async function getGitBranchName() {
-      const gitRepo = await statusBarPlugin.call('fileManager', 'isGitRepo')
-      console.log('gitRepo', gitRepo)
-      return gitRepo
-    }
-    async function getWorkspaceName() {
-      const thing = await statusBarPlugin.call('filePanel', 'getCurrentWorkspace')
-      console.log('thing', thing)
-      return thing
-    }
-    async function getWorkspaceGitBranchName() {
-      if (!getGitBranchName()) return
-      let currentWorkspace: GetCurrentWorkspace = {} as GetCurrentWorkspace
-      currentWorkspace = await getWorkspaceName()
-      console.log('currentWorkspace', currentWorkspace)
-      setWorkspaceName(currentWorkspace?.name)
-    }
-    getWorkspaceGitBranchName()
-
-    return () => {
-      getWorkspaceGitBranchName()
-    }
-
-  }, [statusBarPlugin])
+  const t = async () => {
+    const isGit = await statusBarPlugin.call('fileManager', 'isGitRepo')
+    if (!isGit) return
+    const repoName = await statusBarPlugin.call('filePanel', 'getCurrentWorkspace')
+    repoName && repoName?.name.length > 0 ? statusBarPlugin.currentWorkspaceName = repoName.name : statusBarPlugin.currentWorkspaceName = ''
+    return { repoWorkspaceName: repoName }
+  }
 
   return (
     <>
@@ -89,7 +68,7 @@ export function RemixUIStatusBar({ statusBarPlugin }: RemixUIStatusBarProps) {
       )}
       <div className="d-flex flex-row bg-primary justify-content-between align-items-center">
         <div className="remixui_statusbar">
-          <GitStatus workspaceName={workspaceName ?? 'none'} />
+          <GitStatus plugin={statusBarPlugin} />
         </div>
         <div className="remixui_statusbar"></div>
         <div className="remixui_statusbar d-flex flex-row">

libs/remix-ui/statusbar/src/lib/types/index.ts

@@ -17,4 +17,6 @@ export interface StatusBarInterface extends Plugin {
   events: EventEmitter
   dispatch: React.Dispatch<any>
   setDispatch(dispatch: React.Dispatch<any>): void
+  getGitBranchName: () => Promise<any>
+  currentWorkspaceName: string
 }