implement terminal bar func

9 months ago · 962e28a0c0
parent 07a5c72055
commit 962e28a0c0
4 changed files with 39 additions and 25 deletions
--- a/libs/remix-ui/terminal/src/lib/components/remix-ui-terminal-bar.tsx
+++ b/libs/remix-ui/terminal/src/lib/components/remix-ui-terminal-bar.tsx
@ -1,13 +1,12 @@
 import { CustomTooltip } from '@remix-ui/helper'
-import React, { useState, useEffect, useReducer, useRef, useContext } from 'react' // eslint-disable-line
+import React, { useState, useEffect, useRef, useContext } from 'react' // eslint-disable-line
 import { FormattedMessage, useIntl } from 'react-intl'
+import { listenOnNetworkAction } from '../actions/terminalAction'
 import { TerminalContext } from '../context/context'
-import { initialState, registerCommandReducer } from '../reducers/terminalReducer'
 import { RemixUiTerminalProps } from '../types/terminalTypes'

 export const RemixUITerminalBar = (props: RemixUiTerminalProps) => {
  const { newstate: state, dispatch } = useContext(TerminalContext)
-  const [isVM, setIsVM] = useState(false)
  const intl = useIntl()
  const terminalMenu = useRef(null)

@ -28,11 +27,12 @@ export const RemixUITerminalBar = (props: RemixUiTerminalProps) => {
  }

  function listenOnNetwork(event: any): void {
-    throw new Error('Function not implemented.')
+    const isListening = event.target.checked
+    listenOnNetworkAction(props.plugin, isListening)
  }

  function setSearchInput(arg0: string): void {
-    throw new Error('Function not implemented.')
+    dispatch({ type: 'search', payload: arg0 })
  }

  return (<>
@ -62,7 +62,7 @@ export const RemixUITerminalBar = (props: RemixUiTerminalProps) => {
          placement="top"
          tooltipId="terminalClear"
          tooltipClasses="text-nowrap"
-          tooltipText={intl.formatMessage({ id: isVM ? 'terminal.listenVM' : 'terminal.listenTitle' })}
+          tooltipText={intl.formatMessage({ id: state.isVM ? 'terminal.listenVM' : 'terminal.listenTitle' })}
        >
          <div className="h-80 mx-3 align-items-center remix_ui_terminal_listenOnNetwork custom-control custom-checkbox">
            <CustomTooltip placement="top" tooltipId="terminalClear" tooltipClasses="text-nowrap" tooltipText={intl.formatMessage({ id: 'terminal.listenTitle' })}>
@ -71,7 +71,7 @@ export const RemixUITerminalBar = (props: RemixUiTerminalProps) => {
                id="listenNetworkCheck"
                onChange={listenOnNetwork}
                type="checkbox"
-                disabled={isVM}
+                disabled={state.isVM}
              />
            </CustomTooltip>
            <label
--- a/libs/remix-ui/terminal/src/lib/reducers/terminalReducer.ts
+++ b/libs/remix-ui/terminal/src/lib/reducers/terminalReducer.ts
@ -1,4 +1,4 @@
-import {CLEAR_CONSOLE, CMD_HISTORY, EMPTY_BLOCK, ERROR, HTML, INFO, KNOWN_TRANSACTION, LISTEN_ON_NETWORK, LOG, TYPEWRITERLOG, TYPEWRITERWARNING, TYPEWRITERSUCCESS, NEW_TRANSACTION, SCRIPT, UNKNOWN_TRANSACTION, WARN, TOGGLE} from '../types/terminalTypes'
+import {CLEAR_CONSOLE, CMD_HISTORY, EMPTY_BLOCK, ERROR, HTML, INFO, KNOWN_TRANSACTION, LISTEN_ON_NETWORK, LOG, TYPEWRITERLOG, TYPEWRITERWARNING, TYPEWRITERSUCCESS, NEW_TRANSACTION, SCRIPT, UNKNOWN_TRANSACTION, WARN, TOGGLE, SEARCH, SET_ISVM} from '../types/terminalTypes'

 export const initialState = {
  journalBlocks: [],
@ -20,6 +20,9 @@ export const initialState = {
  _INDEXcommandsMain: {},
  message: [],
  isOpen: true,
+  searchInput: '',
+  clearConsole: false,
+  isVM: true
 }

 export const registerCommandReducer = (state, action) => {
@ -71,6 +74,13 @@ export const registerCommandReducer = (state, action) => {
      return {
        ...state,
        ...state.journalBlocks.splice(0),
+        clearConsole: true,
+      }
+
+    case SEARCH:
+      return {
+        ...state,
+        searchInput: action.payload,
      }

    case TOGGLE:
@ -78,11 +88,18 @@ export const registerCommandReducer = (state, action) => {
        ...state,
        isOpen: !state.isOpen,
      }
+
    case LISTEN_ON_NETWORK:
      return {
        ...state,
        journalBlocks: initialState.journalBlocks.push({message: action.payload.message, style: 'text-log'}),
      }
+
+    case SET_ISVM:
+      return {
+        ...state,
+        isVM: action.payload,
+      }
    default:
      return {state}
  }
--- a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
+++ b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
@ -26,7 +26,7 @@ import RenderUnKnownTransactions from './components/RenderUnknownTransactions' /
 import RenderCall from './components/RenderCall' // eslint-disable-line
 import RenderKnownTransactions from './components/RenderKnownTransactions' // eslint-disable-line
 import parse from 'html-react-parser'
-import { EMPTY_BLOCK, KNOWN_TRANSACTION, RemixUiTerminalProps, UNKNOWN_TRANSACTION } from './types/terminalTypes'
+import { EMPTY_BLOCK, KNOWN_TRANSACTION, RemixUiTerminalProps, SET_ISVM, UNKNOWN_TRANSACTION } from './types/terminalTypes'
 import { wrapScript } from './utils/wrapScript'
 import { TerminalContext } from './context/context'
 const _paq = (window._paq = window._paq || [])
@ -59,7 +59,6 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
    handleHide: () => {},
  })

-  const [clearConsole, setClearConsole] = useState(false)
  const [isVM, setIsVM] = useState(false)
  const [paste, setPaste] = useState(false)
  const [storage, setStorage] = useState<any>(null)
@ -81,7 +80,6 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
    commandHistoryIndex: 0,
  })

-  const [searchInput, setSearchInput] = useState('')
  const [showTableHash, setShowTableHash] = useState([])

  // terminal inputRef
@ -101,7 +99,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {

  useEffect(() => {
    props.plugin.on('network', 'providerChanged', (provider) => {
-      setIsVM(provider.startsWith('vm-'))
+      dispatch({ type: SET_ISVM, payload: provider.startsWith('vm-') })
    })

    props.onReady({
@ -402,21 +400,18 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
    }
  }

+  useEffect(() => {
+    console.log('clearConsole change', newstate.clearConsole)
+    if(newstate.clearConsole){
+      typeWriterIndexes.current = []
+      inputEl.current.focus()
+    }
+  },[newstate.clearConsole])
+
  /* end of block content that gets rendered from script Runner */

-  const handleClearConsole = () => {
-    setClearConsole(true)
-    typeWriterIndexes.current = []
-    dispatch({ type: 'clearconsole', payload: [] })
-    inputEl.current.focus()
-  }
  /* start of autoComplete */

-  const listenOnNetwork = (e: any) => {
-    const isListening = e.target.checked
-    listenOnNetworkAction(props.plugin, isListening)
-  }
-
  const onChange = (event: any) => {
    event.preventDefault()
    const inputString = event.target.value
@ -597,7 +592,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
          {handleAutoComplete()}
          <div className="position-relative d-flex flex-column-reverse h-100">
            <div id="journal" className="remix_ui_terminal_journal d-flex flex-column pt-3 pb-4 px-2 mx-2 mr-0" data-id="terminalJournal">
-              {!clearConsole && <TerminalWelcomeMessage storage={storage} packageJson={version} />}
+              {!newstate.clearConsole && <TerminalWelcomeMessage storage={storage} packageJson={version} />}
              {newstate.journalBlocks &&
              newstate.journalBlocks.map((x, index) => {
                if (x.name === EMPTY_BLOCK) {
@ -612,7 +607,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
                  )
                } else if (x.name === UNKNOWN_TRANSACTION) {
                  return x.message
-                    .filter((x) => x.tx.hash.includes(searchInput) || x.tx.from.includes(searchInput) || x.tx.to.includes(searchInput))
+                    .filter((x) => x.tx.hash.includes(newstate.searchInput) || x.tx.from.includes(newstate.searchInput) || x.tx.to.includes(newstate.searchInput))
                    .map((trans) => {
                      return (
                        <div className={classNameBlock} data-id={`block_tx${trans.tx.hash}`} key={index}>
--- a/libs/remix-ui/terminal/src/lib/types/terminalTypes.ts
+++ b/libs/remix-ui/terminal/src/lib/types/terminalTypes.ts
@ -26,6 +26,8 @@ export const CLEAR_CONSOLE = 'clearconsole'
 export const TOGGLE = 'toggle'
 export const LISTEN_ON_NETWORK = 'listenOnNetWork'
 export const CMD_HISTORY = 'cmdHistory'
+export const SEARCH = 'search'
+export const SET_ISVM = 'setIsVM'

 export interface RemixUiTerminalProps {
    plugin: any,