Migrate external URL shortener request out of sagas

Author: chownces

src/commons/controlBar/ControlBarShareButton.tsx

@@ -4,27 +4,18 @@ import { useHotkeys } from '@mantine/hooks';
 import React, { useRef, useState } from 'react';
 import * as CopyToClipboard from 'react-copy-to-clipboard';
 import JsonEncoderDelegate from 'src/features/playground/shareLinks/encoder/delegates/JsonEncoderDelegate';
+import UrlParamsEncoderDelegate from 'src/features/playground/shareLinks/encoder/delegates/UrlParamsEncoderDelegate';
 import { usePlaygroundConfigurationEncoder } from 'src/features/playground/shareLinks/encoder/EncoderHooks';
 
 import ControlButton from '../ControlButton';
+import { externalUrlShortenerRequest } from '../sagas/PlaygroundSaga';
 import { postSharedProgram } from '../sagas/RequestsSaga';
-import Constants from '../utils/Constants';
-import { showWarningMessage } from '../utils/notifications/NotificationsHelper';
+import Constants, { Links } from '../utils/Constants';
+import { showSuccessMessage, showWarningMessage } from '../utils/notifications/NotificationsHelper';
 import { request } from '../utils/RequestHelper';
 import { RemoveLast } from '../utils/TypeHelper';
 
-type ControlBarShareButtonProps = DispatchProps & StateProps;
-
-type DispatchProps = {
-  handleGenerateLz?: () => void;
-  handleShortenURL: (s: string) => void;
-  handleUpdateShortURL: (s: string) => void;
-};
-
-type StateProps = {
-  queryString?: string;
-  shortURL?: string;
-  key: string;
+type ControlBarShareButtonProps = {
   isSicp?: boolean;
 };
 
@@ -37,14 +28,29 @@ export const requestToShareProgram = async (
   return resp;
 };
 
+/**
+ * Generates the share link for programs in the Playground.
+ *
+ * For playground-only (no backend) deployments:
+ * - Generate a URL with playground configuration encoded as hash parameters
+ * - URL sent to external URL shortener service
+ * - Shortened URL displayed to user
+ * - (note: SICP CodeSnippets use these hash parameters)
+ *
+ * For 'with backend' deployments:
+ * - Send the playground configuration to the backend
+ * - Backend stores configuration and assigns a UUID
+ * - Backend pings the external URL shortener service with UUID link
+ * - Shortened URL returned to Frontend and displayed to user
+ */
 export const ControlBarShareButton: React.FC<ControlBarShareButtonProps> = props => {
   const shareInputElem = useRef<HTMLInputElement>(null);
   const [isLoading, setIsLoading] = useState(false);
   const [shortenedUrl, setShortenedUrl] = useState('');
   const [customStringKeyword, setCustomStringKeyword] = useState('');
   const playgroundConfiguration = usePlaygroundConfigurationEncoder();
 
-  const generateLink = () => {
+  const generateLinkBackend = () => {
     setIsLoading(true);
 
     customStringKeyword;
@@ -56,6 +62,32 @@ export const ControlBarShareButton: React.FC<ControlBarShareButtonProps> = props
       .catch(err => showWarningMessage(err.toString()))
       .finally(() => setIsLoading(false));
   };
+
+  const generateLinkPlaygroundOnly = () => {
+    const hash = playgroundConfiguration.encodeWith(new UrlParamsEncoderDelegate());
+    setIsLoading(true);
+
+    return externalUrlShortenerRequest(hash, customStringKeyword)
+      .then(({ shortenedUrl, message }) => {
+        setShortenedUrl(shortenedUrl);
+        if (message) showSuccessMessage(message);
+      })
+      .catch(err => showWarningMessage(err.toString()))
+      .finally(() => setIsLoading(false));
+  };
+
+  const generateLinkSicp = () => {
+    const hash = playgroundConfiguration.encodeWith(new UrlParamsEncoderDelegate());
+    const shortenedUrl = `${Links.playground}#${hash}`;
+    setShortenedUrl(shortenedUrl);
+  };
+
+  const generateLink = props.isSicp
+    ? generateLinkSicp
+    : Constants.playgroundOnly
+    ? generateLinkPlaygroundOnly
+    : generateLinkBackend;
+
   useHotkeys([['ctrl+w', generateLink]], []);
 
   const handleCustomStringChange = (event: React.FormEvent<HTMLInputElement>) => {
@@ -91,17 +123,6 @@ export const ControlBarShareButton: React.FC<ControlBarShareButtonProps> = props
     </div>
   );
 
-  const sicpCopyLinkPopoverContent = (
-    <div>
-      <input defaultValue={props.queryString!} readOnly={true} ref={shareInputElem} />
-      <Tooltip content="Copy link to clipboard">
-        <CopyToClipboard text={props.queryString!}>
-          <ControlButton icon={IconNames.DUPLICATE} onClick={selectShareInputText} />
-        </CopyToClipboard>
-      </Tooltip>
-    </div>
-  );
-
   const copyLinkPopoverContent = (
     <div key={shortenedUrl}>
       <input defaultValue={shortenedUrl} readOnly={true} ref={shareInputElem} />
@@ -115,8 +136,6 @@ export const ControlBarShareButton: React.FC<ControlBarShareButtonProps> = props
 
   const shareButtonPopoverContent = isLoading
     ? generatingLinkPopoverContent
-    : props.isSicp
-    ? sicpCopyLinkPopoverContent
     : shortenedUrl
     ? copyLinkPopoverContent
     : generateLinkPopoverContent;

src/commons/sagas/PlaygroundSaga.ts

@@ -1,25 +1,13 @@
-import { FSModule } from 'browserfs/dist/node/core/FS';
-import { Chapter, Variant } from 'js-slang/dist/types';
-import { compressToEncodedURIComponent } from 'lz-string';
-import qs from 'query-string';
+import { Chapter } from 'js-slang/dist/types';
 import { SagaIterator } from 'redux-saga';
-import { call, delay, put, race, select } from 'redux-saga/effects';
+import { call, put, select } from 'redux-saga/effects';
 import CseMachine from 'src/features/cseMachine/CseMachine';
 import { CseMachine as JavaCseMachine } from 'src/features/cseMachine/java/CseMachine';
 
-import {
-  changeQueryString,
-  shortenURL,
-  updateShortURL
-} from '../../features/playground/PlaygroundActions';
-import { GENERATE_LZ_STRING, SHORTEN_URL } from '../../features/playground/PlaygroundTypes';
 import { isSourceLanguage, OverallState } from '../application/ApplicationTypes';
-import { ExternalLibraryName } from '../application/types/ExternalTypes';
-import { retrieveFilesInWorkspaceAsRecord } from '../fileSystem/utils';
 import { visitSideContent } from '../sideContent/SideContentActions';
 import { SideContentType, VISIT_SIDE_CONTENT } from '../sideContent/SideContentTypes';
 import Constants from '../utils/Constants';
-import { showSuccessMessage, showWarningMessage } from '../utils/notifications/NotificationsHelper';
 import {
   clearReplOutput,
   setEditorHighlightedLines,
@@ -29,46 +17,10 @@ import {
   updateCurrentStep,
   updateStepsTotal
 } from '../workspace/WorkspaceActions';
-import { EditorTabState, PlaygroundWorkspaceState } from '../workspace/WorkspaceTypes';
+import { PlaygroundWorkspaceState } from '../workspace/WorkspaceTypes';
 import { safeTakeEvery as takeEvery } from './SafeEffects';
 
 export default function* PlaygroundSaga(): SagaIterator {
-  yield takeEvery(GENERATE_LZ_STRING, updateQueryString);
-
-  yield takeEvery(SHORTEN_URL, function* (action: ReturnType<typeof shortenURL>): any {
-    const queryString = yield select((state: OverallState) => state.playground.queryString);
-    const keyword = action.payload;
-    const errorMsg = 'ERROR';
-
-    let resp, timeout;
-
-    //we catch and move on if there are errors (plus have a timeout in case)
-    try {
-      const { result, hasTimedOut } = yield race({
-        result: call(shortenURLRequest, queryString, keyword),
-        hasTimedOut: delay(10000)
-      });
-
-      resp = result;
-      timeout = hasTimedOut;
-    } catch (_) {}
-
-    if (!resp || timeout) {
-      yield put(updateShortURL(errorMsg));
-      return yield call(showWarningMessage, 'Something went wrong trying to create the link.');
-    }
-
-    if (resp.status !== 'success' && !resp.shorturl) {
-      yield put(updateShortURL(errorMsg));
-      return yield call(showWarningMessage, resp.message);
-    }
-
-    if (resp.status !== 'success') {
-      yield call(showSuccessMessage, resp.message);
-    }
-    yield put(updateShortURL(Constants.urlShortenerBase + resp.url.keyword));
-  });
-
   yield takeEvery(
     VISIT_SIDE_CONTENT,
     function* ({
@@ -126,60 +78,30 @@ export default function* PlaygroundSaga(): SagaIterator {
   );
 }
 
-function* updateQueryString() {
-  const isFolderModeEnabled: boolean = yield select(
-    (state: OverallState) => state.workspaces.playground.isFolderModeEnabled
-  );
-  const fileSystem: FSModule = yield select(
-    (state: OverallState) => state.fileSystem.inBrowserFileSystem
-  );
-  const files: Record<string, string> = yield call(
-    retrieveFilesInWorkspaceAsRecord,
-    'playground',
-    fileSystem
-  );
-  const editorTabs: EditorTabState[] = yield select(
-    (state: OverallState) => state.workspaces.playground.editorTabs
-  );
-  const editorTabFilePaths = editorTabs
-    .map((editorTab: EditorTabState) => editorTab.filePath)
-    .filter((filePath): filePath is string => filePath !== undefined);
-  const activeEditorTabIndex: number | null = yield select(
-    (state: OverallState) => state.workspaces.playground.activeEditorTabIndex
-  );
-  const chapter: Chapter = yield select(
-    (state: OverallState) => state.workspaces.playground.context.chapter
-  );
-  const variant: Variant = yield select(
-    (state: OverallState) => state.workspaces.playground.context.variant
-  );
-  const external: ExternalLibraryName = yield select(
-    (state: OverallState) => state.workspaces.playground.externalLibrary
-  );
-  const execTime: number = yield select(
-    (state: OverallState) => state.workspaces.playground.execTime
-  );
-  const newQueryString = qs.stringify({
-    isFolder: isFolderModeEnabled,
-    files: compressToEncodedURIComponent(qs.stringify(files)),
-    tabs: editorTabFilePaths.map(compressToEncodedURIComponent),
-    tabIdx: activeEditorTabIndex,
-    chap: chapter,
-    variant,
-    ext: external,
-    exec: execTime
-  });
-  yield put(changeQueryString(newQueryString));
-}
-
+type UrlShortenerResponse = {
+  status: string;
+  code: string;
+  url: {
+    keyword: string;
+    url: string;
+    title: string;
+    date: string;
+    ip: string;
+    clicks: string;
+  };
+  message: string;
+  title: string;
+  shorturl: string;
+  statusCode: number;
+};
 /**
  * Gets short url from microservice
  * @returns {(Response|null)} Response if successful, otherwise null.
  */
-export async function shortenURLRequest(
+export async function externalUrlShortenerRequest(
   queryString: string,
   keyword: string
-): Promise<Response | null> {
+): Promise<{ shortenedUrl: string; message: string }> {
   const url = `${window.location.protocol}//${window.location.host}/playground#${queryString}`;
 
   const params = {
@@ -199,9 +121,15 @@ export async function shortenURLRequest(
 
   const resp = await fetch(`${Constants.urlShortenerBase}yourls-api.php`, fetchOpts);
   if (!resp || !resp.ok) {
-    return null;
+    throw new Error('Something went wrong trying to create the link.');
+  }
+
+  const res: UrlShortenerResponse = await resp.json();
+  if (res.status !== 'success' && !res.shorturl) {
+    throw new Error(res.message);
   }
 
-  const res = await resp.json();
-  return res;
+  const message = res.status !== 'success' ? res.message : '';
+  const shortenedUrl = Constants.urlShortenerBase + res.url.keyword;
+  return { shortenedUrl, message };
 }

src/features/playground/PlaygroundActions.ts

@@ -3,27 +3,11 @@ import { SALanguage } from 'src/commons/application/ApplicationTypes';
 
 import { PersistenceFile } from '../persistence/PersistenceTypes';
 import {
-  CHANGE_QUERY_STRING,
-  GENERATE_LZ_STRING,
   PLAYGROUND_UPDATE_GITHUB_SAVE_INFO,
   PLAYGROUND_UPDATE_LANGUAGE_CONFIG,
-  PLAYGROUND_UPDATE_PERSISTENCE_FILE,
-  SHORTEN_URL,
-  UPDATE_SHORT_URL
+  PLAYGROUND_UPDATE_PERSISTENCE_FILE
 } from './PlaygroundTypes';
 
-export const generateLzString = createAction(GENERATE_LZ_STRING, () => ({ payload: {} }));
-
-export const shortenURL = createAction(SHORTEN_URL, (keyword: string) => ({ payload: keyword }));
-
-export const updateShortURL = createAction(UPDATE_SHORT_URL, (shortURL: string) => ({
-  payload: shortURL
-}));
-
-export const changeQueryString = createAction(CHANGE_QUERY_STRING, (queryString: string) => ({
-  payload: queryString
-}));
-
 export const playgroundUpdatePersistenceFile = createAction(
   PLAYGROUND_UPDATE_PERSISTENCE_FILE,
   (file?: PersistenceFile) => ({ payload: file })

src/features/playground/PlaygroundReducer.ts

@@ -3,29 +3,17 @@ import { Reducer } from 'redux';
 import { defaultPlayground } from '../../commons/application/ApplicationTypes';
 import { SourceActionType } from '../../commons/utils/ActionsHelper';
 import {
-  CHANGE_QUERY_STRING,
   PLAYGROUND_UPDATE_GITHUB_SAVE_INFO,
   PLAYGROUND_UPDATE_LANGUAGE_CONFIG,
   PLAYGROUND_UPDATE_PERSISTENCE_FILE,
-  PlaygroundState,
-  UPDATE_SHORT_URL
+  PlaygroundState
 } from './PlaygroundTypes';
 
 export const PlaygroundReducer: Reducer<PlaygroundState, SourceActionType> = (
   state = defaultPlayground,
   action
 ) => {
   switch (action.type) {
-    case CHANGE_QUERY_STRING:
-      return {
-        ...state,
-        queryString: action.payload
-      };
-    case UPDATE_SHORT_URL:
-      return {
-        ...state,
-        shortURL: action.payload
-      };
     case PLAYGROUND_UPDATE_GITHUB_SAVE_INFO:
       return {
         ...state,

src/features/playground/PlaygroundTypes.ts

@@ -3,17 +3,11 @@ import { SALanguage } from 'src/commons/application/ApplicationTypes';
 import { GitHubSaveInfo } from '../github/GitHubTypes';
 import { PersistenceFile } from '../persistence/PersistenceTypes';
 
-export const CHANGE_QUERY_STRING = 'CHANGE_QUERY_STRING';
-export const GENERATE_LZ_STRING = 'GENERATE_LZ_STRING';
-export const SHORTEN_URL = 'SHORTEN_URL';
-export const UPDATE_SHORT_URL = 'UPDATE_SHORT_URL';
 export const PLAYGROUND_UPDATE_GITHUB_SAVE_INFO = 'PLAYGROUND_UPDATE_GITHUB_SAVE_INFO';
 export const PLAYGROUND_UPDATE_PERSISTENCE_FILE = 'PLAYGROUND_UPDATE_PERSISTENCE_FILE';
 export const PLAYGROUND_UPDATE_LANGUAGE_CONFIG = 'PLAYGROUND_UPDATE_LANGUAGE_CONFIG';
 
 export type PlaygroundState = {
-  readonly queryString?: string;
-  readonly shortURL?: string;
   readonly persistenceFile?: PersistenceFile;
   readonly githubSaveInfo: GitHubSaveInfo;
   readonly languageConfig: SALanguage;