@elice/material-exercise 1.220803.0

package/es/components/material-exercise/context/recoil.js

@@ -0,0 +1,600 @@
+import { postGlobalAccountPreferenceEdit, postOrgMaterialExerciseExerciseRoomUserFileAdd, getOrgLectureGet, getOrgMaterialExerciseGet, getOrgMaterialExerciseExerciseRoomGet, getOrgUserGet, getGlobalAccountPreferenceGet, getOrgMaterialExerciseExerciseImageExerciseFileGet, getOrgMaterialExerciseExerciseRoomUserFileGet } from '@elice/api-client';
+import { enums } from '@elice/types';
+import { EliceWebSocket } from '@elice/websocket';
+import { camelizeKeys } from 'humps';
+import isEqual from 'lodash/isEqual';
+import { atomFamily, atom, selectorFamily, selector } from 'recoil';
+import '../../shared/monaco-editor/MonacoEditorLazy.js';
+import '../../shared/monaco-editor/MonacoEditorPerferenceForm.js';
+import 'monaco-editor/esm/vs/editor/editor.api';
+import { normalizeMonacoPreference } from '../../shared/monaco-editor/utils/monacoPreference.js';
+import { DEFAULT_MONACO_EDITOR_PREFERENCE } from '../../shared/monaco-editor/constants/monaco/preferences.js';
+import { ExercisePreviewType, ExercisePreviewDisplayMode } from './recoilTypes.js';
+
+//
+//
+
+const KEY_PREFIX = 'MaterialExercise/Exercise/Global'; //
+// =============== entities ===============
+//
+
+/**
+ * Lecture.
+ */
+
+const exerciseLectureState = atomFamily({
+  key: `${KEY_PREFIX}/Lecture`,
+  default: null,
+  effects: lectureId => [({
+    setSelf,
+    trigger,
+    onSet
+  }) => {
+    const get = async () => {
+      if (!lectureId) {
+        setSelf(null);
+        return;
+      }
+
+      setSelf(await getOrgLectureGet({
+        lectureId: lectureId
+      }).then(res => res.lecture).catch(() => null));
+    };
+
+    if (trigger === 'get') {
+      void get();
+    }
+
+    onSet((_prevValue, _newValue, isReset) => {
+      if (isReset) {
+        void get();
+      }
+    });
+  }]
+});
+/**
+ * Material exercise.
+ */
+
+const exerciseState = atomFamily({
+  key: `${KEY_PREFIX}/Exercise`,
+  default: null,
+  effects: materialExerciseId => [({
+    setSelf,
+    trigger
+  }) => {
+    const get = async () => {
+      setSelf(await getOrgMaterialExerciseGet({
+        materialExerciseId
+      }).then(res => res.materialExercise).catch(() => null));
+    };
+
+    if (trigger === 'get') {
+      void get();
+    }
+  }]
+});
+/**
+ * Material exercise room.
+ */
+
+const exerciseRoomState = atomFamily({
+  key: `${KEY_PREFIX}/ExerciseRoom`,
+  default: null,
+  effects: exerciseRoomId => [({
+    setSelf,
+    trigger
+  }) => {
+    const get = async () => {
+      if (!exerciseRoomId) {
+        return null;
+      }
+
+      setSelf(await getOrgMaterialExerciseExerciseRoomGet({
+        exerciseRoomId
+      }).then(res => res.exerciseRoom).catch(() => null));
+    };
+
+    if (trigger === 'get') {
+      void get();
+    }
+  }]
+});
+/**
+ * User.
+ */
+
+const exerciseUserState = atom({
+  key: `${KEY_PREFIX}/User`,
+  default: null,
+  effects: [({
+    setSelf,
+    trigger
+  }) => {
+    const get = async () => {
+      setSelf(await getOrgUserGet().then(res => res.user).catch(() => null));
+    };
+
+    if (trigger === 'get') {
+      void get();
+    }
+  }]
+}); //
+// =============== file tabs ===============
+//
+
+/**
+ *
+ */
+
+const exerciseFileTabsOpenedState = atomFamily({
+  key: `${KEY_PREFIX}/FileTabs/Opened`,
+  default: selectorFamily({
+    key: `${KEY_PREFIX}}/FileTabs/Opened/Default`,
+    get: ({
+      materialExerciseId,
+      exerciseRoomId
+    }) => async ({
+      get
+    }) => {
+      var _a, _b, _c, _d;
+
+      const exercise = get(exerciseState(materialExerciseId));
+      const mulLang = get(exerciseMultilangLanguagesState(materialExerciseId));
+      const mulEnv = get(exerciseMultilangEnvironmentState({
+        materialExerciseId,
+        exerciseRoomId
+      }));
+
+      if ((exercise === null || exercise === void 0 ? void 0 : exercise.envType) === enums.ExerciseEnvType.MultiLanguage && mulLang && mulEnv) {
+        const openFilelist = (_b = (_a = mulLang === null || mulLang === void 0 ? void 0 : mulLang[mulEnv === null || mulEnv === void 0 ? void 0 : mulEnv.language]) === null || _a === void 0 ? void 0 : _a.initialOpenFilelist) !== null && _b !== void 0 ? _b : [];
+        return openFilelist;
+      } else {
+        return (_d = (_c = exercise === null || exercise === void 0 ? void 0 : exercise.readyExerciseImage) === null || _c === void 0 ? void 0 : _c.initialOpenFilelist) !== null && _d !== void 0 ? _d : [];
+      }
+    }
+  })
+}); //
+// =============== file tree ===============
+//
+
+/**
+ *
+ */
+
+const exerciseFileTreeOpenedState = atom({
+  key: `${KEY_PREFIX}/FileTree/Opened`,
+  default: false
+}); //
+// =============== preference ===============
+//
+
+const EDITOR_ACCOUNT_PREFERENCE_PKEY_MONACO = 'material.exercise.editor.preference';
+/**
+ * Editor preference.
+ */
+
+const exerciseEditorPreferenceState = atom({
+  key: `${KEY_PREFIX}/EditorPreference`,
+  default: DEFAULT_MONACO_EDITOR_PREFERENCE,
+  effects: [({
+    setSelf,
+    trigger,
+    onSet
+  }) => {
+    const get = async () => {
+      setSelf(await getGlobalAccountPreferenceGet({
+        pkey: EDITOR_ACCOUNT_PREFERENCE_PKEY_MONACO
+      }).then(res => normalizeMonacoPreference(res.pvalue)).catch(() => DEFAULT_MONACO_EDITOR_PREFERENCE));
+    };
+
+    if (trigger === 'get') {
+      void get();
+    }
+
+    onSet((newPreference, prevPreference, isReset) => {
+      if (!isEqual(newPreference, prevPreference) && !isReset) {
+        void postGlobalAccountPreferenceEdit({
+          pkey: EDITOR_ACCOUNT_PREFERENCE_PKEY_MONACO,
+          pvalue: normalizeMonacoPreference(newPreference)
+        });
+      }
+    });
+  }]
+}); //
+// =============== preview ===============
+//
+
+const EDITOR_ACCOUNT_PREFERENCE_PKEY_PREVIEW_MODE = 'material.exercise.preview.mode';
+/**
+ *
+ */
+
+const exercisePreviewTypeState = selectorFamily({
+  key: `${KEY_PREFIX}/Preview/Type`,
+  get: materialExerciseId => ({
+    get
+  }) => {
+    const exercise = get(exerciseState(materialExerciseId));
+    const readyExerciseImage = exercise === null || exercise === void 0 ? void 0 : exercise.readyExerciseImage;
+
+    switch (true) {
+      case Boolean(readyExerciseImage === null || readyExerciseImage === void 0 ? void 0 : readyExerciseImage.isVnc):
+        return ExercisePreviewType.NoVnc;
+
+      case Boolean(readyExerciseImage === null || readyExerciseImage === void 0 ? void 0 : readyExerciseImage.httpPort):
+        return ExercisePreviewType.WebBrowser;
+
+      default:
+        return ExercisePreviewType.None;
+    }
+  }
+});
+/**
+ *
+ */
+
+const exercisePreviewDisplayModeState = atom({
+  key: `${KEY_PREFIX}/Preview/DisplayMode`,
+  default: ExercisePreviewDisplayMode.Mini,
+  effects: [({
+    trigger,
+    setSelf,
+    onSet
+  }) => {
+    const get = async () => {
+      setSelf(await getGlobalAccountPreferenceGet({
+        pkey: EDITOR_ACCOUNT_PREFERENCE_PKEY_PREVIEW_MODE
+      }).then(res => Number(res.pvalue) || ExercisePreviewDisplayMode.Mini).catch(() => ExercisePreviewDisplayMode.Mini));
+    };
+
+    if (trigger === 'get') {
+      void get();
+    }
+
+    onSet((newDisplayMode, prevDisplayMode, isReset) => {
+      if (!isEqual(newDisplayMode, prevDisplayMode) && !isReset) {
+        void postGlobalAccountPreferenceEdit({
+          pkey: EDITOR_ACCOUNT_PREFERENCE_PKEY_PREVIEW_MODE,
+          pvalue: newDisplayMode
+        });
+      }
+    });
+  }]
+}); //
+// =============== runner ===============
+//
+
+/**
+ *
+ */
+
+const exerciseRunnerSubmittingState = atom({
+  key: `${KEY_PREFIX}/Runner/Submitting`,
+  default: false
+});
+/**
+ *
+ */
+
+const exerciseRunnerRunningState = atom({
+  key: `${KEY_PREFIX}/Runner/Running`,
+  default: false
+});
+/**
+ *
+ */
+
+const exerciseRunnerRunTypeState = atom({
+  key: `${KEY_PREFIX}/Runner/RunType`,
+  default: null
+});
+/**
+ *
+ */
+
+const exerciseRunnerRoomConnectionInfoState = atom({
+  key: `${KEY_PREFIX}/Runner/RoomConnectionInfoState`,
+  default: null
+});
+/**
+ *
+ */
+
+const exerciseRunnerStdioFilesState = atom({
+  key: `${KEY_PREFIX}/Runner/StdioFiles`,
+  default: []
+});
+/**
+ *
+ */
+
+const exerciseRunnerWebSocketStatusQuery = selector({
+  key: `${KEY_PREFIX}/Runner/WebsocketState`,
+  get: ({
+    get
+  }) => {
+    const states = Object.freeze([get(exerciseWebsocketStates).runnerRoom, get(exerciseWebsocketStates).stdio]); // connecting
+
+    if (states.includes(EliceWebSocket.CLOSED) || states.includes(EliceWebSocket.CONNECTING)) {
+      return EliceWebSocket.CONNECTING;
+    } // connected
+    else if (states.every(state => state === WebSocket.OPEN)) {
+      return EliceWebSocket.OPEN;
+    } // reconnecting
+    else {
+      return EliceWebSocket.CONNECTING;
+    }
+  }
+}); //
+// =============== websocket ===============
+//
+
+/**
+ *
+ */
+
+const exerciseWebsocketStates = atom({
+  key: `${KEY_PREFIX}/Websocket/States`,
+  default: {
+    runnerRoom: EliceWebSocket.CLOSED,
+    stdio: EliceWebSocket.CLOSED,
+    usercodeEdit: EliceWebSocket.CLOSED
+  }
+});
+/**
+ *
+ */
+
+const exerciseWebsocketQuery = selectorFamily({
+  key: `${KEY_PREFIX}/Websocket/State`,
+  get: key => ({
+    get
+  }) => {
+    return get(exerciseWebsocketStates)[key];
+  },
+  set: key => ({
+    get,
+    set
+  }, newWebSocketState) => {
+    set(exerciseWebsocketStates, Object.assign(Object.assign({}, get(exerciseWebsocketStates)), {
+      [key]: newWebSocketState
+    }));
+  }
+}); //
+// =============== multi language ===============
+//
+
+const MULTILANG_ENVIRONMENT_FILENAME = '.environment.json';
+const MULTILANG_LANGUAGES_FILENAME = '.languages.json';
+/**
+ *
+ */
+
+const exerciseMultilangLanguagesState = atomFamily({
+  key: `${KEY_PREFIX}/Multilang/Languages`,
+  default: undefined,
+  effects: materialExerciseId => [({
+    getPromise,
+    trigger,
+    setSelf,
+    onSet
+  }) => {
+    const get = async () => {
+      var _a, _b;
+
+      if (!materialExerciseId) {
+        setSelf(undefined);
+        return;
+      }
+
+      const exercise = await getPromise(exerciseState(materialExerciseId));
+
+      if (!exercise) {
+        setSelf(undefined);
+        return;
+      }
+
+      setSelf(await getOrgMaterialExerciseExerciseImageExerciseFileGet({
+        exerciseImageId: (_b = (_a = exercise.readyExerciseImage) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : 0,
+        filename: MULTILANG_LANGUAGES_FILENAME
+      }).then(res => res.exerciseFile.content).then(content => camelizeKeys(JSON.parse(content))).catch(() => null));
+    };
+
+    if (trigger === 'get') {
+      void get();
+    }
+
+    onSet((_prevValue, _newValue, isReset) => {
+      if (isReset) {
+        void get();
+      }
+    });
+  }]
+});
+/**
+ *
+ */
+
+const exerciseMultilangEnvironmentState = atomFamily({
+  key: `${KEY_PREFIX}/Multilang/Environment`,
+  default: null,
+  effects: ({
+    materialExerciseId,
+    exerciseRoomId
+  }) => [({
+    trigger,
+    getPromise,
+    setSelf,
+    onSet
+  }) => {
+    const get = async () => {
+      setSelf(getOrgMaterialExerciseExerciseRoomUserFileGet({
+        exerciseRoomId,
+        filename: MULTILANG_ENVIRONMENT_FILENAME
+      }).then(res => camelizeKeys(JSON.parse(res.userFile.content))).catch(async () => getPromise(exerciseMultilangLanguagesState(materialExerciseId)).then(languages => {
+        if (!languages) {
+          throw new Error('err_no_languages');
+        }
+
+        const language = Object.keys(languages)[0];
+        return {
+          language
+        };
+      }).catch(() => null)));
+    };
+
+    if (trigger === 'get') {
+      void get();
+    }
+
+    onSet((newEnvJson, _, isReset) => {
+      if (isReset) {
+        return;
+      }
+
+      void postOrgMaterialExerciseExerciseRoomUserFileAdd({
+        exerciseRoomId,
+        userFile: new File([JSON.stringify(newEnvJson)], MULTILANG_ENVIRONMENT_FILENAME, {
+          type: 'application/json'
+        }),
+        path: '',
+        overwrite: true
+      });
+    });
+  }]
+}); //
+// =============== arduino ===============
+//
+
+const ARDUINO_ACCOUNT_PREFERENCE_KEY = 'material.exercise.arduino.preference';
+const DEFAULT_ARDUINO_PREFERENCE = {
+  baudRate: 9600,
+  port: ''
+};
+/**
+ * Arduino preference.
+ */
+
+const exerciseArduinoPreferenceState = atom({
+  key: `${KEY_PREFIX}/Arduino/Preference`,
+  default: DEFAULT_ARDUINO_PREFERENCE,
+  effects: [({
+    trigger,
+    setSelf,
+    onSet
+  }) => {
+    const get = async () => {
+      setSelf(await getGlobalAccountPreferenceGet({
+        pkey: ARDUINO_ACCOUNT_PREFERENCE_KEY
+      }).then(res => {
+        return Object.assign(Object.assign({}, DEFAULT_ARDUINO_PREFERENCE), res.pvalue);
+      }).catch(() => DEFAULT_ARDUINO_PREFERENCE));
+    };
+
+    if (trigger === 'get') {
+      void get();
+    }
+
+    onSet((newPreference, prevPreference, isReset) => {
+      if (!isEqual(newPreference, prevPreference) && !isReset) {
+        void postGlobalAccountPreferenceEdit({
+          pkey: ARDUINO_ACCOUNT_PREFERENCE_KEY,
+          pvalue: Object.assign(Object.assign({}, DEFAULT_ARDUINO_PREFERENCE), newPreference)
+        });
+      }
+    });
+  }]
+});
+/**
+ * Arduino ports.
+ */
+
+const exerciseArduinoPortsState = atom({
+  key: `${KEY_PREFIX}/Arduino/Ports`,
+  default: []
+});
+/**
+ * Opened arduino port.
+ */
+
+const exerciseArduinoOpenedPortNameState = atom({
+  key: `${KEY_PREFIX}/Arduino/OpenedPortName`,
+  default: null
+});
+/**
+ * Arduino port open handler.
+ */
+
+const exerciseArduinoOnSelectPortState = atom({
+  key: `${KEY_PREFIX}/Arduino/OnSelectPort`,
+  default: name => {// do nothing.
+  }
+});
+/**
+ * Arduino agent connection status.
+ */
+
+const exerciseArduinoAgentConnectionState = atom({
+  key: `${KEY_PREFIX}/Arduino/AgentConnection`,
+  default: 'disconnected'
+});
+/**
+ * Arduino upload progress.
+ */
+
+const exerciseArduinoUploadProgressState = atom({
+  key: `${KEY_PREFIX}/Arduino/UploadProgressState`,
+  default: 'ready'
+}); //
+// =============== others ===============
+//
+
+/**
+ *
+ */
+
+const exerciseActiveFilenameState = atom({
+  key: `${KEY_PREFIX}/ActiveFilename`,
+  default: null
+});
+/**
+ *
+ */
+
+const exerciseRightpaneActiveState = atom({
+  key: `${KEY_PREFIX}/RightpaneActive`,
+  default: null
+});
+/**
+ *
+ */
+
+const exerciseContainerSizeState = atom({
+  key: `${KEY_PREFIX}/ContainerSize`,
+  default: {
+    width: 0,
+    height: 0
+  }
+});
+/**
+ *
+ */
+
+const exerciseFileEditorCursorState = atom({
+  key: `${KEY_PREFIX}/FileEditorCursor`,
+  default: {
+    from: 0,
+    to: 0
+  }
+});
+/**
+ *
+ */
+
+const exerciseFileEditorCursorSelectionValueState = atom({
+  key: `${KEY_PREFIX}/FileEditorCursorSelectionValue`,
+  default: null
+});
+
+export { exerciseActiveFilenameState, exerciseArduinoAgentConnectionState, exerciseArduinoOnSelectPortState, exerciseArduinoOpenedPortNameState, exerciseArduinoPortsState, exerciseArduinoPreferenceState, exerciseArduinoUploadProgressState, exerciseContainerSizeState, exerciseEditorPreferenceState, exerciseFileEditorCursorSelectionValueState, exerciseFileEditorCursorState, exerciseFileTabsOpenedState, exerciseFileTreeOpenedState, exerciseLectureState, exerciseMultilangEnvironmentState, exerciseMultilangLanguagesState, exercisePreviewDisplayModeState, exercisePreviewTypeState, exerciseRightpaneActiveState, exerciseRoomState, exerciseRunnerRoomConnectionInfoState, exerciseRunnerRunTypeState, exerciseRunnerRunningState, exerciseRunnerStdioFilesState, exerciseRunnerSubmittingState, exerciseRunnerWebSocketStatusQuery, exerciseState, exerciseUserState, exerciseWebsocketQuery, exerciseWebsocketStates };

package/es/components/material-exercise/context/recoilTypes.d.ts

@@ -0,0 +1,95 @@
+import type { enums, GetOrgLectureGetResponses, GetOrgMaterialExerciseExerciseRoomGetResponses } from '@elice/types';
+import type { GetOrgMaterialExerciseGetResponses, GetOrgUserGetResponses } from '@elice/types';
+import type { MonacoEditorPreference } from "../../shared/monaco-editor";
+import type { MaterialExerciseStdioFile, RunnerRoomConnectionInfo } from "../../../hooks";
+import type { MultilangEnvironmentJson, MultilangLanguagesJson } from '../exercise-multilang-dropdown/types';
+/**
+ * Lecture.
+ */
+export declare type AtomLectureState = GetOrgLectureGetResponses['lecture'] | null;
+/**
+ * Material exercise.
+ */
+export declare type AtomExerciseState = GetOrgMaterialExerciseGetResponses['materialExercise'] | null;
+/**
+ * Material exercise room.
+ */
+export declare type AtomExerciseRoomState = GetOrgMaterialExerciseExerciseRoomGetResponses['exerciseRoom'] | null;
+/**
+ * User.
+ */
+export declare type AtomUserState = GetOrgUserGetResponses['user'] | null;
+/**
+ * Editor preference.
+ */
+export declare type AtomEditorPreferenceState = Required<MonacoEditorPreference>;
+/**
+ *
+ */
+export declare enum ExercisePreviewType {
+    None = 0,
+    NoVnc = 1,
+    WebBrowser = 2
+}
+/**
+ *
+ */
+export declare enum ExercisePreviewDisplayMode {
+    Mini = 0,
+    SideBySide = 1
+}
+/**
+ *
+ */
+export declare type AtomRunnerRunTypeState = enums.ExerciseRunType | null;
+/**
+ *
+ */
+export declare type AtomRunnerRoomConnectionInfoState = RunnerRoomConnectionInfo | null;
+/**
+ *
+ */
+export declare type AtomRunnerStdioFilesState = MaterialExerciseStdioFile[];
+/**
+ *
+ */
+export declare type AtomVisibilityState = null | 'environment' | 'preference';
+/**
+ *
+ */
+export declare type AtomWebSocketStateKey = 'runnerRoom' | 'stdio' | 'usercodeEdit';
+/**
+ *
+ */
+export declare type AtomWebSocketStates = Record<AtomWebSocketStateKey, WebSocket['readyState']>;
+/**
+ *
+ */
+export declare type AtomMultilangEnvironmentJson = MultilangEnvironmentJson | null;
+/**
+ * - `undefined`: Not loaded.
+ * - `null`: Loaded, but languages list not found.
+ * - `MultilangLanguagesJson`: Ready.
+ */
+export declare type AtomMultilangEnvironmentState = MultilangLanguagesJson | undefined | null;
+/**
+ * Arduino preference.
+ */
+export declare type AtomArduinoPreferenceState = Required<{
+    baudRate: number;
+    port: string;
+}>;
+/**
+ *
+ */
+export interface AtomContainerSizeState {
+    width: number;
+    height: number;
+}
+/**
+ *
+ */
+export interface AtomFileEditorCursorState {
+    from: number;
+    to: number;
+}

package/es/components/material-exercise/context/recoilTypes.js

@@ -0,0 +1,27 @@
+//
+// =============== preview ===============
+//
+
+/**
+ *
+ */
+var ExercisePreviewType;
+
+(function (ExercisePreviewType) {
+  ExercisePreviewType[ExercisePreviewType["None"] = 0] = "None";
+  ExercisePreviewType[ExercisePreviewType["NoVnc"] = 1] = "NoVnc";
+  ExercisePreviewType[ExercisePreviewType["WebBrowser"] = 2] = "WebBrowser";
+})(ExercisePreviewType || (ExercisePreviewType = {}));
+/**
+ *
+ */
+
+
+var ExercisePreviewDisplayMode;
+
+(function (ExercisePreviewDisplayMode) {
+  ExercisePreviewDisplayMode[ExercisePreviewDisplayMode["Mini"] = 0] = "Mini";
+  ExercisePreviewDisplayMode[ExercisePreviewDisplayMode["SideBySide"] = 1] = "SideBySide";
+})(ExercisePreviewDisplayMode || (ExercisePreviewDisplayMode = {}));
+
+export { ExercisePreviewDisplayMode, ExercisePreviewType };