@elice/material-exercise 1.240718.0-trasncript.2 → 1.240718.1

package/es/components/material-exercise/exercise-runner/ExerciseRunnerControllerCodeHelpRequestButton.js

@@ -1,5 +1,3 @@
-import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import { Button, Tooltip, Icon, Flex, BadgeNext, Text, Hspace, IconButton } from '@elice/blocks';
 import { eilArrowRightwardsBasic, eilMathsignMultiplyBasic } from '@elice/icons';
@@ -12,23 +10,20 @@ import '../context/recoilTypes.js';
 import '../context/subjects.js';
 import '../context/ExerciseProvider.js';
 
-var ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_KEY = 'elice-material-exercise-aibot-tooltip-hidden';
-var ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_VALUE = 'true';
-var StyledControllerButton = styled(Button).withConfig({
+const ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_KEY = 'elice-material-exercise-aibot-tooltip-hidden';
+const ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_VALUE = 'true';
+const StyledControllerButton = styled(Button).withConfig({
   componentId: "sc-10grd0k-0"
 })(["position:relative;transition:none;"]);
-var ExerciseRunnerControllerCodeHelpRequestButton = React.forwardRef(function (props, ref) {
-  var intl = useRawEliceIntl();
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    isTooltipHidden = _React$useState2[0],
-    setIsTooltipHidden = _React$useState2[1];
-  var isAibotInfoEnabled = useRecoilValue(exerciseAibotInfoEnableState);
+const ExerciseRunnerControllerCodeHelpRequestButton = React.forwardRef((props, ref) => {
+  const intl = useRawEliceIntl();
+  const [isTooltipHidden, setIsTooltipHidden] = React.useState(false);
+  const isAibotInfoEnabled = useRecoilValue(exerciseAibotInfoEnableState);
   //
   //
   //
-  React.useEffect(function () {
-    var isTooltipHidden = sessionStorage.getItem(ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_KEY) === ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_VALUE;
+  React.useEffect(() => {
+    const isTooltipHidden = sessionStorage.getItem(ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_KEY) === ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_VALUE;
     if (isTooltipHidden) {
       setIsTooltipHidden(true);
       return;
@@ -40,59 +35,53 @@ var ExerciseRunnerControllerCodeHelpRequestButton = React.forwardRef(function (p
   /**
    *
    */
-  var renderAiBotTooltipTitle = function renderAiBotTooltipTitle() {
-    return jsxs(Flex, {
-      align: "center",
-      children: [jsx(BadgeNext, {
-        role: "red",
-        children: jsx(Text, {
-          role: "white",
-          size: "tiny",
-          bold: true,
-          children: "NEW"
-        })
-      }), jsx(Hspace, {
-        width: 0.625
-      }), jsx(Text, {
-        role: "gray9",
-        size: "small",
-        bold: true,
-        children: intl.formatMessage({
-          id: 'exerciseRunner.controller.buttonGroup.button.tooltip.aiHelp'
-        })
-      }), jsx(Hspace, {
-        width: 0.625
-      }), jsx(IconButton, {
-        size: "tiny",
-        role: "primary",
-        hasPadding: false,
-        border: false,
-        icon: eilMathsignMultiplyBasic,
-        onClick: function onClick() {
-          sessionStorage.setItem(ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_KEY, ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_VALUE);
-          setIsTooltipHidden(true);
-        }
-      })]
-    });
+  const renderAiBotTooltipTitle = () => {
+    return React.createElement(Flex, {
+      align: "center"
+    }, React.createElement(BadgeNext, {
+      role: "red"
+    }, React.createElement(Text, {
+      role: "white",
+      size: "tiny",
+      bold: true
+    }, "NEW")), React.createElement(Hspace, {
+      width: 0.625
+    }), React.createElement(Text, {
+      role: "gray9",
+      size: "small",
+      bold: true
+    }, intl.formatMessage({
+      id: 'exerciseRunner.controller.buttonGroup.button.tooltip.aiHelp'
+    })), React.createElement(Hspace, {
+      width: 0.625
+    }), React.createElement(IconButton, {
+      size: "tiny",
+      role: "primary",
+      hasPadding: false,
+      border: false,
+      icon: eilMathsignMultiplyBasic,
+      onClick: () => {
+        sessionStorage.setItem(ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_KEY, ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_VALUE);
+        setIsTooltipHidden(true);
+      }
+    }));
   };
-  return isAibotInfoEnabled ? jsx(Tooltip, {
+  return isAibotInfoEnabled ? React.createElement(Tooltip, {
     placement: "top",
     dark: false,
     visible: !isTooltipHidden,
-    title: renderAiBotTooltipTitle(),
-    children: jsx(StyledControllerButton, Object.assign({}, props, {
-      ref: ref,
-      size: "tiny",
-      role: "darkblue",
-      icon: jsx(Icon, {
-        icon: eilArrowRightwardsBasic
-      }),
-      iconAlign: "right",
-      children: intl.formatMessage({
-        id: 'exerciseRunner.controller.buttonGroup.button.helpRequest'
-      })
-    }))
-  }) : null;
+    title: renderAiBotTooltipTitle()
+  }, React.createElement(StyledControllerButton, Object.assign({}, props, {
+    ref: ref,
+    size: "tiny",
+    role: "darkblue",
+    icon: React.createElement(Icon, {
+      icon: eilArrowRightwardsBasic
+    }),
+    iconAlign: "right"
+  }), intl.formatMessage({
+    id: 'exerciseRunner.controller.buttonGroup.button.helpRequest'
+  }))) : null;
 });
 
 export { ExerciseRunnerControllerCodeHelpRequestButton as default };

package/es/components/material-exercise/exercise-runner/ExerciseRunnerControllerRunningInfo.js

@@ -1,5 +1,3 @@
-import { slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { usePrevious } from 'react-use';
 import { getOrgCourseGet, getOrgMaterialExerciseExerciseRunningList } from '@elice/api-client';
@@ -18,48 +16,40 @@ import '../context/ExerciseProvider.js';
 //
 //
 //
-var StyledHr = styled(Hr).withConfig({
+const StyledHr = styled(Hr).withConfig({
   componentId: "sc-30ywzi-0"
 })(["height:2rem;"]);
-var StyledRunnerInfoTitle = styled.span.withConfig({
+const StyledRunnerInfoTitle = styled.span.withConfig({
   componentId: "sc-30ywzi-1"
 })(["display:block;color:", ";font-size:11px;line-height:1.25;"], base.color.navy3);
-var StyledRunnerInfoContent = styled.span.withConfig({
+const StyledRunnerInfoContent = styled.span.withConfig({
   componentId: "sc-30ywzi-2"
 })(["display:block;color:", ";font-size:12px;line-height:1.25;"], base.color.navy1);
 //
 //
 //
-var ExerciseRunnerControllerRunningInfo = function ExerciseRunnerControllerRunningInfo() {
-  var intl = useRawEliceIntl();
-  var _React$useContext = React.useContext(ExerciseContext),
-    materialExerciseId = _React$useContext.materialExerciseId,
-    exerciseRoomId = _React$useContext.exerciseRoomId,
-    onExerciseRunningDone = _React$useContext.onExerciseRunningDone,
-    onError = _React$useContext.onError;
-  var isRunning = useRecoilValue(exerciseRunnerRunningState);
-  var isPrevRunning = usePrevious(isRunning);
-  var isNoRunning = isPrevRunning === undefined;
-  var isRunningDone = isPrevRunning === true && !isRunning;
-  var exercise = useRecoilValue(exerciseState(materialExerciseId));
-  var user = useRecoilValue(exerciseUserState);
-  var _React$useState = React.useState(),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    course = _React$useState2[0],
-    setCourse = _React$useState2[1];
-  var _React$useState3 = React.useState(null),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    exerciseLastRunning = _React$useState4[0],
-    setExerciseLastRunning = _React$useState4[1];
-  var _React$useState5 = React.useState(null),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    exerciseLastSubmit = _React$useState6[0],
-    setExerciseLastSubmit = _React$useState6[1];
+const ExerciseRunnerControllerRunningInfo = () => {
+  const intl = useRawEliceIntl();
+  const {
+    materialExerciseId,
+    exerciseRoomId,
+    onExerciseRunningDone,
+    onError
+  } = React.useContext(ExerciseContext);
+  const isRunning = useRecoilValue(exerciseRunnerRunningState);
+  const isPrevRunning = usePrevious(isRunning);
+  const isNoRunning = isPrevRunning === undefined;
+  const isRunningDone = isPrevRunning === true && !isRunning;
+  const exercise = useRecoilValue(exerciseState(materialExerciseId));
+  const user = useRecoilValue(exerciseUserState);
+  const [course, setCourse] = React.useState();
+  const [exerciseLastRunning, setExerciseLastRunning] = React.useState(null);
+  const [exerciseLastSubmit, setExerciseLastSubmit] = React.useState(null);
   //
   // Get exercise running list.
   //
-  React.useEffect(function () {
-    var userId = user === null || user === void 0 ? void 0 : user.id;
+  React.useEffect(() => {
+    const userId = user === null || user === void 0 ? void 0 : user.id;
     if (!userId || !exercise || !exerciseRoomId) {
       return;
     }
@@ -69,36 +59,21 @@ var ExerciseRunnerControllerRunningInfo = function ExerciseRunnerControllerRunni
     if (!isNoRunning && !isRunningDone) {
       return;
     }
-    var abortCtrl = new AbortController();
-    var _fetch = /*#__PURE__*/function () {
-      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(runType) {
-        return _regeneratorRuntime().wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              return _context.abrupt("return", getOrgMaterialExerciseExerciseRunningList({
-                exerciseRoomId: exerciseRoomId,
-                filterRunType: runType,
-                offset: 0,
-                count: 1,
-                userId: userId
-              }, {
-                signal: abortCtrl.signal
-              }).then(function (res) {
-                return res.exerciseRunnings;
-              }).then(function (exerciseRunnings) {
-                var _a;
-                return (_a = exerciseRunnings[0]) !== null && _a !== void 0 ? _a : null;
-              }));
-            case 1:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee);
-      }));
-      return function _fetch(_x) {
-        return _ref.apply(this, arguments);
-      };
-    }();
+    const abortCtrl = new AbortController();
+    const _fetch = async runType => {
+      return getOrgMaterialExerciseExerciseRunningList({
+        exerciseRoomId,
+        filterRunType: runType,
+        offset: 0,
+        count: 1,
+        userId
+      }, {
+        signal: abortCtrl.signal
+      }).then(res => res.exerciseRunnings).then(exerciseRunnings => {
+        var _a;
+        return (_a = exerciseRunnings[0]) !== null && _a !== void 0 ? _a : null;
+      });
+    };
     Promise.all([
     // running
     // - if exercise is no submit grade, fetch only running
@@ -107,17 +82,14 @@ var ExerciseRunnerControllerRunningInfo = function ExerciseRunnerControllerRunni
     // submit
     // - if exercise is no submit grade, fetch nothing
     // - else, fetch submit
-    exercise.isNoSubmitGrade ? Promise.resolve(null) : _fetch(enums.ExerciseRunType.Grade)]).then(function (_ref2) {
-      var _ref3 = _slicedToArray(_ref2, 2),
-        exerciseLastRunning = _ref3[0],
-        exerciseLastSubmit = _ref3[1];
+    exercise.isNoSubmitGrade ? Promise.resolve(null) : _fetch(enums.ExerciseRunType.Grade)]).then(([exerciseLastRunning, exerciseLastSubmit]) => {
       setExerciseLastRunning(exerciseLastRunning);
       setExerciseLastSubmit(exerciseLastSubmit);
       // callback on running done (last running which includes submit)
       if (isRunningDone && typeof onExerciseRunningDone === 'function') {
         onExerciseRunningDone(exerciseLastRunning);
       }
-    }).catch(function (err) {
+    }).catch(err => {
       if (err.name === 'AbortError') {
         return;
       }
@@ -128,7 +100,7 @@ var ExerciseRunnerControllerRunningInfo = function ExerciseRunnerControllerRunni
         id: 'exerciseRunner.controller.runningInfo.error.fetch'
       }));
     });
-    return function () {
+    return () => {
       abortCtrl.abort();
     };
   },
@@ -137,93 +109,79 @@ var ExerciseRunnerControllerRunningInfo = function ExerciseRunnerControllerRunni
   //
   // Get course
   //
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (!exercise) {
       return;
     }
-    var abortCtrl = new AbortController();
+    const abortCtrl = new AbortController();
     getOrgCourseGet({
       courseId: exercise._courseId
     }, {
       signal: abortCtrl.signal
-    }).then(function (res) {
-      return res.course;
-    }).then(setCourse).catch(console.error);
-    return function () {
+    }).then(res => res.course).then(setCourse).catch(console.error);
+    return () => {
       abortCtrl.abort();
     };
   }, [exercise]);
   /**
    * Last running score.
    */
-  var renderRunningInfoLastSubmitScore = function renderRunningInfoLastSubmitScore() {
+  const renderRunningInfoLastSubmitScore = () => {
     if (exercise === null || exercise === void 0 ? void 0 : exercise.isNoSubmitGrade) {
       return null;
     }
     if (!course || course.courseType === enums.CourseType.Challenge) {
       return;
     }
-    return jsxs(Fragment, {
-      children: [jsxs(Flex, {
-        column: true,
-        justify: "center",
-        children: [jsx(StyledRunnerInfoTitle, {
-          children: intl.formatMessage({
-            id: 'exerciseRunner.controller.runningInfo.lastSubmitScore'
-          })
-        }), jsx(StyledRunnerInfoContent, {
-          children: typeof (exerciseLastSubmit === null || exerciseLastSubmit === void 0 ? void 0 : exerciseLastSubmit.score) === 'string' ? intl.formatMessage({
-            id: 'exerciseRunner.controller.runningInfo.score'
-          }, {
-            score: exerciseLastSubmit.score
-          }) : '--'
-        })]
-      }), jsx(StyledHr, {
-        color: base.color.navy6,
-        vertical: true,
-        marginStart: "0.5rem",
-        marginEnd: "0.5rem"
-      })]
-    });
+    return React.createElement(React.Fragment, null, React.createElement(Flex, {
+      column: true,
+      justify: "center"
+    }, React.createElement(StyledRunnerInfoTitle, null, intl.formatMessage({
+      id: 'exerciseRunner.controller.runningInfo.lastSubmitScore'
+    })), React.createElement(StyledRunnerInfoContent, null, typeof (exerciseLastSubmit === null || exerciseLastSubmit === void 0 ? void 0 : exerciseLastSubmit.score) === 'string' ? intl.formatMessage({
+      id: 'exerciseRunner.controller.runningInfo.score'
+    }, {
+      score: exerciseLastSubmit.score
+    }) : '--')), React.createElement(StyledHr, {
+      color: base.color.navy6,
+      vertical: true,
+      marginStart: "0.5rem",
+      marginEnd: "0.5rem"
+    }));
   };
   /**
    * Last submit time.
    */
-  var renderRunningInfoLastRunningTime = function renderRunningInfoLastRunningTime() {
+  const renderRunningInfoLastRunningTime = () => {
     if (!course || (course === null || course === void 0 ? void 0 : course.courseType) === enums.CourseType.Challenge) {
       return;
     }
-    return jsxs(Flex, {
+    return React.createElement(Flex, {
       column: true,
-      justify: "center",
-      children: [jsx(StyledRunnerInfoTitle, {
-        children: (exercise === null || exercise === void 0 ? void 0 : exercise.isNoSubmitGrade) ? intl.formatMessage({
-          id: 'exerciseRunner.controller.runningInfo.lastRunningDatetime'
-        }) : intl.formatMessage({
-          id: 'exerciseRunner.controller.runningInfo.lastSubmitDatetime'
-        })
-      }), jsx(StyledRunnerInfoContent, {
-        children: (exercise === null || exercise === void 0 ? void 0 : exercise.isNoSubmitGrade) ?
-        // last running
-        (exerciseLastRunning === null || exerciseLastRunning === void 0 ? void 0 : exerciseLastRunning.createdDatetime) ? intl.formatDate(exerciseLastRunning.createdDatetime, {
-          year: 'numeric',
-          month: '2-digit',
-          day: '2-digit',
-          hour: '2-digit',
-          minute: '2-digit',
-          second: '2-digit'
-        }) : '--' :
-        // last submit
-        (exerciseLastSubmit === null || exerciseLastSubmit === void 0 ? void 0 : exerciseLastSubmit.createdDatetime) ? intl.formatDate(exerciseLastSubmit.createdDatetime, {
-          year: 'numeric',
-          month: '2-digit',
-          day: '2-digit',
-          hour: '2-digit',
-          minute: '2-digit',
-          second: '2-digit'
-        }) : '--'
-      })]
-    });
+      justify: "center"
+    }, React.createElement(StyledRunnerInfoTitle, null, (exercise === null || exercise === void 0 ? void 0 : exercise.isNoSubmitGrade) ? intl.formatMessage({
+      id: 'exerciseRunner.controller.runningInfo.lastRunningDatetime'
+    }) : intl.formatMessage({
+      id: 'exerciseRunner.controller.runningInfo.lastSubmitDatetime'
+    })), React.createElement(StyledRunnerInfoContent, null, (exercise === null || exercise === void 0 ? void 0 : exercise.isNoSubmitGrade) ?
+    // last running
+    (exerciseLastRunning === null || exerciseLastRunning === void 0 ? void 0 : exerciseLastRunning.createdDatetime) ? intl.formatDate(exerciseLastRunning.createdDatetime, {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit'
+    }) : '--' :
+    // last submit
+    (exerciseLastSubmit === null || exerciseLastSubmit === void 0 ? void 0 : exerciseLastSubmit.createdDatetime) ? intl.formatDate(exerciseLastSubmit.createdDatetime, {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit'
+    }) : '--'));
   };
   //
   //
@@ -232,9 +190,7 @@ var ExerciseRunnerControllerRunningInfo = function ExerciseRunnerControllerRunni
   if (isRunning) {
     return null;
   }
-  return jsxs(Flex, {
-    children: [renderRunningInfoLastSubmitScore(), renderRunningInfoLastRunningTime()]
-  });
+  return React.createElement(Flex, null, renderRunningInfoLastSubmitScore(), renderRunningInfoLastRunningTime());
 };
 
 export { ExerciseRunnerControllerRunningInfo as default };

package/es/components/material-exercise/exercise-runner/ExerciseRunnerControllerStatusIndicator.js

@@ -1,9 +1,9 @@
 import { base } from '@elice/design-tokens';
 import styled from 'styled-components';
 
-var ExerciseRunnerControllerStatusIndicator = styled.div.withConfig({
+const ExerciseRunnerControllerStatusIndicator = styled.div.withConfig({
   componentId: "sc-15703mt-0"
-})(["margin-top:1px;margin-right:0.3rem;width:0.375rem;height:0.375rem;border-radius:50%;vertical-align:middle;background-color:", ";"], function (props) {
+})(["margin-top:1px;margin-right:0.3rem;width:0.375rem;height:0.375rem;border-radius:50%;vertical-align:middle;background-color:", ";"], props => {
   switch (props.status) {
     case 'success':
       return base.color.green8;

package/es/components/material-exercise/exercise-runner/ExerciseRunnerControllerStatusMessage.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
 import { Flex, Text } from '@elice/blocks';
 import { useRawEliceIntl } from '@elice/intl';
 import { EliceWebSocket } from '@elice/websocket';
@@ -11,16 +11,16 @@ import '../context/subjects.js';
 import '../context/ExerciseProvider.js';
 import ExerciseRunnerControllerStatusIndicator from './ExerciseRunnerControllerStatusIndicator.js';
 
-var StyledMessageWrapper = styled(Flex).withConfig({
+const StyledMessageWrapper = styled(Flex).withConfig({
   componentId: "sc-1yqi8o2-0"
 })(["height:1rem;"]);
-var ExerciseRunnerControllerStatusMessage = function ExerciseRunnerControllerStatusMessage() {
-  var intl = useRawEliceIntl();
-  var websocketStatus = useRecoilValue(exerciseRunnerWebSocketStatusQuery);
+const ExerciseRunnerControllerStatusMessage = () => {
+  const intl = useRawEliceIntl();
+  const websocketStatus = useRecoilValue(exerciseRunnerWebSocketStatusQuery);
   /**
    * Websocket state message.
    */
-  var getWebsocketStateMessage = function getWebsocketStateMessage() {
+  const getWebsocketStateMessage = () => {
     switch (websocketStatus) {
       case EliceWebSocket.OPEN:
         return intl.formatMessage({
@@ -40,17 +40,15 @@ var ExerciseRunnerControllerStatusMessage = function ExerciseRunnerControllerSta
   //
   //
   //
-  return jsxs(StyledMessageWrapper, {
-    align: "center",
-    children: [jsx(ExerciseRunnerControllerStatusIndicator, {
-      status: websocketStatus === EliceWebSocket.OPEN ? 'success' : websocketStatus === EliceWebSocket.CLOSED ? 'error' : 'warning'
-    }), jsx(Text, {
-      role: "gray3",
-      size: "tiny",
-      bold: true,
-      children: getWebsocketStateMessage()
-    })]
-  });
+  return React.createElement(StyledMessageWrapper, {
+    align: "center"
+  }, React.createElement(ExerciseRunnerControllerStatusIndicator, {
+    status: websocketStatus === EliceWebSocket.OPEN ? 'success' : websocketStatus === EliceWebSocket.CLOSED ? 'error' : 'warning'
+  }), React.createElement(Text, {
+    role: "gray3",
+    size: "tiny",
+    bold: true
+  }, getWebsocketStateMessage()));
 };
 
 export { ExerciseRunnerControllerStatusMessage as default };

package/es/components/material-exercise/exercise-runner/ExerciseRunnerControllerTimer.js

@@ -1,5 +1,3 @@
-import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import { jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { Text } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
@@ -12,27 +10,22 @@ import '../context/recoilTypes.js';
 import '../context/subjects.js';
 import '../context/ExerciseProvider.js';
 
-var StyledControllerTimerText = styled(Text).withConfig({
+const StyledControllerTimerText = styled(Text).withConfig({
   componentId: "sc-1ez8ns0-0"
 })(["margin-top:-3px;color:", ";"], base.color.secondary4);
-var ExerciseRunnerControllerTimer = function ExerciseRunnerControllerTimer() {
-  var intl = useRawEliceIntl();
-  var _React$useContext = React.useContext(ExerciseContext),
-    materialExerciseId = _React$useContext.materialExerciseId;
-  var exercise = useRecoilValue(exerciseState(materialExerciseId));
-  var isRunning = useRecoilValue(exerciseRunnerRunningState);
-  var _React$useState = React.useState(0),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    exerciseTimeLimit = _React$useState2[0],
-    setExerciseTimeLimit = _React$useState2[1];
-  var _React$useState3 = React.useState(0),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    remainingTime = _React$useState4[0],
-    setRemainingTime = _React$useState4[1];
+const ExerciseRunnerControllerTimer = () => {
+  const intl = useRawEliceIntl();
+  const {
+    materialExerciseId
+  } = React.useContext(ExerciseContext);
+  const exercise = useRecoilValue(exerciseState(materialExerciseId));
+  const isRunning = useRecoilValue(exerciseRunnerRunningState);
+  const [exerciseTimeLimit, setExerciseTimeLimit] = React.useState(0);
+  const [remainingTime, setRemainingTime] = React.useState(0);
   //
   // Get time limit from exercise.
   //
-  React.useEffect(function () {
+  React.useEffect(() => {
     var _a, _b;
     if (isRunning) {
       setExerciseTimeLimit((_b = (_a = exercise === null || exercise === void 0 ? void 0 : exercise.readyExerciseImage) === null || _a === void 0 ? void 0 : _a.timeLimit) !== null && _b !== void 0 ? _b : 0);
@@ -43,17 +36,17 @@ var ExerciseRunnerControllerTimer = function ExerciseRunnerControllerTimer() {
   //
   // Calculate remaining time.
   //
-  React.useEffect(function () {
-    var startTime = Date.now();
+  React.useEffect(() => {
+    const startTime = Date.now();
     setRemainingTime(exerciseTimeLimit);
-    var interval = window.setInterval(function () {
-      var newRemainingTime = exerciseTimeLimit - (Date.now() - startTime);
+    const interval = window.setInterval(() => {
+      const newRemainingTime = exerciseTimeLimit - (Date.now() - startTime);
       if (newRemainingTime < 0) {
         window.clearInterval(interval);
       }
       setRemainingTime(Math.max(newRemainingTime, 0));
     }, 100);
-    return function () {
+    return () => {
       setRemainingTime(0);
       window.clearInterval(interval);
     };
@@ -64,14 +57,13 @@ var ExerciseRunnerControllerTimer = function ExerciseRunnerControllerTimer() {
   if (!remainingTime) {
     return null;
   }
-  return jsx(StyledControllerTimerText, {
-    size: "small",
-    children: intl.formatMessage({
-      id: 'exerciseRunner.controller.timer.runningRemainingTime'
-    }, {
-      remainingTime: new Date(remainingTime).toISOString().substr(14, 5)
-    })
-  });
+  return React.createElement(StyledControllerTimerText, {
+    size: "small"
+  }, intl.formatMessage({
+    id: 'exerciseRunner.controller.timer.runningRemainingTime'
+  }, {
+    remainingTime: new Date(remainingTime).toISOString().substr(14, 5)
+  }));
 };
 
 export { ExerciseRunnerControllerTimer as default };