refactor: slightly simplify rendering of ToolPanel (freeCodeCamp#55601)

Author: ojeytonwilliams

client/src/templates/Challenges/classic/mobile-layout.tsx

@@ -1,5 +1,5 @@
 import i18next from 'i18next';
-import React, { Component } from 'react';
+import React, { Component, type ReactNode } from 'react';
 import { faWindowRestore } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { createSelector } from 'reselect';
@@ -17,14 +17,12 @@ import {
   showPreviewPaneSelector
 } from '../redux/selectors';
 import { TOOL_PANEL_HEIGHT } from '../../../../config/misc';
-import ToolPanel from '../components/tool-panel';
 import PreviewPortal from '../components/preview-portal';
 import Notes from '../components/notes';
 import EditorTabs from './editor-tabs';
 
 interface MobileLayoutProps {
   editor: JSX.Element | null;
-  guideUrl: string;
   hasEditableBoundaries: boolean;
   hasPreview: boolean;
   instructions: JSX.Element;
@@ -34,13 +32,13 @@ interface MobileLayoutProps {
   windowTitle: string;
   showPreviewPortal: boolean;
   showPreviewPane: boolean;
+  toolPanel: ReactNode;
   removePortalWindow: () => void;
   setShowPreviewPortal: (arg: boolean) => void;
   setShowPreviewPane: (arg: boolean) => void;
   portalWindow: null | Window;
   updateUsingKeyboardInTablist: (arg0: boolean) => void;
   testOutput: JSX.Element;
-  videoUrl: string;
   usesMultifileEditor: boolean;
 }
 
@@ -160,13 +158,12 @@ class MobileLayout extends Component<MobileLayoutProps, MobileLayoutState> {
       onPreviewResize,
       showPreviewPane,
       showPreviewPortal,
+      toolPanel,
       removePortalWindow,
       setShowPreviewPane,
       setShowPreviewPortal,
       portalWindow,
       windowTitle,
-      guideUrl,
-      videoUrl,
       usesMultifileEditor
     } = this.props;
 
@@ -309,13 +306,7 @@ class MobileLayout extends Component<MobileLayoutProps, MobileLayoutState> {
               )}
             </TabsContent>
           )}
-          {!hasEditableBoundaries && (
-            <ToolPanel
-              guideUrl={guideUrl}
-              isMobile={true}
-              videoUrl={videoUrl}
-            />
-          )}
+          {!hasEditableBoundaries && toolPanel}
           {hasPreview && this.state.currentTab !== 'preview' && (
             <div className='portal-button-wrap'>
               <button

client/src/templates/Challenges/classic/show.tsx

@@ -60,6 +60,7 @@ import { savedChallengesSelector } from '../../../redux/selectors';
 import { getGuideUrl } from '../utils';
 import { preloadPage } from '../../../../utils/gatsby/page-loading';
 import envData from '../../../../config/env.json';
+import ToolPanel from '../components/tool-panel';
 import { XtermTerminal } from './xterm';
 import MultifileEditor from './multifile-editor';
 import DesktopLayout from './desktop-layout';
@@ -227,6 +228,7 @@ function ShowClassic({
   const isMobile = useMediaQuery({
     query: `(max-width: ${MAX_MOBILE_WIDTH}px)`
   });
+  const guideUrl = getGuideUrl({ forumTopicId, title });
 
   const blockNameTitle = `${t(
     `intro:${superBlock}.blocks.${block}.title`
@@ -369,9 +371,9 @@ function ShowClassic({
   };
 
   const renderInstructionsPanel = ({
-    showToolPanel
+    toolPanel
   }: {
-    showToolPanel: boolean;
+    toolPanel: React.ReactNode;
   }) => {
     return (
       <SidePanel
@@ -392,11 +394,9 @@ function ShowClassic({
             {title}
           </ChallengeTitle>
         }
-        guideUrl={getGuideUrl({ forumTopicId, title })}
         instructionsPanelRef={instructionsPanelRef}
-        showToolPanel={showToolPanel}
+        toolPanel={toolPanel}
         superBlock={superBlock}
-        videoUrl={videoUrl}
       />
     );
   };
@@ -445,11 +445,10 @@ function ShowClassic({
               isMobileLayout: true,
               isUsingKeyboardInTablist: usingKeyboardInTablist
             })}
-            guideUrl={getGuideUrl({ forumTopicId, title })}
             hasEditableBoundaries={hasEditableBoundaries}
             hasPreview={showPreview}
             instructions={renderInstructionsPanel({
-              showToolPanel: false
+              toolPanel: null
             })}
             notes={notes}
             onPreviewResize={onPreviewResize}
@@ -465,9 +464,11 @@ function ShowClassic({
             testOutput={
               <Output defaultOutput={defaultOutput} output={output} />
             }
+            toolPanel={
+              <ToolPanel guideUrl={guideUrl} isMobile videoUrl={videoUrl} />
+            }
             updateUsingKeyboardInTablist={updateUsingKeyboardInTablist}
             usesMultifileEditor={usesMultifileEditor}
-            videoUrl={videoUrl}
           />
         )}
         {!isMobile && (
@@ -481,7 +482,7 @@ function ShowClassic({
             hasEditableBoundaries={hasEditableBoundaries}
             hasPreview={showPreview}
             instructions={renderInstructionsPanel({
-              showToolPanel: true
+              toolPanel: <ToolPanel guideUrl={guideUrl} videoUrl={videoUrl} />
             })}
             isFirstStep={isFirstStep}
             layoutState={layout}

client/src/templates/Challenges/components/side-panel.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, ReactElement } from 'react';
+import React, { useEffect, ReactElement, ReactNode } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { Test } from '../../../redux/prop-types';
@@ -7,7 +7,6 @@ import { SuperBlocks } from '../../../../../shared/config/curriculum';
 import { initializeMathJax } from '../../../utils/math-jax';
 import { challengeTestsSelector } from '../redux/selectors';
 import TestSuite from './test-suite';
-import ToolPanel from './tool-panel';
 
 import './side-panel.css';
 
@@ -21,24 +20,20 @@ interface SidePanelProps {
   block: string;
   challengeDescription: ReactElement;
   challengeTitle: ReactElement;
-  guideUrl: string;
   instructionsPanelRef: React.RefObject<HTMLDivElement>;
-  showToolPanel: boolean;
+  toolPanel: ReactNode;
   superBlock: SuperBlocks;
   tests: Test[];
-  videoUrl: string;
 }
 
 export function SidePanel({
   block,
   challengeDescription,
   challengeTitle,
-  guideUrl,
   instructionsPanelRef,
-  showToolPanel = false,
+  toolPanel,
   superBlock,
-  tests,
-  videoUrl
+  tests
 }: SidePanelProps): JSX.Element {
   useEffect(() => {
     const mathJaxChallenge =
@@ -56,7 +51,7 @@ export function SidePanel({
     >
       {challengeTitle}
       {challengeDescription}
-      {showToolPanel && <ToolPanel guideUrl={guideUrl} videoUrl={videoUrl} />}
+      {toolPanel}
       <TestSuite tests={tests} />
     </div>
   );