Merge pull request #19 from adarshaacharya/develop👷

refactor: constants value separated

client/src/_context/code/code.state.tsx

@@ -51,7 +51,7 @@ const CodeState: React.FC = ({ children }) => {
                 payload: res.data,
             });
         } catch (error) {
-            console.log(error);
+            console.error(error);
         }
     };
 
@@ -65,7 +65,7 @@ const CodeState: React.FC = ({ children }) => {
                 payload: res.data,
             });
         } catch (error) {
-            console.log(error);
+            console.error(error);
         }
     };
 

client/src/_context/room/room.state.tsx

@@ -17,6 +17,7 @@ import RoomContext from './room.context';
 import roomReducer, { initialState as initialValues } from './room.reducer';
 import { IOutput, IRoom, State, IMessages } from './room.type';
 import history from 'utils/history';
+import { SOCKETS_EVENT_CREATE_ROOM, SOCKETS_EVENT_UPDATE_ROOM, SOCKETS_EVENT_USER_JOINED } from 'constants/sockets';
 
 const RoomState: React.FC = ({ children }) => {
     const initialState: State = {
@@ -33,9 +34,9 @@ const RoomState: React.FC = ({ children }) => {
                 username,
                 roomName,
             };
-            socket.emit('create:room', body);
+            socket.emit(SOCKETS_EVENT_CREATE_ROOM, body);
 
-            socket.on('update:room', (room: IRoom) => {
+            socket.on(SOCKETS_EVENT_UPDATE_ROOM, (room: IRoom) => {
                 dispatch({
                     type: CREATE_ROOM,
                     payload: room,
@@ -44,7 +45,7 @@ const RoomState: React.FC = ({ children }) => {
             });
             setRoomUser(username); // set username in state
         } catch (error) {
-            console.log(error);
+            console.error(error);
         }
     };
 
@@ -56,7 +57,7 @@ const RoomState: React.FC = ({ children }) => {
                 username,
                 roomID,
             };
-            socket.emit('join:room', body, (error: any) => {
+            socket.emit(SOCKETS_EVENT_USER_JOINED, body, (error: any) => {
                 //callback fun
                 if (error) {
                     return message.error(error.msg);
@@ -65,7 +66,7 @@ const RoomState: React.FC = ({ children }) => {
 
             setRoomUser(username); // set username in state
 
-            socket.on('update:room', (room: IRoom) => {
+            socket.on(SOCKETS_EVENT_UPDATE_ROOM, (room: IRoom) => {
                 dispatch({
                     type: JOIN_ROOM,
                     payload: room,
@@ -79,7 +80,6 @@ const RoomState: React.FC = ({ children }) => {
 
     // update room code
     const updateRoomCode = (code: string) => {
-        console.log('update room code');
         dispatch({
             type: UPDATE_ROOM_CODE,
             payload: code,

client/src/_context/snippet/snippet.state.tsx

@@ -23,7 +23,7 @@ const SnippetState: React.FC = ({ children }) => {
                 payload: res.data,
             });
         } catch (error) {
-            console.log(error);
+            console.error(error);
         }
     };
 
@@ -39,7 +39,7 @@ const SnippetState: React.FC = ({ children }) => {
             // programmatic navigation from custom history obj
             history.push('/snippets');
         } catch (error) {
-            console.log(error);
+            console.error(error);
         }
     };
 

client/src/components/Room/Chatbox/ChatInput.tsx

@@ -1,5 +1,6 @@
 import { Input } from 'antd';
 import socket from 'config/socket/socket';
+import { SOCKETS_EVENTS_REALTIME_MESSAGE } from 'constants/sockets';
 import { useSfx } from 'hooks';
 import React from 'react';
 import { useRoomContext } from '_context/room/room.context';
@@ -30,7 +31,7 @@ const ChatInput: React.FC = () => {
         };
 
         // send msg to server
-        socket.emit('realtime:message', body, () => setMessage(''));
+        socket.emit(SOCKETS_EVENTS_REALTIME_MESSAGE, body, () => setMessage(''));
         playPop();
     };
 

client/src/components/Room/Chatbox/Chatbox.tsx

@@ -1,6 +1,7 @@
 import { SendOutlined } from '@ant-design/icons';
 import { Badge, Button } from 'antd';
 import socket from 'config/socket/socket';
+import { SOCKETS_EVENT_UPDATE_MESSAGE } from 'constants/sockets';
 import React from 'react';
 import { useRoomContext } from '_context/room/room.context';
 import { IUser } from '_context/room/room.type';
@@ -18,7 +19,7 @@ const Chatbox = () => {
 
     React.useEffect(() => {
         // receive msg from server
-        socket.on('update:message', (message: IMessages) => {
+        socket.on(SOCKETS_EVENT_UPDATE_MESSAGE, (message: IMessages) => {
             updateMessages(message);
         });
 

client/src/components/Room/LeaveRoom/LeaveRoom.tsx

@@ -1,6 +1,7 @@
 import { PoweroffOutlined } from '@ant-design/icons';
 import { Button, message, Popconfirm } from 'antd';
 import socket from 'config/socket/socket';
+import { SOCKETS_EVENT_USER_LEFT } from 'constants/sockets';
 import React from 'react';
 import { useRoomContext } from '_context/room/room.context';
 
@@ -12,7 +13,7 @@ const LeaveRoom = () => {
             roomID: _id,
             username: currentUser,
         };
-        socket.emit('leave:room', body);
+        socket.emit(SOCKETS_EVENT_USER_LEFT, body);
         leaveRoom();
     };
 

client/src/components/Room/RoomCodeExec/RoomCodeExec.tsx

@@ -1,6 +1,12 @@
 import { CaretRightOutlined } from '@ant-design/icons';
 import { Button } from 'antd';
 import socket from 'config/socket/socket';
+import {
+    SOCKETS_EVENTS_REALTIME_LOADING,
+    SOCKETS_EVENTS_REALTIME_RUN,
+    SOCKETS_EVENTS_UPDATE_LOADING,
+    SOCKETS_EVENTS_UPDATE_OUTPUT,
+} from 'constants/sockets';
 import React from 'react';
 import { useRoomContext } from '_context/room/room.context';
 import { IOutput } from '_context/room/room.type';
@@ -11,26 +17,26 @@ const RoomCodeExec = () => {
     // initialize socket once using lifecycle method so that it will listen from next time
     // here both output and loading of output is decided so both are initialized
     React.useEffect(() => {
-        socket.on('update:output', (output: IOutput) => {
+        socket.on(SOCKETS_EVENTS_UPDATE_OUTPUT, (output: IOutput) => {
             updateRoomOutput(output);
         });
 
-        socket.on('update:loading', () => {
+        socket.on(SOCKETS_EVENTS_UPDATE_LOADING, () => {
             setLoading(_id);
         });
         //eslint-disable-next-line
     }, []);
 
     const onCodeSubmit = (code: string, language: string, input: string) => {
-        socket.emit('realtime:loading', _id);
+        socket.emit(SOCKETS_EVENTS_REALTIME_LOADING, _id);
 
         const payload = {
             language,
             sourceCode: code,
             userInput: input,
             roomID: _id,
         };
-        socket.emit('realtime:run', payload);
+        socket.emit(SOCKETS_EVENTS_REALTIME_RUN, payload);
     };
 
     return (

client/src/components/Room/RoomEditor/RoomEditor.tsx

@@ -1,6 +1,7 @@
 import { ControlledEditor } from '@monaco-editor/react';
 import { editorOptions } from 'config/editor/options';
 import socket from 'config/socket/socket';
+import { SOCKETS_EVENT_REALTIME_CODE, SOCKETS_EVENT_UPDATE_CODE } from 'constants/sockets';
 import { Spinner } from 'layout';
 import React from 'react';
 import { useRoomContext } from '_context/room/room.context';
@@ -11,7 +12,7 @@ const RoomEditor: React.FC = () => {
     const { theme } = useThemeContext();
 
     React.useEffect(() => {
-        socket.on('update:code', (code: string) => {
+        socket.on(SOCKETS_EVENT_UPDATE_CODE, (code: string) => {
             updateRoomCode(code);
         });
         return () => {
@@ -27,7 +28,7 @@ const RoomEditor: React.FC = () => {
             value,
             roomID: _id,
         };
-        socket.emit('realtime:code', body);
+        socket.emit(SOCKETS_EVENT_REALTIME_CODE, body);
     };
 
     return (

client/src/components/Room/RoomInput/RoomInput.tsx

@@ -1,8 +1,10 @@
 import { ExclamationCircleOutlined } from '@ant-design/icons';
 import { Divider, Input, Tooltip } from 'antd';
 import socket from 'config/socket/socket';
+import { SOCKETS_EVENT_REALTIME_INPUT } from 'constants/sockets';
 import React from 'react';
 import { useRoomContext } from '_context/room/room.context';
+import { UPDATE_ROOM_INPUT } from '_context/types';
 
 const INPUT_TOOLTIP =
     "Only provide input if you ask user for input, else leave empty. Some browser based language like Javascript, Typescipt doesn't accept terminal inputs.";
@@ -12,7 +14,7 @@ const RoomInput = () => {
     const { updateRoomInput, _id, roomInput } = useRoomContext();
 
     React.useEffect(() => {
-        socket.on('update:input', (input: string) => {
+        socket.on(UPDATE_ROOM_INPUT, (input: string) => {
             updateRoomInput(input);
         });
         //eslint-disable-next-line
@@ -27,7 +29,7 @@ const RoomInput = () => {
             value,
         };
 
-        socket.emit('realtime:input', body);
+        socket.emit(SOCKETS_EVENT_REALTIME_INPUT, body);
     };
     return (
         <>

client/src/components/Room/RoomLang/RoomLang.tsx

@@ -1,6 +1,7 @@
 import { Divider, Select } from 'antd';
 import languages from 'config/editor/languages';
 import socket from 'config/socket/socket';
+import { SOCKETS_EVENT_REALTIME_LANGUAGE, SOCKETS_EVENT_UPDATE_LANGUAGE } from 'constants/sockets';
 import React from 'react';
 import { useRoomContext } from '_context/room/room.context';
 
@@ -9,7 +10,7 @@ const RoomLang = () => {
     const { _id, roomLanguage, updateRoomLanguage } = useRoomContext();
 
     React.useEffect(() => {
-        socket.on('update:lang', (lang: string) => {
+        socket.on(SOCKETS_EVENT_UPDATE_LANGUAGE, (lang: string) => {
             updateRoomLanguage(lang);
         });
         //eslint-disable-next-line
@@ -21,7 +22,7 @@ const RoomLang = () => {
             roomID: _id,
             value,
         };
-        socket.emit('realtime:lang', body);
+        socket.emit(SOCKETS_EVENT_REALTIME_LANGUAGE, body);
     };
 
     return (

client/src/components/Room/RoomOutput/RoomOutput.tsx

@@ -19,6 +19,7 @@ const RoomOutput = () => {
     }
 
     let value = roomOutput?.stderr || roomOutput?.stdout || '';
+    console.log(value);
     return (
         <>
             <Divider orientation='left' plain>

client/src/components/SaveSnippet/SaveSnippet.tsx

@@ -35,7 +35,7 @@ const SaveSnippet: React.FC = () => {
                 notify.dark('Code has been saved successfully 😎');
             }, 2000);
         } catch (error) {
-            console.log('Validate Failed:', error);
+            console.error('Validate Failed:', error);
         }
     };
 

client/src/constants/sockets.ts

@@ -0,0 +1,26 @@
+export const SOCKETS_EVENT = `socket.event`;
+
+export const SOCKETS_EVENT_CONNECTED = `${SOCKETS_EVENT}.connection`;
+export const SOCKETS_EVENT_DISCONNECTED = `${SOCKETS_EVENT}.disconnect`;
+export const SOCKETS_EVENT_CONNECTION_ERROR = `${SOCKETS_EVENT}.connection.error`;
+
+export const SOCKETS_EVENT_USER_JOINED = `${SOCKETS_EVENT}.join.room`;
+export const SOCKETS_EVENT_USER_LEFT = `${SOCKETS_EVENT}.leave.room`;
+
+export const SOCKETS_EVENT_CREATE_ROOM = `${SOCKETS_EVENT}.create.room`;
+export const SOCKETS_EVENT_UPDATE_ROOM = `${SOCKETS_EVENT}.update.room`;
+
+export const SOCKETS_EVENT_REALTIME_LANGUAGE = `${SOCKETS_EVENT}.realtime.lang`;
+export const SOCKETS_EVENT_REALTIME_CODE = `${SOCKETS_EVENT}.realtime.code`;
+export const SOCKETS_EVENT_REALTIME_INPUT = `${SOCKETS_EVENT}.realtime.input`;
+export const SOCKETS_EVENTS_REALTIME_OUTPUT = `${SOCKETS_EVENT}.realtime.output`;
+export const SOCKETS_EVENTS_REALTIME_RUN = `${SOCKETS_EVENT}.realtime.run`;
+export const SOCKETS_EVENTS_REALTIME_MESSAGE = `${SOCKETS_EVENT}.realtime.message`;
+export const SOCKETS_EVENTS_REALTIME_LOADING = `${SOCKETS_EVENT}.realtime.loading`;
+
+export const SOCKETS_EVENT_UPDATE_LANGUAGE = `${SOCKETS_EVENT}.update.lang`;
+export const SOCKETS_EVENT_UPDATE_CODE = `${SOCKETS_EVENT}.update.code`;
+export const SOCKETS_EVENT_UPDATE_INPUT = `${SOCKETS_EVENT}.update.input`;
+export const SOCKETS_EVENTS_UPDATE_OUTPUT = `${SOCKETS_EVENT}.update.output`;
+export const SOCKETS_EVENTS_UPDATE_LOADING = `${SOCKETS_EVENT}.update.loading`;
+export const SOCKETS_EVENT_UPDATE_MESSAGE = `${SOCKETS_EVENT}.update.message`;