Shared links frontend

src/commons/controlBar/ControlBarShareButton.tsx

@@ -3,9 +3,11 @@ import { IconNames } from '@blueprintjs/icons';
 import { Popover2, Tooltip2 } from '@blueprintjs/popover2';
 import React from 'react';
 import * as CopyToClipboard from 'react-copy-to-clipboard';
+import ShareLinkState from 'src/features/playground/shareLinks/ShareLinkState';
 
 import ControlButton from '../ControlButton';
 import Constants from '../utils/Constants';
+import { showWarningMessage } from '../utils/notifications/NotificationsHelper';
 
 type ControlBarShareButtonProps = DispatchProps & StateProps;
 
@@ -20,11 +22,13 @@ type StateProps = {
   shortURL?: string;
   key: string;
   isSicp?: boolean;
+  programConfig: ShareLinkState;
 };
 
 type State = {
   keyword: string;
   isLoading: boolean;
+  isSuccess: boolean;
 };
 
 export class ControlBarShareButton extends React.PureComponent<ControlBarShareButtonProps, State> {
@@ -35,10 +39,32 @@ export class ControlBarShareButton extends React.PureComponent<ControlBarShareBu
     this.selectShareInputText = this.selectShareInputText.bind(this);
     this.handleChange = this.handleChange.bind(this);
     this.toggleButton = this.toggleButton.bind(this);
+    this.fetchUUID = this.fetchUUID.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) {
+      // press Ctrl+Enter to generate and copy new share link directly
+      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 +83,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;
@@ -69,10 +95,8 @@ export class ControlBarShareButton extends React.PureComponent<ControlBarShareBu
                 <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
+                  onClick={this.fetchUUID}
                 />
               </div>
             ) : (
@@ -84,10 +108,10 @@ 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.state.keyword}>
+              <input defaultValue={this.state.keyword} readOnly={true} ref={this.shareInputElem} />
               <Tooltip2 content="Copy link to clipboard">
-                <CopyToClipboard text={this.props.shortURL}>
+                <CopyToClipboard text={this.state.keyword}>
                   <ControlButton icon={IconNames.DUPLICATE} onClick={this.selectShareInputText} />
                 </CopyToClipboard>
               </Tooltip2>
@@ -121,8 +145,7 @@ export class ControlBarShareButton extends React.PureComponent<ControlBarShareBu
     }
 
     // reset state
-    this.props.handleUpdateShortURL('');
-    this.setState({ keyword: '', isLoading: false });
+    this.setState({ keyword: '', isLoading: false, isSuccess: false });
   }
 
   private handleChange(event: React.FormEvent<HTMLInputElement>) {
@@ -135,4 +158,31 @@ export class ControlBarShareButton extends React.PureComponent<ControlBarShareBu
       this.shareInputElem.current.select();
     }
   }
+
+  private fetchUUID() {
+    const requestBody = {
+      shared_program: {
+        data: this.props.programConfig
+      }
+    };
+    const fetchOpts: RequestInit = {
+      method: 'POST',
+      body: JSON.stringify(requestBody),
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    };
+    fetch(`${Constants.backendUrl}/api/shared_programs`, fetchOpts)
+      .then(res => {
+        return res.json();
+      })
+      .then(resp => {
+        this.setState({
+          // seems like there's no frontend url env variable, should be replaced by frontend server accordingly
+          keyword: `http://localhost:8000/playground/share/` + resp.uuid
+        });
+        this.setState({ isLoading: true, isSuccess: true });
+      })
+      .catch(err => showWarningMessage('Fail to generate url! Error: ' + err));
+  }
 }

src/features/playground/shareLinks/ShareLinkState.ts

@@ -0,0 +1,13 @@
+type ShareLinkState = Partial<{
+  isFolder: string;
+  tabs: string;
+  tabIdx: string;
+  chap: string;
+  variant: string;
+  ext: string;
+  exec: string;
+  files: string;
+  prgrm: string;
+}>;
+
+export default ShareLinkState;

src/features/playground/shareLinks/decoder/Decoder.ts

@@ -0,0 +1,19 @@
+import ShareLinkState from '../ShareLinkState';
+import DecoderDelegate from './delegates/DecoderDelegate';
+
+/**
+ * Decodes the given encodedString with the specified decoder in `decodeWith`.
+ */
+class ShareLinkStateDecoder {
+  encodedString: string;
+
+  constructor(encodedString: string) {
+    this.encodedString = encodedString;
+  }
+
+  decodeWith(decoderDelegate: DecoderDelegate): ShareLinkState {
+    return decoderDelegate.decode(this.encodedString);
+  }
+}
+
+export default ShareLinkStateDecoder;

src/features/playground/shareLinks/decoder/delegates/DecoderDelegate.ts

@@ -0,0 +1,7 @@
+import ShareLinkState from '../../ShareLinkState';
+
+interface DecoderDelegate {
+  decode(str: string): ShareLinkState;
+}
+
+export default DecoderDelegate;

src/features/playground/shareLinks/decoder/delegates/JsonDecoderDelegate.ts

@@ -0,0 +1,11 @@
+import ShareLinkState from '../../ShareLinkState';
+import DecoderDelegate from './DecoderDelegate';
+
+class JsonDecoderDelegate implements DecoderDelegate {
+  decode(str: string): ShareLinkState {
+    const jsonObject = JSON.parse(str);
+    return jsonObject.data;
+  }
+}
+
+export default JsonDecoderDelegate;

src/features/playground/shareLinks/decoder/delegates/UrlParamsDecoderDelegate.ts

@@ -0,0 +1,23 @@
+import { IParsedQuery, parseQuery } from 'src/commons/utils/QueryHelper';
+
+import ShareLinkState from '../../ShareLinkState';
+import DecoderDelegate from './DecoderDelegate';
+
+class UrlParamsDecoderDelegate implements DecoderDelegate {
+  decode(str: string): ShareLinkState {
+    const qs: Partial<IParsedQuery> = parseQuery(str);
+    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
+    };
+  }
+}
+
+export default UrlParamsDecoderDelegate;

src/features/playground/shareLinks/encoder/Encoder.tsx

@@ -0,0 +1,49 @@
+import { FSModule } from 'browserfs/dist/node/core/FS';
+import { compressToEncodedURIComponent } from 'lz-string';
+import qs from 'query-string';
+import { useState } from 'react';
+import { retrieveFilesInWorkspaceAsRecord } from 'src/commons/fileSystem/utils';
+import { useTypedSelector } from 'src/commons/utils/Hooks';
+import { EditorTabState } from 'src/commons/workspace/WorkspaceTypes';
+
+import ShareLinkState from '../ShareLinkState';
+
+export const useUrlEncoder = () => {
+  const isFolderModeEnabled = useTypedSelector(
+    state => state.workspaces.playground.isFolderModeEnabled
+  );
+
+  const editorTabs = useTypedSelector(state => state.workspaces.playground.editorTabs);
+  const editorTabFilePaths = editorTabs
+    .map((editorTab: EditorTabState) => editorTab.filePath)
+    .filter((filePath): filePath is string => filePath !== undefined);
+  const activeEditorTabIndex: number | null = useTypedSelector(
+    state => state.workspaces.playground.activeEditorTabIndex
+  );
+  const chapter = useTypedSelector(state => state.workspaces.playground.context.chapter);
+  const variant = useTypedSelector(state => state.workspaces.playground.context.variant);
+  const execTime = useTypedSelector(state => state.workspaces.playground.execTime);
+  const files = useGetFile();
+
+  const result: ShareLinkState = {
+    isFolder: isFolderModeEnabled.toString(),
+    files: files.toString(),
+    tabs: editorTabFilePaths.map(compressToEncodedURIComponent)[0],
+    tabIdx: activeEditorTabIndex?.toString(),
+    chap: chapter.toString(),
+    variant,
+    ext: 'NONE',
+    exec: execTime.toString()
+  };
+
+  return result;
+};
+
+const useGetFile = () => {
+  const fileSystem = useTypedSelector(state => state.fileSystem.inBrowserFileSystem);
+  const [files, setFiles] = useState<Record<string, string>>({});
+  retrieveFilesInWorkspaceAsRecord('playground', fileSystem as FSModule).then(result => {
+    setFiles(result);
+  });
+  return compressToEncodedURIComponent(qs.stringify(files));
+};