Demo (#26)

* js-slang version revert

* Bug-fixed

Author: chuyiting

package-lock.json

@@ -21,14 +21,14 @@
     "@types/testing-library__react": "^9.1.3",
     "ace-builds": "^1.4.8",
     "axios": "^0.19.2",
-    "gh-pages": "^2.2.0",
     "js-slang": "^0.4.30",
     "lz-string": "^1.4.4",
     "re-resizable": "^6.3.2",
     "react": "^16.13.1",
     "react-ace": "^8.1.0",
     "react-app-rewired": "^2.1.5",
     "react-dom": "^16.12.0",
+    "react-hotkeys": "^2.0.0",
     "react-resizable": "^1.10.1",
     "react-router-dom": "^5.1.2",
     "react-scripts": "^3.4.0",
@@ -38,9 +38,9 @@
     "xmlhttprequest-ts": "^1.0.1"
   },
   "scripts": {
+    "start": "react-app-rewired start",
     "predeploy": "npm run build",
     "deploy": "gh-pages -d build",
-    "start": "react-app-rewired start",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test",
     "eject": "react-scripts eject"
@@ -64,6 +64,7 @@
     "react-dev-utils": "10.1.0"
   },
   "devDependencies": {
-    "@types/react-resizable": "^1.7.2"
+    "@types/react-resizable": "^1.7.2",
+    "gh-pages": "^2.2.0"
   }
 }

package.json

@@ -18,14 +18,7 @@ import Grid from "@material-ui/core/Grid";
  */
 
 let sourceOptions: string[] = ["Source1", "Source2", "Source3", "Source4"];
-let timeOptions: string[] = [
-  "壹千",
-  "貳千",
-  "參千",
-  "肆千",
-  "伍千",
-  "zehntausend",
-];
+let timeOptions: string[] = ["1000", "2000", "3000", "4000", "5000", "10000"];
 
 const NavBar: React.FC = () => {
   const { state, dispatch } = useContext(SideBarContext);

src/NavBar/NavBar.tsx

@@ -27,15 +27,15 @@ const RunButton: React.FC = () => {
       : 1;
 
   const runTime =
-    globalState.time === "zehntausend"
+    globalState.time === "10000"
       ? 10000
-      : globalState.time === "貳千"
+      : globalState.time === "2000"
       ? 2000
-      : globalState.time === "參千"
+      : globalState.time === "3000"
       ? 3000
-      : globalState.time === "肆千"
+      : globalState.time === "4000"
       ? 4000
-      : globalState.time === "伍千"
+      : globalState.time === "5000"
       ? 5000
       : 1000;
   const context: Context = createContext(source);

src/NavBar/RunButton.tsx

@@ -1,5 +1,7 @@
 import React from "react";
 
+import SessionControl from "./../SessionControl";
+
 import "./index.css";
 import SideBarDropDownTemplate from "./SideBarDropDownTemplate";
 /**
@@ -39,27 +41,13 @@ const SideBar: React.FC<sideBarProps> = (sideBarProps) => {
             />
           </li>
           <li>
-            <SideBarDropDownTemplate
-              dropDownType="CHANGE_LIBRARY"
-              options={libraryOptions}
-              sideBarString={"library"}
-            />
-          </li>
-          <li>
-            <SideBarDropDownTemplate
-              dropDownType="CHANGE_LANGUAGE"
-              options={languageOptions}
-              sideBarString={"language"}
-            />
-          </li>
-          <li>
-            <a href="/">TextBook</a>
+            <a>TextBook</a>
           </li>
           <li>
-            <a href="/">Run</a>
+            <SessionControl />
           </li>
           <li>
-            <a href="/">Share</a>
+            <a>Share</a>
           </li>
         </ul>
       </nav>

src/NavBar/SideBar/index.tsx

@@ -42,9 +42,16 @@ const PhoneRunButton: React.FC = () => {
     } else if (result.status === "finished") {
       if (globalState.useStepper) {
         const stepperComponents: React.ReactElement[] = result.value.map(
-          (x: any) => <div>{codify(x)}</div>
+          (x: any) => (
+            <div>
+              {codify(x)
+                .split("\n")
+                .map((x) => (
+                  <h5>{x}</h5>
+                ))}
+            </div>
+          )
         );
-        console.log(stepperComponents);
         return dispatch({
           type: "RUNSTEPPER",
           stepperComponents: stepperComponents,

src/Workspace/BottomBar/PhoneRunButton.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useContext } from "react";
 import { createStyles, Theme, makeStyles } from "@material-ui/core/styles";
 import AppBar from "@material-ui/core/AppBar";
 import Toolbar from "@material-ui/core/Toolbar";
@@ -9,6 +9,7 @@ import SportsEsportsIcon from "@material-ui/icons/SportsEsports";
 import DeveloperModeIcon from "@material-ui/icons/DeveloperMode";
 import TextsmsIcon from "@material-ui/icons/Textsms";
 import PhoneRunButton from "./PhoneRunButton";
+import { Store } from "./../../reducers/Store";
 
 interface completeNavBarProps {}
 
@@ -37,12 +38,13 @@ const useStyles = makeStyles((theme: Theme) =>
 );
 
 const BottomBar: React.FC<completeNavBarProps> = (completeNavBarProps) => {
+  const { globalState } = useContext(Store);
   const classes = useStyles();
   return (
     <>
       <AppBar position="fixed" className={classes.appBar}>
         <Toolbar>
-          <div className={classes.flex} />
+          {/*<div className={classes.flex} />
           <Link href="#main-editor" className={classes.flex}>
             <IconButton className={classes.buttons}>
               <SportsEsportsIcon />
@@ -57,9 +59,12 @@ const BottomBar: React.FC<completeNavBarProps> = (completeNavBarProps) => {
             <IconButton className={classes.buttons}>
               <TextsmsIcon />
             </IconButton>
-          </Link>
+  </Link>*/}
           <div className={classes.flex} />
-          <Link href="#repl" className={classes.flex}>
+          <Link
+            href={globalState.useStepper ? "#question" : "#repl"}
+            className={classes.flex}
+          >
             <Fab
               color="secondary"
               aria-label="add"

src/Workspace/BottomBar/index.tsx

@@ -14,7 +14,7 @@ import EnvVisualizer from "./EnvVisualizer";
 import Inspector from "./Inspector";
 import TabStyle from "./TabStyle";
 import AspectRatioIcon from "@material-ui/icons/AspectRatio";
-import RunePanel from "./Panel";
+import Panel from "./Panel";
 import { Store, IGlobalAction } from "../../reducers/Store";
 
 const useStyles = makeStyles({
@@ -55,41 +55,41 @@ export default function Description() {
   let tabContentArr: JSX.Element[];
   if (globalState.source === "Source3" || globalState.source === "Source4") {
     tabButtonArr = [
-      <AspectRatioIcon />,
       <ImportContactsIcon />,
+      <AspectRatioIcon />,
       <VisibilityIcon />,
       <SearchIcon />,
       <PublicIcon />,
     ];
     tabContentArr = [
-      <RunePanel />,
       <IntroductionTab />,
+      <Panel />,
       <ListVisualizer />,
       <Inspector />,
       <EnvVisualizer />,
     ];
   } else if (globalState.source === "Source2") {
     tabButtonArr = [
-      <AspectRatioIcon onClick={closeStepper} />,
       <ImportContactsIcon onClick={closeStepper} />,
+      <AspectRatioIcon onClick={closeStepper} />,
       <VisibilityIcon onClick={closeStepper} />,
       <SettingsEthernetIcon onClick={toggleStepper} />,
     ];
     tabContentArr = [
-      <RunePanel />,
       <IntroductionTab />,
+      <Panel />,
       <ListVisualizer />,
       <SubstVisualizer content={["function", "f(x)"]} />,
     ];
   } else {
     tabButtonArr = [
-      <AspectRatioIcon onClick={closeStepper} />,
       <ImportContactsIcon onClick={closeStepper} />,
+      <AspectRatioIcon onClick={closeStepper} />,
       <SettingsEthernetIcon onClick={toggleStepper} />,
     ];
     tabContentArr = [
-      <RunePanel />,
       <IntroductionTab />,
+      <Panel />,
       <SubstVisualizer content={["function", "f(x)"]} />,
     ];
   }

src/Workspace/Description/index.tsx

@@ -16,6 +16,7 @@ import CardContent from "@material-ui/core/CardContent";
  */
 interface evalButtonProps {
   code: string;
+  setHistory: (x: number) => void;
 }
 const context: Context = createContext(4);
 
@@ -33,7 +34,9 @@ const EvalButton: React.FC<evalButtonProps> = (props) => {
   }
 
   const evaluate = async () => {
+    //handleRun update the code to global container first
     handleRun();
+    props.setHistory(globalState.replValue.length - 1);
     const code: string = conbineCode();
     return await runInContext(code, context, {
       scheduler: "preemptive",