Merge pull request #73 from Automattic/lint-collab

Collab: Bulk apply eslint on collab-related files

package.json

@@ -88,12 +88,15 @@
 		"classnames": "^2.3.1",
 		"debug": "^4.3.2",
 		"eslint-plugin-eslint-comments": "^3.2.0",
+		"lodash": "^4.17.21",
+		"memize": "^1.1.0",
 		"react": "17.0.2",
 		"react-autosize-textarea": "^7.1.0",
 		"react-dom": "17.0.2",
 		"reakit-utils": "^0.15.2",
 		"redux-undo": "^1.0.1",
 		"refx": "^3.1.1",
+		"uuid": "^8.3.2",
 		"yjs": "^13.5.12"
 	},
 	"devDependencies": {

src/components/collaborative-editing/components/avatars/Avatars.stories.tsx

@@ -1,5 +1,11 @@
+/**
+ * External dependencies
+ */
 import { sample } from 'lodash';
 
+/**
+ * Internal dependencies
+ */
 import { CollaborativeEditingAvatars, CollaborativeEditingAvatar } from '.';
 import { defaultColors } from '../../use-yjs';
 
@@ -15,6 +21,7 @@ const generateRandomPeers = ( count ) => {
 		? [ ...Array( count ) ].map( ( peer, index ) => ( {
 				id: index.toString(),
 				name: `Peery Collabson ${ index }`,
+				// eslint-disable-next-line no-restricted-syntax
 				avatarUrl: `https://i.pravatar.cc/64?cacheBust=${ Math.random() }`,
 				color: sample( defaultColors ) as string,
 		  } ) )

src/components/collaborative-editing/components/avatars/index.js

@@ -6,10 +6,13 @@ import { withSelect } from '@wordpress/data';
 import { useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
 import './style.scss';
 
 /**
- * @param {object} props
+ * @param {Object} props
  * @param {import("../..").AvailablePeer[]} props.peers
  */
 export function CollaborativeEditingAvatars( { peers } ) {

src/components/collaborative-editing/index.js

@@ -7,6 +7,7 @@ import CollaborativeEditingAvatars from './components/avatars';
 
 /**
  * Real-time collaboration settings
+ *
  * @typedef CollaborationSettings
  * @property {boolean} enabled
  * @property {string} [channelId] Optional channel id to pass to transport.connect().
@@ -18,44 +19,55 @@ import CollaborativeEditingAvatars from './components/avatars';
 
 /**
  * Transport module for real-time collaboration
+ *
  * @typedef CollaborationTransport
  * @property {(message: CollaborationTransportDocMessage|CollaborationTransportSelectionMessage) => void} sendMessage
  * @property {(options: CollaborationTransportConnectOpts) => Promise<{isFirstInChannel: boolean}>} connect
  * @property {() => Promise<void>} disconnect
- *
+ */
+
+/**
  * @typedef CollaborationTransportConnectOpts
- * @property {object} user
+ * @property {Object} user
  * @property {string} user.identity
  * @property {string} user.name
  * @property {string} [user.avatarUrl]
  * @property {string} [user.color] Color of the caret indicator displayed to peers.
  * @property {(message: object) => void} onReceiveMessage Callback to run when a message is received.
  * @property {(peers: AvailablePeer[]) => void} setAvailablePeers Callback to run when peers change.
  * @property {string} [channelId]
- *
+ */
+
+/**
  * @typedef AvailablePeer
  * @property {string} id
  * @property {string} name
  * @property {string} color
  * @property {string} [avatarUrl]
- *
+ */
+
+/**
  * @typedef CollaborationTransportDocMessage
  * @property {string} identity
  * @property {'doc'} type
- * @property {object} message
- *
+ * @property {Object} message
+ */
+
+/**
  * @typedef CollaborationTransportSelectionMessage
  * @property {string} identity
  * @property {'selection'} type
  * @property {EditorSelection} selection
- *
+ */
+
+/**
  * @typedef EditorSelection
- * @property {object} start
- * @property {object} end
+ * @property {Object} start
+ * @property {Object} end
  */
 
 /**
- * @param {object} props
+ * @param {Object} props
  * @param {CollaborationSettings} props.settings
  */
 function CollaborativeEditing( { settings } ) {

src/components/collaborative-editing/use-yjs/algorithms/__tests__/yjs.js

@@ -1,4 +1,11 @@
+/**
+ * External dependencies
+ */
 import * as yjs from 'yjs';
+
+/**
+ * Internal dependencies
+ */
 import { updateBlocksDoc, blocksDocToArray } from '../yjs';
 
 jest.mock( 'uuid', () => {
@@ -24,11 +31,7 @@ function applyYjsUpdate( yDoc, update ) {
 	} );
 }
 
-async function getUpdatedBlocksUsingYjsAlgo(
-	originalBlocks,
-	updatedLocalBlocks,
-	updatedRemoteBlocks
-) {
+async function getUpdatedBlocksUsingYjsAlgo( originalBlocks, updatedLocalBlocks, updatedRemoteBlocks ) {
 	// Local doc.
 	const localYDoc = new yjs.Doc();
 	const localYBlocks = localYDoc.getMap( 'blocks' );
@@ -69,10 +72,7 @@ async function getUpdatedBlocksUsingYjsAlgo(
 		);
 
 		// Merging remote edit into local edit.
-		await applyYjsUpdate(
-			localYDoc,
-			yjs.encodeStateAsUpdate( remoteYDoc )
-		);
+		await applyYjsUpdate( localYDoc, yjs.encodeStateAsUpdate( remoteYDoc ) );
 	}
 
 	return blocksDocToArray( localYBlocks );
@@ -105,13 +105,9 @@ syncAlgorithms.forEach( ( { name, algo } ) => {
 				},
 			];
 
-			expect(
-				await algo(
-					originalBlocks,
-					updatedLocalBlocks,
-					updateRemoteBlocks
-				)
-			).toEqual( updateRemoteBlocks );
+			expect( await algo( originalBlocks, updatedLocalBlocks, updateRemoteBlocks ) ).toEqual(
+				updateRemoteBlocks
+			);
 		} );
 
 		test( 'New local block and remote update to single block.', async () => {
@@ -168,13 +164,7 @@ syncAlgorithms.forEach( ( { name, algo } ) => {
 				},
 			];
 
-			expect(
-				await algo(
-					originalBlocks,
-					updatedLocalBlocks,
-					updateRemoteBlocks
-				)
-			).toEqual( expectedMerge );
+			expect( await algo( originalBlocks, updatedLocalBlocks, updateRemoteBlocks ) ).toEqual( expectedMerge );
 		} );
 
 		test( 'Local deletion of multiple blocks and update to single block.', async () => {
@@ -223,13 +213,7 @@ syncAlgorithms.forEach( ( { name, algo } ) => {
 				},
 			];
 
-			expect(
-				await algo(
-					originalBlocks,
-					updatedLocalBlocks,
-					updateRemoteBlocks
-				)
-			).toEqual( expectedMerge );
+			expect( await algo( originalBlocks, updatedLocalBlocks, updateRemoteBlocks ) ).toEqual( expectedMerge );
 		} );
 
 		test( 'Moving a block locally while updating it remotely.', async () => {
@@ -300,13 +284,7 @@ syncAlgorithms.forEach( ( { name, algo } ) => {
 				},
 			];
 
-			expect(
-				await algo(
-					originalBlocks,
-					updatedLocalBlocks,
-					updateRemoteBlocks
-				)
-			).toEqual( expectedMerge );
+			expect( await algo( originalBlocks, updatedLocalBlocks, updateRemoteBlocks ) ).toEqual( expectedMerge );
 		} );
 
 		test( 'Moving a block to inner blocks while updating it remotely.', async () => {
@@ -379,13 +357,7 @@ syncAlgorithms.forEach( ( { name, algo } ) => {
 				},
 			];
 
-			expect(
-				await algo(
-					originalBlocks,
-					updatedLocalBlocks,
-					updateRemoteBlocks
-				)
-			).toEqual( expectedMerge );
+			expect( await algo( originalBlocks, updatedLocalBlocks, updateRemoteBlocks ) ).toEqual( expectedMerge );
 		} );
 	} );
 } );

src/components/collaborative-editing/use-yjs/algorithms/yjs.js

@@ -1,5 +1,8 @@
 // @ts-nocheck TODO
 
+/**
+ * External dependencies
+ */
 import * as yjs from 'yjs';
 import { isEqual } from 'lodash';
 
@@ -58,20 +61,13 @@ export function updateBlocksDoc( yDocBlocks, blocks, clientId = '' ) {
 	);
 	currentOrder
 		.slice( orderDiff.index, orderDiff.remove )
-		.forEach(
-			( _clientId ) =>
-				! orderDiff.insert.includes( _clientId ) &&
-				byClientId.delete( _clientId )
-		);
+		.forEach( ( _clientId ) => ! orderDiff.insert.includes( _clientId ) && byClientId.delete( _clientId ) );
 	order.delete( orderDiff.index, orderDiff.remove );
 	order.insert( orderDiff.index, orderDiff.insert );
 
 	for ( const _block of blocks ) {
 		const { innerBlocks, ...block } = _block;
-		if (
-			! byClientId.has( block.clientId ) ||
-			! isEqual( byClientId.get( block.clientId ), block )
-		) {
+		if ( ! byClientId.has( block.clientId ) || ! isEqual( byClientId.get( block.clientId ), block ) ) {
 			byClientId.set( block.clientId, block );
 		}
 
@@ -94,16 +90,7 @@ export function updateCommentsDoc( commentsDoc, comments = [] ) {
 		}
 		currentDoc = commentsDoc.get( comment._id );
 		// Update regular fields
-		[
-			'type',
-			'content',
-			'createdAt',
-			'status',
-			'start',
-			'end',
-			'authorId',
-			'authorName',
-		].forEach( ( field ) => {
+		[ 'type', 'content', 'createdAt', 'status', 'start', 'end', 'authorId', 'authorName' ].forEach( ( field ) => {
 			if ( isNewDoc || currentDoc.get( field ) !== comment[ field ] ) {
 				currentDoc.set( field, comment[ field ] );
 			}
@@ -131,16 +118,11 @@ export function updateCommentRepliesDoc( repliesDoc, replies = [] ) {
 			repliesDoc.set( reply._id, new yjs.Map() );
 		}
 		currentReplyDoc = repliesDoc.get( reply._id );
-		[ 'content', 'createdAt', 'authorId', 'authorName' ].forEach(
-			( field ) => {
-				if (
-					isNewDoc ||
-					currentReplyDoc.get( field ) !== reply[ field ]
-				) {
-					currentReplyDoc.set( field, reply[ field ] );
-				}
+		[ 'content', 'createdAt', 'authorId', 'authorName' ].forEach( ( field ) => {
+			if ( isNewDoc || currentReplyDoc.get( field ) !== reply[ field ] ) {
+				currentReplyDoc.set( field, reply[ field ] );
 			}
-		);
+		} );
 	} );
 }
 
@@ -176,32 +158,30 @@ export function commentsDocToArray( commentsDoc ) {
 		return [];
 	}
 
-	return Object.entries( commentsDoc.toJSON() ).map(
-		( [ id, commentDoc ] ) => {
-			return {
-				_id: id,
-				type: commentDoc.type,
-				content: commentDoc.content,
-				createdAt: commentDoc.createdAt,
-				status: commentDoc.status,
-				start: commentDoc.start,
-				end: commentDoc.end,
-				authorId: commentDoc.authorId,
-				authorName: commentDoc.authorName,
-				replies: Object.entries( commentDoc.replies )
-					.map( ( [ replyId, entryDoc ] ) => {
-						return {
-							_id: replyId,
-							content: entryDoc.content,
-							createdAt: entryDoc.createdAt,
-							authorId: entryDoc.authorId,
-							authorName: entryDoc.authorName,
-						};
-					} )
-					.sort( ( a, b ) => a.createdAt - b.createdAt ),
-			};
-		}
-	);
+	return Object.entries( commentsDoc.toJSON() ).map( ( [ id, commentDoc ] ) => {
+		return {
+			_id: id,
+			type: commentDoc.type,
+			content: commentDoc.content,
+			createdAt: commentDoc.createdAt,
+			status: commentDoc.status,
+			start: commentDoc.start,
+			end: commentDoc.end,
+			authorId: commentDoc.authorId,
+			authorName: commentDoc.authorName,
+			replies: Object.entries( commentDoc.replies )
+				.map( ( [ replyId, entryDoc ] ) => {
+					return {
+						_id: replyId,
+						content: entryDoc.content,
+						createdAt: entryDoc.createdAt,
+						authorId: entryDoc.authorId,
+						authorName: entryDoc.authorName,
+					};
+				} )
+				.sort( ( a, b ) => a.createdAt - b.createdAt ),
+		};
+	} );
 }
 
 /**

src/components/collaborative-editing/use-yjs/filters/block-selection/index.js

@@ -4,6 +4,9 @@
 import { addFilter } from '@wordpress/hooks';
 import { useSelect } from '@wordpress/data';
 
+/**
+ * Internal dependencies
+ */
 import './style.scss';
 
 /**

src/components/collaborative-editing/use-yjs/filters/index.js

@@ -1,3 +1,6 @@
+/**
+ * Internal dependencies
+ */
 import { addFilterCollabBlockSelection } from './block-selection';
 
 export const addCollabFilters = () => {

src/components/collaborative-editing/use-yjs/formats/collab-caret/CollabCaret.stories.tsx

@@ -1,5 +1,11 @@
+/**
+ * External dependencies
+ */
 import type { Story } from '@storybook/react';
 
+/**
+ * Internal dependencies
+ */
 import { applyCarets, settings } from '.';
 
 export default {