diff --git a/client/modules/IDE/components/Console.jsx b/client/modules/IDE/components/Console.jsx
index 12d5c4988b..454b503998 100644
--- a/client/modules/IDE/components/Console.jsx
+++ b/client/modules/IDE/components/Console.jsx
@@ -1,24 +1,21 @@
import React, { useRef, useEffect, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
-
import { useSelector, useDispatch } from 'react-redux';
import classNames from 'classnames';
import { Console as ConsoleFeed } from 'console-feed';
import ConsoleInput from './ConsoleInput';
-
import UpArrowIcon from '../../../images/up-arrow.svg';
import DownArrowIcon from '../../../images/down-arrow.svg';
-
import * as IDEActions from '../../IDE/actions/ide';
-import * as ConsoleActions from '../../IDE/actions/console';
import { useDidUpdate } from '../hooks/custom-hooks';
import useHandleMessageEvent from '../hooks/useHandleMessageEvent';
import { listen } from '../../../utils/dispatcher';
import getConsoleFeedStyle from '../utils/consoleStyles';
+import { useConsole } from '../context/ConsoleContext';
const Console = () => {
const { t } = useTranslation();
- const consoleEvents = useSelector((state) => state.console);
+ const { consoleEvents, clearConsole: clearConsoleContext } = useConsole();
const isExpanded = useSelector((state) => state.ide.consoleIsExpanded);
const isPlaying = useSelector((state) => state.ide.isPlaying);
const { theme, fontSize } = useSelector((state) => state.preferences);
@@ -44,7 +41,7 @@ const Console = () => {
};
});
- const handleClearConsole = () => dispatch(ConsoleActions.clearConsole());
+ const handleClearConsole = () => clearConsoleContext();
const handleCollapseConsole = () => dispatch(IDEActions.collapseConsole());
const handleExpandConsole = () => dispatch(IDEActions.expandConsole());
diff --git a/client/modules/IDE/context/ConsoleContext.jsx b/client/modules/IDE/context/ConsoleContext.jsx
new file mode 100644
index 0000000000..f1be4f31da
--- /dev/null
+++ b/client/modules/IDE/context/ConsoleContext.jsx
@@ -0,0 +1,29 @@
+import React, { createContext, useContext, useState, useCallback } from 'react';
+
+const ConsoleContext = createContext(null);
+
+export function ConsoleProvider({ children }) {
+ const [consoleEvents, setConsoleEvents] = useState([]);
+
+ const dispatchConsoleEvent = useCallback((messages) => {
+ setConsoleEvents(prev => [...prev, ...messages]);
+ }, []);
+
+ const clearConsole = useCallback(() => {
+ setConsoleEvents([]);
+ }, []);
+
+ return (
+
+ {children}
+
+ );
+}
+
+export function useConsole() {
+ const context = useContext(ConsoleContext);
+ if (!context) {
+ throw new Error('useConsole must be used within a ConsoleProvider');
+ }
+ return context;
+}
\ No newline at end of file
diff --git a/client/modules/IDE/hooks/useHandleMessageEvent.js b/client/modules/IDE/hooks/useHandleMessageEvent.js
index 5603c1d697..7e9086a53d 100644
--- a/client/modules/IDE/hooks/useHandleMessageEvent.js
+++ b/client/modules/IDE/hooks/useHandleMessageEvent.js
@@ -1,10 +1,11 @@
import { useDispatch } from 'react-redux';
import { Decode } from 'console-feed';
-import { dispatchConsoleEvent } from '../actions/console';
import { stopSketch, expandConsole } from '../actions/ide';
+import { useConsole } from '../context/ConsoleContext';
export default function useHandleMessageEvent() {
const dispatch = useDispatch();
+ const { dispatchConsoleEvent } = useConsole();
const safeStringify = (
obj,
@@ -62,7 +63,7 @@ export default function useHandleMessageEvent() {
return;
}
- dispatch(dispatchConsoleEvent(decodedMessages));
+ dispatchConsoleEvent(decodedMessages);
};
return handleMessageEvent;
diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx
index a9cc72f169..d569ec2e96 100644
--- a/client/modules/IDE/pages/IDEView.jsx
+++ b/client/modules/IDE/pages/IDEView.jsx
@@ -10,6 +10,7 @@ import PreviewFrame from '../components/PreviewFrame';
import Console from '../components/Console';
import Toast from '../components/Toast';
import { updateFileContent } from '../actions/files';
+import { ConsoleProvider } from '../context/ConsoleContext';
import {
autosaveProject,
@@ -167,127 +168,130 @@ const IDEView = () => {
: consoleCollapsedSize;
return (
-
-
- {getTitle(project)}
-
- cmRef.current?.getContent()} />
-
-
-
-
-
-
- {isMobile ? (
- <>
-
-
- {
- setConsoleSize(size);
- setIsOverlayVisible(true);
- }}
- onDragFinished={() => {
- setIsOverlayVisible(false);
- }}
- allowResize={ide.consoleIsExpanded}
- className="editor-preview-subpanel"
- >
-
-
-
-
-
-
- {
- cmRef.current = ctl;
- }}
+
+
+
+ {getTitle(project)}
+
+ cmRef.current?.getContent()} />
+
+
+
+
+
+
+ {isMobile ? (
+ <>
+
-
-
- ) : (
-
- {
- setSidebarSize(size);
- }}
- allowResize={ide.sidebarIsExpanded}
- minSize={150}
- >
-
- {
- setIsOverlayVisible(true);
- }}
- onDragFinished={() => {
- setIsOverlayVisible(false);
- }}
- resizerStyle={{
- borderLeftWidth: '2px',
- borderRightWidth: '2px',
- width: '2px',
- margin: '0px 0px'
- }}
- >
+
{
setConsoleSize(size);
+ setIsOverlayVisible(true);
+ }}
+ onDragFinished={() => {
+ setIsOverlayVisible(false);
}}
allowResize={ide.consoleIsExpanded}
className="editor-preview-subpanel"
>
- {
- cmRef.current = ctl;
- }}
+
-
-
-
- {t('Toolbar.Preview')}
-
-
-
-
+
+
+ {
+ cmRef.current = ctl;
+ }}
+ />
+
+
+ ) : (
+
+ {
+ setSidebarSize(size);
+ }}
+ allowResize={ide.sidebarIsExpanded}
+ minSize={150}
+ >
+
+ {
+ setIsOverlayVisible(true);
+ }}
+ onDragFinished={() => {
+ setIsOverlayVisible(false);
+ }}
+ resizerStyle={{
+ borderLeftWidth: '2px',
+ borderRightWidth: '2px',
+ width: '2px',
+ margin: '0px 0px'
+ }}
+ >
+ {
+ setConsoleSize(size);
+ }}
+ allowResize={ide.consoleIsExpanded}
+ className="editor-preview-subpanel"
+ >
+ {
+ cmRef.current = ctl;
+ }}
/>
-
+ {t('Toolbar.Preview')}
+
+
+
+
+
-
-
- )}
-
-
-
-
-
+
+ )}
+
+
+
+
+
+
+
);
};