@elice/material-exercise 1.240718.3 → 1.240719.1

package/es/hooks/useUsercodeEditWebSocket.js

@@ -1,3 +1,4 @@
+import { slicedToArray as _slicedToArray, defineProperty as _defineProperty, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { useRef, useState, useMemo, useCallback, useEffect } from 'react';
 import { useDeepCompareEffect } from 'react-use';
 import { config, getOrgUserGet, postOrgMaterialExerciseUsercodeEdit } from '@elice/api-client';
@@ -12,74 +13,100 @@ import { uniCount, uniToStrPos } from 'unicount';
 //
 //
 //
-const MAX_WRITE_FAIL_COUNT = 5;
+var MAX_WRITE_FAIL_COUNT = 5;
 /**
  *
  */
-const useUsercodeEditWebSocket = ({
-  exerciseRoomId,
-  filename,
-  onInit,
-  onWriteNoti
-}) => {
-  const _return = useRef({});
-  const {
-    apiWsOriginUrl
-  } = useMaterialConfig();
-  const isReady = useMaterialConfigApiClientUpdate(config.init);
-  const websocket = useRef(null);
-  const [websocketReadyState, setWebSocketReadyState] = useState(EliceWebSocket.CLOSED);
-  const [doc, setDoc] = useState('');
-  const [docEditable, setDocEditable] = useState(true);
-  const _doc = useRef('');
-  const [clients, setClients] = useState({});
-  const [cursors, setCursors] = useState({});
-  const myself = useRef(null);
-  const version = useRef(-1);
-  const otsBuffer = useRef([]);
-  const writeIndex = useRef(0);
-  const writeFailCount = useRef(0);
-  const [_monkeyAgent, _setMonkeyAgent] = useState(0);
-  const [_numMonkeyJumped, setNumMonkeyJumped] = useState(0);
+var useUsercodeEditWebSocket = function useUsercodeEditWebSocket(_ref) {
+  var exerciseRoomId = _ref.exerciseRoomId,
+    filename = _ref.filename,
+    onInit = _ref.onInit,
+    onWriteNoti = _ref.onWriteNoti;
+  var _return = useRef({});
+  var _useMaterialConfig = useMaterialConfig(),
+    apiWsOriginUrl = _useMaterialConfig.apiWsOriginUrl;
+  var isReady = useMaterialConfigApiClientUpdate(config.init);
+  var websocket = useRef(null);
+  var _useState = useState(EliceWebSocket.CLOSED),
+    _useState2 = _slicedToArray(_useState, 2),
+    websocketReadyState = _useState2[0],
+    setWebSocketReadyState = _useState2[1];
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    doc = _useState4[0],
+    setDoc = _useState4[1];
+  var _useState5 = useState(true),
+    _useState6 = _slicedToArray(_useState5, 2),
+    docEditable = _useState6[0],
+    setDocEditable = _useState6[1];
+  var _doc = useRef('');
+  var _useState7 = useState({}),
+    _useState8 = _slicedToArray(_useState7, 2),
+    clients = _useState8[0],
+    setClients = _useState8[1];
+  var _useState9 = useState({}),
+    _useState10 = _slicedToArray(_useState9, 2),
+    cursors = _useState10[0],
+    setCursors = _useState10[1];
+  var myself = useRef(null);
+  var version = useRef(-1);
+  var otsBuffer = useRef([]);
+  var writeIndex = useRef(0);
+  var writeFailCount = useRef(0);
+  var _useState11 = useState(0),
+    _useState12 = _slicedToArray(_useState11, 2),
+    _monkeyAgent = _useState12[0],
+    _setMonkeyAgent = _useState12[1];
+  var _useState13 = useState(0),
+    _useState14 = _slicedToArray(_useState13, 2),
+    _numMonkeyJumped = _useState14[0],
+    setNumMonkeyJumped = _useState14[1];
   //
   // =============== clients and markers ===============
   //
   /**
    * Markers.
    */
-  const markers = useMemo(() => Object.entries(cursors).filter(([userAccesskey]) => Boolean(clients[userAccesskey])).map(([userAccesskey, cursor]) => {
-    const client = clients[userAccesskey];
-    return Object.assign(Object.assign(Object.assign({}, client), cursor), {
-      fullname: client.fullname || `User ${client.id}`,
-      email: client.email || 'none'
+  var markers = useMemo(function () {
+    return Object.entries(cursors).filter(function (_ref2) {
+      var _ref3 = _slicedToArray(_ref2, 1),
+        userAccesskey = _ref3[0];
+      return Boolean(clients[userAccesskey]);
+    }).map(function (_ref4) {
+      var _ref5 = _slicedToArray(_ref4, 2),
+        userAccesskey = _ref5[0],
+        cursor = _ref5[1];
+      var client = clients[userAccesskey];
+      return Object.assign(Object.assign(Object.assign({}, client), cursor), {
+        fullname: client.fullname || "User ".concat(client.id),
+        email: client.email || 'none'
+      });
     });
-  }), [clients, cursors]);
+  }, [clients, cursors]);
   /**
    * Update client to list.
    */
-  const updateClient = (userAccesskey, userId) => {
+  var updateClient = function updateClient(userAccesskey, userId) {
     var _a;
     if (userAccesskey === ((_a = myself.current) === null || _a === void 0 ? void 0 : _a.accesskey)) {
       return;
     }
-    setClients(prev => {
+    setClients(function (prev) {
       if (prev[userAccesskey]) {
         return prev;
       }
-      return Object.assign(Object.assign({}, prev), {
-        [userAccesskey]: {
-          id: userId,
-          accesskey: userAccesskey
-        }
-      });
+      return Object.assign(Object.assign({}, prev), _defineProperty({}, userAccesskey, {
+        id: userId,
+        accesskey: userAccesskey
+      }));
     });
   };
   /**
    * Remove client from list.
    */
-  const removeClient = userAccesskey => {
-    setClients(prev => {
-      const next = Object.assign({}, prev);
+  var removeClient = function removeClient(userAccesskey) {
+    setClients(function (prev) {
+      var next = Object.assign({}, prev);
       delete next[userAccesskey];
       return next;
     });
@@ -87,32 +114,37 @@ const useUsercodeEditWebSocket = ({
   /**
    *
    */
-  const updateCursor = (userAccesskey, cursor) => {
+  var updateCursor = function updateCursor(userAccesskey, cursor) {
     var _a;
     if (userAccesskey === ((_a = myself.current) === null || _a === void 0 ? void 0 : _a.accesskey)) {
       return;
     }
-    setCursors(prev => Object.assign(Object.assign({}, prev), {
-      [userAccesskey]: cursor
-    }));
+    setCursors(function (prev) {
+      return Object.assign(Object.assign({}, prev), _defineProperty({}, userAccesskey, cursor));
+    });
   };
   /**
    *
    */
-  const updateCursorFromOts = ots => {
-    setCursors(Object.entries(cursors).map(([userAccesskey, cursor]) => ({
-      [userAccesskey]: {
+  var updateCursorFromOts = function updateCursorFromOts(ots) {
+    setCursors(Object.entries(cursors).map(function (_ref6) {
+      var _ref7 = _slicedToArray(_ref6, 2),
+        userAccesskey = _ref7[0],
+        cursor = _ref7[1];
+      return _defineProperty({}, userAccesskey, {
         from: type.transformSelection(cursor.from, ots),
         to: type.transformSelection(cursor.to, ots)
-      }
-    })).reduce((prev, next) => Object.assign(Object.assign({}, prev), next), {}));
+      });
+    }).reduce(function (prev, next) {
+      return Object.assign(Object.assign({}, prev), next);
+    }, {}));
   };
   /**
    *
    */
-  const removeCursor = userAccesskey => {
-    setCursors(prev => {
-      const next = Object.assign({}, prev);
+  var removeCursor = function removeCursor(userAccesskey) {
+    setCursors(function (prev) {
+      var next = Object.assign({}, prev);
       delete next[userAccesskey];
       return next;
     });
@@ -120,22 +152,39 @@ const useUsercodeEditWebSocket = ({
   //
   // Fetch client user info, whenever client list changed.
   //
-  useDeepCompareEffect(() => {
+  useDeepCompareEffect(function () {
     void Promise.all(Object.entries(Object.assign({}, clients))
     // only user info not fetched...
-    .filter(([, client]) => !client.fullname).map(([userAccesskey, client]) => getOrgUserGet({
-      userId: client.id
-    }).then(res => res.user).then(user => ({
-      [userAccesskey]: Object.assign(Object.assign({}, client), {
-        fullname: user.fullname,
-        email: user.displayEmail
-      })
-    })).catch(() => ({
-      [userAccesskey]: Object.assign(Object.assign({}, client), {
-        fullname: `User ${client.id}`
-      })
-    })))).then(nextClientArr => nextClientArr.reduce((nextClients, client) => Object.assign(Object.assign({}, nextClients), client), {})).then(nextClients => {
-      setClients(prev => Object.assign(Object.assign({}, prev), nextClients));
+    .filter(function (_ref9) {
+      var _ref10 = _slicedToArray(_ref9, 2),
+        client = _ref10[1];
+      return !client.fullname;
+    }).map(function (_ref11) {
+      var _ref12 = _slicedToArray(_ref11, 2),
+        userAccesskey = _ref12[0],
+        client = _ref12[1];
+      return getOrgUserGet({
+        userId: client.id
+      }).then(function (res) {
+        return res.user;
+      }).then(function (user) {
+        return _defineProperty({}, userAccesskey, Object.assign(Object.assign({}, client), {
+          fullname: user.fullname,
+          email: user.displayEmail
+        }));
+      }).catch(function () {
+        return _defineProperty({}, userAccesskey, Object.assign(Object.assign({}, client), {
+          fullname: "User ".concat(client.id)
+        }));
+      });
+    })).then(function (nextClientArr) {
+      return nextClientArr.reduce(function (nextClients, client) {
+        return Object.assign(Object.assign({}, nextClients), client);
+      }, {});
+    }).then(function (nextClients) {
+      setClients(function (prev) {
+        return Object.assign(Object.assign({}, prev), nextClients);
+      });
     });
   }, [clients]);
   //
@@ -144,7 +193,7 @@ const useUsercodeEditWebSocket = ({
   /**
    * Send `RESET`.
    */
-  const sendReset = () => {
+  var sendReset = function sendReset() {
     var _a;
     (_a = websocket.current) === null || _a === void 0 ? void 0 : _a.sendJson({
       type: 'RESET'
@@ -153,50 +202,55 @@ const useUsercodeEditWebSocket = ({
   /**
    * Send `FETCH`.
    */
-  const sendFetch = useMemo(() => debounce(() => {
-    var _a;
-    (_a = websocket.current) === null || _a === void 0 ? void 0 : _a.sendJson({
-      type: 'FETCH',
-      from: version.current
-    });
-  }, 1000), []);
+  var sendFetch = useMemo(function () {
+    return debounce(function () {
+      var _a;
+      (_a = websocket.current) === null || _a === void 0 ? void 0 : _a.sendJson({
+        type: 'FETCH',
+        from: version.current
+      });
+    }, 1000);
+  }, []);
   /**
    * Send `WRITE`.
    */
-  const sendWrite = useMemo(() => debounce(() => {
-    var _a;
-    if (otsBuffer.current.length === 0 || writeIndex.current !== 0) {
-      return;
-    }
-    writeIndex.current = otsBuffer.current.length;
-    let ots = otsBuffer.current[0];
-    for (let i = 1; i < writeIndex.current; i++) {
-      ots = type.compose(ots, otsBuffer.current[i]);
-    }
-    (_a = websocket.current) === null || _a === void 0 ? void 0 : _a.sendJson({
-      type: 'WRITE',
-      to: version.current + 1,
-      ots: ots
-    });
-  }, 100), []);
+  var sendWrite = useMemo(function () {
+    return debounce(function () {
+      var _a;
+      if (otsBuffer.current.length === 0 || writeIndex.current !== 0) {
+        return;
+      }
+      writeIndex.current = otsBuffer.current.length;
+      var ots = otsBuffer.current[0];
+      for (var i = 1; i < writeIndex.current; i++) {
+        ots = type.compose(ots, otsBuffer.current[i]);
+      }
+      (_a = websocket.current) === null || _a === void 0 ? void 0 : _a.sendJson({
+        type: 'WRITE',
+        to: version.current + 1,
+        ots: ots
+      });
+    }, 100);
+  }, []);
   /**
    * Send `CURSOR`.
    */
-  const sendCursor = useMemo(() => debounce(({
-    from,
-    to
-  }) => {
-    var _a;
-    (_a = websocket.current) === null || _a === void 0 ? void 0 : _a.sendJson({
-      type: 'CURSOR',
-      cursor_start: from,
-      cursor_end: to
-    });
-  }, 500), []);
+  var sendCursor = useMemo(function () {
+    return debounce(function (_ref15) {
+      var from = _ref15.from,
+        to = _ref15.to;
+      var _a;
+      (_a = websocket.current) === null || _a === void 0 ? void 0 : _a.sendJson({
+        type: 'CURSOR',
+        cursor_start: from,
+        cursor_end: to
+      });
+    }, 500);
+  }, []);
   /**
    * Send OTs.
    */
-  const sendOTs = useCallback(ots => {
+  var sendOTs = useCallback(function (ots) {
     setDoc(type.apply(_doc.current, ots));
     _doc.current = type.apply(_doc.current, ots);
     otsBuffer.current.push(ots);
@@ -208,20 +262,20 @@ const useUsercodeEditWebSocket = ({
   /**
    *
    */
-  const usercodeApply = (newVersion, ots) => {
+  var usercodeApply = function usercodeApply(newVersion, ots) {
     version.current = newVersion;
-    let conflictOts = [];
-    for (let i = 0; i < otsBuffer.current.length; i++) {
+    var conflictOts = [];
+    for (var i = 0; i < otsBuffer.current.length; i++) {
       conflictOts = type.compose(conflictOts, otsBuffer.current[i]);
     }
-    const localOts = conflictOts.length > 0 ? type.transform(ots, conflictOts, 'left') : ots;
+    var localOts = conflictOts.length > 0 ? type.transform(ots, conflictOts, 'left') : ots;
     onWriteNoti(localOts, false);
     setDoc(type.apply(_doc.current, localOts));
     _doc.current = type.apply(_doc.current, localOts);
     if (conflictOts.length > 0) {
       // update ots buffer
-      for (let i = 0; i < otsBuffer.current.length - 1; i++) {
-        otsBuffer.current[i] = [];
+      for (var _i = 0; _i < otsBuffer.current.length - 1; _i++) {
+        otsBuffer.current[_i] = [];
       }
       otsBuffer.current[otsBuffer.current.length - 1] = type.transform(conflictOts, ots, 'right');
     }
@@ -235,7 +289,7 @@ const useUsercodeEditWebSocket = ({
   /**
    * Websocket on open.
    */
-  const wsOpen = () => {
+  var wsOpen = function wsOpen() {
     if (websocket.current) {
       setWebSocketReadyState(websocket.current.readyState);
     }
@@ -243,7 +297,7 @@ const useUsercodeEditWebSocket = ({
   /**
    * Websocket on close.
    */
-  const wsClose = () => {
+  var wsClose = function wsClose() {
     _stopMonkey();
     if (websocket.current) {
       setWebSocketReadyState(websocket.current.readyState);
@@ -252,7 +306,7 @@ const useUsercodeEditWebSocket = ({
   /**
    * Websocket on error.
    */
-  const wsError = () => {
+  var wsError = function wsError() {
     if (websocket.current) {
       setWebSocketReadyState(websocket.current.readyState);
     }
@@ -260,8 +314,8 @@ const useUsercodeEditWebSocket = ({
   /**
    * Websocket on message.
    */
-  const wsMessage = e => {
-    const msg = camelizeKeys(e.data);
+  var wsMessage = function wsMessage(e) {
+    var msg = camelizeKeys(e.data);
     switch (msg.type) {
       case 'INIT':
         wsMessageInit(msg);
@@ -292,7 +346,7 @@ const useUsercodeEditWebSocket = ({
   /**
    * Websocket on `INIT` message.
    */
-  const wsMessageInit = msg => {
+  var wsMessageInit = function wsMessageInit(msg) {
     setDocEditable(true);
     myself.current = {
       userId: msg.userId,
@@ -304,7 +358,7 @@ const useUsercodeEditWebSocket = ({
     writeFailCount.current = 0;
     // TODO: set unix mode on both editors.
     // editor.getSession().getDocument().setNewLineMode('unix');
-    const convertedContent = msg.content.replace(/\r\n/g, '\n');
+    var convertedContent = msg.content.replace(/\r\n/g, '\n');
     setDoc(convertedContent);
     _doc.current = convertedContent;
     onInit(convertedContent);
@@ -319,22 +373,25 @@ const useUsercodeEditWebSocket = ({
   /**
    * Websocket on `ENTER` message.
    */
-  const wsMessageEnter = msg => {
-    const [userId, userAccesskey] = msg.client;
+  var wsMessageEnter = function wsMessageEnter(msg) {
+    var _msg$client = _slicedToArray(msg.client, 2),
+      userId = _msg$client[0],
+      userAccesskey = _msg$client[1];
     updateClient(userAccesskey, userId);
   };
   /**
    * Websocket on `LEAVE` message.
    */
-  const wsMessageLeave = msg => {
-    const [, userAccesskey] = msg.client;
+  var wsMessageLeave = function wsMessageLeave(msg) {
+    var _msg$client2 = _slicedToArray(msg.client, 2),
+      userAccesskey = _msg$client2[1];
     removeClient(userAccesskey);
     removeCursor(userAccesskey);
   };
   /**
    * Websocket on `UPDATE` message.
    */
-  const wsMessageUpdate = msg => {
+  var wsMessageUpdate = function wsMessageUpdate(msg) {
     if (msg.from === version.current) {
       usercodeApply(msg.version, msg.ots);
     } else if (msg.from < version.current) {
@@ -344,7 +401,7 @@ const useUsercodeEditWebSocket = ({
   /**
    * Websocket on `WRITE_FAILED` message.
    */
-  const wsMessageWriteFailed = msg => {
+  var wsMessageWriteFailed = function wsMessageWriteFailed(msg) {
     writeIndex.current = 0;
     writeFailCount.current += 1;
     if (MAX_WRITE_FAIL_COUNT < writeFailCount.current) {
@@ -356,7 +413,7 @@ const useUsercodeEditWebSocket = ({
   /**
    * Websocket on `WRITE_SUCCEED` message.
    */
-  const wsMessageWriteSucceed = msg => {
+  var wsMessageWriteSucceed = function wsMessageWriteSucceed(msg) {
     version.current = msg.version;
     otsBuffer.current.splice(0, writeIndex.current);
     writeIndex.current = 0;
@@ -366,7 +423,7 @@ const useUsercodeEditWebSocket = ({
   /**
    * Websocket on `WRITE_NOTI` message.
    */
-  const wsMessageWriteNoti = msg => {
+  var wsMessageWriteNoti = function wsMessageWriteNoti(msg) {
     if (version.current + 1 === msg.version) {
       usercodeApply(msg.version, msg.ots);
     } else if (version.current < msg.version) {
@@ -376,8 +433,10 @@ const useUsercodeEditWebSocket = ({
   /**
    * Websocket on `CURSOR_NOTI` message.
    */
-  const wsMessageCursorNoti = msg => {
-    const [userId, userAccesskey] = msg.client;
+  var wsMessageCursorNoti = function wsMessageCursorNoti(msg) {
+    var _msg$client3 = _slicedToArray(msg.client, 2),
+      userId = _msg$client3[0],
+      userAccesskey = _msg$client3[1];
     updateClient(userAccesskey, userId);
     updateCursor(userAccesskey, {
       from: msg.cursorStart,
@@ -387,26 +446,40 @@ const useUsercodeEditWebSocket = ({
   /**
    * Create usercode websocket url.
    */
-  const createUsercodeUrl = useCallback(async () => {
-    if (!filename) {
-      throw new Error('filename is not defined');
-    }
-    const url = `${apiWsOriginUrl}/usercode_edit`;
-    return postOrgMaterialExerciseUsercodeEdit({
-      exerciseRoomId,
-      filename
-    }).then(data => `${url}/${data.accesskey}`).catch(err => {
-      var _a, _b;
-      if (((_a = err.detail) === null || _a === void 0 ? void 0 : _a.failCode) === 'non_editable_file') {
-        setDocEditable(false);
+  var createUsercodeUrl = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var url;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          if (filename) {
+            _context.next = 2;
+            break;
+          }
+          throw new Error('filename is not defined');
+        case 2:
+          url = "".concat(apiWsOriginUrl, "/usercode_edit");
+          return _context.abrupt("return", postOrgMaterialExerciseUsercodeEdit({
+            exerciseRoomId: exerciseRoomId,
+            filename: filename
+          }).then(function (data) {
+            return "".concat(url, "/").concat(data.accesskey);
+          }).catch(function (err) {
+            var _a, _b;
+            if (((_a = err.detail) === null || _a === void 0 ? void 0 : _a.failCode) === 'non_editable_file') {
+              setDocEditable(false);
+            }
+            throw new Error(((_b = err.detail) === null || _b === void 0 ? void 0 : _b.failMessage) || err.message);
+          }));
+        case 4:
+        case "end":
+          return _context.stop();
       }
-      throw new Error(((_b = err.detail) === null || _b === void 0 ? void 0 : _b.failMessage) || err.message);
-    });
-  }, [apiWsOriginUrl, exerciseRoomId, filename]);
+    }, _callee);
+  })), [apiWsOriginUrl, exerciseRoomId, filename]);
   //
   // Initialize websocket.
   //
-  useEffect(() => {
+  useEffect(function () {
     if (!isReady) {
       return;
     }
@@ -415,7 +488,7 @@ const useUsercodeEditWebSocket = ({
     websocket.current.onclose = wsClose;
     websocket.current.onmessage = wsMessage;
     websocket.current.onerror = wsError;
-    return () => {
+    return function () {
       if (websocket.current) {
         websocket.current.close();
       }
@@ -430,20 +503,20 @@ const useUsercodeEditWebSocket = ({
    * Make monkey jump.
    * @note only for testing
    */
-  const _monkeyAgentDoJump = useCallback(() => {
-    const getRandomInt = function (max) {
+  var _monkeyAgentDoJump = useCallback(function () {
+    var getRandomInt = function getRandomInt(max) {
       return Math.floor(Math.random() * max);
     };
-    const emojis = ['🦝', '🙈', '🙉', '🙊', '🐵', '🐒', '🦹🏼', '🧛🏾', '👨‍👧‍👦'];
-    const getRandomEmoji = () => {
+    var emojis = ['🦝', '🙈', '🙉', '🙊', '🐵', '🐒', '🦹🏼', '🧛🏾', '👨‍👧‍👦'];
+    var getRandomEmoji = function getRandomEmoji() {
       return emojis[getRandomInt(emojis.length)];
     };
-    const uniTextLength = uniCount(_doc.current);
-    const uniPos = Math.floor(Math.random() * uniTextLength);
+    var uniTextLength = uniCount(_doc.current);
+    var uniPos = Math.floor(Math.random() * uniTextLength);
     // add text
     if (Math.random() < 0.5) {
-      const randomNumber = Math.random();
-      let text = '';
+      var randomNumber = Math.random();
+      var text = '';
       if (randomNumber < 1 / 3) {
         text = getRandomEmoji();
       } else if (randomNumber < 2 / 3) {
@@ -455,7 +528,7 @@ const useUsercodeEditWebSocket = ({
     }
     // delete text
     else {
-      let uniTextTo = uniPos + getRandomInt(10);
+      var uniTextTo = uniPos + getRandomInt(10);
       if (uniTextTo >= uniTextLength) {
         uniTextTo = uniTextLength - 1;
       }
@@ -463,7 +536,9 @@ const useUsercodeEditWebSocket = ({
         d: _doc.current.slice(uniToStrPos(_doc.current, uniPos), uniToStrPos(_doc.current, uniTextTo))
       }], true);
     }
-    setNumMonkeyJumped(mj => mj + 1);
+    setNumMonkeyJumped(function (mj) {
+      return mj + 1;
+    });
   },
   // eslint-disable-next-line react-hooks/exhaustive-deps
   []);
@@ -471,7 +546,7 @@ const useUsercodeEditWebSocket = ({
    * Make monkey jump.
    * @note only for testing
    */
-  const _startMonkey = useCallback(() => {
+  var _startMonkey = useCallback(function () {
     setNumMonkeyJumped(0);
     _setMonkeyAgent(window.setInterval(_monkeyAgentDoJump, 500));
   },
@@ -481,7 +556,7 @@ const useUsercodeEditWebSocket = ({
    * Stop monkey jump.
    * @note only for testing
    */
-  const _stopMonkey = useCallback(() => {
+  var _stopMonkey = useCallback(function () {
     if (_monkeyAgent) {
       window.clearInterval(_monkeyAgent);
       _setMonkeyAgent(0);