From 832ca583a9a8ee6096485416d9fb21d943af40a7 Mon Sep 17 00:00:00 2001 From: bunsenstraat Date: Mon, 19 Feb 2024 07:57:32 +0100 Subject: [PATCH 01/23] refactor --- libs/remix-ui/terminal/src/index.ts | 1 + .../remix-ui/terminal/src/lib/components/TerminalTitle.tsx | 0 .../terminal/src/lib/remix-ui-terminal-wrapper.tsx | 7 +++++++ 3 files changed, 8 insertions(+) create mode 100644 libs/remix-ui/terminal/src/lib/components/TerminalTitle.tsx create mode 100644 libs/remix-ui/terminal/src/lib/remix-ui-terminal-wrapper.tsx diff --git a/libs/remix-ui/terminal/src/index.ts b/libs/remix-ui/terminal/src/index.ts index 5b8eeca5b5..d6966038bd 100644 --- a/libs/remix-ui/terminal/src/index.ts +++ b/libs/remix-ui/terminal/src/index.ts @@ -1 +1,2 @@ export * from './lib/remix-ui-terminal' +export * from './lib/remix-ui-terminal-wrapper' \ No newline at end of file diff --git a/libs/remix-ui/terminal/src/lib/components/TerminalTitle.tsx b/libs/remix-ui/terminal/src/lib/components/TerminalTitle.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/libs/remix-ui/terminal/src/lib/remix-ui-terminal-wrapper.tsx b/libs/remix-ui/terminal/src/lib/remix-ui-terminal-wrapper.tsx new file mode 100644 index 0000000000..96d6c778a1 --- /dev/null +++ b/libs/remix-ui/terminal/src/lib/remix-ui-terminal-wrapper.tsx @@ -0,0 +1,7 @@ +import React, { useState, useEffect, useReducer, useRef} from 'react' // eslint-disable-line +import { initialState, registerCommandReducer } from './reducers/terminalReducer' + +export const RemixUITerminalWrapper = () => { + const [newstate, dispatch] = useReducer(registerCommandReducer, initialState) + return (<>terminal) +} \ No newline at end of file From 2cc0784013ac2aefc7e6b04e5d20dd524c01d73a Mon Sep 17 00:00:00 2001 From: filip mertens Date: Mon, 19 Feb 2024 09:35:36 +0100 Subject: [PATCH 02/23] basics --- .../app/panels/{terminal.js => terminal.tsx} | 35 +- .../lib/components/remix-ui-terminal-bar.tsx | 100 ++++++ .../terminal/src/lib/context/context.ts | 3 + .../src/lib/reducers/terminalReducer.ts | 339 +++++++++--------- .../src/lib/remix-ui-terminal-wrapper.tsx | 21 +- .../terminal/src/lib/remix-ui-terminal.tsx | 72 +--- .../terminal/src/lib/types/terminalTypes.ts | 1 + 7 files changed, 333 insertions(+), 238 deletions(-) rename apps/remix-ide/src/app/panels/{terminal.js => terminal.tsx} (81%) create mode 100644 libs/remix-ui/terminal/src/lib/components/remix-ui-terminal-bar.tsx create mode 100644 libs/remix-ui/terminal/src/lib/context/context.ts diff --git a/apps/remix-ide/src/app/panels/terminal.js b/apps/remix-ide/src/app/panels/terminal.tsx similarity index 81% rename from apps/remix-ide/src/app/panels/terminal.js rename to apps/remix-ide/src/app/panels/terminal.tsx index 5ad90adf00..af86317697 100644 --- a/apps/remix-ide/src/app/panels/terminal.js +++ b/apps/remix-ide/src/app/panels/terminal.tsx @@ -1,6 +1,6 @@ /* global Node, requestAnimationFrame */ // eslint-disable-line import React from 'react' // eslint-disable-line -import { RemixUiTerminal } from '@remix-ui/terminal' // eslint-disable-line +import { RemixUiTerminal, RemixUITerminalWrapper } from '@remix-ui/terminal' // eslint-disable-line import { Plugin } from '@remixproject/engine' import * as packageJson from '../../../../../package.json' import {Registry} from '@remix-project/remix-lib' @@ -26,6 +26,34 @@ const profile = { } class Terminal extends Plugin { + fileImport: CompilerImports + event: any + globalRegistry: Registry + element: HTMLDivElement + eventsDecoder: any + txListener: any + _deps: { fileManager: any; editor: any; compilersArtefacts: any; offsetToLineColumnConverter: any } + commandHelp: { 'remix.loadgist(id)': string; 'remix.loadurl(url)': string; 'remix.execute(filepath)': string; 'remix.exeCurrent()': string; 'remix.help()': string } + blockchain: any + vm: typeof vm + _api: any + _opts: any + config: any + version: string + data: { + lineLength: any // ???? + session: any[]; activeFilters: { commands: {}; input: string }; filterFns: {} + } + _view: { el: any; bar: any; input: any; term: any; journal: any; cli: any } + _components: {} + _commands: {} + commands: {} + _JOURNAL: any[] + _jobs: any[] + _INDEX: any + _shell: any + dispatch: any + terminalApi: any constructor(opts, api) { super(profile) this.fileImport = new CompilerImports() @@ -114,9 +142,8 @@ class Terminal extends Plugin { } updateComponent(state) { - return (Registry.getInstance().get('platform').api.isDesktop()) ? - - : + : { + const { newstate: state, dispatch } = useContext(TerminalContext) + const [isVM, setIsVM] = useState(false) + const intl = useIntl() + const terminalMenu = useRef(null) + + function handleToggleTerminal(event: any): void { + dispatch({ type: 'toggle' }) + } + + useEffect(() => { + props.plugin.call('layout', 'minimize', props.plugin.profile.name, !state.isOpen) + }, [state.isOpen]) + + useEffect(() => { + console.log('state change', state) + }, [state]) + + function handleClearConsole(event: any): void { + dispatch({ type: 'clearconsole', payload: [] }) + } + + function listenOnNetwork(event: any): void { + throw new Error('Function not implemented.') + } + + function setSearchInput(arg0: string): void { + throw new Error('Function not implemented.') + } + + return (<> +
+
+ : } + > + + +
+ }> + + +
+ }> +
0
+ + +
+ + + + +
+ +
+ + setSearchInput(event.target.value.trim())} + type="text" + className="remix_ui_terminal_filter border form-control" + id="searchInput" + placeholder={intl.formatMessage({ id: 'terminal.search' })} + data-id="terminalInputSearch" + /> +
+
+
) +} \ No newline at end of file diff --git a/libs/remix-ui/terminal/src/lib/context/context.ts b/libs/remix-ui/terminal/src/lib/context/context.ts new file mode 100644 index 0000000000..fa24572c4e --- /dev/null +++ b/libs/remix-ui/terminal/src/lib/context/context.ts @@ -0,0 +1,3 @@ +import React from 'react' + +export const TerminalContext = React.createContext(null) \ No newline at end of file diff --git a/libs/remix-ui/terminal/src/lib/reducers/terminalReducer.ts b/libs/remix-ui/terminal/src/lib/reducers/terminalReducer.ts index c451abfbb8..1cd73df06d 100644 --- a/libs/remix-ui/terminal/src/lib/reducers/terminalReducer.ts +++ b/libs/remix-ui/terminal/src/lib/reducers/terminalReducer.ts @@ -1,210 +1,213 @@ -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 } 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} from '../types/terminalTypes' export const initialState = { - journalBlocks: [ - ], + journalBlocks: [], data: { // lineLength: props.options.lineLength || 80, session: [], - activeFilters: { commands: {}, input: '' }, - filterFns: {} + activeFilters: {commands: {}, input: ''}, + filterFns: {}, }, _commandHistory: [], _commands: {}, commands: {}, _JOURNAL: [], _jobs: [], - _INDEX: { - }, + _INDEX: {}, _INDEXall: [], _INDEXallMain: [], _INDEXcommands: {}, _INDEXcommandsMain: {}, - message: [] + message: [], + isOpen: true, } export const registerCommandReducer = (state, action) => { switch (action.type) { - case HTML : - return { - ...state, - _commands: Object.assign(initialState._commands, action.payload._commands), - commands: Object.assign(initialState.commands, action.payload.commands), - data: Object.assign(initialState.data, { ...action.payload.data }) - } - case LOG: - return { - ...state, - _commands: Object.assign(initialState._commands, action.payload._commands), - commands: Object.assign(initialState.commands, action.payload.commands), - data: Object.assign(initialState.data, { ...action.payload.data }) + case HTML: + return { + ...state, + _commands: Object.assign(initialState._commands, action.payload._commands), + commands: Object.assign(initialState.commands, action.payload.commands), + data: Object.assign(initialState.data, {...action.payload.data}), + } + case LOG: + return { + ...state, + _commands: Object.assign(initialState._commands, action.payload._commands), + commands: Object.assign(initialState.commands, action.payload.commands), + data: Object.assign(initialState.data, {...action.payload.data}), + } + case INFO: + return { + ...state, + _commands: Object.assign(initialState._commands, action.payload._commands), + commands: Object.assign(initialState.commands, action.payload.commands), + data: Object.assign(initialState.data, action.payload.data), + } + case WARN: + return { + ...state, + _commands: Object.assign(initialState._commands, action.payload._commands), + commands: Object.assign(initialState.commands, action.payload.commands), + data: Object.assign(initialState.data, action.payload.data), + } + case ERROR: + return { + ...state, + _commands: Object.assign(initialState._commands, action.payload._commands), + commands: Object.assign(initialState.commands, action.payload.commands), + data: Object.assign(initialState.data, action.payload.data), + } + case SCRIPT: + return { + ...state, + _commands: Object.assign(initialState._commands, action.payload._commands), + commands: Object.assign(initialState.commands, action.payload.commands), + data: Object.assign(initialState.data, action.payload.data), + } + case CLEAR_CONSOLE: + console.log('clear console', state) + return { + ...state, + ...state.journalBlocks.splice(0), + } - } - case INFO: - return { - ...state, - _commands: Object.assign(initialState._commands, action.payload._commands), - commands: Object.assign(initialState.commands, action.payload.commands), - data: Object.assign(initialState.data, action.payload.data) - } - case WARN: - return { - ...state, - _commands: Object.assign(initialState._commands, action.payload._commands), - commands: Object.assign(initialState.commands, action.payload.commands), - data: Object.assign(initialState.data, action.payload.data) - } - case ERROR: - return { - ...state, - _commands: Object.assign(initialState._commands, action.payload._commands), - commands: Object.assign(initialState.commands, action.payload.commands), - data: Object.assign(initialState.data, action.payload.data) - } - case SCRIPT: - return { - ...state, - _commands: Object.assign(initialState._commands, action.payload._commands), - commands: Object.assign(initialState.commands, action.payload.commands), - data: Object.assign(initialState.data, action.payload.data) - } - case CLEAR_CONSOLE: - return { - ...state, - ...state.journalBlocks.splice(0) - } - case LISTEN_ON_NETWORK: - return { - ...state, - journalBlocks: initialState.journalBlocks.push({ message: action.payload.message, style: 'text-log' }) - } - default : - return { state } + case TOGGLE: + return { + ...state, + isOpen: !state.isOpen, + } + case LISTEN_ON_NETWORK: + return { + ...state, + journalBlocks: initialState.journalBlocks.push({message: action.payload.message, style: 'text-log'}), + } + default: + return {state} } } export const registerFilterReducer = (state, action) => { switch (action.type) { - case LOG: - return { - ...state, - data: Object.assign(initialState.data.filterFns, action.payload.data.filterFns) - - } - case INFO: - return { - ...state, - data: Object.assign(initialState.data.filterFns, action.payload.data.filterFns) - } - case WARN: - return { - ...state, - data: Object.assign(initialState.data.filterFns, action.payload.data.filterFns) - } - case ERROR: - return { - ...state, - data: Object.assign(initialState.data.filterFns, action.payload.data.filterFns) - } - case SCRIPT: - return { - ...state, - data: Object.assign(initialState.data.filterFns, action.payload.data.filterFns) - } - default : - return { state } + case LOG: + return { + ...state, + data: Object.assign(initialState.data.filterFns, action.payload.data.filterFns), + } + case INFO: + return { + ...state, + data: Object.assign(initialState.data.filterFns, action.payload.data.filterFns), + } + case WARN: + return { + ...state, + data: Object.assign(initialState.data.filterFns, action.payload.data.filterFns), + } + case ERROR: + return { + ...state, + data: Object.assign(initialState.data.filterFns, action.payload.data.filterFns), + } + case SCRIPT: + return { + ...state, + data: Object.assign(initialState.data.filterFns, action.payload.data.filterFns), + } + default: + return {state} } } export const addCommandHistoryReducer = (state, action) => { switch (action.type) { - case CMD_HISTORY: - return { - ...state, - _commandHistory: initialState._commandHistory.unshift(action.payload.script) - - } - default : - return { state } + case CMD_HISTORY: + return { + ...state, + _commandHistory: initialState._commandHistory.unshift(action.payload.script), + } + default: + return {state} } } export const remixWelcomeTextReducer = (state, action) => { switch (action.type) { - case 'welcomeText' : - return { - ...state, - journalBlocks: initialState.journalBlocks.push(action.payload.welcomeText) - } + case 'welcomeText': + return { + ...state, + journalBlocks: initialState.journalBlocks.push(action.payload.welcomeText), + } } } export const registerScriptRunnerReducer = (state, action) => { switch (action.type) { - case HTML: - return { - ...state, - journalBlocks: initialState.journalBlocks.push({ message: action.payload.message, style: 'text-log', provider: action.payload.provider }) - } - case LOG: - return { - ...state, - journalBlocks: initialState.journalBlocks.push({ message: action.payload.message, style: 'text-log', provider: action.payload.provider }) - } - case TYPEWRITERLOG: - return { - ...state, - journalBlocks: initialState.journalBlocks.push({ message: action.payload.message, typewriter: true, style: 'text-log', provider: action.payload.provider }) - } - case TYPEWRITERWARNING: - return { - ...state, - journalBlocks: initialState.journalBlocks.push({ message: action.payload.message, typewriter: true, style: 'text-warning', provider: action.payload.provider }) - } - case TYPEWRITERSUCCESS: - return { - ...state, - journalBlocks: initialState.journalBlocks.push({ message: action.payload.message, typewriter: true, style: 'text-success', provider: action.payload.provider }) - } - case INFO: - return { - ...state, - journalBlocks: initialState.journalBlocks.push({ message: action.payload.message, style: 'text-success', provider: action.payload.provider }) - } - case WARN: - return { - ...state, - journalBlocks: initialState.journalBlocks.push({ message: action.payload.message, style: 'text-warning', provider: action.payload.provider }) - } - case ERROR: - return { - ...state, - journalBlocks: initialState.journalBlocks.push({ message: action.payload.message, style: 'text-danger', provider: action.payload.provider }) - } - case SCRIPT: - return { - ...state, - journalBlocks: initialState.journalBlocks.push({ message: action.payload.message, style: 'text-log', provider: action.payload.provider }) - } - case KNOWN_TRANSACTION: - return { - ...state, - journalBlocks: initialState.journalBlocks.push({ message: action.payload.message, style: '', name: 'knownTransaction', provider: action.payload.provider }) - } - case UNKNOWN_TRANSACTION: - return { - ...state, - journalBlocks: initialState.journalBlocks.push({ message: action.payload.message, style: '', name: 'unknownTransaction', provider: action.payload.provider }) - } - case EMPTY_BLOCK: - return { - ...state, - journalBlocks: initialState.journalBlocks.push({ message: action.payload.message, style: '', name: 'emptyBlock', provider: action.payload.provider }) - } - case NEW_TRANSACTION: - return { - ...state, - journalBlocks: initialState.journalBlocks.push({ message: action.payload.message, style: '', provider: action.payload.provider }) - } + case HTML: + return { + ...state, + journalBlocks: initialState.journalBlocks.push({message: action.payload.message, style: 'text-log', provider: action.payload.provider}), + } + case LOG: + return { + ...state, + journalBlocks: initialState.journalBlocks.push({message: action.payload.message, style: 'text-log', provider: action.payload.provider}), + } + case TYPEWRITERLOG: + return { + ...state, + journalBlocks: initialState.journalBlocks.push({message: action.payload.message, typewriter: true, style: 'text-log', provider: action.payload.provider}), + } + case TYPEWRITERWARNING: + return { + ...state, + journalBlocks: initialState.journalBlocks.push({message: action.payload.message, typewriter: true, style: 'text-warning', provider: action.payload.provider}), + } + case TYPEWRITERSUCCESS: + return { + ...state, + journalBlocks: initialState.journalBlocks.push({message: action.payload.message, typewriter: true, style: 'text-success', provider: action.payload.provider}), + } + case INFO: + return { + ...state, + journalBlocks: initialState.journalBlocks.push({message: action.payload.message, style: 'text-success', provider: action.payload.provider}), + } + case WARN: + return { + ...state, + journalBlocks: initialState.journalBlocks.push({message: action.payload.message, style: 'text-warning', provider: action.payload.provider}), + } + case ERROR: + return { + ...state, + journalBlocks: initialState.journalBlocks.push({message: action.payload.message, style: 'text-danger', provider: action.payload.provider}), + } + case SCRIPT: + return { + ...state, + journalBlocks: initialState.journalBlocks.push({message: action.payload.message, style: 'text-log', provider: action.payload.provider}), + } + case KNOWN_TRANSACTION: + return { + ...state, + journalBlocks: initialState.journalBlocks.push({message: action.payload.message, style: '', name: 'knownTransaction', provider: action.payload.provider}), + } + case UNKNOWN_TRANSACTION: + return { + ...state, + journalBlocks: initialState.journalBlocks.push({message: action.payload.message, style: '', name: 'unknownTransaction', provider: action.payload.provider}), + } + case EMPTY_BLOCK: + return { + ...state, + journalBlocks: initialState.journalBlocks.push({message: action.payload.message, style: '', name: 'emptyBlock', provider: action.payload.provider}), + } + case NEW_TRANSACTION: + return { + ...state, + journalBlocks: initialState.journalBlocks.push({message: action.payload.message, style: '', provider: action.payload.provider}), + } } } diff --git a/libs/remix-ui/terminal/src/lib/remix-ui-terminal-wrapper.tsx b/libs/remix-ui/terminal/src/lib/remix-ui-terminal-wrapper.tsx index 96d6c778a1..90cdc79140 100644 --- a/libs/remix-ui/terminal/src/lib/remix-ui-terminal-wrapper.tsx +++ b/libs/remix-ui/terminal/src/lib/remix-ui-terminal-wrapper.tsx @@ -1,7 +1,22 @@ -import React, { useState, useEffect, useReducer, useRef} from 'react' // eslint-disable-line +import React, { useReducer } from 'react' // eslint-disable-line +import { RemixUITerminalBar } from './components/remix-ui-terminal-bar' +import { TerminalContext } from './context/context' import { initialState, registerCommandReducer } from './reducers/terminalReducer' +import RemixUiTerminal from './remix-ui-terminal' +import { RemixUiTerminalProps } from './types/terminalTypes' -export const RemixUITerminalWrapper = () => { +export const RemixUITerminalWrapper = (props: RemixUiTerminalProps) => { const [newstate, dispatch] = useReducer(registerCommandReducer, initialState) - return (<>terminal) + + const providerState = { + newstate, + dispatch + } + + return (<> + + + + + ) } \ No newline at end of file diff --git a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx index 2f5caaf9ac..6d5eda1cee 100644 --- a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx +++ b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx @@ -1,5 +1,5 @@ /* eslint-disable @typescript-eslint/no-unused-vars */ -import React, { useState, useEffect, useReducer, useRef, SyntheticEvent, MouseEvent } from 'react' // eslint-disable-line +import React, { useState, useEffect, useReducer, useRef, SyntheticEvent, MouseEvent, useContext } from 'react' // eslint-disable-line import { FormattedMessage, useIntl } from 'react-intl' import { registerCommandAction, @@ -28,6 +28,7 @@ import RenderKnownTransactions from './components/RenderKnownTransactions' // es import parse from 'html-react-parser' import { EMPTY_BLOCK, KNOWN_TRANSACTION, RemixUiTerminalProps, UNKNOWN_TRANSACTION } from './types/terminalTypes' import { wrapScript } from './utils/wrapScript' +import { TerminalContext } from './context/context' const _paq = (window._paq = window._paq || []) /* eslint-disable-next-line */ @@ -40,7 +41,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => { const [_cmdIndex, setCmdIndex] = useState(-1) const [_cmdTemp, setCmdTemp] = useState('') const [isOpen, setIsOpen] = useState(true) - const [newstate, dispatch] = useReducer(registerCommandReducer, initialState) + const { newstate, dispatch } = useContext(TerminalContext) const [cmdHistory, cmdHistoryDispatch] = useReducer(addCommandHistoryReducer, initialState) const [, scriptRunnerDispatch] = useReducer(registerScriptRunnerReducer, initialState) const [toaster, setToaster] = useState(false) @@ -155,8 +156,13 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => { ) }, [autoCompletState.text]) + useEffect(() => { + console.log('newstate.journalBlocks change', newstate.journalBlocks) + }, [newstate]) + useEffect(() => { scrollToBottom() + console.log('newstate.journalBlocks.length', newstate.journalBlocks) }, [newstate.journalBlocks.length, toaster]) function execute(file, cb) { @@ -586,67 +592,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => { return ( ( !props.visible? <>:
-
-
- : } - > - - -
- }> - - -
- }> -
0
- - -
- - - - -
- -
- - setSearchInput(event.target.value.trim())} - type="text" - className="remix_ui_terminal_filter border form-control" - id="searchInput" - placeholder={intl.formatMessage({ id: 'terminal.search' })} - data-id="terminalInputSearch" - /> -
-
-
+
{handleAutoComplete()}
diff --git a/libs/remix-ui/terminal/src/lib/types/terminalTypes.ts b/libs/remix-ui/terminal/src/lib/types/terminalTypes.ts index 29d5af476a..63745a0be7 100644 --- a/libs/remix-ui/terminal/src/lib/types/terminalTypes.ts +++ b/libs/remix-ui/terminal/src/lib/types/terminalTypes.ts @@ -23,6 +23,7 @@ export const WARN = 'warn' export const ERROR = 'error' export const SCRIPT = 'script' export const CLEAR_CONSOLE = 'clearconsole' +export const TOGGLE = 'toggle' export const LISTEN_ON_NETWORK = 'listenOnNetWork' export const CMD_HISTORY = 'cmdHistory' From 6b86181999dbe0e5c03b4fe86ecc44647dd309d9 Mon Sep 17 00:00:00 2001 From: filip mertens Date: Mon, 19 Feb 2024 10:30:14 +0100 Subject: [PATCH 03/23] implement terminal bar func --- .../lib/components/remix-ui-terminal-bar.tsx | 14 ++++----- .../src/lib/reducers/terminalReducer.ts | 19 +++++++++++- .../terminal/src/lib/remix-ui-terminal.tsx | 29 ++++++++----------- .../terminal/src/lib/types/terminalTypes.ts | 2 ++ 4 files changed, 39 insertions(+), 25 deletions(-) diff --git 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 index 118ba1422e..5bea69856c 100644 --- 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' })} >
@@ -71,7 +71,7 @@ export const RemixUITerminalBar = (props: RemixUiTerminalProps) => { id="listenNetworkCheck" onChange={listenOnNetwork} type="checkbox" - disabled={isVM} + disabled={state.isVM} />