refactor monaco editor and fix channels

Author: ReDBrother

services/app/apps/codebattle/assets/js/widgets/components/Editor.jsx

@@ -3,7 +3,6 @@
 
 // import cn from 'classnames';
 // import { registerRulesForLanguage } from 'monaco-ace-tokenizer';
-// import { initVimMode } from 'monaco-vim';
 // import PropTypes from 'prop-types';
 // import MonacoEditor from 'react-monaco-editor';
 
@@ -18,23 +17,19 @@ import {
 } from '../selectors/index';
 import { actions } from '../slices';
 
-import Editor from './Editor';
-
-class ExtendedEditor extends Editor {
+class ExtendedEditor {
   static propTypes = {
-    ...Editor.propTypes,
     monacoTheme: PropTypes.string,
     fontFamly: PropTypes.string || undefined,
   };
 
   static defaultProps = {
-    ...Editor.defaultProps,
     monacoTheme: 'default',
     fontFamly: undefined,
   }
 
   constructor(props) {
-    super(props);
+    // super(props);
 
     this.options = {
       fontFamily: props.fontFamily,

services/app/apps/codebattle/assets/js/widgets/components/ExtendedEditor.jsx

@@ -43,9 +43,11 @@ function InvitesContainer() {
 
   useEffect(() => {
     dispatch(initInvites(currentUserId));
-    const clearPresence = initPresence(followId)(dispatch);
+    const channel = initPresence(followId)(dispatch);
 
-    return clearPresence;
+    return () => {
+      channel.leave();
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

services/app/apps/codebattle/assets/js/widgets/components/InvitesContainer.jsx

@@ -1,4 +1,4 @@
 export default {
   default: 'default',
-  vim: 'vim',
+  // vim: 'vim',
 };

services/app/apps/codebattle/assets/js/widgets/config/editorModes.js

@@ -10,29 +10,53 @@ const nonChannelErrorMessage = "Socket channel wasn't initialize";
 const nonPresenceErrorMessage = "Socket channel presence wasn't initialize";
 
 export default class Channel {
+  topic;
+
   listeners = {};
 
   channel;
 
   presence;
 
   constructor(topic, params) {
+    if (!topic) {
+      return;
+    }
+    this.setupChannel(topic, params);
+  }
+
+  setupChannel(topic, params) {
     const channel = socket.channel(
       topic,
       decamelizeKeys(params, { separator: '_' }),
     );
 
+    this.topic = topic;
     this.channel = channel;
     this.presence = new Presence(channel);
+
+    Object.keys(this.listeners).forEach(listenerTopic => {
+      const listeners = this.listeners[listenerTopic];
+      if (listeners) {
+        const newListeners = listeners.map(listener => {
+          const { cb } = listener;
+          const ref = channel.on(listenerTopic, cb);
+
+          return { ...listener, ref };
+        });
+
+        this.listeners[listenerTopic] = newListeners;
+      }
+    });
+
+    return this;
   }
 
   addListener(topic, cb, params = {}) {
-    if (!this.channel) {
-      throw new Error(nonChannelErrorMessage);
-    }
-
     const currentListeners = this.listeners[topic];
-    const newRef = this.channel.on(topic, cb);
+    const newRef = this.channel
+      ? this.channel.on(topic, cb)
+      : null;
     const newListener = { ref: newRef, callback: cb, params };
 
     if (!currentListeners) {
@@ -44,11 +68,7 @@ export default class Channel {
     return this;
   }
 
-  clearListeners(topic, params) {
-    if (!this.channel) {
-      throw new Error(nonChannelErrorMessage);
-    }
-
+  removeListeners(topic, params) {
     if (!topic) {
       return this.clear();
     }
@@ -142,6 +162,7 @@ export default class Channel {
 
     const pushInstance = this.channel.leave(...params);
 
+    this.topic = undefined;
     this.channel = undefined;
     this.presence = undefined;
 

services/app/apps/codebattle/assets/js/widgets/middlewares/Channel.js

@@ -5,24 +5,22 @@ import capitalize from 'lodash/capitalize';
 import { channelMethods, channelTopics } from '../../socket';
 import { actions } from '../slices';
 import { getSystemMessage } from '../utils/chat';
-import getChatName from '../utils/names';
+import getChatTopic from '../utils/names';
 
 import Channel from './Channel';
 
 const isRecord = Gon.getAsset('is_record');
 
-const channel = isRecord ? null : new Channel(getChatName('channel'));
+const channel = new Channel();
 
 export const pushCommandTypes = {
   cleanBanned: 'clead_banned',
 };
 
-const establishChat = () => dispatch => {
-  const currentChannel = channel;
+const establishChat = page => dispatch => {
   const camelizeKeysAndDispatch = actionCreator => data => dispatch(actionCreator(camelizeKeys(data)));
 
-  currentChannel.join().receive('ok', data => {
-    const page = getChatName('page');
+  channel.join().receive('ok', data => {
     const greetingMessage = getSystemMessage({
       text: `Joined channel: ${capitalize(page)}`,
       status: 'success',
@@ -33,23 +31,25 @@ const establishChat = () => dispatch => {
     dispatch(actions.updateChatChannelState(true));
   });
 
-  currentChannel.onError(() => dispatch(actions.updateChatChannelState(false)));
+  channel.onError(() => dispatch(actions.updateChatChannelState(false)));
 
   const handleUserJoined = camelizeKeysAndDispatch(actions.userJoinedChat);
   const handleUserLeft = camelizeKeysAndDispatch(actions.userLeftChat);
   const handleNewMessage = camelizeKeysAndDispatch(actions.newChatMessage);
   const handleUserbanned = camelizeKeysAndDispatch(actions.banUserChat);
 
-  return currentChannel
+  return channel
     .addListener(channelTopics.chatUserJoinedTopic, handleUserJoined)
     .addListener(channelTopics.chatUserLeftTopic, handleUserLeft)
     .addListener(channelTopics.chatUserNewMsgTopic, handleNewMessage)
     .addListener(channelTopics.chatUserBannedTopic, handleUserbanned);
 };
 
-export const connectToChat = (useChat = true) => dispatch => {
+export const connectToChat = (useChat = true, chatPage = 'channel', chatId) => dispatch => {
   if (!isRecord && useChat) {
-    const currentChannel = establishChat()(dispatch);
+    const page = getChatTopic(chatPage, chatId);
+    channel.setupChannel(page);
+    const currentChannel = establishChat(page)(dispatch);
 
     return currentChannel;
   }

services/app/apps/codebattle/assets/js/widgets/middlewares/Chat.js

@@ -1,4 +1,3 @@
-import Gon from 'gon';
 import { camelizeKeys } from 'humps';
 import some from 'lodash/some';
 
@@ -9,21 +8,21 @@ import { calculateExpireDate } from '../utils/chatRoom';
 
 import Channel from './Channel';
 
-const channelName = 'lobby';
-const isRecord = Gon.getAsset('is_record');
-const channel = !isRecord ? new Channel(channelName) : null;
+const channel = new Channel();
 
 export const fetchState = currentUserId => dispatch => {
-  const currentChannel = channel;
+  const channelName = 'lobby';
+  channel.setupChannel(channelName);
+
   const camelizeKeysAndDispatch = actionCreator => data => dispatch(actionCreator(camelizeKeys(data)));
 
-  currentChannel.join().receive('ok', camelizeKeysAndDispatch(actions.initGameList));
+  channel.join().receive('ok', camelizeKeysAndDispatch(actions.initGameList));
 
-  currentChannel.onError(() => {
+  channel.onError(() => {
     dispatch(actions.updateLobbyChannelState(false));
   });
 
-  currentChannel.onMessage((_event, payload) => camelizeKeys(payload));
+  channel.onMessage((_event, payload) => camelizeKeys(payload));
 
   const handleGameUpsert = data => {
     const {
@@ -50,7 +49,7 @@ export const fetchState = currentUserId => dispatch => {
     dispatch(actions.updateCheckResult(payload));
   };
 
-  return currentChannel
+  return channel
     .addListener(channelTopics.lobbyGameUpsertTopic, handleGameUpsert)
     .addListener(channelTopics.lobbyGameCheckStartedTopic, handleGameCheckStarted)
     .addListener(

services/app/apps/codebattle/assets/js/widgets/middlewares/Lobby.js

@@ -36,13 +36,11 @@ import { addWaitingRoomListeners } from './WaitingRoom';
 const defaultLanguages = Gon.getAsset('langs');
 const gameId = Gon.getAsset('game_id');
 const isRecord = Gon.getAsset('is_record');
-let channel;
+const channel = new Channel();
 
 export const setGameChannel = (newGameId = gameId) => {
   const newChannelName = `game:${newGameId}`;
-  channel = !isRecord && newGameId ? new Channel(newChannelName) : null;
-  console.log(channel);
-  return channel;
+  return channel.setupChannel(!isRecord && newGameId ? newChannelName : undefined);
 };
 
 const initEditors = dispatch => (playbookStatusCode, players) => {
@@ -127,18 +125,18 @@ const initPlaybook = dispatch => data => {
   dispatch(actions.loadPlaybook(data));
 };
 
-const initGameChannel = (gameRoomService, waitingRoomService, currentChannel) => dispatch => {
+const initGameChannel = (gameRoomService, waitingRoomService) => dispatch => {
   const onJoinFailure = payload => {
     gameRoomService.send('REJECT_LOADING_GAME', { payload });
     gameRoomService.send('FAILURE_JOIN', { payload });
     window.location.reload();
   };
 
-  currentChannel.onError(() => {
+  channel.onError(() => {
     gameRoomService.send('FAILURE');
   });
 
-  currentChannel.onMessage((_event, payload) => camelizeKeys(payload));
+  channel.onMessage((_event, payload) => camelizeKeys(payload));
 
   const onJoinSuccess = response => {
     if (response.error) {
@@ -198,7 +196,7 @@ const initGameChannel = (gameRoomService, waitingRoomService, currentChannel) =>
     });
   };
 
-  currentChannel
+  channel
     .join()
     .receive('ok', onJoinSuccess)
     .receive('error', onJoinFailure);
@@ -323,9 +321,7 @@ export const resetTextToTemplateAndSend = langSlug => (dispatch, getState) => {
 export const soundNotification = notification();
 
 export const addCursorListeners = (userId, onChangePosition, onChangeSelection) => {
-  const currentGameChannel = channel;
-
-  if (!userId || !currentGameChannel) {
+  if (!userId) {
     return () => {};
   }
 
@@ -345,7 +341,7 @@ export const addCursorListeners = (userId, onChangePosition, onChangeSelection)
 
   const listenerParams = { userId };
 
-  currentGameChannel
+  channel
     .addListener(
       channelTopics.editorCursorPositionTopic,
       handleNewCursorPosition,
@@ -358,13 +354,13 @@ export const addCursorListeners = (userId, onChangePosition, onChangeSelection)
     );
 
   return () => {
-    if (currentGameChannel) {
-      currentGameChannel
-        .clearListeners(
+    if (channel) {
+      channel
+        .removeListeners(
           channelTopics.editorCursorPositionTopic,
           listenerParams,
         )
-        .clearListeners(
+        .removeListeners(
           channelTopics.editorCursorSelectionTopic,
           listenerParams,
         );
@@ -373,8 +369,6 @@ export const addCursorListeners = (userId, onChangePosition, onChangeSelection)
 };
 
 export const activeEditorReady = (service, isBanned) => {
-  console.log(channel);
-  const currentGameChannel = channel;
   const listenerParams = { userId: service.machine.context.userId };
 
   if (isBanned) {
@@ -396,27 +390,24 @@ export const activeEditorReady = (service, isBanned) => {
     service.send('receive_check_result', data);
   };
 
-  currentGameChannel
+  channel
     .addListener(channelTopics.userStartCheckTopic, handleStartsCheck)
     .addListener(
       channelTopics.userCheckCompleteTopic,
       handleNewCheckResult,
     );
 
   return () => {
-    currentGameChannel
-      .clearListeners(channelTopics.userStartCheckTopic, listenerParams)
-      .clearListeners(channelTopics.userCheckCompleteTopic, listenerParams);
+    channel
+      .removeListeners(channelTopics.userStartCheckTopic, listenerParams)
+      .removeListeners(channelTopics.userCheckCompleteTopic, listenerParams);
   };
 };
 
 export const activeGameReady = (gameRoomService, waitingRoomService, { cancelRedirect = false }) => (dispatch, getState) => {
-  const currentGameChannel = channel;
-
   initGameChannel(
     gameRoomService,
     waitingRoomService,
-    currentGameChannel,
   )(dispatch);
 
   const handleNewEditorData = data => {
@@ -594,12 +585,12 @@ export const activeGameReady = (gameRoomService, waitingRoomService, { cancelRed
   };
 
   addWaitingRoomListeners(
-    currentGameChannel,
+    channel,
     waitingRoomService,
     { cancelRedirect },
   )(dispatch, getState);
 
-  return currentGameChannel
+  return channel
     .addListener(channelTopics.editorDataTopic, handleNewEditorData)
     .addListener(
       channelTopics.userStartCheckTopic,