@elice/material-exercise 1.231227.0 → 1.231228.0

package/es/components/material-exercise/exercise-submit-history/ExerciseSubmitHistory.js

@@ -1,7 +1,6 @@
-import { slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime, toConsumableArray as _toConsumableArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React, { useState, useEffect } from 'react';
 import { useIntl } from 'react-intl';
-import { getOrgMaterialExerciseExerciseRunningList, getOrgMaterialExerciseExerciseRoomUserFileGet, getOrgMaterialExerciseExerciseImageExerciseFileGet, getOrgMaterialExerciseExerciseRunningGet, getOrgMaterialExerciseUsercodeGet } from '@elice/api-client';
+import { getOrgMaterialExerciseExerciseRunningList, getOrgMaterialExerciseExerciseRunningGet, getOrgMaterialExerciseExerciseImageExerciseFileGet, getOrgMaterialExerciseExerciseRoomUserFileGet, getOrgMaterialExerciseUsercodeGet } from '@elice/api-client';
 import { Flex, Box, Text, ResizableNext, Spinner } from '@elice/blocks';
 import { enums } from '@elice/types';
 import dayjs from 'dayjs';
@@ -13,7 +12,6 @@ import MaterialModal from '../../shared/material-modal/MaterialModal.js';
 import MonacoEditorLazy from '../../shared/monaco-editor/MonacoEditorLazy.js';
 import '../../shared/monaco-editor/MonacoEditorPerferenceForm.js';
 import 'monaco-editor/esm/vs/editor/editor.api';
-import '../../shared/monaco-editor/constants/monaco/preferences.js';
 import { MATERIAL_RESIZABLE_COMMON_PROPS } from '../../../constants/stylesheets.js';
 import { useMaterialExerciseFileUrl } from '../../../hooks/useMaterialExerciseFileUrl.js';
 import { exerciseState, exerciseEditorPreferenceState } from '../context/recoil.js';
@@ -28,288 +26,180 @@ import ExerciseSubmitHistoryOutput from './ExerciseSubmitHistoryOutput.js';
 import { StyledExerciseVersionRunType, StyledExerciseVersionDatetime, StyledExerciseVersionScore } from '../../shared/exercise-version-list/ExerciseVersionListItem.styled.js';
 import { StyledFileTreeWrapper, StyledExerciseSubmitHistoryNotChanged, StyledExerciseSubmitHistoryEditorWrapper, StyledExerciseSubmitHistoryEditorLoadingScreen } from './ExerciseSubmitHistory.styled.js';
 
-var AsyncFileTree = React.lazy(function () {
-  return import('../../shared/file-tree/FileTree.js');
-});
-var AsyncFileTreeList = React.lazy(function () {
-  return import('../../shared/file-tree/FileTreeList.js');
-});
-var AsyncFileViewer = React.lazy(function () {
-  return import('../../shared/file-viewer/FileViewer.js');
-});
-var ExerciseSubmitHistory = function ExerciseSubmitHistory(_ref) {
-  var onHide = _ref.onHide;
-  var COUNT = 100;
-  var intl = useIntl();
-  var _React$useContext = React.useContext(ExerciseContext),
-    materialExerciseId = _React$useContext.materialExerciseId,
-    exerciseRoomId = _React$useContext.exerciseRoomId,
-    exerciseRoomUserId = _React$useContext.exerciseRoomUserId;
-  var exercise = useRecoilValue(exerciseState(materialExerciseId));
-  var preference = useRecoilValue(exerciseEditorPreferenceState);
-  var _useState = useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    runningList = _useState2[0],
-    setRunningList = _useState2[1];
-  var _useState3 = useState(null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    selectedRunning = _useState4[0],
-    setSelectedRunning = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    hasMoreRunning = _useState6[0],
-    setMoreRunning = _useState6[1];
-  var _useState7 = useState(0),
-    _useState8 = _slicedToArray(_useState7, 2),
-    offset = _useState8[0],
-    setOffset = _useState8[1];
-  var _useState9 = useState([]),
-    _useState10 = _slicedToArray(_useState9, 2),
-    fileList = _useState10[0],
-    setFileList = _useState10[1];
-  var _useState11 = useState(null),
-    _useState12 = _slicedToArray(_useState11, 2),
-    selectedFile = _useState12[0],
-    setSelectedFile = _useState12[1];
-  var _useState13 = useState(null),
-    _useState14 = _slicedToArray(_useState13, 2),
-    usercodeContent = _useState14[0],
-    setUsercodeContent = _useState14[1];
-  var _useState15 = useState(false),
-    _useState16 = _slicedToArray(_useState15, 2),
-    isUserChanged = _useState16[0],
-    setIsUserChanged = _useState16[1];
-  var _useState17 = useState(false),
-    _useState18 = _slicedToArray(_useState17, 2),
-    isFile = _useState18[0],
-    setIsFile = _useState18[1];
-  var _useState19 = useState(false),
-    _useState20 = _slicedToArray(_useState19, 2),
-    isFileReady = _useState20[0],
-    setIsFileReady = _useState20[1];
-  var selectedFileUrl = useMaterialExerciseFileUrl({
+const AsyncFileTree = React.lazy(() => import('../../shared/file-tree/FileTree.js'));
+const AsyncFileTreeList = React.lazy(() => import('../../shared/file-tree/FileTreeList.js'));
+const AsyncFileViewer = React.lazy(() => import('../../shared/file-viewer/FileViewer.js'));
+const ExerciseSubmitHistory = ({
+  onHide
+}) => {
+  const COUNT = 100;
+  const intl = useIntl();
+  const {
+    materialExerciseId,
+    exerciseRoomId,
+    exerciseRoomUserId
+  } = React.useContext(ExerciseContext);
+  const exercise = useRecoilValue(exerciseState(materialExerciseId));
+  const preference = useRecoilValue(exerciseEditorPreferenceState);
+  const [runningList, setRunningList] = useState([]);
+  const [selectedRunning, setSelectedRunning] = useState(null);
+  const [hasMoreRunning, setMoreRunning] = useState(false);
+  const [offset, setOffset] = useState(0);
+  const [fileList, setFileList] = useState([]);
+  const [selectedFile, setSelectedFile] = useState(null);
+  const [usercodeContent, setUsercodeContent] = useState(null);
+  const [isUserChanged, setIsUserChanged] = useState(false);
+  const [isFile, setIsFile] = useState(false);
+  const [isFileReady, setIsFileReady] = useState(false);
+  const selectedFileUrl = useMaterialExerciseFileUrl({
     filename: selectedFile,
-    exercise: exercise,
-    exerciseRoomId: exerciseRoomId
+    exercise,
+    exerciseRoomId
   });
   //
   //
   //
-  useEffect(function () {
-    void _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-      var _yield$getOrgMaterial, exerciseRunnings;
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            _context.prev = 0;
-            _context.next = 3;
-            return getOrgMaterialExerciseExerciseRunningList({
-              materialExerciseId: materialExerciseId,
-              userId: exerciseRoomUserId,
-              offset: offset,
-              count: COUNT
-            });
-          case 3:
-            _yield$getOrgMaterial = _context.sent;
-            exerciseRunnings = _yield$getOrgMaterial.exerciseRunnings;
-            setRunningList(function (runningList) {
-              if (runningList.length === 0 && exerciseRunnings[0]) {
-                setSelectedRunning(exerciseRunnings[0]);
-              }
-              return [].concat(_toConsumableArray(runningList), _toConsumableArray(exerciseRunnings));
-            });
-            setMoreRunning(exerciseRunnings.length === COUNT);
-            _context.next = 11;
-            break;
-          case 9:
-            _context.prev = 9;
-            _context.t0 = _context["catch"](0);
-          case 11:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee, null, [[0, 9]]);
-    }))();
+  useEffect(() => {
+    void (async () => {
+      try {
+        const {
+          exerciseRunnings
+        } = await getOrgMaterialExerciseExerciseRunningList({
+          materialExerciseId,
+          userId: exerciseRoomUserId,
+          offset,
+          count: COUNT
+        });
+        setRunningList(runningList => {
+          if (runningList.length === 0 && exerciseRunnings[0]) {
+            setSelectedRunning(exerciseRunnings[0]);
+          }
+          return [...runningList, ...exerciseRunnings];
+        });
+        setMoreRunning(exerciseRunnings.length === COUNT);
+      } catch (err) {}
+    })();
   }, [materialExerciseId, exerciseRoomUserId, offset]);
   //
   // When id of selected running is updated,
   // Get exercise running data and filelist.
   //
-  useEffect(function () {
-    void _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
-      var _a, _b, _c, _d, _e, _yield$getOrgMaterial2, exerciseRunning, languages, environment, languagesResponse, response, rootDir, initialOpenFilelist;
-      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
-          case 0:
-            if (selectedRunning) {
-              _context2.next = 2;
-              break;
-            }
-            return _context2.abrupt("return");
-          case 2:
-            _context2.prev = 2;
-            _context2.next = 5;
-            return getOrgMaterialExerciseExerciseRunningGet({
-              exerciseRunningId: selectedRunning.id,
-              returnFilelist: true,
-              returnUsercodeFilelist: true
-            });
-          case 5:
-            _yield$getOrgMaterial2 = _context2.sent;
-            exerciseRunning = _yield$getOrgMaterial2.exerciseRunning;
-            setSelectedRunning(exerciseRunning);
-            if (!((exercise === null || exercise === void 0 ? void 0 : exercise.envType) === enums.ExerciseEnvType.MultiLanguage)) {
-              _context2.next = 35;
-              break;
-            }
-            _context2.prev = 9;
-            _context2.next = 12;
-            return getOrgMaterialExerciseExerciseImageExerciseFileGet({
+  useEffect(() => {
+    void (async () => {
+      var _a, _b, _c, _d, _e;
+      if (!selectedRunning) {
+        return;
+      }
+      try {
+        const {
+          exerciseRunning
+        } = await getOrgMaterialExerciseExerciseRunningGet({
+          exerciseRunningId: selectedRunning.id,
+          returnFilelist: true,
+          returnUsercodeFilelist: true
+        });
+        setSelectedRunning(exerciseRunning);
+        if ((exercise === null || exercise === void 0 ? void 0 : exercise.envType) === enums.ExerciseEnvType.MultiLanguage) {
+          let languages, environment;
+          try {
+            const languagesResponse = await getOrgMaterialExerciseExerciseImageExerciseFileGet({
               exerciseImageId: exerciseRunning.exerciseImage.id,
               filename: '.languages.json'
             });
-          case 12:
-            languagesResponse = _context2.sent;
             languages = camelizeKeys(JSON.parse(languagesResponse.exerciseFile.content));
-            _context2.next = 19;
-            break;
-          case 16:
-            _context2.prev = 16;
-            _context2.t0 = _context2["catch"](9);
-            console.error(_context2.t0);
-          case 19:
-            _context2.prev = 19;
-            _context2.next = 22;
-            return getOrgMaterialExerciseExerciseRoomUserFileGet({
+          } catch (e) {
+            console.error(e);
+          }
+          try {
+            const response = await getOrgMaterialExerciseExerciseRoomUserFileGet({
               filename: '.environment.json',
-              exerciseRoomId: exerciseRoomId,
+              exerciseRoomId,
               targetDatetime: exerciseRunning.createdDatetime
             });
-          case 22:
-            response = _context2.sent;
             environment = camelizeKeys(JSON.parse(response.userFile.content));
-            _context2.next = 29;
-            break;
-          case 26:
-            _context2.prev = 26;
-            _context2.t1 = _context2["catch"](19);
+          } catch (e) {
             // API returns error when the user hasn't changed the language
             if (languages && Object.keys(languages).length > 0) {
               environment = {
                 language: Object.keys(languages)[0]
               };
             }
-          case 29:
-            rootDir = languages[environment.language].rootDir;
-            initialOpenFilelist = (_a = languages === null || languages === void 0 ? void 0 : languages[environment === null || environment === void 0 ? void 0 : environment.language]) === null || _a === void 0 ? void 0 : _a.initialOpenFilelist;
-            setFileList([].concat(_toConsumableArray((_b = exerciseRunning.exerciseImage.filelist) !== null && _b !== void 0 ? _b : []), _toConsumableArray((_c = exerciseRunning.exerciseRoom.filelist) !== null && _c !== void 0 ? _c : [])).filter(function (filepath) {
-              return filepath.startsWith(rootDir);
-            }));
-            if ((initialOpenFilelist === null || initialOpenFilelist === void 0 ? void 0 : initialOpenFilelist.length) > 0) {
-              setSelectedFile(initialOpenFilelist[0]);
-            }
-            _context2.next = 37;
-            break;
-          case 35:
-            setFileList([].concat(_toConsumableArray((_d = exerciseRunning.exerciseImage.filelist) !== null && _d !== void 0 ? _d : []), _toConsumableArray((_e = exerciseRunning.exerciseRoom.filelist) !== null && _e !== void 0 ? _e : [])));
-            if (exerciseRunning.exerciseImage.taskFilelist && exerciseRunning.exerciseImage.taskFilelist.length > 0) {
-              setSelectedFile(exerciseRunning.exerciseImage.taskFilelist[0]);
-            }
-          case 37:
-            _context2.next = 42;
-            break;
-          case 39:
-            _context2.prev = 39;
-            _context2.t2 = _context2["catch"](2);
-            console.error(_context2.t2);
-          case 42:
-          case "end":
-            return _context2.stop();
+          }
+          const rootDir = languages[environment.language].rootDir;
+          const initialOpenFilelist = (_a = languages === null || languages === void 0 ? void 0 : languages[environment === null || environment === void 0 ? void 0 : environment.language]) === null || _a === void 0 ? void 0 : _a.initialOpenFilelist;
+          setFileList([...((_b = exerciseRunning.exerciseImage.filelist) !== null && _b !== void 0 ? _b : []), ...((_c = exerciseRunning.exerciseRoom.filelist) !== null && _c !== void 0 ? _c : [])].filter(filepath => filepath.startsWith(rootDir)));
+          if ((initialOpenFilelist === null || initialOpenFilelist === void 0 ? void 0 : initialOpenFilelist.length) > 0) {
+            setSelectedFile(initialOpenFilelist[0]);
+          }
+        } else {
+          setFileList([...((_d = exerciseRunning.exerciseImage.filelist) !== null && _d !== void 0 ? _d : []), ...((_e = exerciseRunning.exerciseRoom.filelist) !== null && _e !== void 0 ? _e : [])]);
+          if (exerciseRunning.exerciseImage.taskFilelist && exerciseRunning.exerciseImage.taskFilelist.length > 0) {
+            setSelectedFile(exerciseRunning.exerciseImage.taskFilelist[0]);
+          }
         }
-      }, _callee2, null, [[2, 39], [9, 16], [19, 26]]);
-    }))();
+      } catch (err) {
+        console.error(err);
+      }
+    })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedRunning === null || selectedRunning === void 0 ? void 0 : selectedRunning.id]);
   //
   // When selectedFile or selectedRunning is updated,
   // Get usercode of selected file.
   //
-  useEffect(function () {
-    void _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
-      var _yield$getOrgMaterial3, usercode, _yield$getOrgMaterial4, exerciseFile;
-      return _regeneratorRuntime().wrap(function _callee3$(_context3) {
-        while (1) switch (_context3.prev = _context3.next) {
-          case 0:
-            setIsFileReady(false);
-            if (!(!(selectedRunning === null || selectedRunning === void 0 ? void 0 : selectedRunning.exerciseImage) || !selectedFile || !exerciseRoomId)) {
-              _context3.next = 3;
-              break;
-            }
-            return _context3.abrupt("return");
-          case 3:
-            _context3.next = 5;
-            return getOrgMaterialExerciseUsercodeGet({
-              filename: selectedFile,
-              exerciseRoomId: selectedRunning.exerciseRoom.id,
-              targetDatetime: selectedRunning.createdDatetime
-            });
-          case 5:
-            _yield$getOrgMaterial3 = _context3.sent;
-            usercode = _yield$getOrgMaterial3.usercode;
-            if (!((usercode === null || usercode === void 0 ? void 0 : usercode.content) !== null && (usercode === null || usercode === void 0 ? void 0 : usercode.content) !== undefined)) {
-              _context3.next = 14;
-              break;
-            }
-            setIsUserChanged(true);
+  useEffect(() => {
+    void (async () => {
+      setIsFileReady(false);
+      if (!(selectedRunning === null || selectedRunning === void 0 ? void 0 : selectedRunning.exerciseImage) || !selectedFile || !exerciseRoomId) {
+        return;
+      }
+      const {
+        usercode
+      } = await getOrgMaterialExerciseUsercodeGet({
+        filename: selectedFile,
+        exerciseRoomId: selectedRunning.exerciseRoom.id,
+        targetDatetime: selectedRunning.createdDatetime
+      });
+      if ((usercode === null || usercode === void 0 ? void 0 : usercode.content) !== null && (usercode === null || usercode === void 0 ? void 0 : usercode.content) !== undefined) {
+        setIsUserChanged(true);
+        setIsFile(false);
+        setUsercodeContent(usercode.content);
+        setIsFileReady(true);
+      } else {
+        try {
+          const {
+            exerciseFile
+          } = await getOrgMaterialExerciseExerciseImageExerciseFileGet({
+            exerciseImageId: selectedRunning.exerciseImage.id,
+            filename: selectedFile
+          });
+          if ((exerciseFile === null || exerciseFile === void 0 ? void 0 : exerciseFile.content) !== null && (exerciseFile === null || exerciseFile === void 0 ? void 0 : exerciseFile.content) !== undefined) {
+            setIsUserChanged(false);
             setIsFile(false);
-            setUsercodeContent(usercode.content);
+            setUsercodeContent(exerciseFile.content);
             setIsFileReady(true);
-            _context3.next = 27;
-            break;
-          case 14:
-            _context3.prev = 14;
-            _context3.next = 17;
-            return getOrgMaterialExerciseExerciseImageExerciseFileGet({
-              exerciseImageId: selectedRunning.exerciseImage.id,
-              filename: selectedFile
-            });
-          case 17:
-            _yield$getOrgMaterial4 = _context3.sent;
-            exerciseFile = _yield$getOrgMaterial4.exerciseFile;
-            if ((exerciseFile === null || exerciseFile === void 0 ? void 0 : exerciseFile.content) !== null && (exerciseFile === null || exerciseFile === void 0 ? void 0 : exerciseFile.content) !== undefined) {
-              setIsUserChanged(false);
-              setIsFile(false);
-              setUsercodeContent(exerciseFile.content);
-              setIsFileReady(true);
-            } else {
-              setIsUserChanged(false);
-              setIsFile(true);
-              setIsFileReady(true);
-            }
-            _context3.next = 27;
-            break;
-          case 22:
-            _context3.prev = 22;
-            _context3.t0 = _context3["catch"](14);
+          } else {
             setIsUserChanged(false);
             setIsFile(true);
             setIsFileReady(true);
-          case 27:
-          case "end":
-            return _context3.stop();
+          }
+        } catch (_a) {
+          setIsUserChanged(false);
+          setIsFile(true);
+          setIsFileReady(true);
         }
-      }, _callee3, null, [[14, 22]]);
-    }))();
+      }
+    })();
   }, [selectedFile, exerciseRoomId, selectedRunning]);
   /**
    *
    */
-  var renderRunningVersionList = function renderRunningVersionList() {
-    return React.createElement(ExerciseVersionList, null, runningList.map(function (exerciseRunning) {
+  const renderRunningVersionList = () => {
+    return React.createElement(ExerciseVersionList, null, runningList.map(exerciseRunning => {
       return React.createElement(ExerciseVersionListItem, {
         key: exerciseRunning.id,
         selected: Boolean(selectedRunning && selectedRunning.id === exerciseRunning.id),
-        onClick: function onClick() {
+        onClick: () => {
           setSelectedRunning(exerciseRunning);
         }
       }, React.createElement(StyledExerciseVersionRunType, {
@@ -327,11 +217,7 @@ var ExerciseSubmitHistory = function ExerciseSubmitHistory(_ref) {
         size: "small"
       }, exerciseRunning.score));
     }), hasMoreRunning ? React.createElement(ExerciseVersionListItem, {
-      onClick: function onClick() {
-        return setOffset(function (prevOffset) {
-          return prevOffset + COUNT;
-        });
-      }
+      onClick: () => setOffset(prevOffset => prevOffset + COUNT)
     }, React.createElement(Flex, {
       align: "center",
       justify: "center",
@@ -345,7 +231,7 @@ var ExerciseSubmitHistory = function ExerciseSubmitHistory(_ref) {
   /**
    *
    */
-  var renderRunningOutput = function renderRunningOutput() {
+  const renderRunningOutput = () => {
     if (!selectedRunning) {
       return null;
     }
@@ -356,14 +242,14 @@ var ExerciseSubmitHistory = function ExerciseSubmitHistory(_ref) {
   /**
    *
    */
-  var renderRunningContent = function renderRunningContent() {
+  const renderRunningContent = () => {
     var _a;
     if (!selectedFile) {
       return null;
     }
-    var runningId = Number((_a = selectedRunning === null || selectedRunning === void 0 ? void 0 : selectedRunning.id) !== null && _a !== void 0 ? _a : 0);
-    var uniqueFilePath = "submit-history/".concat(exerciseRoomId, "/r").concat(runningId);
-    var editorFilename = "".concat(uniqueFilePath, "/").concat(selectedFile);
+    const runningId = Number((_a = selectedRunning === null || selectedRunning === void 0 ? void 0 : selectedRunning.id) !== null && _a !== void 0 ? _a : 0);
+    const uniqueFilePath = `submit-history/${exerciseRoomId}/r${runningId}`;
+    const editorFilename = `${uniqueFilePath}/${selectedFile}`;
     return React.createElement(Flex, {
       width: "100%",
       auto: true,
@@ -378,8 +264,7 @@ var ExerciseSubmitHistory = function ExerciseSubmitHistory(_ref) {
       activePath: selectedFile,
       exerciseRoomFilelist: fileList,
       imageFilelist: [],
-      onActivePathChange: function onActivePathChange(path) {
-        var isDirectory = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      onActivePathChange: (path, isDirectory = false) => {
         if (isDirectory) {
           return;
         }

package/es/components/material-exercise/exercise-submit-history/ExerciseSubmitHistory.styled.js

@@ -2,28 +2,28 @@ import { Flex } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import styled from 'styled-components';
 
-var StyledFileTreeWrapper = styled.div.withConfig({
+const StyledFileTreeWrapper = styled.div.withConfig({
   componentId: "sc-uooiby-0"
 })(["overflow:auto;width:100%;height:100%;background-color:", ";"], base.color.navy9);
-var StyledExerciseSubmitHistoryEditorWrapper = styled(Flex).withConfig({
+const StyledExerciseSubmitHistoryEditorWrapper = styled(Flex).withConfig({
   componentId: "sc-uooiby-1"
 })(["position:relative;flex-direction:column;flex:1 1 0%;width:100%;overflow:hidden;"]);
-var StyledExerciseSubmitHistoryNotChanged = styled.div.withConfig({
+const StyledExerciseSubmitHistoryNotChanged = styled.div.withConfig({
   componentId: "sc-uooiby-2"
 })(["background-color:", ";padding:0.5rem;"], base.color.navy7);
-var StyledExerciseSubmitHistoryEditorLoadingScreen = styled(Flex).withConfig({
+const StyledExerciseSubmitHistoryEditorLoadingScreen = styled(Flex).withConfig({
   componentId: "sc-uooiby-3"
 })(["position:absolute;top:0;left:0;right:0;bottom:0;background-color:", ";align-items:center;justify-content:center;"], base.color.navy9);
-var StyledExerciseSubmitHistoryOutputText = styled.span.withConfig({
+const StyledExerciseSubmitHistoryOutputText = styled.span.withConfig({
   componentId: "sc-uooiby-4"
 })(["white-space:pre-wrap;color:", ";font-size:0.875rem;line-height:1.5rem;&.grader{color:", ";}&.info{color:", ";display:block;}&.file{display:block;color:", ";cursor:pointer;&:hover{color:", ";}}"], base.color.white, base.color.secondary4, base.color.red8, base.color.secondary4, base.color.white);
-var StyledExerciseSubmitHistoryOutput = styled.div.withConfig({
+const StyledExerciseSubmitHistoryOutput = styled.div.withConfig({
   componentId: "sc-uooiby-5"
 })(["width:100%;height:100%;overflow:scroll;background-color:black;padding:0.5rem;font-size:14px;font-family:Elice Digital Coding;"]);
-var StyledExerciseSubmitHistoryOutputImageLink = styled.a.withConfig({
+const StyledExerciseSubmitHistoryOutputImageLink = styled.a.withConfig({
   componentId: "sc-uooiby-6"
 })(["display:block;margin:9.8px 0;padding:0;width:100%;max-width:400px;"]);
-var StyledExerciseSubmitHistoryOutputImage = styled.img.withConfig({
+const StyledExerciseSubmitHistoryOutputImage = styled.img.withConfig({
   componentId: "sc-uooiby-7"
 })(["display:block;width:100%;"]);
 

package/es/components/material-exercise/exercise-submit-history/ExerciseSubmitHistoryOutput.js

@@ -1,4 +1,3 @@
-import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React from 'react';
 import { getOrgMaterialExerciseExerciseRunningOutputGet } from '@elice/api-client';
 import { ResizableNext, Text } from '@elice/blocks';
@@ -6,48 +5,47 @@ import FileSaver from 'file-saver';
 import { MATERIAL_RESIZABLE_COMMON_PROPS } from '../../../constants/stylesheets.js';
 import { StyledExerciseSubmitHistoryOutput, StyledExerciseSubmitHistoryOutputText, StyledExerciseSubmitHistoryOutputImageLink, StyledExerciseSubmitHistoryOutputImage } from './ExerciseSubmitHistory.styled.js';
 
-var ExerciseSubmitHistoryOutput = function ExerciseSubmitHistoryOutput(_ref) {
-  var exerciseRunningId = _ref.exerciseRunningId;
-  var _React$useState = React.useState([]),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    runningOutput = _React$useState2[0],
-    setRunningOutput = _React$useState2[1];
-  React.useEffect(function () {
+const ExerciseSubmitHistoryOutput = ({
+  exerciseRunningId
+}) => {
+  const [runningOutput, setRunningOutput] = React.useState([]);
+  React.useEffect(() => {
     if (exerciseRunningId) {
       getOrgMaterialExerciseExerciseRunningOutputGet({
-        exerciseRunningId: exerciseRunningId
-      }).then(function (_ref2) {
-        var output = _ref2.output;
+        exerciseRunningId
+      }).then(({
+        output
+      }) => {
         setRunningOutput(output);
       }).catch(console.error);
     }
   }, [exerciseRunningId]);
-  var downloadFile = function downloadFile(fileContent, fileName) {
-    var byteString = atob(fileContent.split(',')[1]);
-    var mimeString = fileContent.split(',')[0].split(':')[1].split(';')[0];
-    var ab = new ArrayBuffer(byteString.length);
-    var ia = new Uint8Array(ab);
-    for (var i = 0; i < byteString.length; i++) {
+  const downloadFile = (fileContent, fileName) => {
+    const byteString = atob(fileContent.split(',')[1]);
+    const mimeString = fileContent.split(',')[0].split(':')[1].split(';')[0];
+    const ab = new ArrayBuffer(byteString.length);
+    const ia = new Uint8Array(ab);
+    for (let i = 0; i < byteString.length; i++) {
       ia[i] = byteString.charCodeAt(i);
     }
-    var blob = new Blob([ab], {
+    const blob = new Blob([ab], {
       type: mimeString
     });
     FileSaver.saveAs(blob, fileName);
   };
-  var openImageWithNewTab = function openImageWithNewTab(imgSrc) {
-    var materialImageTab = window.open('about:blank', '_blank');
-    materialImageTab === null || materialImageTab === void 0 ? void 0 : materialImageTab.document.write("<img src=".concat(imgSrc, " />"));
+  const openImageWithNewTab = imgSrc => {
+    const materialImageTab = window.open('about:blank', '_blank');
+    materialImageTab === null || materialImageTab === void 0 ? void 0 : materialImageTab.document.write(`<img src=${imgSrc} />`);
     materialImageTab === null || materialImageTab === void 0 ? void 0 : materialImageTab.focus();
   };
-  var renderContent = function renderContent() {
+  const renderContent = () => {
     if (runningOutput.length === 0) {
       return React.createElement(Text, {
         size: "small",
         role: "white"
       }, "\uCD9C\uB825 \uC5C6\uC74C");
     }
-    var getOutputContent = function getOutputContent(output) {
+    const getOutputContent = output => {
       switch (output.type) {
         case 'text':
         case 'echo':
@@ -62,28 +60,24 @@ var ExerciseSubmitHistoryOutput = function ExerciseSubmitHistoryOutput(_ref) {
           }, output.data);
         case 'image':
           return React.createElement(StyledExerciseSubmitHistoryOutputImageLink, {
-            onClick: function onClick() {
-              return openImageWithNewTab(output.data);
-            }
+            onClick: () => openImageWithNewTab(output.data)
           }, React.createElement(StyledExerciseSubmitHistoryOutputImage, {
             src: output.data,
             alt: "material-exercise-ouput"
           }));
         case 'file':
-          var fileName = output.data.split(';')[0];
+          const fileName = output.data.split(';')[0];
           // const fileContent = output.data.substring(fileName.length + 1);
-          var fileContent = 'asdf';
+          const fileContent = 'asdf';
           return React.createElement(StyledExerciseSubmitHistoryOutputText, {
             className: "file",
-            onClick: function onClick() {
-              return downloadFile(fileContent, fileName);
-            }
-          }, "Download ".concat(fileName));
+            onClick: () => downloadFile(fileContent, fileName)
+          }, `Download ${fileName}`);
         case 'html':
-          var encodedData = encodeURI(output.data);
+          const encodedData = encodeURI(output.data);
           return React.createElement("iframe", {
             title: "mat-exec-output",
-            src: "data:text/html;charset=utf-8,".concat(encodedData)
+            src: `data:text/html;charset=utf-8,${encodedData}`
           });
         case 'screen':
         case 'score':
@@ -92,9 +86,7 @@ var ExerciseSubmitHistoryOutput = function ExerciseSubmitHistoryOutput(_ref) {
           return null;
       }
     };
-    return runningOutput.map(function (item) {
-      return getOutputContent(item);
-    });
+    return runningOutput.map(item => getOutputContent(item));
   };
   return React.createElement(ResizableNext, Object.assign({}, MATERIAL_RESIZABLE_COMMON_PROPS, {
     initialHeight: 200,