Repository: freeCodeCamp/freeCodeCamp
File: client/src/templates/Challenges/classic/desktop-layout.tsx (TypeScript)

Code before:
    showPreviewPortal: boolean,
    showPreviewPane: boolean,
    portalWindow: null | Window
  ) => ({
    isAdvancing,
    showPreviewPortal,
    showPreviewPane,
    portalWindow
  })
);

const DesktopLayout = (props: DesktopLayoutProps): JSX.Element => {
  const {
    showPreviewPane,
    showPreviewPortal,
    removePortalWindow,
    setShowPreviewPane,
    setShowPreviewPortal,
    portalWindow,
    startWithConsoleShown
  } = props;

  const initialShowState = (key: string, defaultValue: boolean): boolean => {
    const savedState: string = store.get('layoutPaneBooleans') as string;
    if (savedState) {
      const parsedState: Record<string, boolean> = JSON.parse(
        savedState
      ) as Record<string, boolean>;
      return parsedState[key] || defaultValue;
    }
    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));
  }, []);
  /* eslint-enable react-hooks/exhaustive-deps */

  /* eslint-disable react-hooks/exhaustive-deps */

Review comment (bug):
Not sure why it wouldn't be JSON, but if JSON.parse fails here, I get a runtime error. We should probably handle that. Same with the json.parse below.

Code after:
    showPreviewPortal: boolean,
    showPreviewPane: boolean,
    portalWindow: null | Window
  ) => ({
    isAdvancing,
    showPreviewPortal,
    showPreviewPane,
    portalWindow
  })
);

const DesktopLayout = (props: DesktopLayoutProps): JSX.Element => {
  const {
    showPreviewPane,
    showPreviewPortal,
    removePortalWindow,
    setShowPreviewPane,
    setShowPreviewPortal,
    portalWindow,
    startWithConsoleShown
  } = props;

  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));