Merge 83b3393 into bc4e3ed

Author: RichDom2185

src/commons/assessmentWorkspace/AssessmentWorkspace.tsx

@@ -644,7 +644,7 @@ const AssessmentWorkspace: React.FC<AssessmentWorkspaceProps> = props => {
     };
 
     return {
-      mobileControlBarProps: {
+      controlBarProps: {
         ...controlBarProps(questionId)
       },
       ...sideContentProps(props, questionId),
@@ -825,7 +825,7 @@ const AssessmentWorkspace: React.FC<AssessmentWorkspaceProps> = props => {
     mcqProps: mcqProps,
     replProps: replProps,
     sideBarProps: sideBarProps,
-    mobileSideContentProps: mobileSideContentProps(questionId)
+    sideContentProps: mobileSideContentProps(questionId)
   };
 
   return (

src/commons/mobileWorkspace/MobileWorkspace.tsx

@@ -1,7 +1,7 @@
 import { FocusStyleManager } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import { Ace } from 'ace-builds';
-import React from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { DraggableEvent } from 'react-draggable';
 import { useMediaQuery } from 'react-responsive';
 
@@ -16,33 +16,33 @@ import DraggableRepl from './DraggableRepl';
 import MobileKeyboard from './MobileKeyboard';
 import MobileSideContent, { MobileSideContentProps } from './mobileSideContent/MobileSideContent';
 
-export type MobileWorkspaceProps = StateProps;
+export type MobileWorkspaceProps = {
+  sideContentProps: MobileSideContentProps;
 
-type StateProps = {
+  // The following are shared with WorkspaceProps
   editorContainerProps?: EditorContainerProps; // Either editorProps or mcqProps must be provided
   hasUnsavedChanges?: boolean; // Not used in Playground
   mcqProps?: McqChooserProps; // Not used in Playground
   replProps: ReplProps;
   sideBarProps: {
     tabs: SideBarTab[];
   };
-  mobileSideContentProps: MobileSideContentProps;
 };
 
 const MobileWorkspace: React.FC<MobileWorkspaceProps> = props => {
   const isAndroid = /Android/.test(navigator.userAgent);
   const isPortrait = useMediaQuery({ orientation: 'portrait' });
-  const [draggableReplPosition, setDraggableReplPosition] = React.useState({ x: 0, y: 0 });
+  const [draggableReplPosition, setDraggableReplPosition] = useState({ x: 0, y: 0 });
 
   // For disabling draggable Repl when in stepper tab
-  const [isDraggableReplDisabled, setIsDraggableReplDisabled] = React.useState(false);
+  const [isDraggableReplDisabled, setIsDraggableReplDisabled] = useState(false);
 
   // Get rid of the focus border on blueprint components
   FocusStyleManager.onlyShowFocusOnTabs();
 
   // Handles the panel height when the mobile top controlbar is rendered in the Assessment Workspace
-  React.useEffect(() => {
-    if (props.mobileSideContentProps.workspaceLocation === 'assessment') {
+  useEffect(() => {
+    if (props.sideContentProps.workspaceLocation === 'assessment') {
       document.documentElement.style.setProperty(
         '--mobile-panel-height',
         'calc(100% - 100px - 1.1rem)'
@@ -61,7 +61,7 @@ const MobileWorkspace: React.FC<MobileWorkspaceProps> = props => {
    * soft keyboard on Android devices. This is due to the viewport height changing when the soft
    * keyboard is up on Android devices. IOS devices are not affected.
    */
-  React.useEffect(() => {
+  useEffect(() => {
     if (isPortrait && isAndroid) {
       document.documentElement.style.setProperty('overflow', 'auto');
       const metaViewport = document.querySelector('meta[name=viewport]');
@@ -85,50 +85,38 @@ const MobileWorkspace: React.FC<MobileWorkspaceProps> = props => {
     };
   }, [isPortrait, isAndroid]);
 
-  const [targetKeyboardInput, setTargetKeyboardInput] = React.useState<Ace.Editor | null>(null);
+  const [targetKeyboardInput, setTargetKeyboardInput] = useState<Ace.Editor | null>(null);
 
   const clearTargetKeyboardInput = () => setTargetKeyboardInput(null);
 
   const enableMobileKeyboardForEditor = (props: EditorContainerProps): EditorContainerProps => {
-    const onFocus = (event: any, editor?: Ace.Editor) => {
-      if (props.onFocus) {
-        props.onFocus(event, editor);
-      }
-      if (!editor) {
-        return;
-      }
-      setTargetKeyboardInput(editor);
-    };
-    const onBlur = (event: any, editor?: Ace.Editor) => {
-      if (props.onBlur) {
-        props.onBlur(event, editor);
-      }
-      clearTargetKeyboardInput();
-    };
     return {
       ...props,
-      onFocus,
-      onBlur
+      onFocus: (event, editor?) => {
+        props.onFocus?.(event, editor);
+        if (!editor) {
+          return;
+        }
+        setTargetKeyboardInput(editor);
+      },
+      onBlur: (event, editor?) => {
+        props.onBlur?.(event, editor);
+        clearTargetKeyboardInput();
+      }
     };
   };
 
   const enableMobileKeyboardForRepl = (props: ReplProps): ReplProps => {
-    const onFocus = (editor: Ace.Editor) => {
-      if (props.onFocus) {
-        props.onFocus(editor);
-      }
-      setTargetKeyboardInput(editor);
-    };
-    const onBlur = () => {
-      if (props.onBlur) {
-        props.onBlur();
-      }
-      clearTargetKeyboardInput();
-    };
     return {
       ...props,
-      onFocus,
-      onBlur
+      onFocus: editor => {
+        props.onFocus?.(editor);
+        setTargetKeyboardInput(editor);
+      },
+      onBlur: () => {
+        props.onBlur?.();
+        clearTargetKeyboardInput();
+      }
     };
   };
 
@@ -186,13 +174,11 @@ const MobileWorkspace: React.FC<MobileWorkspaceProps> = props => {
   };
 
   const handleEditorEval = props.editorContainerProps?.handleEditorEval;
-  const handleTabChangeForRepl = React.useCallback(
+  const handleTabChangeForRepl = useCallback(
     (newTabId: SideContentType, prevTabId: SideContentType) => {
       // Evaluate program upon pressing the run tab.
       if (newTabId === SideContentType.mobileEditorRun) {
-        if (handleEditorEval) {
-          handleEditorEval();
-        }
+        handleEditorEval?.();
       }
 
       // Show the REPL upon pressing the run tab if the previous tab is not listed below.
@@ -224,8 +210,8 @@ const MobileWorkspace: React.FC<MobileWorkspaceProps> = props => {
     [handleEditorEval]
   );
 
-  const onChange = props.mobileSideContentProps.onChange;
-  const onSideContentTabChange = React.useCallback(
+  const onChange = props.sideContentProps.onChange;
+  const onSideContentTabChange = useCallback(
     (
       newTabId: SideContentType,
       prevTabId: SideContentType,
@@ -240,50 +226,24 @@ const MobileWorkspace: React.FC<MobileWorkspaceProps> = props => {
   // Convert sidebar tabs with a side content tab ID into side content tabs.
   const sideBarTabs: SideContentTab[] = props.sideBarProps.tabs.filter(tab => tab.id !== undefined);
 
-  const mobileEditorTab: SideContentTab = React.useMemo(
-    () => ({
-      label: 'Editor',
-      iconName: IconNames.EDIT,
-      body: null,
-      id: SideContentType.mobileEditor
-    }),
-    []
-  );
-
-  const mobileRunTab: SideContentTab = React.useMemo(
-    () => ({
-      label: 'Run',
-      iconName: IconNames.PLAY,
-      body: null,
-      id: SideContentType.mobileEditorRun
-    }),
-    []
-  );
-
-  const updatedMobileSideContentProps = React.useCallback(() => {
+  const updatedMobileSideContentProps = useCallback(() => {
     return {
-      ...props.mobileSideContentProps,
+      ...props.sideContentProps,
       onChange: onSideContentTabChange,
       tabs: {
         beforeDynamicTabs: [
           ...sideBarTabs,
           mobileEditorTab,
-          ...props.mobileSideContentProps.tabs.beforeDynamicTabs
+          ...props.sideContentProps.tabs.beforeDynamicTabs
         ],
-        afterDynamicTabs: [...props.mobileSideContentProps.tabs.afterDynamicTabs, mobileRunTab]
+        afterDynamicTabs: [...props.sideContentProps.tabs.afterDynamicTabs, mobileRunTab]
       }
     };
-  }, [
-    onSideContentTabChange,
-    mobileEditorTab,
-    mobileRunTab,
-    props.mobileSideContentProps,
-    sideBarTabs
-  ]);
+  }, [onSideContentTabChange, props.sideContentProps, sideBarTabs]);
 
   const inAssessmentWorkspace =
-    props.mobileSideContentProps.workspaceLocation === 'assessment' ||
-    props.mobileSideContentProps.workspaceLocation === 'githubAssessment';
+    props.sideContentProps.workspaceLocation === 'assessment' ||
+    props.sideContentProps.workspaceLocation === 'githubAssessment';
 
   return (
     <div className="workspace mobile-workspace">
@@ -293,9 +253,7 @@ const MobileWorkspace: React.FC<MobileWorkspaceProps> = props => {
       />
 
       {/* Render the top ControlBar when it is the Assessment Workspace */}
-      {inAssessmentWorkspace && (
-        <ControlBar {...props.mobileSideContentProps.mobileControlBarProps} />
-      )}
+      {inAssessmentWorkspace && <ControlBar {...props.sideContentProps.controlBarProps} />}
 
       <div>
         <div className="mobile-editor-panel">{createWorkspaceInput()}</div>
@@ -316,3 +274,17 @@ const MobileWorkspace: React.FC<MobileWorkspaceProps> = props => {
 };
 
 export default MobileWorkspace;
+
+const mobileEditorTab: SideContentTab = {
+  label: 'Editor',
+  iconName: IconNames.EDIT,
+  body: null,
+  id: SideContentType.mobileEditor
+};
+
+const mobileRunTab: SideContentTab = {
+  label: 'Run',
+  iconName: IconNames.PLAY,
+  body: null,
+  id: SideContentType.mobileEditorRun
+};

src/commons/mobileWorkspace/mobileSideContent/MobileSideContent.tsx

@@ -24,7 +24,7 @@ type StateProps = {
 };
 
 type MobileControlBarProps = {
-  mobileControlBarProps: ControlBarProps;
+  controlBarProps: ControlBarProps;
 };
 
 const renderTab = (tab: SideContentTab, isIOS: boolean, workspaceLocation?: WorkspaceLocation) => {
@@ -60,7 +60,7 @@ const renderTab = (tab: SideContentTab, isIOS: boolean, workspaceLocation?: Work
 const MobileSideContent: React.FC<MobileSideContentProps> = ({
   selectedTabId,
   renderActiveTabPanelOnly,
-  mobileControlBarProps,
+  controlBarProps,
   ...otherProps
 }) => {
   const isIOS = /iPhone|iPod/.test(navigator.platform);
@@ -118,7 +118,7 @@ const MobileSideContent: React.FC<MobileSideContentProps> = ({
                 {/* Render the bottom ControlBar 'Cog' button only in the Playground or Sicp Workspace */}
                 {(otherProps.workspaceLocation === 'playground' ||
                   otherProps.workspaceLocation === 'sicp') && (
-                  <MobileControlBar {...mobileControlBarProps} />
+                  <MobileControlBar {...controlBarProps} />
                 )}
               </Tabs>
             </div>

src/commons/workspace/Workspace.tsx

@@ -1,7 +1,7 @@
 import { FocusStyleManager } from '@blueprintjs/core';
 import { Enable, NumberSize, Resizable, ResizableProps, ResizeCallback } from 're-resizable';
 import { Direction } from 're-resizable/lib/resizer';
-import * as React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import ControlBar, { ControlBarProps } from '../controlBar/ControlBar';
 import EditorContainer, { EditorContainerProps } from '../editor/EditorContainer';
@@ -12,37 +12,34 @@ import SideBar, { SideBarTab } from '../sideBar/SideBar';
 import SideContent, { SideContentProps } from '../sideContent/SideContent';
 import { useDimensions } from '../utils/Hooks';
 
-export type WorkspaceProps = DispatchProps & StateProps;
-
-type DispatchProps = {
-  handleSideContentHeightChange: (height: number) => void;
-};
-
-type StateProps = {
+export type WorkspaceProps = {
   // Either editorProps or mcqProps must be provided
   controlBarProps: ControlBarProps;
+  sideContentHeight?: number;
+  sideContentProps: SideContentProps;
+  sideContentIsResizeable?: boolean;
+  handleSideContentHeightChange: (height: number) => void;
+
+  // The following are shared with MobileWorkspaceProps
   editorContainerProps?: EditorContainerProps;
   hasUnsavedChanges?: boolean;
   mcqProps?: McqChooserProps;
   replProps: ReplProps;
   sideBarProps: {
     tabs: SideBarTab[];
   };
-  sideContentHeight?: number;
-  sideContentProps: SideContentProps;
-  sideContentIsResizeable?: boolean;
 };
 
 const Workspace: React.FC<WorkspaceProps> = props => {
-  const sideBarResizable = React.useRef<Resizable | null>(null);
-  const contentContainerDiv = React.useRef<HTMLDivElement | null>(null);
-  const editorDividerDiv = React.useRef<HTMLDivElement | null>(null);
-  const leftParentResizable = React.useRef<Resizable | null>(null);
-  const maxDividerHeight = React.useRef<number | null>(null);
-  const sideDividerDiv = React.useRef<HTMLDivElement | null>(null);
+  const sideBarResizable = useRef<Resizable | null>(null);
+  const contentContainerDiv = useRef<HTMLDivElement>(null);
+  const editorDividerDiv = useRef<HTMLDivElement>(null);
+  const leftParentResizable = useRef<Resizable | null>(null);
+  const maxDividerHeight = useRef<number | null>(null);
+  const sideDividerDiv = useRef<HTMLDivElement>(null);
   const [contentContainerWidth] = useDimensions(contentContainerDiv);
-  const [expandedSideBarWidth, setExpandedSideBarWidth] = React.useState<number>(200);
-  const [isSideBarExpanded, setIsSideBarExpanded] = React.useState<boolean>(true);
+  const [expandedSideBarWidth, setExpandedSideBarWidth] = useState(200);
+  const [isSideBarExpanded, setIsSideBarExpanded] = useState(true);
 
   const sideBarCollapsedWidth = 40;
 
@@ -51,7 +48,7 @@ const Workspace: React.FC<WorkspaceProps> = props => {
 
   FocusStyleManager.onlyShowFocusOnTabs();
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (props.sideContentIsResizeable && maxDividerHeight.current === null) {
       maxDividerHeight.current = sideDividerDiv.current!.clientHeight;
     }

src/pages/githubAssessments/GitHubAssessmentWorkspace.tsx

@@ -1035,7 +1035,7 @@ const GitHubAssessmentWorkspace: React.FC = () => {
     const sideContent = sideContentProps();
 
     return {
-      mobileControlBarProps: {
+      controlBarProps: {
         ...controlBarProps()
       },
       ...sideContent,
@@ -1134,7 +1134,7 @@ const GitHubAssessmentWorkspace: React.FC = () => {
     sideBarProps: sideBarProps,
     hasUnsavedChanges: hasUnsavedChanges,
     mcqProps: mcqProps,
-    mobileSideContentProps: mobileSideContentProps()
+    sideContentProps: mobileSideContentProps()
   };
 
   if (isLoading) {

src/pages/playground/Playground.tsx

@@ -1035,8 +1035,8 @@ const Playground: React.FC<PlaygroundProps> = props => {
     editorContainerProps: editorContainerProps,
     replProps: replProps,
     sideBarProps: sideBarProps,
-    mobileSideContentProps: {
-      mobileControlBarProps: {
+    sideContentProps: {
+      controlBarProps: {
         editorButtons: [
           autorunButtons,
           chapterSelectButton,

src/pages/sourcecast/Sourcecast.tsx

@@ -387,8 +387,8 @@ const Sourcecast: React.FC = () => {
     editorContainerProps,
     replProps,
     sideBarProps,
-    mobileSideContentProps: {
-      mobileControlBarProps: {
+    sideContentProps: {
+      controlBarProps: {
         editorButtons: [autorunButtons, chapterSelectButton]
       },
       selectedTabId: selectedTab,