Shared links frontend

package.json

@@ -71,6 +71,7 @@
     "react-draggable": "^4.4.5",
     "react-dropzone": "^14.2.3",
     "react-hotkeys": "^2.0.0",
+    "react-hotkeys-hook": "^4.4.4",
     "react-konva": "^18.2.10",
     "react-latex-next": "^2.1.0",
     "react-mde": "^11.5.0",

public/externalLibs/sound/soundToneMatrix.js

@@ -36,7 +36,7 @@ var timeout_matrix;
 // for coloring the matrix accordingly while it's being played
 var timeout_color;
 
-var timeout_objects = new Array();
+var timeout_objects = [];
 
 // vector_to_list returns a list that contains the elements of the argument vector
 // in the given order.
@@ -54,7 +54,7 @@ function vector_to_list(vector) {
 function x_y_to_row_column(x, y) {
   var row = Math.floor((y - margin_length) / (square_side_length + distance_between_squares));
   var column = Math.floor((x - margin_length) / (square_side_length + distance_between_squares));
-  return Array(row, column);
+  return [row, column];
 }
 
 // given the row number of a square, return the leftmost coordinate
@@ -365,5 +365,5 @@ function clear_all_timeout() {
     clearTimeout(timeout_objects[i]);
   }
 
-  timeout_objects = new Array();
+  timeout_objects = [];
 }

src/commons/controlBar/ControlBarShareButton.tsx

@@ -20,11 +20,13 @@ type StateProps = {
   shortURL?: string;
   key: string;
   isSicp?: boolean;
+  programConfig: object;
 };
 
 type State = {
   keyword: string;
   isLoading: boolean;
+  isSuccess: boolean;
 };
 
 export class ControlBarShareButton extends React.PureComponent<ControlBarShareButtonProps, State> {
@@ -36,9 +38,30 @@ export class ControlBarShareButton extends React.PureComponent<ControlBarShareBu
     this.handleChange = this.handleChange.bind(this);
     this.toggleButton = this.toggleButton.bind(this);
     this.shareInputElem = React.createRef();
-    this.state = { keyword: '', isLoading: false };
+    this.state = { keyword: '', isLoading: false, isSuccess: false };
   }
 
+  componentDidMount() {
+    document.addEventListener('keydown', this.handleKeyDown);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.handleKeyDown);
+  }
+
+  handleKeyDown = (event: any) => {
+    if (event.key === 'Enter' && event.ctrlKey) {
+      // console.log('Ctrl+Enter pressed!');
+      this.setState({ keyword: 'Test' });
+      this.props.handleShortenURL(this.state.keyword);
+      this.setState({ isLoading: true });
+      if (this.props.shortURL || this.props.isSicp) {
+        this.selectShareInputText();
+        console.log('link created.');
+      }
+    }
+  };
+
   public render() {
     const shareButtonPopoverContent =
       this.props.queryString === undefined ? (
@@ -57,7 +80,7 @@ export class ControlBarShareButton extends React.PureComponent<ControlBarShareBu
         </div>
       ) : (
         <>
-          {!this.props.shortURL || this.props.shortURL === 'ERROR' ? (
+          {!this.state.isSuccess || this.props.shortURL === 'ERROR' ? (
             !this.state.isLoading || this.props.shortURL === 'ERROR' ? (
               <div>
                 {Constants.urlShortenerBase}&nbsp;
@@ -66,12 +89,34 @@ export class ControlBarShareButton extends React.PureComponent<ControlBarShareBu
                   onChange={this.handleChange}
                   style={{ width: 175 }}
                 />
+                <>{console.log(this.props.programConfig)}</>
                 <ControlButton
                   label="Get Link"
                   icon={IconNames.SHARE}
                   onClick={() => {
-                    this.props.handleShortenURL(this.state.keyword);
-                    this.setState({ isLoading: true });
+                    // post request to backend, set keyword as return uuid
+                    const requestBody = {
+                      shared_program: {
+                        data: this.props.programConfig
+                      }
+                    };
+                    const fetchOpts: RequestInit = {
+                      method: 'POST',
+                      body: JSON.stringify(requestBody),
+                      headers: {
+                        'Content-Type': 'application/json'
+                      }
+                    };
+                    fetch('http://localhost:4000/api/shared_programs', fetchOpts)
+                      .then(res => {
+                        return res.json();
+                      })
+                      .then(resp => {
+                        this.setState({ keyword: resp.uuid });
+                        console.log(resp);
+                      })
+                      .catch(err => console.log('Error: ', err));
+                    this.setState({ isLoading: true, isSuccess: true });
                   }}
                 />
               </div>
@@ -84,10 +129,13 @@ export class ControlBarShareButton extends React.PureComponent<ControlBarShareBu
               </div>
             )
           ) : (
-            <div key={this.props.shortURL}>
-              <input defaultValue={this.props.shortURL} readOnly={true} ref={this.shareInputElem} />
+            // <div key={this.props.shortURL}>
+            <div key={this.state.keyword}>
+              {/* <input defaultValue={this.props.shortURL} readOnly={true} ref={this.shareInputElem} /> */}
+              <input defaultValue={this.state.keyword} readOnly={true} ref={this.shareInputElem} />
               <Tooltip2 content="Copy link to clipboard">
-                <CopyToClipboard text={this.props.shortURL}>
+                {/* <CopyToClipboard text={this.props.shortURL}> */}
+                <CopyToClipboard text={this.state.keyword}>
                   <ControlButton icon={IconNames.DUPLICATE} onClick={this.selectShareInputText} />
                 </CopyToClipboard>
               </Tooltip2>
@@ -121,8 +169,8 @@ export class ControlBarShareButton extends React.PureComponent<ControlBarShareBu
     }
 
     // reset state
-    this.props.handleUpdateShortURL('');
-    this.setState({ keyword: '', isLoading: false });
+    // this.props.handleUpdateShortURL('');
+    this.setState({ keyword: '', isLoading: false, isSuccess: false });
   }
 
   private handleChange(event: React.FormEvent<HTMLInputElement>) {

src/features/playground/PlaygroundActions.ts

@@ -1,5 +1,5 @@
-import { createAction } from '@reduxjs/toolkit';
 import { SALanguage } from 'src/commons/application/ApplicationTypes';
+import { action } from 'typesafe-actions';
 
 import { PersistenceFile } from '../persistence/PersistenceTypes';
 import {
@@ -12,31 +12,24 @@ import {
   UPDATE_SHORT_URL
 } from './PlaygroundTypes';
 
-export const generateLzString = createAction(GENERATE_LZ_STRING, () => ({ payload: {} }));
+export const generateLzString = () => action(GENERATE_LZ_STRING);
 
-export const shortenURL = createAction(SHORTEN_URL, (keyword: string) => ({ payload: keyword }));
+export const shortenURL = (keyword: string) => action(SHORTEN_URL, keyword);
 
-export const updateShortURL = createAction(UPDATE_SHORT_URL, (shortURL: string) => ({
-  payload: shortURL
-}));
+export const updateShortURL = (shortURL: string) => action(UPDATE_SHORT_URL, shortURL);
 
-export const changeQueryString = createAction(CHANGE_QUERY_STRING, (queryString: string) => ({
-  payload: queryString
-}));
+export const changeQueryString = (queryString: string) => action(CHANGE_QUERY_STRING, queryString);
 
-export const playgroundUpdatePersistenceFile = createAction(
-  PLAYGROUND_UPDATE_PERSISTENCE_FILE,
-  (file?: PersistenceFile) => ({ payload: file })
-);
+// export const changeProgramConfig = (config: programConfig) => action(CHANGE_PROGRAM_CONFIG, config);
 
-export const playgroundUpdateGitHubSaveInfo = createAction(
-  PLAYGROUND_UPDATE_GITHUB_SAVE_INFO,
-  (repoName: string, filePath: string, lastSaved: Date) => ({
-    payload: { repoName, filePath, lastSaved }
-  })
-);
+export const playgroundUpdatePersistenceFile = (file?: PersistenceFile) =>
+  action(PLAYGROUND_UPDATE_PERSISTENCE_FILE, file);
 
-export const playgroundConfigLanguage = createAction(
-  PLAYGROUND_UPDATE_LANGUAGE_CONFIG,
-  (languageConfig: SALanguage) => ({ payload: languageConfig })
-);
+export const playgroundUpdateGitHubSaveInfo = (
+  repoName: string,
+  filePath: string,
+  lastSaved: Date
+) => action(PLAYGROUND_UPDATE_GITHUB_SAVE_INFO, { repoName, filePath, lastSaved });
+
+export const playgroundConfigLanguage = (languageConfig: SALanguage) =>
+  action(PLAYGROUND_UPDATE_LANGUAGE_CONFIG, languageConfig);

src/pages/playground/Decoder.tsx

@@ -0,0 +1,155 @@
+import { FSModule } from 'browserfs/dist/node/core/FS';
+import { Chapter, Variant } from 'js-slang/dist/types';
+import { decompressFromEncodedURIComponent } from 'lz-string';
+import { Dispatch } from 'react';
+import { AnyAction } from 'redux';
+import { getDefaultFilePath, getLanguageConfig } from 'src/commons/application/ApplicationTypes';
+import { overwriteFilesInWorkspace } from 'src/commons/fileSystem/utils';
+import {
+  showFullJSWarningOnUrlLoad,
+  showFulTSWarningOnUrlLoad,
+  showHTMLDisclaimer
+} from 'src/commons/utils/WarningDialogHelper';
+import {
+  addEditorTab,
+  removeEditorTabsForDirectory,
+  setFolderMode,
+  updateActiveEditorTabIndex
+} from 'src/commons/workspace/WorkspaceActions';
+import { WorkspaceLocation } from 'src/commons/workspace/WorkspaceTypes';
+import { playgroundConfigLanguage } from 'src/features/playground/PlaygroundActions';
+
+import { convertParamToBoolean, convertParamToInt } from '../../commons/utils/ParamParseHelper';
+import { IParsedQuery, parseQuery } from '../../commons/utils/QueryHelper';
+import { WORKSPACE_BASE_PATHS } from '../fileSystem/createInBrowserFileSystem';
+
+export type programConfig = {
+  isFolder: string | undefined;
+  tabs: string | undefined;
+  tabIdx: string | undefined;
+  chap: string | undefined;
+  variant: string | undefined;
+  ext: string | undefined;
+  exec: string | undefined;
+  files: string | undefined;
+  prgrm: string | undefined;
+};
+/**
+ * #chap=4
+ * exec=1000
+ * ext=NONE
+ * files=KQJgYgDgNghgngcwE4HsCuA7AJqSrkwC2AdAFYDOAvEA
+ * isFolder=false
+ * tabIdx=0
+ * tabs=PQBwNghgng5gTgewK4DsAmpHwgWwHQBWAzkA
+ * variant=default
+ */
+export const Decoder = {
+  decodeString: function (inputString: string) {
+    const qs: Partial<IParsedQuery> = parseQuery(inputString);
+    return {
+      chap: qs.chap,
+      exec: qs.exec,
+      files: qs.files,
+      isFolder: qs.isFolder,
+      tabIdx: qs.tabIdx,
+      tabs: qs.tabs,
+      variant: qs.variant,
+      prgrm: qs.prgrm,
+      ext: qs.ext
+    };
+  },
+
+  decodeJSON: function (inputJSON: string) {
+    const jsonObject = JSON.parse(inputJSON);
+    return jsonObject.data;
+  }
+};
+
+export async function resetConfig(
+  configObj: programConfig,
+  handlers: {
+    handleChapterSelect: (chapter: Chapter, variant: Variant) => void;
+    handleChangeExecTime: (execTime: number) => void;
+  },
+  workspaceLocation: WorkspaceLocation,
+  dispatch: Dispatch<AnyAction>,
+  fileSystem: FSModule | null
+) {
+  const chapter = convertParamToInt(configObj.chap?.toString()) ?? undefined;
+  if (chapter === Chapter.FULL_JS) {
+    showFullJSWarningOnUrlLoad();
+  } else if (chapter === Chapter.FULL_TS) {
+    showFulTSWarningOnUrlLoad();
+  } else {
+    if (chapter === Chapter.HTML) {
+      const continueToHtml = await showHTMLDisclaimer();
+      if (!continueToHtml) {
+        return;
+      }
+    }
+
+    // For backward compatibility with old share links - 'prgrm' is no longer used.
+    const program =
+      configObj.prgrm === undefined ? '' : decompressFromEncodedURIComponent(configObj.prgrm);
+
+    // By default, create just the default file.
+    const defaultFilePath = getDefaultFilePath(workspaceLocation);
+    const files: Record<string, string> =
+      configObj.files === undefined
+        ? {
+            [defaultFilePath]: program
+          }
+        : parseQuery(decompressFromEncodedURIComponent(configObj.files));
+    if (fileSystem !== null) {
+      await overwriteFilesInWorkspace(workspaceLocation, fileSystem, files);
+    }
+
+    // BrowserFS does not provide a way of listening to changes in the file system, which makes
+    // updating the file system view troublesome. To force the file system view to re-render
+    // (and thus display the updated file system), we first disable Folder mode.
+    dispatch(setFolderMode(workspaceLocation, false));
+    const isFolderModeEnabled = convertParamToBoolean(configObj.isFolder?.toString()) ?? false;
+
+    // If Folder mode should be enabled, enabling it after disabling it earlier will cause the
+    // newly-added files to be shown. Note that this has to take place after the files are
+    // already added to the file system.
+    dispatch(setFolderMode(workspaceLocation, isFolderModeEnabled));
+
+    // By default, open a single editor tab containing the default playground file.
+    const editorTabFilePaths = configObj.tabs
+      ?.split(',')
+      .map(decompressFromEncodedURIComponent) ?? [defaultFilePath];
+
+    // Remove all editor tabs before populating with the ones from the query string.
+    dispatch(
+      removeEditorTabsForDirectory(workspaceLocation, WORKSPACE_BASE_PATHS[workspaceLocation])
+    );
+    // Add editor tabs from the query string.
+    editorTabFilePaths.forEach(filePath =>
+      // Fall back on the empty string if the file contents do not exist.
+      dispatch(addEditorTab(workspaceLocation, filePath, files[filePath] ?? ''))
+    );
+
+    // By default, use the first editor tab.
+    const activeEditorTabIndex = convertParamToInt(configObj.tabIdx?.toString()) ?? 0;
+    dispatch(updateActiveEditorTabIndex(workspaceLocation, activeEditorTabIndex));
+    if (chapter) {
+      // TODO: To migrate the state logic away from playgroundSourceChapter
+      //       and playgroundSourceVariant into the language config instead
+      const languageConfig = getLanguageConfig(chapter, configObj.variant as Variant);
+      handlers.handleChapterSelect(chapter, languageConfig.variant);
+      // Hardcoded for Playground only for now, while we await workspace refactoring
+      // to decouple the SicpWorkspace from the Playground.
+      dispatch(playgroundConfigLanguage(languageConfig));
+    }
+
+    const execTime = Math.max(
+      convertParamToInt(configObj.exec?.toString() || '1000') || 1000,
+      1000
+    );
+    if (execTime) {
+      handlers.handleChangeExecTime(execTime);
+    }
+  }
+}