Skip to content

refactor: migrate console state management to React Context #3499

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: develop
Choose a base branch
from
Open

refactor: migrate console state management to React Context #3499

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2ffce76
refactor: migrate console state management to React Context
lirenjie95 May 27, 2025
ec628dc
Merge branch 'develop' into fix/console-context
raclim Jun 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions client/modules/IDE/components/Console.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,15 @@ 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);
Expand All @@ -44,7 +44,7 @@ const Console = () => {
};
});

const handleClearConsole = () => dispatch(ConsoleActions.clearConsole());
const handleClearConsole = () => clearConsoleContext();
const handleCollapseConsole = () => dispatch(IDEActions.collapseConsole());
const handleExpandConsole = () => dispatch(IDEActions.expandConsole());

Expand Down
40 changes: 40 additions & 0 deletions client/modules/IDE/context/ConsoleContext.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import React, { createContext, useContext, useState, useCallback } from 'react';
import PropTypes from 'prop-types';

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 (
<ConsoleContext.Provider
value={{
consoleEvents,
dispatchConsoleEvent,
clearConsole
}}
>
{children}
</ConsoleContext.Provider>
);
}

ConsoleProvider.propTypes = {
children: PropTypes.node.isRequired
};

export function useConsole() {
const context = useContext(ConsoleContext);
if (!context) {
throw new Error('useConsole must be used within a ConsoleProvider');
}
return context;
}
5 changes: 3 additions & 2 deletions client/modules/IDE/hooks/useHandleMessageEvent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -62,7 +63,7 @@ export default function useHandleMessageEvent() {
return;
}

dispatch(dispatchConsoleEvent(decodedMessages));
dispatchConsoleEvent(decodedMessages);
};

return handleMessageEvent;
Expand Down
212 changes: 108 additions & 104 deletions client/modules/IDE/pages/IDEView.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -167,127 +168,130 @@ const IDEView = () => {
: consoleCollapsedSize;

return (
<RootPage>
<Helmet>
<title>{getTitle(project)}</title>
</Helmet>
<IDEKeyHandlers getContent={() => cmRef.current?.getContent()} />
<WarnIfUnsavedChanges />
<Toast />
<P5VersionProvider>
<CmControllerContext.Provider value={cmRef}>
<Header syncFileContent={syncFileContent} />
</CmControllerContext.Provider>
{isMobile ? (
<>
<FloatingActionButton
syncFileContent={syncFileContent}
offsetBottom={ide.isPlaying ? currentConsoleSize : 0}
/>
<PreviewWrapper show={ide.isPlaying}>
<SplitPane
style={{ position: 'static' }}
split="horizontal"
primary="second"
size={currentConsoleSize}
minSize={consoleCollapsedSize}
onChange={(size) => {
setConsoleSize(size);
setIsOverlayVisible(true);
}}
onDragFinished={() => {
setIsOverlayVisible(false);
}}
allowResize={ide.consoleIsExpanded}
className="editor-preview-subpanel"
>
<PreviewFrame
fullView
hide={!ide.isPlaying}
cmController={cmRef.current}
isOverlayVisible={isOverlayVisible}
/>
<Console />
</SplitPane>
</PreviewWrapper>
<EditorSidebarWrapper show={!ide.isPlaying}>
<Sidebar />
<Editor
provideController={(ctl) => {
cmRef.current = ctl;
}}
<ConsoleProvider>
<RootPage>
<Helmet>
<title>{getTitle(project)}</title>
</Helmet>
<IDEKeyHandlers getContent={() => cmRef.current?.getContent()} />
<WarnIfUnsavedChanges />
<Toast />
<P5VersionProvider>
<CmControllerContext.Provider value={cmRef}>
<Header syncFileContent={syncFileContent} />
</CmControllerContext.Provider>
{isMobile ? (
<>
<FloatingActionButton
syncFileContent={syncFileContent}
offsetBottom={ide.isPlaying ? currentConsoleSize : 0}
/>
</EditorSidebarWrapper>
</>
) : (
<main className="editor-preview-container">
<SplitPane
split="vertical"
size={ide.sidebarIsExpanded ? sidebarSize : 20}
onChange={(size) => {
setSidebarSize(size);
}}
allowResize={ide.sidebarIsExpanded}
minSize={150}
>
<Sidebar />
<SplitPane
split="vertical"
maxSize={MaxSize * 0.965}
defaultSize="50%"
onChange={() => {
setIsOverlayVisible(true);
}}
onDragFinished={() => {
setIsOverlayVisible(false);
}}
resizerStyle={{
borderLeftWidth: '2px',
borderRightWidth: '2px',
width: '2px',
margin: '0px 0px'
}}
>
<PreviewWrapper show={ide.isPlaying}>
<SplitPane
style={{ position: 'static' }}
split="horizontal"
primary="second"
size={currentConsoleSize}
minSize={consoleCollapsedSize}
onChange={(size) => {
setConsoleSize(size);
setIsOverlayVisible(true);
}}
onDragFinished={() => {
setIsOverlayVisible(false);
}}
allowResize={ide.consoleIsExpanded}
className="editor-preview-subpanel"
>
<Editor
provideController={(ctl) => {
cmRef.current = ctl;
}}
<PreviewFrame
fullView
hide={!ide.isPlaying}
cmController={cmRef.current}
isOverlayVisible={isOverlayVisible}
/>
<Console />
</SplitPane>
<section className="preview-frame-holder">
<header className="preview-frame__header">
<h2 className="preview-frame__title">
{t('Toolbar.Preview')}
</h2>
</header>
<div className="preview-frame__content">
<PreviewFrame
cmController={cmRef.current}
isOverlayVisible={isOverlayVisible}
</PreviewWrapper>
<EditorSidebarWrapper show={!ide.isPlaying}>
<Sidebar />
<Editor
provideController={(ctl) => {
cmRef.current = ctl;
}}
/>
</EditorSidebarWrapper>
</>
) : (
<main className="editor-preview-container">
<SplitPane
split="vertical"
size={ide.sidebarIsExpanded ? sidebarSize : 20}
onChange={(size) => {
setSidebarSize(size);
}}
allowResize={ide.sidebarIsExpanded}
minSize={150}
>
<Sidebar />
<SplitPane
split="vertical"
maxSize={MaxSize * 0.965}
defaultSize="50%"
onChange={() => {
setIsOverlayVisible(true);
}}
onDragFinished={() => {
setIsOverlayVisible(false);
}}
resizerStyle={{
borderLeftWidth: '2px',
borderRightWidth: '2px',
width: '2px',
margin: '0px 0px'
}}
>
<SplitPane
split="horizontal"
primary="second"
size={currentConsoleSize}
minSize={consoleCollapsedSize}
onChange={(size) => {
setConsoleSize(size);
}}
allowResize={ide.consoleIsExpanded}
className="editor-preview-subpanel"
>
<Editor
provideController={(ctl) => {
cmRef.current = ctl;
}}
/>
</div>
</section>
<Console />
</SplitPane>
<section className="preview-frame-holder">
<header className="preview-frame__header">
<h2 className="preview-frame__title">
{t('Toolbar.Preview')}
</h2>
</header>
<div className="preview-frame__content">
<PreviewFrame
cmController={cmRef.current}
isOverlayVisible={isOverlayVisible}
/>
</div>
</section>
</SplitPane>
</SplitPane>
</SplitPane>
</main>
)}
<CmControllerContext.Provider value={cmRef}>
<IDEOverlays />
</CmControllerContext.Provider>
</P5VersionProvider>
</RootPage>
</main>
)}
<CmControllerContext.Provider value={cmRef}>
<IDEOverlays />
</CmControllerContext.Provider>
</P5VersionProvider>
<Console />
</RootPage>
</ConsoleProvider>
);
};

Expand Down