@elice/material-exercise 1.220803.0

package/es/hooks/useUsercodeEditWebSocket.js

@@ -0,0 +1,597 @@
+import { useRef, useState, useMemo, useCallback, useEffect } from 'react';
+import { useDeepCompareEffect } from 'react-use';
+import { config, getOrgUserGet, postOrgMaterialExerciseUsercodeEdit } from '@elice/api-client';
+import { useMaterialConfig, useMaterialConfigApiClientUpdate } from '@elice/material-shared-utils';
+import { EliceWebSocket } from '@elice/websocket';
+import { camelizeKeys } from 'humps';
+import debounce from 'lodash/debounce';
+import { type } from 'ot-text-unicode';
+import randomWords from 'random-words';
+import { uniCount, uniToStrPos } from 'unicount';
+
+//
+//
+
+const 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); //
+  // =============== 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'
+    });
+  }), [clients, cursors]);
+  /**
+   * Update client to list.
+   */
+
+  const updateClient = (userAccesskey, userId) => {
+    var _a;
+
+    if (userAccesskey === ((_a = myself.current) === null || _a === void 0 ? void 0 : _a.accesskey)) {
+      return;
+    }
+
+    setClients(prev => {
+      if (prev[userAccesskey]) {
+        return prev;
+      }
+
+      return Object.assign(Object.assign({}, prev), {
+        [userAccesskey]: {
+          id: userId,
+          accesskey: userAccesskey
+        }
+      });
+    });
+  };
+  /**
+   * Remove client from list.
+   */
+
+
+  const removeClient = userAccesskey => {
+    setClients(prev => {
+      const next = Object.assign({}, prev);
+      delete next[userAccesskey];
+      return next;
+    });
+  };
+  /**
+   *
+   */
+
+
+  const 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
+    }));
+  };
+  /**
+   *
+   */
+
+
+  const updateCursorFromOts = ots => {
+    setCursors(Object.entries(cursors).map(([userAccesskey, cursor]) => ({
+      [userAccesskey]: {
+        from: type.transformSelection(cursor.from, ots),
+        to: type.transformSelection(cursor.to, ots)
+      }
+    })).reduce((prev, next) => Object.assign(Object.assign({}, prev), next), {}));
+  };
+  /**
+   *
+   */
+
+
+  const removeCursor = userAccesskey => {
+    setCursors(prev => {
+      const next = Object.assign({}, prev);
+      delete next[userAccesskey];
+      return next;
+    });
+  }; //
+  // Fetch client user info, whenever client list changed.
+  //
+
+
+  useDeepCompareEffect(() => {
+    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));
+    });
+  }, [clients]); //
+  // =============== send message ===============
+  //
+
+  /**
+   * Send `RESET`.
+   */
+
+  const sendReset = () => {
+    var _a;
+
+    (_a = websocket.current) === null || _a === void 0 ? void 0 : _a.sendJson({
+      type: 'RESET'
+    });
+  };
+  /**
+   * Send `FETCH`.
+   */
+
+
+  const sendFetch = useCallback(debounce(() => {
+    var _a;
+
+    (_a = websocket.current) === null || _a === void 0 ? void 0 : _a.sendJson({
+      type: 'FETCH',
+      from: version.current
+    });
+  }, 1000), []);
+  /**
+   * Send `WRITE`.
+   */
+
+  const sendWrite = useCallback(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), []);
+  /**
+   * Send `CURSOR`.
+   */
+
+  const sendCursor = useCallback(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), []);
+  /**
+   * Send OTs.
+   */
+
+  const sendOTs = useCallback(ots => {
+    setDoc(type.apply(_doc.current, ots));
+    _doc.current = type.apply(_doc.current, ots);
+    otsBuffer.current.push(ots);
+    sendWrite();
+  }, [sendWrite]); //
+  // =============== usercode ===============
+  //
+
+  /**
+   *
+   */
+
+  const usercodeApply = (newVersion, ots) => {
+    version.current = newVersion;
+    let conflictOts = [];
+
+    for (let 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;
+    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] = [];
+      }
+
+      otsBuffer.current[otsBuffer.current.length - 1] = type.transform(conflictOts, ots, 'right');
+    }
+
+    sendWrite(); // update display cursors
+
+    updateCursorFromOts(ots);
+  }; //
+  // =============== websocket ===============
+  //
+
+  /**
+   * Websocket on open.
+   */
+
+
+  const wsOpen = () => {
+    if (websocket.current) {
+      setWebSocketReadyState(websocket.current.readyState);
+    }
+  };
+  /**
+   * Websocket on close.
+   */
+
+
+  const wsClose = () => {
+    _stopMonkey();
+
+    if (websocket.current) {
+      setWebSocketReadyState(websocket.current.readyState);
+    }
+  };
+  /**
+   * Websocket on error.
+   */
+
+
+  const wsError = () => {
+    if (websocket.current) {
+      setWebSocketReadyState(websocket.current.readyState);
+    }
+  };
+  /**
+   * Websocket on message.
+   */
+
+
+  const wsMessage = e => {
+    const msg = camelizeKeys(e.data);
+
+    switch (msg.type) {
+      case 'INIT':
+        wsMessageInit(msg);
+        break;
+
+      case 'ENTER':
+        wsMessageEnter(msg);
+        break;
+
+      case 'LEAVE':
+        wsMessageLeave(msg);
+        break;
+
+      case 'UPDATE':
+        wsMessageUpdate(msg);
+        break;
+
+      case 'WRITE_FAILED':
+        wsMessageWriteFailed();
+        break;
+
+      case 'WRITE_SUCCEED':
+        wsMessageWriteSucceed(msg);
+        break;
+
+      case 'WRITE_NOTI':
+        wsMessageWriteNoti(msg);
+        break;
+
+      case 'CURSOR_NOTI':
+        wsMessageCursorNoti(msg);
+        break;
+    }
+  };
+  /**
+   * Websocket on `INIT` message.
+   */
+
+
+  const wsMessageInit = msg => {
+    setDocEditable(true);
+    myself.current = {
+      userId: msg.userId,
+      accesskey: msg.accesskey
+    };
+    version.current = msg.version;
+    otsBuffer.current = [];
+    writeIndex.current = 0;
+    writeFailCount.current = 0; // TODO: set unix mode on both editors.
+    // editor.getSession().getDocument().setNewLineMode('unix');
+
+    const convertedContent = msg.content.replace(/\r\n/g, '\n');
+    setDoc(convertedContent);
+    _doc.current = convertedContent;
+    onInit(convertedContent);
+
+    if (msg.content !== convertedContent) {
+      otsBuffer.current.push([{
+        d: msg.content
+      }]);
+      otsBuffer.current.push([convertedContent]);
+      sendWrite();
+    }
+  };
+  /**
+   * Websocket on `ENTER` message.
+   */
+
+
+  const wsMessageEnter = msg => {
+    const [userId, userAccesskey] = msg.client;
+    updateClient(userAccesskey, userId);
+  };
+  /**
+   * Websocket on `LEAVE` message.
+   */
+
+
+  const wsMessageLeave = msg => {
+    const [, userAccesskey] = msg.client;
+    removeClient(userAccesskey);
+    removeCursor(userAccesskey);
+  };
+  /**
+   * Websocket on `UPDATE` message.
+   */
+
+
+  const wsMessageUpdate = msg => {
+    if (msg.from === version.current) {
+      usercodeApply(msg.version, msg.ots);
+    } else if (msg.from < version.current) {
+      sendFetch();
+    }
+  };
+  /**
+   * Websocket on `WRITE_FAILED` message.
+   */
+
+
+  const wsMessageWriteFailed = msg => {
+    writeIndex.current = 0;
+    writeFailCount.current += 1;
+
+    if (MAX_WRITE_FAIL_COUNT < writeFailCount.current) {
+      sendReset();
+    } else {
+      sendFetch();
+    }
+  };
+  /**
+   * Websocket on `WRITE_SUCCEED` message.
+   */
+
+
+  const wsMessageWriteSucceed = msg => {
+    version.current = msg.version;
+    otsBuffer.current.splice(0, writeIndex.current);
+    writeIndex.current = 0;
+    writeFailCount.current = 0;
+    updateCursorFromOts(msg.ots);
+  };
+  /**
+   * Websocket on `WRITE_NOTI` message.
+   */
+
+
+  const wsMessageWriteNoti = msg => {
+    if (version.current + 1 === msg.version) {
+      usercodeApply(msg.version, msg.ots);
+    } else if (version.current < msg.version) {
+      sendFetch();
+    }
+  };
+  /**
+   * Websocket on `CURSOR_NOTI` message.
+   */
+
+
+  const wsMessageCursorNoti = msg => {
+    const [userId, userAccesskey] = msg.client;
+    updateClient(userAccesskey, userId);
+    updateCursor(userAccesskey, {
+      from: msg.cursorStart,
+      to: msg.cursorEnd
+    });
+  };
+  /**
+   * 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);
+      }
+
+      throw new Error(((_b = err.detail) === null || _b === void 0 ? void 0 : _b.failMessage) || err.message);
+    });
+  }, [apiWsOriginUrl, exerciseRoomId, filename]); //
+  // Initialize websocket.
+  //
+
+  useEffect(() => {
+    if (!isReady) {
+      return;
+    }
+
+    websocket.current = new EliceWebSocket(createUsercodeUrl);
+    websocket.current.onopen = wsOpen;
+    websocket.current.onclose = wsClose;
+    websocket.current.onmessage = wsMessage;
+    websocket.current.onerror = wsError;
+    return () => {
+      if (websocket.current) {
+        websocket.current.close();
+      }
+    };
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [isReady, createUsercodeUrl]); //
+  // =============== monkey ===============
+  //
+
+  /**
+   * Make monkey jump.
+   * @note only for testing
+   */
+
+  const _monkeyAgentDoJump = useCallback(() => {
+    const getRandomInt = function (max) {
+      return Math.floor(Math.random() * max);
+    };
+
+    const emojis = ['🦝', '🙈', '🙉', '🙊', '🐵', '🐒', '🦹🏼', '🧛🏾', '👨‍👧‍👦'];
+
+    const getRandomEmoji = () => {
+      return emojis[getRandomInt(emojis.length)];
+    };
+
+    const uniTextLength = uniCount(_doc.current);
+    const uniPos = Math.floor(Math.random() * uniTextLength); // add text
+
+    if (Math.random() < 0.5) {
+      const randomNumber = Math.random();
+      let text = '';
+
+      if (randomNumber < 1 / 3) {
+        text = getRandomEmoji();
+      } else if (randomNumber < 2 / 3) {
+        text = randomWords(2).join(' ');
+      } else {
+        text = '\n';
+      }
+
+      onWriteNoti([uniPos, text], true);
+    } // delete text
+    else {
+      let uniTextTo = uniPos + getRandomInt(10);
+
+      if (uniTextTo >= uniTextLength) {
+        uniTextTo = uniTextLength - 1;
+      }
+
+      if (uniPos) onWriteNoti([uniPos, {
+        d: _doc.current.slice(uniToStrPos(_doc.current, uniPos), uniToStrPos(_doc.current, uniTextTo))
+      }], true);
+    }
+
+    setNumMonkeyJumped(mj => mj + 1);
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  []);
+  /**
+   * Make monkey jump.
+   * @note only for testing
+   */
+
+
+  const _startMonkey = useCallback(() => {
+    setNumMonkeyJumped(0);
+
+    _setMonkeyAgent(window.setInterval(_monkeyAgentDoJump, 500));
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  []);
+  /**
+   * Stop monkey jump.
+   * @note only for testing
+   */
+
+
+  const _stopMonkey = useCallback(() => {
+    if (_monkeyAgent) {
+      window.clearInterval(_monkeyAgent);
+
+      _setMonkeyAgent(0);
+    }
+  }, [_monkeyAgent]); //
+  //
+  //
+
+
+  _return.current.doc = doc;
+  _return.current.docEditable = docEditable;
+  _return.current.readyState = websocketReadyState;
+  _return.current.markers = markers;
+  _return.current.sendOTs = sendOTs;
+  _return.current.sendCursor = sendCursor;
+  _return.current._startMonkey = _startMonkey;
+  _return.current._stopMonkey = _stopMonkey;
+  _return.current._isMonkeyRunning = _monkeyAgent > 0;
+  _return.current._numMonkeyJumped = _numMonkeyJumped;
+  return _return.current;
+};
+
+export { useUsercodeEditWebSocket };

package/es/hooks/useUsercodeHistory.d.ts

@@ -0,0 +1,9 @@
+export declare const useUsercodeHistory: (exerciseRoomId: number, filename: string | null) => {
+    doc: string;
+    ops: any[];
+    version: number | undefined;
+    latestVersion: number | undefined;
+    hasMoreVersion: boolean;
+    changeVersion: (selectedVersion: number) => void;
+    loadMoreVersions: () => Promise<void>;
+};