Skip to content

Commit b209f84

Browse files
davepagurekdavepagurek
committed
Move useP5Version into a provider to persist state
1 parent 7b4ae4e commit b209f84

File tree

3 files changed

+127
-102
lines changed

3 files changed

+127
-102
lines changed

‎client/modules/IDE/components/Preferences/index.jsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,6 @@ export default function Preferences() {
4646

4747
const [state, setState] = useState({ fontSize });
4848
const { versionInfo, indexID } = useP5Version();
49-
const [lastP5SoundURL, setLastP5SoundURL] = useState(undefined);
5049
const cmRef = useContext(CmControllerContext);
5150

5251
function onFontInputChange(event) {
@@ -533,7 +532,7 @@ export default function Preferences() {
533532
// default version that one will get via this toggle,
534533
// record it so we can give the option to put it back
535534
if (versionInfo.p5SoundURL !== p5SoundURL) {
536-
setLastP5SoundURL(versionInfo.p5SoundURL);
535+
versionInfo.setLastP5SoundURL(versionInfo.p5SoundURL);
537536
}
538537
updateHTML(versionInfo.setP5Sound(false));
539538
}}
@@ -550,11 +549,13 @@ export default function Preferences() {
550549
>
551550
{t('Preferences.Off')}
552551
</label>
553-
{lastP5SoundURL && (
552+
{versionInfo.lastP5SoundURL && (
554553
<Button
555554
onClick={() => {
556-
updateHTML(versionInfo.setP5SoundURL(lastP5SoundURL));
557-
setLastP5SoundURL(undefined);
555+
updateHTML(
556+
versionInfo.setP5SoundURL(versionInfo.lastP5SoundURL)
557+
);
558+
versionInfo.setLastP5SoundURL(undefined);
558559
}}
559560
>
560561
{t('Preferences.UndoSoundVersion')}

‎client/modules/IDE/hooks/useP5Version.js renamed to ‎client/modules/IDE/hooks/useP5Version.jsx

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import { useMemo } from 'react';
1+
import React, { useContext, useMemo, useState } from 'react';
22
import { useSelector } from 'react-redux';
3+
import PropTypes from 'prop-types';
34

45
// Generated from https://www.npmjs.com/package/p5?activeTab=versions
56
// Run this in the console:
@@ -138,7 +139,9 @@ export const p5SoundURL = `https://cdnjs.cloudflare.com/ajax/libs/p5.js/${curren
138139
export const p5PreloadAddonURL = 'https://TODO/preload.js';
139140
export const p5ShapesAddonURL = 'https://TODO/shapes.js';
140141

141-
export function useP5Version() {
142+
const P5VersionContext = React.createContext({});
143+
144+
export function P5VersionProvider(props) {
142145
const files = useSelector((state) => state.files);
143146
const indexFile = files.find(
144147
(file) =>
@@ -149,6 +152,8 @@ export function useP5Version() {
149152
const indexSrc = indexFile?.content;
150153
const indexID = indexFile?.id;
151154

155+
const [lastP5SoundURL, setLastP5SoundURL] = useState(undefined);
156+
152157
// { version: string, minified: boolean, replaceVersion: (version: string) => string } | null
153158
const versionInfo = useMemo(() => {
154159
if (!indexSrc) return null;
@@ -261,6 +266,8 @@ export function useP5Version() {
261266
setP5Sound,
262267
setP5SoundURL,
263268
p5SoundURL: p5SoundNode?.getAttribute('src'),
269+
lastP5SoundURL,
270+
setLastP5SoundURL,
264271
p5PreloadAddon: !!p5PreloadAddonNode,
265272
setP5PreloadAddon,
266273
p5ShapesAdddon: !!p5ShapesAddonNode,
@@ -270,5 +277,19 @@ export function useP5Version() {
270277
return null;
271278
}, [indexSrc]);
272279

273-
return { indexID, versionInfo };
280+
const value = { indexID, versionInfo };
281+
282+
return (
283+
<P5VersionContext.Provider value={value}>
284+
{props.children}
285+
</P5VersionContext.Provider>
286+
);
287+
}
288+
289+
P5VersionProvider.propTypes = {
290+
children: PropTypes.element.isRequired
291+
};
292+
293+
export function useP5Version() {
294+
return useContext(P5VersionContext);
274295
}

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

Lines changed: 97 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import {
2727
} from '../components/Editor/MobileEditor';
2828
import IDEOverlays from '../components/IDEOverlays';
2929
import useIsMobile from '../hooks/useIsMobile';
30+
import { P5VersionProvider } from '../hooks/useP5Version';
3031

3132
function getTitle(project) {
3233
const { id } = project;
@@ -173,117 +174,119 @@ const IDEView = () => {
173174
<IDEKeyHandlers getContent={() => cmRef.current?.getContent()} />
174175
<WarnIfUnsavedChanges />
175176
<Toast />
176-
<CmControllerContext.Provider value={cmRef}>
177-
<Header syncFileContent={syncFileContent} />
178-
</CmControllerContext.Provider>
179-
{isMobile ? (
180-
<>
181-
<FloatingActionButton
182-
syncFileContent={syncFileContent}
183-
offsetBottom={ide.isPlaying ? currentConsoleSize : 0}
184-
/>
185-
<PreviewWrapper show={ide.isPlaying}>
186-
<SplitPane
187-
style={{ position: 'static' }}
188-
split="horizontal"
189-
primary="second"
190-
size={currentConsoleSize}
191-
minSize={consoleCollapsedSize}
192-
onChange={(size) => {
193-
setConsoleSize(size);
194-
setIsOverlayVisible(true);
195-
}}
196-
onDragFinished={() => {
197-
setIsOverlayVisible(false);
198-
}}
199-
allowResize={ide.consoleIsExpanded}
200-
className="editor-preview-subpanel"
201-
>
202-
<PreviewFrame
203-
fullView
204-
hide={!ide.isPlaying}
205-
cmController={cmRef.current}
206-
isOverlayVisible={isOverlayVisible}
207-
/>
208-
<Console />
209-
</SplitPane>
210-
</PreviewWrapper>
211-
<EditorSidebarWrapper show={!ide.isPlaying}>
212-
<Sidebar />
213-
<Editor
214-
provideController={(ctl) => {
215-
cmRef.current = ctl;
216-
}}
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}
217186
/>
218-
</EditorSidebarWrapper>
219-
</>
220-
) : (
221-
<main className="editor-preview-container">
222-
<SplitPane
223-
split="vertical"
224-
size={ide.sidebarIsExpanded ? sidebarSize : 20}
225-
onChange={(size) => {
226-
setSidebarSize(size);
227-
}}
228-
allowResize={ide.sidebarIsExpanded}
229-
minSize={150}
230-
>
231-
<Sidebar />
232-
<SplitPane
233-
split="vertical"
234-
maxSize={MaxSize * 0.965}
235-
defaultSize="50%"
236-
onChange={() => {
237-
setIsOverlayVisible(true);
238-
}}
239-
onDragFinished={() => {
240-
setIsOverlayVisible(false);
241-
}}
242-
resizerStyle={{
243-
borderLeftWidth: '2px',
244-
borderRightWidth: '2px',
245-
width: '2px',
246-
margin: '0px 0px'
247-
}}
248-
>
187+
<PreviewWrapper show={ide.isPlaying}>
249188
<SplitPane
189+
style={{ position: 'static' }}
250190
split="horizontal"
251191
primary="second"
252192
size={currentConsoleSize}
253193
minSize={consoleCollapsedSize}
254194
onChange={(size) => {
255195
setConsoleSize(size);
196+
setIsOverlayVisible(true);
197+
}}
198+
onDragFinished={() => {
199+
setIsOverlayVisible(false);
256200
}}
257201
allowResize={ide.consoleIsExpanded}
258202
className="editor-preview-subpanel"
259203
>
260-
<Editor
261-
provideController={(ctl) => {
262-
cmRef.current = ctl;
263-
}}
204+
<PreviewFrame
205+
fullView
206+
hide={!ide.isPlaying}
207+
cmController={cmRef.current}
208+
isOverlayVisible={isOverlayVisible}
264209
/>
265210
<Console />
266211
</SplitPane>
267-
<section className="preview-frame-holder">
268-
<header className="preview-frame__header">
269-
<h2 className="preview-frame__title">
270-
{t('Toolbar.Preview')}
271-
</h2>
272-
</header>
273-
<div className="preview-frame__content">
274-
<PreviewFrame
275-
cmController={cmRef.current}
276-
isOverlayVisible={isOverlayVisible}
212+
</PreviewWrapper>
213+
<EditorSidebarWrapper show={!ide.isPlaying}>
214+
<Sidebar />
215+
<Editor
216+
provideController={(ctl) => {
217+
cmRef.current = ctl;
218+
}}
219+
/>
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+
>
251+
<SplitPane
252+
split="horizontal"
253+
primary="second"
254+
size={currentConsoleSize}
255+
minSize={consoleCollapsedSize}
256+
onChange={(size) => {
257+
setConsoleSize(size);
258+
}}
259+
allowResize={ide.consoleIsExpanded}
260+
className="editor-preview-subpanel"
261+
>
262+
<Editor
263+
provideController={(ctl) => {
264+
cmRef.current = ctl;
265+
}}
277266
/>
278-
</div>
279-
</section>
267+
<Console />
268+
</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}
279+
/>
280+
</div>
281+
</section>
282+
</SplitPane>
280283
</SplitPane>
281-
</SplitPane>
282-
</main>
283-
)}
284-
<CmControllerContext.Provider value={cmRef}>
285-
<IDEOverlays />
286-
</CmControllerContext.Provider>
284+
</main>
285+
)}
286+
<CmControllerContext.Provider value={cmRef}>
287+
<IDEOverlays />
288+
</CmControllerContext.Provider>
289+
</P5VersionProvider>
287290
</RootPage>
288291
);
289292
};

0 commit comments

Comments
 (0)