jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-01-08 21:02:25 -05:00
Code Issues Projects Releases Wiki Activity

fix: now pane remembers state (#57368)

Browse Source 
Co-authored-by: root <root@DESKTOP-G3MCU14>
This commit is contained in:
Query&mut NinjaStyle, &Ryder
2025-01-14 13:12:10 +05:30
committed by GitHub
parent 256f69e068
commit df7e13f2b7
1 changed files with 72 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
client/src/templates/Challenges/classic/desktop-layout.tsx
View File

@@ -3,6 +3,7 @@ import React, { useState, useEffect, ReactElement } from 'react';
import { ReflexContainer, ReflexSplitter, ReflexElement } from 'react-reflex';
import { createSelector } from 'reselect';
import { connect } from 'react-redux';
import store from 'store';
import { sortChallengeFiles } from '../../../../utils/sort-challengefiles';
import { challengeTypes } from '../../../../../shared/config/challenge-types';
import {
@@ -99,9 +100,77 @@ const DesktopLayout = (props: DesktopLayoutProps): JSX.Element => {
startWithConsoleShown
} = props;
const [showNotes, setShowNotes] = useState(false);
const [showConsole, setShowConsole] = useState(startWithConsoleShown);
const [showInstructions, setShowInstructions] = useState(true);
const initialShowState = (key: string, defaultValue: boolean): boolean => {
const savedState: string = store.get('layoutPaneBooleans') as string;
try {
if (savedState) {
const parsedState: Record<string, boolean> = JSON.parse(
savedState
) as Record<string, boolean>;
return parsedState[key] || defaultValue;
}
} catch (error) {
console.error('Error parsing layoutPaneBooleans from store', error);
}
return defaultValue;
};
const [showNotes, setShowNotes] = useState(() =>
initialShowState('showNotes', false)
);
const [showConsole, setShowConsole] = useState(() =>
initialShowState('showConsole', startWithConsoleShown)
);
const [showInstructions, setShowInstructions] = useState(() =>
initialShowState('showInstructions', true)
);
/* eslint-disable react-hooks/exhaustive-deps */
useEffect(() => {
setShowPreviewPane(initialShowState('showPreviewPane', false));
setShowPreviewPortal(initialShowState('showPreviewPortal', false));
}, []);
useEffect(() => {
const layoutPaneBooleans = {
showNotes,
showConsole,
showInstructions,
showPreviewPane,
showPreviewPortal
};
store.set('layoutPaneBooleans', JSON.stringify(layoutPaneBooleans));
}, [
showNotes,
showConsole,
showInstructions,
showPreviewPane,
showPreviewPortal
]);
useEffect(() => {
const layoutPaneBooleans: string = store.get(
'layoutPaneBooleans'
) as string;
if (layoutPaneBooleans) {
let parsedLayoutPaneBooleans: Record<string, boolean> = {};
try {
parsedLayoutPaneBooleans = JSON.parse(layoutPaneBooleans) as Record<
string,
boolean
>;
} catch (error) {
console.error('Error parsing layoutPaneBooleans from store', error);
}
setShowNotes(parsedLayoutPaneBooleans.showNotes || false);
setShowConsole(
parsedLayoutPaneBooleans.showConsole || startWithConsoleShown
);
setShowInstructions(parsedLayoutPaneBooleans.showInstructions || true);
setShowPreviewPane(parsedLayoutPaneBooleans.showPreviewPane || false);
setShowPreviewPortal(parsedLayoutPaneBooleans.showPreviewPortal || false);
}
}, []);
const togglePane = (pane: string): void => {
if (pane === 'showPreviewPane') {