Re-add playground configuration encoder

Author: chownces

src/commons/application/types/ShareLinkTypes.ts

@@ -0,0 +1,3 @@
+export type ShareLinkShortenedUrlResponse = {
+  shortenedUrl: string;
+};

src/commons/controlBar/ControlBarShareButton.tsx

@@ -3,8 +3,8 @@ import { IconNames } from '@blueprintjs/icons';
 import { useHotkeys } from '@mantine/hooks';
 import React, { useRef, useState } from 'react';
 import * as CopyToClipboard from 'react-copy-to-clipboard';
-import { usePlaygroundConfigurationEncoder } from 'src/features/playground/shareLinks/encoder/Encoder';
-import ShareLinkState from 'src/features/playground/shareLinks/ShareLinkState';
+import JsonEncoderDelegate from 'src/features/playground/shareLinks/encoder/delegates/JsonEncoderDelegate';
+import { usePlaygroundConfigurationEncoder } from 'src/features/playground/shareLinks/encoder/EncoderHooks';
 
 import ControlButton from '../ControlButton';
 import { postSharedProgram } from '../sagas/RequestsSaga';
@@ -26,17 +26,10 @@ type StateProps = {
   shortURL?: string;
   key: string;
   isSicp?: boolean;
-  programConfig: ShareLinkState;
-  token: Tokens;
 };
 
 type ShareLinkRequestHelperParams = RemoveLast<Parameters<typeof request>>;
 
-export type Tokens = {
-  accessToken: string | undefined;
-  refreshToken: string | undefined;
-};
-
 export const requestToShareProgram = async (
   ...[path, method, opts]: ShareLinkRequestHelperParams
 ) => {
@@ -56,7 +49,9 @@ export const ControlBarShareButton: React.FC<ControlBarShareButtonProps> = props
 
     customStringKeyword;
 
-    return postSharedProgram(playgroundConfiguration)
+    const configuration = playgroundConfiguration.encodeWith(new JsonEncoderDelegate());
+
+    return postSharedProgram(configuration)
       .then(({ shortenedUrl }) => setShortenedUrl(shortenedUrl))
       .catch(err => showWarningMessage(err.toString()))
       .finally(() => setIsLoading(false));

src/commons/sagas/RequestsSaga.ts

@@ -1,6 +1,5 @@
 import { call } from 'redux-saga/effects';
 import { backendParamsToProgressStatus } from 'src/features/grading/GradingUtils';
-import ShareLinkState from 'src/features/playground/shareLinks/ShareLinkState';
 import { OptionType } from 'src/pages/academy/teamFormation/subcomponents/TeamFormationForm';
 
 import {
@@ -1666,12 +1665,14 @@ export async function deleteDevice(device: Pick<Device, 'id'>, tokens?: Tokens):
  * POST /shared_programs
  */
 export async function postSharedProgram(
-  programConfig: ShareLinkState,
+  programConfig: string,
   tokens?: Tokens
 ): Promise<ShareLinkShortenedUrlResponse> {
   tokens = fillTokens(tokens);
   const resp = await request(`shared_programs`, 'POST', {
-    body: programConfig,
+    body: {
+      configuration: programConfig
+    },
     ...tokens
   });
 

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

@@ -0,0 +1,16 @@
+import ShareLinkState from '../ShareLinkState';
+import EncoderDelegate from './delegates/EncoderDelegate';
+
+class ShareLinkStateEncoder {
+  state: ShareLinkState;
+
+  constructor(state: ShareLinkState) {
+    this.state = state;
+  }
+
+  encodeWith(encoderDelegate: EncoderDelegate): string {
+    return encoderDelegate.encode(this.state);
+  }
+}
+
+export default ShareLinkStateEncoder;

src/features/playground/shareLinks/encoder/Encoder.tsx renamed to src/features/playground/shareLinks/encoder/EncoderHooks.ts

@@ -7,8 +7,9 @@ import { useTypedSelector } from 'src/commons/utils/Hooks';
 import { EditorTabState } from 'src/commons/workspace/WorkspaceTypes';
 
 import ShareLinkState from '../ShareLinkState';
+import ShareLinkStateEncoder from './Encoder';
 
-export const usePlaygroundConfigurationEncoder = () => {
+export const usePlaygroundConfigurationEncoder = (): ShareLinkStateEncoder => {
   const isFolderModeEnabled = useTypedSelector(
     state => state.workspaces.playground.isFolderModeEnabled
   );
@@ -36,7 +37,7 @@ export const usePlaygroundConfigurationEncoder = () => {
     exec: execTime.toString()
   };
 
-  return result;
+  return new ShareLinkStateEncoder(result);
 };
 
 const useGetFile = () => {

src/features/playground/shareLinks/encoder/delegates/EncoderDelegate.ts

@@ -0,0 +1,7 @@
+import ShareLinkState from '../../ShareLinkState';
+
+interface EncoderDelegate {
+  encode(state: ShareLinkState): string;
+}
+
+export default EncoderDelegate;

src/features/playground/shareLinks/encoder/delegates/JsonEncoderDelegate.ts

@@ -0,0 +1,10 @@
+import ShareLinkState from '../../ShareLinkState';
+import EncoderDelegate from './EncoderDelegate';
+
+class JsonEncoderDelegate implements EncoderDelegate {
+  encode(state: ShareLinkState) {
+    return JSON.stringify(state);
+  }
+}
+
+export default JsonEncoderDelegate;

src/features/playground/shareLinks/encoder/delegates/UrlParamsEncoderDelegate.ts

@@ -0,0 +1,12 @@
+import qs from 'query-string';
+
+import ShareLinkState from '../../ShareLinkState';
+import EncoderDelegate from './EncoderDelegate';
+
+class UrlParamsEncoderDelegate implements EncoderDelegate {
+  encode(state: ShareLinkState): string {
+    return qs.stringify(state);
+  }
+}
+
+export default UrlParamsEncoderDelegate;

src/pages/playground/Playground.tsx

@@ -91,7 +91,6 @@ import {
 import ShareLinkStateDecoder from 'src/features/playground/shareLinks/decoder/Decoder';
 import JsonDecoderDelegate from 'src/features/playground/shareLinks/decoder/delegates/JsonDecoderDelegate';
 import UrlParamsDecoderDelegate from 'src/features/playground/shareLinks/decoder/delegates/UrlParamsDecoderDelegate';
-import { usePlaygroundConfigurationEncoder } from 'src/features/playground/shareLinks/encoder/Encoder';
 import ShareLinkState from 'src/features/playground/shareLinks/ShareLinkState';
 
 import {
@@ -445,7 +444,6 @@ const Playground: React.FC<PlaygroundProps> = props => {
 
   const hash = isSicpEditor ? props.initialEditorValueHash : location.hash;
   const { uuid } = useParams<{ uuid: string }>();
-  const config = usePlaygroundConfigurationEncoder();
   const tokens = useTypedSelector((state: OverallState) => ({
     accessToken: state.session.accessToken,
     refreshToken: state.session.refreshToken
@@ -845,14 +843,12 @@ const Playground: React.FC<PlaygroundProps> = props => {
         handleShortenURL={s => dispatch(shortenURL(s))}
         handleUpdateShortURL={s => dispatch(updateShortURL(s))}
         queryString={qs}
-        programConfig={config}
-        token={tokens}
         shortURL={shortURL}
         isSicp={isSicpEditor}
         key="share"
       />
     );
-  }, [dispatch, isSicpEditor, props.initialEditorValueHash, queryString, shortURL, config, tokens]);
+  }, [dispatch, isSicpEditor, props.initialEditorValueHash, queryString, shortURL]);
 
   const toggleFolderModeButton = useMemo(() => {
     return (