Resolve: All ESlint warnings

lib/development-protocol/nodeLabelWorker.js

@@ -27,8 +27,8 @@
  * @return {string|Promise} a label for the input node, or
  *                          a promise that resolves to the label
  */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 function nodeLabelWorker({ node, network }) {
-
   // Examples:
   //
   // 1. Given name, surname initial
@@ -69,7 +69,6 @@ function nodeLabelWorker({ node, network }) {
   //   }, 100);
   // });
 
-
   // For our example worker we will return a different label dependant on the node type.
   let label = node.nickname || node.name;
 
@@ -79,9 +78,13 @@ function nodeLabelWorker({ node, network }) {
 
   switch (node.networkCanvasType) {
     case 'person':
-      if (network.edges.some(
-        edge => edge.from === node.networkCanvasId || edge.to === node.networkCanvasId
-      )) {
+      if (
+        network.edges.some(
+          (edge) =>
+            edge.from === node.networkCanvasId ||
+            edge.to === node.networkCanvasId,
+        )
+      ) {
         label = `🔗\u{0a}${label}`;
       } else if (node.close_friend) {
         label = `❤️\u{0a}${label}`;

lib/interviewer/behaviours/DragAndDrop/DragSource.js

@@ -1,16 +1,12 @@
-/* eslint-disable react/display-name */
-/* eslint-disable react/no-find-dom-node, react/sort-comp, react/jsx-props-no-spreading */
-
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { throttle } from 'lodash';
 import DragPreview from './DragPreview';
 import DragManager, { VERTICAL_SCROLL } from './DragManager';
 import { actionCreators as actions } from './reducer';
 import store from './store';
 
-const dragSource =
-  (WrappedComponent) =>
-  ({
+const dragSource = (WrappedComponent) => {
+  const DragSourceInner = ({
     allowDrag = true,
     meta = () => ({}),
     scrollDirection = VERTICAL_SCROLL,
@@ -19,57 +15,63 @@ const dragSource =
   }) => {
     const node = useRef();
     const previewRef = useRef();
-    let dragManager = null;
-    let previewEl = null;
+    const dragManager = useRef(null);
+    const previewEl = useRef(null);
 
     const [isDragging, setIsDragging] = useState(false);
 
     const cleanupDragManager = () => {
-      if (dragManager) {
-        dragManager.unmount();
-        dragManager = null;
+      if (dragManager.current) {
+        dragManager.current.unmount();
+        dragManager.current = null;
       }
     };
 
-    const cleanupPreview = () => {
-      if (previewEl) {
-        previewEl.cleanup();
-        previewEl = null;
+    const cleanupPreview = useCallback(() => {
+      if (previewEl.current) {
+        previewEl.current.cleanup();
+        previewEl.current = null;
       }
-    };
+    }, []);
 
-    const createPreview = () => {
+    const createPreview = useCallback(() => {
       if (!preview) {
-        previewEl = new DragPreview(node.current);
+        previewEl.current = new DragPreview(node.current);
         return;
       }
 
-      previewEl = new DragPreview(previewRef.current);
-    };
+      previewEl.current = new DragPreview(previewRef.current);
+    }, [preview]);
 
-    const updatePreview = ({ x, y }) => {
-      if (previewEl) {
-        previewEl.position({ x, y });
-      }
-    };
+    const updatePreview = useCallback(
+      ({ x, y }) => {
+        if (previewEl.current) {
+          previewEl.current.position({ x, y });
+        }
+      },
+      [previewEl],
+    );
 
     const setValidMove = (valid) => {
-      if (!previewEl) return;
-      previewEl.setValidMove(valid);
+      if (!previewEl.current) return;
+      previewEl.current.setValidMove(valid);
     };
 
-    const onDragStart = (movement) => {
-      createPreview();
+    const onDragStart = useCallback(
+      (movement) => {
+        createPreview();
 
-      store.dispatch(
-        actions.dragStart({
-          ...movement,
-          meta: meta(),
-        }),
-      );
+        store.dispatch(
+          actions.dragStart({
+            ...movement,
+            meta: meta(),
+          }),
+        );
 
-      setIsDragging(true);
-    };
+        setIsDragging(true);
+      },
+      [createPreview, meta],
+    );
 
     const throttledDragAction = throttle(({ x, y, ...other }) => {
       store.dispatch(
@@ -82,21 +84,27 @@ const dragSource =
       );
     }, 250);
 
-    const onDragMove = ({ x, y, ...other }) => {
-      updatePreview({ x, y });
-      throttledDragAction({ x, y, ...other });
-    };
+    const onDragMove = useCallback(
+      ({ x, y, ...other }) => {
+        updatePreview({ x, y });
+        throttledDragAction({ x, y, ...other });
+      },
+      [throttledDragAction, updatePreview],
+    );
 
-    const onDragEnd = (movement) => {
-      cleanupPreview();
-      setIsDragging(false);
+    const onDragEnd = useCallback(
+      (movement) => {
+        cleanupPreview();
+        setIsDragging(false);
 
-      store.dispatch(actions.dragEnd(movement));
-    };
+        store.dispatch(actions.dragEnd(movement));
+      },
+      [cleanupPreview],
+    );
 
     useEffect(() => {
       if (node.current && allowDrag) {
-        dragManager = new DragManager({
+        dragManager.current = new DragManager({
           el: node.current,
           onDragStart,
           onDragMove,
@@ -109,7 +117,15 @@ const dragSource =
         cleanupPreview();
         cleanupDragManager();
       };
-    }, [node, allowDrag]);
+    }, [
+      node,
+      allowDrag,
+      cleanupPreview,
+      onDragEnd,
+      onDragMove,
+      onDragStart,
+      scrollDirection,
+    ]);
 
     const styles = () => (isDragging ? { visibility: 'hidden' } : {});
 
@@ -143,4 +159,7 @@ const dragSource =
     );
   };
 
+  return DragSourceInner;
+};
+
 export default dragSource;

lib/interviewer/behaviours/DragAndDrop/DropTarget.js

@@ -12,7 +12,9 @@ const maxFramesPerSecond = 10;
 const dropTarget = (WrappedComponent) => {
   class DropTarget extends Component {
     componentDidMount() {
-      if (!this.component) { return; }
+      if (!this.component) {
+        return;
+      }
       this.node = findDOMNode(this.component);
       this.update();
     }
@@ -25,10 +27,8 @@ const dropTarget = (WrappedComponent) => {
 
     removeTarget = () => {
       const { id } = this.props;
-      store.dispatch(
-        actions.removeTarget(id),
-      );
-    }
+      store.dispatch(actions.removeTarget(id));
+    };
 
     update = () => {
       this.updateTarget();
@@ -39,19 +39,14 @@ const dropTarget = (WrappedComponent) => {
       //   },
       //   1000 / maxFramesPerSecond,
       // );
-    }
+    };
 
     updateTarget = () => {
-      if (!this.node) { return; }
+      if (!this.node) {
+        return;
+      }
 
-      const {
-        id,
-        onDrop,
-        onDrag,
-        onDragEnd,
-        accepts,
-        meta,
-      } = this.props;
+      const { id, onDrop, onDrag, onDragEnd, accepts, meta } = this.props;
 
       const boundingClientRect = getAbsoluteBoundingRect(this.node);
       store.dispatch(
@@ -68,18 +63,16 @@ const dropTarget = (WrappedComponent) => {
           x: boundingClientRect.left,
         }),
       );
-    }
+    };
 
     render() {
-      const {
-        accepts,
-        meta,
-        ...props
-      } = this.props;
+      const { ...props } = this.props;
 
       return (
         <WrappedComponent
-          ref={(component) => { this.component = component; }}
+          ref={(component) => {
+            this.component = component;
+          }}
           {...props}
         />
       );

lib/interviewer/behaviours/DragAndDrop/Monitor.js

@@ -1,4 +1,3 @@
-/* eslint-disable implicit-arrow-linebreak, react/jsx-props-no-spreading */
 import React, { PureComponent } from 'react';
 import { pick, isEqual } from 'lodash';
 import store from './store';
@@ -19,12 +18,15 @@ const monitor = (getMonitorProps, types) => (WrappedComponent) =>
     }
 
     updateMonitorProps = () => {
-      const monitorPropsNew = pick(getMonitorProps(store.getState(), this.props), types);
+      const monitorPropsNew = pick(
+        getMonitorProps(store.getState(), this.props),
+        types,
+      );
       const { monitorProps } = this.state;
       if (!isEqual(monitorProps, monitorPropsNew)) {
         this.setState({ monitorProps: monitorPropsNew });
       }
-    }
+    };
 
     render() {
       const { monitorProps } = this.state;

lib/interviewer/behaviours/DragAndDrop/store.js

@@ -1,14 +1,10 @@
 import thunk from 'redux-thunk';
 import reducer from './reducer';
-import logger from '../../ducks/middleware/logger';
 import { configureStore } from '@reduxjs/toolkit';
 
 const store = configureStore({
   reducer,
-  middleware: [
-    thunk,
-    // logger
-  ],
+  middleware: [thunk],
 });
 
 export default store;