ui: scratchpad sidebar

packages/ui-default/components/scratchpad/index.jsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import SplitPane from 'react-split-pane';
-import { connect } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import _ from 'lodash';
 import SplitPaneFillOverlay from 'vj/components/react-splitpane/SplitPaneFillOverlayComponent';
+import ProblemIcon from '@vscode/codicons/src/icons/file.svg?react';
 import Dom from 'vj/components/react/DomComponent';
 import ScratchpadToolbar from './ScratchpadToolbarContainer';
 import ScratchpadEditor from './ScratchpadEditorContainer';
 import ScratchpadPretest from './ScratchpadPretestContainer';
 import ScratchpadRecords from './ScratchpadRecordsContainer';
-import ScratchpadSidebar from './ScratchpadSidebar';
 
 function buildNestedPane([a, ...panes], mode = 'horizontal') {
   const elements = [
@@ -31,12 +31,36 @@ function buildNestedPane([a, ...panes], mode = 'horizontal') {
     ));
 }
 
-const mapStateToProps = (state) => ({
-  ui: state.ui,
-});
+const pages = {
+  problem: {
+    icon: () => <ProblemIcon />,
+    component: () => {
+      console.log($('.problem-content'));
+      return <Dom childDom={$('.problem-content').get(0)} id="problem-content" />;
+    },
+  },
+};
 
-const mapDispatchToProps = (dispatch) => ({
-  changeUiSize: _.debounce((uiElement, size) => {
+let rerenderCallback = null;
+export function addPage(key, icon, component) {
+  pages[key] = {
+    icon,
+    component,
+  };
+  rerenderCallback?.();
+}
+window.Hydro.scratchpad = { addPage, pages };
+
+export default function ScratchpadContainer() {
+  const [, updateState] = React.useState();
+  const forceUpdate = React.useCallback(() => updateState({}), []);
+  React.useEffect(() => {
+    rerenderCallback = forceUpdate;
+  }, []);
+  const dispatch = useDispatch();
+  const ui = useSelector((state) => state.ui, _.isEqual);
+
+  const handleChangeSize = _.debounce((uiElement, size) => {
     dispatch({
       type: 'SCRATCHPAD_UI_CHANGE_SIZE',
       payload: {
@@ -44,52 +68,67 @@ const mapDispatchToProps = (dispatch) => ({
         size,
       },
     });
-  }, 500),
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(class ScratchpadContainer extends React.PureComponent {
-  handleChangeSize(uiElement, size) {
-    this.props.changeUiSize(uiElement, size);
     $('#scratchpad').trigger('vjScratchpadRelayout');
-    this.props.ui.pretest.visible = !!this.props.ui.pretest.visible;
-    this.forceUpdate();
-  }
+    forceUpdate();
+  }, 500);
+  const switchToPage = (target) => {
+    dispatch({
+      type: 'SCRATCHPAD_SWITCH_TO_PAGE',
+      payload: target,
+    });
+  };
 
-  render() {
-    return (
+  return (
+    <SplitPane
+      split="vertical"
+      primary="first"
+      defaultSize={50}
+      allowResize={false}
+    >
+      <div className="scratchpad__tablist">
+        {Object.keys(pages).map((key) => {
+          const Component = pages[key].icon;
+          return (
+            <div key={key} className={key === ui.activePage ? 'scratchpad__tab-active' : ''} onClick={() => switchToPage(key)}>
+              <Component />
+            </div>
+          );
+        })}
+      </div>
       <SplitPane
-        defaultSize={this.props.ui.main.size}
+        defaultSize={ui.main.size}
         minSize={250}
         split="vertical"
         primary="second"
-        onChange={(size) => this.handleChangeSize('main', size)}
+        onChange={(size) => handleChangeSize('main', size)}
       >
-        <SplitPane
-          defaultSize={this.props.ui.sidebar.visible ? this.props.ui.sidebar.size : 0}
-          split="vertical"
-          primary="second"
-          onChange={(size) => this.handleChangeSize('sidebar', size)}
-        >
-          <Dom className="scratchpad__problem" childDom={$('.problem-content').get(0)} />
-          <ScratchpadSidebar name="debug" />
-        </SplitPane>
+        <div className="scratchpad__problem">
+          {Object.keys(pages).map((key) => {
+            const Component = pages[key].component;
+            return (
+              <div key={key} style={{ display: key === ui.activePage ? 'block' : 'none' }}>
+                <Component />
+              </div>
+            );
+          })}
+        </div>
         {buildNestedPane([
           <SplitPaneFillOverlay key="editor" className="flex-col">
             <ScratchpadToolbar />
             <ScratchpadEditor />
           </SplitPaneFillOverlay>,
           {
-            props: this.props.ui.pretest,
-            onChange: (size) => this.handleChangeSize('pretest', size),
+            props: ui.pretest,
+            onChange: (size) => handleChangeSize('pretest', size),
             element: <ScratchpadPretest key="pretest" />,
           },
           {
-            props: this.props.ui.records,
-            onChange: (size) => this.handleChangeSize('records', size),
+            props: ui.records,
+            onChange: (size) => handleChangeSize('records', size),
             element: <ScratchpadRecords key="records" />,
           },
         ])}
       </SplitPane>
-    );
-  }
-});
+    </SplitPane>
+  );
+}