Shared links frontend

src/commons/controlBar/ControlBarShareButton.tsx

@@ -10,9 +10,13 @@ import {
 import { IconNames } from '@blueprintjs/icons';
 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';
+import { request } from '../utils/RequestHelper';
+import { RemoveLast } from '../utils/TypeHelper';
 
 type ControlBarShareButtonProps = DispatchProps & StateProps;
 
@@ -27,11 +31,28 @@ type StateProps = {
   shortURL?: string;
   key: string;
   isSicp?: boolean;
+  programConfig: ShareLinkState;
+  token: Tokens;
 };
 
 type State = {
   keyword: string;
   isLoading: boolean;
+  isSuccess: boolean;
+};
+
+type ShareLinkRequestHelperParams = RemoveLast<Parameters<typeof request>>;
+
+export type Tokens = {
+  accessToken: string | undefined;
+  refreshToken: string | undefined;
+};
+
+export const requestToShareProgram = async (
+  ...[path, method, opts]: ShareLinkRequestHelperParams
+) => {
+  const resp = await request(path, method, opts);
+  return resp;
 };
 
 export class ControlBarShareButton extends React.PureComponent<ControlBarShareButtonProps, State> {
@@ -42,10 +63,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 ? (
@@ -64,7 +107,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;
@@ -76,10 +119,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(this.props.token)}
                 />
               </div>
             ) : (
@@ -91,10 +132,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} />
               <Tooltip content="Copy link to clipboard">
-                <CopyToClipboard text={this.props.shortURL}>
+                <CopyToClipboard text={this.state.keyword}>
                   <ControlButton icon={IconNames.DUPLICATE} onClick={this.selectShareInputText} />
                 </CopyToClipboard>
               </Tooltip>
@@ -128,8 +169,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>) {
@@ -142,4 +182,30 @@ export class ControlBarShareButton extends React.PureComponent<ControlBarShareBu
       this.shareInputElem.current.select();
     }
   }
+
+  private fetchUUID(tokens: Tokens) {
+    const requestBody = {
+      shared_program: {
+        data: this.props.programConfig
+      }
+    };
+
+    const getProgramUrl = async () => {
+      const resp = await requestToShareProgram(`shared_programs`, 'POST', {
+        body: requestBody,
+        ...tokens
+      });
+      if (!resp) {
+        return showWarningMessage('Fail to generate url!');
+      }
+      const respJson = await resp.json();
+      this.setState({
+        keyword: `${window.location.host}/playground/share/` + respJson.uuid
+      });
+      this.setState({ isLoading: true, isSuccess: true });
+      return;
+    };
+
+    getProgramUrl();
+  }
 }

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));
+};