Skip to content

Commit a262ea6

Browse files
lirenjie95lirenjie95
committed
add console context
1 parent 1b09307 commit a262ea6

File tree

4 files changed

+143
-112
lines changed

4 files changed

+143
-112
lines changed

‎client/modules/IDE/components/Console.jsx

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,21 @@
11
import React, { useRef, useEffect, useMemo } from 'react';
22
import { useTranslation } from 'react-i18next';
3-
43
import { useSelector, useDispatch } from 'react-redux';
54
import classNames from 'classnames';
65
import { Console as ConsoleFeed } from 'console-feed';
76
import ConsoleInput from './ConsoleInput';
8-
97
import UpArrowIcon from '../../../images/up-arrow.svg';
108
import DownArrowIcon from '../../../images/down-arrow.svg';
11-
129
import * as IDEActions from '../../IDE/actions/ide';
13-
import * as ConsoleActions from '../../IDE/actions/console';
1410
import { useDidUpdate } from '../hooks/custom-hooks';
1511
import useHandleMessageEvent from '../hooks/useHandleMessageEvent';
1612
import { listen } from '../../../utils/dispatcher';
1713
import getConsoleFeedStyle from '../utils/consoleStyles';
14+
import { useConsole } from '../context/ConsoleContext';
1815

1916
const Console = () => {
2017
const { t } = useTranslation();
21-
const consoleEvents = useSelector((state) => state.console);
18+
const { consoleEvents, clearConsole: clearConsoleContext } = useConsole();
2219
const isExpanded = useSelector((state) => state.ide.consoleIsExpanded);
2320
const isPlaying = useSelector((state) => state.ide.isPlaying);
2421
const { theme, fontSize } = useSelector((state) => state.preferences);
@@ -44,7 +41,7 @@ const Console = () => {
4441
};
4542
});
4643

47-
const handleClearConsole = () => dispatch(ConsoleActions.clearConsole());
44+
const handleClearConsole = () => clearConsoleContext();
4845
const handleCollapseConsole = () => dispatch(IDEActions.collapseConsole());
4946
const handleExpandConsole = () => dispatch(IDEActions.expandConsole());
5047

‎client/modules/IDE/context/ConsoleContext.jsx

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React, { createContext, useContext, useState, useCallback } from 'react';
2+
3+
const ConsoleContext = createContext(null);
4+
5+
export function ConsoleProvider({ children }) {
6+
const [consoleEvents, setConsoleEvents] = useState([]);
7+
8+
const dispatchConsoleEvent = useCallback((messages) => {
9+
setConsoleEvents(prev => [...prev, ...messages]);
10+
}, []);
11+
12+
const clearConsole = useCallback(() => {
13+
setConsoleEvents([]);
14+
}, []);
15+
16+
return (
17+
<ConsoleContext.Provider value={{ consoleEvents, dispatchConsoleEvent, clearConsole }}>
18+
{children}
19+
</ConsoleContext.Provider>
20+
);
21+
}
22+
23+
export function useConsole() {
24+
const context = useContext(ConsoleContext);
25+
if (!context) {
26+
throw new Error('useConsole must be used within a ConsoleProvider');
27+
}
28+
return context;
29+
}

‎client/modules/IDE/hooks/useHandleMessageEvent.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import { useDispatch } from 'react-redux';
22
import { Decode } from 'console-feed';
3-
import { dispatchConsoleEvent } from '../actions/console';
43
import { stopSketch, expandConsole } from '../actions/ide';
4+
import { useConsole } from '../context/ConsoleContext';
55

66
export default function useHandleMessageEvent() {
77
const dispatch = useDispatch();
8+
const { dispatchConsoleEvent } = useConsole();
89

910
const safeStringify = (
1011
obj,
@@ -62,7 +63,7 @@ export default function useHandleMessageEvent() {
6263
return;
6364
}
6465

65-
dispatch(dispatchConsoleEvent(decodedMessages));
66+
dispatchConsoleEvent(decodedMessages);
6667
};
6768

6869
return handleMessageEvent;

‎client/modules/IDE/pages/IDEView.jsx

Lines changed: 108 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import PreviewFrame from '../components/PreviewFrame';
1010
import Console from '../components/Console';
1111
import Toast from '../components/Toast';
1212
import { updateFileContent } from '../actions/files';
13+
import { ConsoleProvider } from '../context/ConsoleContext';
1314

1415
import {
1516
autosaveProject,
@@ -167,127 +168,130 @@ const IDEView = () => {
167168
: consoleCollapsedSize;
168169

169170
return (
170-
<RootPage>
171-
<Helmet>
172-
<title>{getTitle(project)}</title>
173-
</Helmet>
174-
<IDEKeyHandlers getContent={() => cmRef.current?.getContent()} />
175-
<WarnIfUnsavedChanges />
176-
<Toast />
177-
<P5VersionProvider>
178-
<CmControllerContext.Provider value={cmRef}>
179-
<Header syncFileContent={syncFileContent} />
180-
</CmControllerContext.Provider>
181-
{isMobile ? (
182-
<>
183-
<FloatingActionButton
184-
syncFileContent={syncFileContent}
185-
offsetBottom={ide.isPlaying ? currentConsoleSize : 0}
186-
/>
187-
<PreviewWrapper show={ide.isPlaying}>
188-
<SplitPane
189-
style={{ position: 'static' }}
190-
split="horizontal"
191-
primary="second"
192-
size={currentConsoleSize}
193-
minSize={consoleCollapsedSize}
194-
onChange={(size) => {
195-
setConsoleSize(size);
196-
setIsOverlayVisible(true);
197-
}}
198-
onDragFinished={() => {
199-
setIsOverlayVisible(false);
200-
}}
201-
allowResize={ide.consoleIsExpanded}
202-
className="editor-preview-subpanel"
203-
>
204-
<PreviewFrame
205-
fullView
206-
hide={!ide.isPlaying}
207-
cmController={cmRef.current}
208-
isOverlayVisible={isOverlayVisible}
209-
/>
210-
<Console />
211-
</SplitPane>
212-
</PreviewWrapper>
213-
<EditorSidebarWrapper show={!ide.isPlaying}>
214-
<Sidebar />
215-
<Editor
216-
provideController={(ctl) => {
217-
cmRef.current = ctl;
218-
}}
171+
<ConsoleProvider>
172+
<RootPage>
173+
<Helmet>
174+
<title>{getTitle(project)}</title>
175+
</Helmet>
176+
<IDEKeyHandlers getContent={() => cmRef.current?.getContent()} />
177+
<WarnIfUnsavedChanges />
178+
<Toast />
179+
<P5VersionProvider>
180+
<CmControllerContext.Provider value={cmRef}>
181+
<Header syncFileContent={syncFileContent} />
182+
</CmControllerContext.Provider>
183+
{isMobile ? (
184+
<>
185+
<FloatingActionButton
186+
syncFileContent={syncFileContent}
187+
offsetBottom={ide.isPlaying ? currentConsoleSize : 0}
219188
/>
220-
</EditorSidebarWrapper>
221-
</>
222-
) : (
223-
<main className="editor-preview-container">
224-
<SplitPane
225-
split="vertical"
226-
size={ide.sidebarIsExpanded ? sidebarSize : 20}
227-
onChange={(size) => {
228-
setSidebarSize(size);
229-
}}
230-
allowResize={ide.sidebarIsExpanded}
231-
minSize={150}
232-
>
233-
<Sidebar />
234-
<SplitPane
235-
split="vertical"
236-
maxSize={MaxSize * 0.965}
237-
defaultSize="50%"
238-
onChange={() => {
239-
setIsOverlayVisible(true);
240-
}}
241-
onDragFinished={() => {
242-
setIsOverlayVisible(false);
243-
}}
244-
resizerStyle={{
245-
borderLeftWidth: '2px',
246-
borderRightWidth: '2px',
247-
width: '2px',
248-
margin: '0px 0px'
249-
}}
250-
>
189+
<PreviewWrapper show={ide.isPlaying}>
251190
<SplitPane
191+
style={{ position: 'static' }}
252192
split="horizontal"
253193
primary="second"
254194
size={currentConsoleSize}
255195
minSize={consoleCollapsedSize}
256196
onChange={(size) => {
257197
setConsoleSize(size);
198+
setIsOverlayVisible(true);
199+
}}
200+
onDragFinished={() => {
201+
setIsOverlayVisible(false);
258202
}}
259203
allowResize={ide.consoleIsExpanded}
260204
className="editor-preview-subpanel"
261205
>
262-
<Editor
263-
provideController={(ctl) => {
264-
cmRef.current = ctl;
265-
}}
206+
<PreviewFrame
207+
fullView
208+
hide={!ide.isPlaying}
209+
cmController={cmRef.current}
210+
isOverlayVisible={isOverlayVisible}
266211
/>
267212
<Console />
268213
</SplitPane>
269-
<section className="preview-frame-holder">
270-
<header className="preview-frame__header">
271-
<h2 className="preview-frame__title">
272-
{t('Toolbar.Preview')}
273-
</h2>
274-
</header>
275-
<div className="preview-frame__content">
276-
<PreviewFrame
277-
cmController={cmRef.current}
278-
isOverlayVisible={isOverlayVisible}
214+
</PreviewWrapper>
215+
<EditorSidebarWrapper show={!ide.isPlaying}>
216+
<Sidebar />
217+
<Editor
218+
provideController={(ctl) => {
219+
cmRef.current = ctl;
220+
}}
221+
/>
222+
</EditorSidebarWrapper>
223+
</>
224+
) : (
225+
<main className="editor-preview-container">
226+
<SplitPane
227+
split="vertical"
228+
size={ide.sidebarIsExpanded ? sidebarSize : 20}
229+
onChange={(size) => {
230+
setSidebarSize(size);
231+
}}
232+
allowResize={ide.sidebarIsExpanded}
233+
minSize={150}
234+
>
235+
<Sidebar />
236+
<SplitPane
237+
split="vertical"
238+
maxSize={MaxSize * 0.965}
239+
defaultSize="50%"
240+
onChange={() => {
241+
setIsOverlayVisible(true);
242+
}}
243+
onDragFinished={() => {
244+
setIsOverlayVisible(false);
245+
}}
246+
resizerStyle={{
247+
borderLeftWidth: '2px',
248+
borderRightWidth: '2px',
249+
width: '2px',
250+
margin: '0px 0px'
251+
}}
252+
>
253+
<SplitPane
254+
split="horizontal"
255+
primary="second"
256+
size={currentConsoleSize}
257+
minSize={consoleCollapsedSize}
258+
onChange={(size) => {
259+
setConsoleSize(size);
260+
}}
261+
allowResize={ide.consoleIsExpanded}
262+
className="editor-preview-subpanel"
263+
>
264+
<Editor
265+
provideController={(ctl) => {
266+
cmRef.current = ctl;
267+
}}
279268
/>
280-
</div>
281-
</section>
269+
<Console />
270+
</SplitPane>
271+
<section className="preview-frame-holder">
272+
<header className="preview-frame__header">
273+
<h2 className="preview-frame__title">
274+
{t('Toolbar.Preview')}
275+
</h2>
276+
</header>
277+
<div className="preview-frame__content">
278+
<PreviewFrame
279+
cmController={cmRef.current}
280+
isOverlayVisible={isOverlayVisible}
281+
/>
282+
</div>
283+
</section>
284+
</SplitPane>
282285
</SplitPane>
283-
</SplitPane>
284-
</main>
285-
)}
286-
<CmControllerContext.Provider value={cmRef}>
287-
<IDEOverlays />
288-
</CmControllerContext.Provider>
289-
</P5VersionProvider>
290-
</RootPage>
286+
</main>
287+
)}
288+
<CmControllerContext.Provider value={cmRef}>
289+
<IDEOverlays />
290+
</CmControllerContext.Provider>
291+
</P5VersionProvider>
292+
<Console />
293+
</RootPage>
294+
</ConsoleProvider>
291295
);
292296
};
293297

0 commit comments

Comments
 (0)