Code Refactoring & Fixes

Author: rcosta358

code/client/src/domain/editor/hooks/useEvents.ts

@@ -16,7 +16,7 @@ function useEvents(fugueOperations: FugueDomainOperations, { socket }: Communica
   }
 
   useSocketListeners(socket, {
-    operation: onOperation,
+    operations: onOperation,
   });
 }
 

code/client/src/domain/editor/operations/history/operations.ts

@@ -25,7 +25,7 @@ export default (fugue: Fugue, { socket }: Communication): HistoryDomainOperation
       .flat()
       .filter(operation => operation !== undefined && operation !== null);
 
-    socket.emit('operation', communicationOperations);
+    socket.emit('operations', communicationOperations);
   };
 
   function getOperation(operation: HistoryOperation) {

code/client/src/domain/editor/operations/input/operations.ts

@@ -11,39 +11,39 @@ export default (fugue: Fugue, { socket }: Communication): InputDomainOperations
   function insertCharacter(char: string, cursor: Cursor, styles: InlineStyle[] = []) {
     if (char.length !== 1) throw new Error('Invalid character');
     const operations = fugue.insertLocal(cursor, nodeInsert(char, styles));
-    socket.emit('operation', operations);
+    socket.emit('operations', operations);
   }
 
   function insertLineBreak(cursor: Cursor) {
     const operations = fugue.insertLocal(cursor, '\n');
     const styleOperation = fugue.updateBlockStyleLocal(cursor.line + 1, 'paragraph', true);
-    socket.emit('operation', [styleOperation, ...operations]);
+    socket.emit('operations', [styleOperation, ...operations]);
   }
 
   function deleteCharacter(cursor: Cursor) {
     // don't delete line if it's not a paragraph - this is to prevent deleting the block style & line simultaneously
     if (cursor.column === 0 && fugue.getBlockStyle(cursor.line) !== 'paragraph') return;
     const operations = fugue.deleteLocalByCursor(cursor);
-    if (operations) socket.emit('operation', operations);
+    if (operations) socket.emit('operations', operations);
   }
 
   function deleteSelection(selection: Selection) {
     const operations = fugue.deleteLocal(selection);
-    socket.emit('operation', operations);
+    socket.emit('operations', operations);
   }
 
   function deleteWord(cursor: Cursor, reverse: boolean) {
     const operations = fugue.deleteWordByCursor(cursor, reverse);
     if (!operations) return;
-    socket.emit('operation', operations);
+    socket.emit('operations', operations);
   }
 
   function pasteText(start: Cursor, text: string) {
     const chars = text.split('');
     const lineNodes = chars.filter(char => char === '\n');
     const insertOperations: Operation[] = fugue.insertLocal(start, ...text);
     const styleOperations = lineNodes.map(() => fugue.updateBlockStyleLocal(start.line + 1, 'paragraph', true));
-    socket.emit('operation', [...styleOperations, ...insertOperations]);
+    socket.emit('operations', [...styleOperations, ...insertOperations]);
   }
 
   function updateSelection(range: BaseSelection, styles: InlineStyle[]) {

code/client/src/domain/editor/operations/markdown/operations.ts

@@ -37,7 +37,7 @@ export default (fugue: Fugue, { socket }: Communication): MarkdownDomainOperatio
     operations.push(styleOperation);
 
     // emit operations
-    socket.emit('operation', operations);
+    socket.emit('operations', operations);
   }
 
   /**
@@ -64,7 +64,7 @@ export default (fugue: Fugue, { socket }: Communication): MarkdownDomainOperatio
     operations.push(...styleOperations);
 
     // emit operations
-    socket.emit('operation', operations);
+    socket.emit('operations', operations);
   }
 
   function deleteBlockStyles(selection: Selection) {
@@ -75,7 +75,7 @@ export default (fugue: Fugue, { socket }: Communication): MarkdownDomainOperatio
     if ((start === end && start.column === 0) || start.line !== end.line) {
       const newSelection = start.column !== 0 ? { start: { line: start.line + 1, column: 0 }, end } : selection;
       const operations = fugue.updateBlockStylesLocalBySelection('paragraph', newSelection);
-      socket.emit('operation', operations);
+      socket.emit('operations', operations);
     }
   }
 

code/client/src/domain/editor/slate/hooks/useRenderers.ts

@@ -17,7 +17,7 @@ function useRenderers(editor: Editor, fugue: Fugue, { socket }: Communication) {
       const line = path[path.length - 1];
       const updateBlockStyle = (style: BlockStyle) => {
         const operation = fugue.updateBlockStyleLocal(line, style);
-        socket.emit('operation', [operation]);
+        socket.emit('operations', [operation]);
       };
       return getElementRenderer(type, props, updateBlockStyle);
     },

code/client/src/domain/workspace/WorkspaceContext.tsx

@@ -7,20 +7,15 @@ import { useParams } from 'react-router-dom';
 
 export type WorkspaceContextType = {
   workspace?: Workspace;
-  filePath?: string;
-  setFilePath: (path: string) => void;
 };
 
 export const WorkspaceContext = createContext<WorkspaceContextType>({
   workspace: undefined,
-  filePath: undefined,
-  setFilePath: () => {},
 });
 
 export function WorkspaceProvider({ children }: { children: React.ReactNode }) {
   const [workspace, setWorkspace] = useState<Workspace | undefined>(undefined);
-  const [filePath, setFilePath] = useState<string | undefined>(undefined);
-  const { http } = useCommunication();
+  const { http, socket } = useCommunication();
   const { publishError } = useError();
   const { wid } = useParams();
 
@@ -30,8 +25,12 @@ export function WorkspaceProvider({ children }: { children: React.ReactNode }) {
       const ws = await http.get(`/workspaces/${wid}`);
       setWorkspace(ws);
     }
+    socket.emit('joinWorkspace', wid);
     getResources().catch(publishError);
-  }, [http, publishError, wid]);
+    return () => {
+      socket.emit('leaveWorkspace');
+    };
+  }, [wid, http, socket, publishError]);
 
-  return <WorkspaceContext.Provider value={{ workspace, filePath, setFilePath }}>{children}</WorkspaceContext.Provider>;
+  return <WorkspaceContext.Provider value={{ workspace }}>{children}</WorkspaceContext.Provider>;
 }

code/client/src/services/communication/socket/operationEmitter.ts

@@ -9,7 +9,7 @@ export class OperationEmitter {
   private readonly socket: Socket;
   private readonly operationBuffer: Operation[] = [];
   private readonly timeoutDuration;
-  private readonly chunkSize = 100;
+  private readonly chunkSize = 300;
   private readonly maxBufferedOperations = 20;
   private timeoutId: NodeJS.Timeout | null = null;
 
@@ -34,7 +34,7 @@ export class OperationEmitter {
     if (this.operationBuffer.length > this.chunkSize) {
       this.emitChunked();
     } else {
-      this.socket.emit('operation', this.operationBuffer);
+      this.socket.emit('operations', this.operationBuffer);
     }
     this.operationBuffer.length = 0;
   }
@@ -46,12 +46,12 @@ export class OperationEmitter {
     let chunkIndex = 0;
     const onAcknowledge = () => {
       if (chunkIndex < chunks.length) {
-        this.socket.emit('operation', chunks[chunkIndex++]);
+        this.socket.emit('operations', chunks[chunkIndex++]);
         return;
       }
       this.socket.off('ack', onAcknowledge);
     };
-    this.socket.emit('operation', chunks[chunkIndex++]);
+    this.socket.emit('operations', chunks[chunkIndex++]);
     this.socket.on('ack', onAcknowledge);
   }
 }

code/client/src/services/communication/socket/socketCommunication.ts

@@ -21,7 +21,7 @@ const operationEmitter = new OperationEmitter(socket, OPERATION_DELAY);
 
 function emit(event: string, data: any) {
   switch (event) {
-    case 'operation':
+    case 'operations':
       operationEmitter.addOperation(...data);
       break;
     case 'cursorChange':

code/client/src/services/documentServices.ts

@@ -13,7 +13,7 @@ function documentServices(http: HttpCommunication, wid: string) {
   }
 
   async function deleteDocument(id: string) {
-    await http.delete(`/workspace/${wid}/${id}`);
+    await http.delete(`/workspaces/${wid}/${id}`);
   }
 
   async function updateDocument(id: string, name: string) {

code/client/src/ui/components/header/Header.scss

@@ -10,7 +10,6 @@ header {
   box-shadow: black 0 0 1px;
   display: flex;
   align-items: center;
-  z-index: 1;
 
   p {
     font-size: 2.5vh;