refactor to use es-toolkit

app/(interview)/interview/_components/ServerSync.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { debounce, isEqual } from 'lodash-es';
+import { debounce, isEqual } from 'es-toolkit';
 import { type ReactNode, useCallback, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import type { SyncInterviewType } from '~/actions/interviews';
@@ -26,9 +26,7 @@ const ServerSync = ({
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const debouncedSessionSync = useCallback(
     debounce(serverSync, 2000, {
-      leading: true,
-      trailing: true,
-      maxWait: 10000,
+      edges: ['trailing', 'leading'],
     }),
     [serverSync],
   );

app/dashboard/participants/_components/DropzoneField.tsx

@@ -1,4 +1,3 @@
-import { isArray } from 'lodash-es';
 import { FileCheck, FileText } from 'lucide-react';
 import { useId } from 'react';
 import { useDropzone } from 'react-dropzone';
@@ -41,7 +40,7 @@ export default function DropzoneField<T>({
             return 'No CSV file selected. Please select a file.';
           }
 
-          if (!isArray(value)) {
+          if (!Array.isArray(value)) {
             return 'Invalid CSV. Please select a valid CSV file.';
           }
 

hooks/use-data-table.tsx

@@ -23,7 +23,7 @@ import type {
   SortableField,
 } from '~/lib/data-table/types';
 
-import { debounce } from 'lodash-es';
+import { debounce } from 'es-toolkit';
 import { useTableStateFromSearchParams } from '~/app/dashboard/_components/ActivityFeed/useTableStateFromSearchParams';
 
 type UseDataTableProps<TData, TValue> = {
@@ -106,8 +106,7 @@ export function useDataTable<TData, TValue>({
       },
       2000,
       {
-        trailing: true,
-        leading: false,
+        edges: ['trailing'],
       },
     ),
     [],

lib/interviewer/behaviours/DragAndDrop/DragManager.js

@@ -1,4 +1,4 @@
-import { throttle } from 'lodash-es';
+import { throttle } from 'es-toolkit';
 
 export const VERTICAL_SCROLL = 'VERTICAL_SCROLL';
 const HORIZONTAL_SCROLL = 'HORIZONTAL_SCROLL';

lib/interviewer/behaviours/DragAndDrop/DragSource.js

@@ -1,4 +1,4 @@
-import { throttle } from 'lodash-es';
+import { throttle } from 'es-toolkit';
 import { useEffect, useRef, useState } from 'react';
 import DragManager, { VERTICAL_SCROLL } from './DragManager';
 import DragPreview from './DragPreview';

lib/interviewer/behaviours/DragAndDrop/Monitor.js

@@ -1,4 +1,4 @@
-import { isEqual, pick } from 'lodash-es';
+import { isEqual, pick } from 'es-toolkit';
 import { PureComponent } from 'react';
 import store from './store';
 

lib/interviewer/behaviours/DragAndDrop/MonitorDropTarget.js

@@ -1,4 +1,4 @@
-import { find, get } from 'lodash-es';
+import { find, get } from 'es-toolkit/compat';
 import { PropTypes } from 'prop-types';
 import Monitor from './Monitor';
 

lib/interviewer/behaviours/DragAndDrop/reducer.js

@@ -1,4 +1,5 @@
-import { filter, isEmpty, omit, reject, some, thru } from 'lodash-es';
+import { omit } from 'es-toolkit';
+import { filter, isEmpty, some } from 'es-toolkit/compat';
 
 const UPSERT_TARGET = Symbol('DRAG_AND_DROP/UPSERT_TARGET');
 const RENAME_TARGET = Symbol('DRAG_AND_DROP/RENAME_TARGET');
@@ -63,18 +64,17 @@ const markHitTarget = ({ target, source }) => {
 const markHitTargets = ({ targets, source }) =>
   targets.map((target) => markHitTarget({ target, source }));
 
-const markHitSource = ({ targets, source }) =>
-  thru(source, (s) => {
-    if (isEmpty(s)) {
-      return s;
-    }
+const markHitSource = ({ targets, source }) => {
+  if (isEmpty(source)) {
+    return source;
+  }
 
-    return {
-      ...s,
-      isOver: filter(targets, 'isOver').length > 0,
-      isOutOfBounds: markOutOfBounds(s),
-    };
-  });
+  return {
+    ...source,
+    isOver: filter(targets, 'isOver').length > 0,
+    isOutOfBounds: markOutOfBounds(source),
+  };
+};
 
 const markHitAll = ({ targets, obstacles, source, ...rest }) => {
   const targetsWithHits = markHitTargets({ targets, source });
@@ -142,7 +142,7 @@ const reducer = (state = initialState, action) => {
   switch (action.type) {
     case UPSERT_TARGET: {
       const targets = [
-        ...reject(state.targets, ['id', action.target.id]),
+        ...filter(state.targets, (target) => target.id !== action.target.id),
         markHitTarget({ target: action.target, source: state.source }),
       ];
 
@@ -172,7 +172,10 @@ const reducer = (state = initialState, action) => {
         }),
       };
     case REMOVE_TARGET: {
-      const targets = reject(state.targets, ['id', action.id]);
+      const targets = filter(
+        state.targets,
+        (target) => target.id !== action.id,
+      );
       const source = markHitSource({ targets, source: state.source });
       return {
         ...state,
@@ -182,7 +185,10 @@ const reducer = (state = initialState, action) => {
     }
     case UPSERT_OBSTACLE: {
       const obstacles = [
-        ...reject(state.obstacles, ['id', action.obstacle.id]),
+        ...filter(
+          state.obstacles,
+          (obstacle) => obstacle.id !== action.obstacle.id,
+        ),
         markHitTarget({ target: action.obstacle, source: state.source }),
       ];
 
@@ -198,7 +204,10 @@ const reducer = (state = initialState, action) => {
       };
     }
     case REMOVE_OBSTACLE: {
-      const obstacles = reject(state.obstacles, ['id', action.id]);
+      const obstacles = filter(
+        state.obstacles,
+        (obstacle) => obstacle.id !== action.id,
+      );
       const source = markHitSource({
         targets: obstacles,
         source: state.source,

lib/interviewer/behaviours/DragAndDrop/useDropMonitor.js

@@ -1,4 +1,5 @@
-import { find, get, isEqual, pick } from 'lodash-es';
+import { isEqual, pick } from 'es-toolkit';
+import { find, get } from 'es-toolkit/compat';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 import store from './store';

lib/interviewer/behaviours/autoInitialisedForm.js

@@ -1,19 +1,19 @@
-import { fromPairs, map } from 'lodash-es';
+import { fromPairs } from 'es-toolkit/compat';
 import PropTypes from 'prop-types';
 
 // TODO: Seems like this knowledge should be part of the field component?
 const typeInitalValue = (field) => {
   switch (field.type) {
     case 'CheckboxGroup':
     case 'ToggleGroup':
-      return fromPairs(map(field.options, (option) => [option, false]));
+      return fromPairs(field.options.map((option) => [option, false]));
     default:
       return '';
   }
 };
 
 const initialValues = (fields) =>
-  fromPairs(map(fields, (field) => [field.name, typeInitalValue(field)]));
+  fromPairs(fields.map((field) => [field.name, typeInitalValue(field)]));
 
 /**
  * Renders a redux form that contains fields according to a `fields` config.

lib/interviewer/behaviours/withBounds.js

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-find-dom-node */
 
-import { isEqual } from 'lodash-es';
+import { isEqual } from 'es-toolkit';
 import { Component } from 'react';
 import { findDOMNode } from 'react-dom';
 import getAbsoluteBoundingRect from '../utils/getAbsoluteBoundingRect';

lib/interviewer/behaviours/withPrompt.js

@@ -1,4 +1,4 @@
-import { get } from 'lodash-es';
+import { get } from 'es-toolkit/compat';
 import { useDispatch, useSelector } from 'react-redux';
 import { actionCreators as sessionActions } from '../ducks/modules/session';
 import { getAllVariableUUIDsByEntity } from '../selectors/protocol';

lib/interviewer/components/Canvas/ConvexHull.js

@@ -1,6 +1,5 @@
 import { entityAttributesProperty } from '@codaco/shared-consts';
 import ConcaveMan from 'concaveman';
-import { map } from 'lodash-es';
 import PropTypes from 'prop-types';
 import { useEffect, useState } from 'react';
 
@@ -15,7 +14,7 @@ const ConvexHull = ({
   useEffect(() => {
     const generateHull = (nodeCollection) => {
       // Restructure as array of arrays of coords
-      const groupAsCoords = map(nodeCollection, (node) => {
+      const groupAsCoords = nodeCollection.map((node) => {
         const nodeCoords = node[entityAttributesProperty][layoutVariable];
         return [nodeCoords.x, nodeCoords.y];
       });

lib/interviewer/components/Canvas/ConvexHulls.js

@@ -1,5 +1,5 @@
 import { entityAttributesProperty } from '@codaco/shared-consts';
-import { findIndex } from 'lodash-es';
+import { findIndex } from 'es-toolkit/compat';
 import PropTypes from 'prop-types';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';

lib/interviewer/components/Canvas/EdgeLayout.js

@@ -1,4 +1,4 @@
-import { get } from 'lodash-es';
+import { get } from 'es-toolkit/compat';
 import { useContext, useEffect, useRef } from 'react';
 import { useSelector } from 'react-redux';
 import LayoutContext from '../../contexts/LayoutContext';

lib/interviewer/components/Canvas/NodeLayout.js

@@ -3,7 +3,7 @@ import {
   entityAttributesProperty,
   entityPrimaryKeyProperty,
 } from '@codaco/shared-consts';
-import { find, get, isEmpty } from 'lodash-es';
+import { find, get, isEmpty } from 'es-toolkit/compat';
 import PropTypes from 'prop-types';
 import React from 'react';
 import LayoutContext from '../../contexts/LayoutContext';

lib/interviewer/components/Canvas/ScreenManager.js

@@ -1,4 +1,4 @@
-import { clamp } from 'lodash-es';
+import { clamp } from 'es-toolkit';
 
 const screenManager = () => {
   const el = {

lib/interviewer/components/Canvas/utils.js

@@ -1,4 +1,4 @@
-import { get } from 'lodash-es';
+import { get } from 'es-toolkit/compat';
 
 export const getTwoModeLayoutVariable = (twoMode, nodeType, layout) => {
   if (!twoMode) {

lib/interviewer/components/NodeList.js

@@ -1,7 +1,7 @@
 import { entityPrimaryKeyProperty } from '@codaco/shared-consts';
 import { compose } from '@reduxjs/toolkit';
 import cx from 'classnames';
-import { find } from 'lodash-es';
+import { find } from 'es-toolkit/compat';
 import { AnimatePresence, motion } from 'motion/react';
 import PropTypes from 'prop-types';
 import { useRef, useState } from 'react';

lib/interviewer/containers/Canvas/NodeBucket.js

@@ -1,5 +1,5 @@
 import { entityPrimaryKeyProperty } from '@codaco/shared-consts';
-import { isNull, isUndefined } from 'lodash-es';
+import { isNull, isUndefined } from 'es-toolkit';
 import { AnimatePresence, motion } from 'motion/react';
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';

lib/interviewer/containers/Canvas/NodeLayout.js

@@ -2,7 +2,7 @@ import {
   entityAttributesProperty,
   entityPrimaryKeyProperty,
 } from '@codaco/shared-consts';
-import { get } from 'lodash-es';
+import { get } from 'es-toolkit/compat';
 import { connect } from 'react-redux';
 import { compose, withHandlers, withState } from 'recompose';
 import { DropTarget } from '../../behaviours/DragAndDrop';

lib/interviewer/containers/Canvas/PresetSwitcherKey.js

@@ -1,5 +1,5 @@
 import cx from 'classnames';
-import { get, isEmpty } from 'lodash-es';
+import { get, isEmpty } from 'es-toolkit/compat';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { createPortal } from 'react-dom';

lib/interviewer/containers/Canvas/Radar.js

@@ -1,5 +1,5 @@
 import color from 'color';
-import { last, range, zipWith } from 'lodash-es';
+import { last, range, zipWith } from 'es-toolkit';
 import PropTypes from 'prop-types';
 import { getCSSVariableAsString } from '~/lib/ui/utils/CSSVariables';
 

lib/interviewer/containers/CategoricalList/CategoricalList.js

@@ -2,7 +2,7 @@ import { entityAttributesProperty } from '@codaco/shared-consts';
 import { compose } from '@reduxjs/toolkit';
 import cx from 'classnames';
 import color from 'color';
-import { throttle } from 'lodash-es';
+import { throttle } from 'es-toolkit';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { Flipper } from 'react-flip-toolkit';

lib/interviewer/containers/CategoricalList/CategoricalListItem.js

@@ -1,6 +1,6 @@
 import { entityPrimaryKeyProperty } from '@codaco/shared-consts';
 import { compose } from '@reduxjs/toolkit';
-import { get } from 'lodash-es';
+import { get } from 'es-toolkit/compat';
 import PropTypes from 'prop-types';
 import { useState } from 'react';
 import { connect } from 'react-redux';

lib/interviewer/containers/Field.js

@@ -1,4 +1,4 @@
-import { get, map, toPairs } from 'lodash-es';
+import { get } from 'es-toolkit/compat';
 import PropTypes from 'prop-types';
 import { useMemo } from 'react';
 import { useStore } from 'react-redux';
@@ -31,7 +31,7 @@ const getInputComponent = (componentType = 'Text') => {
  * @param {string} validation The name of the validation function to return.
  */
 const getValidation = (validation, store) =>
-  map(toPairs(validation), ([type, options]) =>
+  Object.entries(validation).map(([type, options]) =>
     Object.hasOwnProperty.call(validations, type)
       ? validations[type](options, store)
       : () => `Validation "${type}" not found`,

lib/interviewer/containers/Interfaces/DyadCensus/DyadCensus.js

@@ -1,5 +1,5 @@
 import cx from 'classnames';
-import { get } from 'lodash-es';
+import { get } from 'es-toolkit/compat';
 import { AnimatePresence, motion } from 'motion/react';
 import PropTypes from 'prop-types';
 import { useState } from 'react';

lib/interviewer/containers/Interfaces/EgoForm.js

@@ -1,4 +1,4 @@
-import { debounce } from 'lodash-es';
+import { debounce } from 'es-toolkit';
 import { AnimatePresence, motion } from 'motion/react';
 import PropTypes from 'prop-types';
 import { useCallback, useEffect, useMemo, useState } from 'react';

lib/interviewer/containers/Interfaces/NameGenerator.js

@@ -2,7 +2,8 @@ import {
   entityAttributesProperty,
   entityPrimaryKeyProperty,
 } from '@codaco/shared-consts';
-import { get, has, omit } from 'lodash-es';
+import { omit } from 'es-toolkit';
+import { get, has } from 'es-toolkit/compat';
 import PropTypes from 'prop-types';
 import { useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';

lib/interviewer/containers/Interfaces/NameGeneratorRoster/NameGeneratorRoster.js

@@ -3,7 +3,7 @@ import {
   entityPrimaryKeyProperty,
 } from '@codaco/shared-consts';
 import cx from 'classnames';
-import { get, isEmpty } from 'lodash-es';
+import { get, isEmpty } from 'es-toolkit/compat';
 import { AnimatePresence, motion } from 'motion/react';
 import PropTypes from 'prop-types';
 import { useEffect, useMemo, useRef, useState } from 'react';

lib/interviewer/containers/Interfaces/NameGeneratorRoster/useFuseOptions.js

@@ -1,4 +1,5 @@
-import { compact, get, isEmpty } from 'lodash-es';
+import { compact } from 'es-toolkit';
+import { get, isEmpty } from 'es-toolkit/compat';
 import { useMemo } from 'react';
 
 const defaultFuseOptions = {

lib/interviewer/containers/Interfaces/NameGeneratorRoster/useSortableProperties.js

@@ -1,4 +1,5 @@
-import { compact, get } from 'lodash-es';
+import { compact } from 'es-toolkit';
+import { get } from 'es-toolkit/compat';
 import { useMemo } from 'react';
 import { mapNCType } from '../../../utils/createSorter';
 import { convertNamesToUUIDs } from './helpers';

lib/interviewer/containers/Interfaces/Narrative.js

@@ -1,5 +1,5 @@
 import { entityAttributesProperty } from '@codaco/shared-consts';
-import { get } from 'lodash-es';
+import { get } from 'es-toolkit/compat';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';

lib/interviewer/containers/Interfaces/OrdinalBin.js

@@ -1,5 +1,5 @@
 import { entityAttributesProperty } from '@codaco/shared-consts';
-import { isNil } from 'lodash-es';
+import { isNil } from 'es-toolkit';
 import PropTypes from 'prop-types';
 import { usePrompts } from '../../behaviours/withPrompt';
 import MultiNodeBucket from '../../components/MultiNodeBucket';

lib/interviewer/containers/Interfaces/Sociogram.js

@@ -1,5 +1,5 @@
 import { bindActionCreators } from '@reduxjs/toolkit';
-import { get, isArray } from 'lodash-es';
+import { get } from 'es-toolkit/compat';
 import PropTypes from 'prop-types';
 import { useMemo, useRef, useState } from 'react';
 import { connect, useSelector } from 'react-redux';
@@ -57,7 +57,7 @@ const Sociogram = (props) => {
 
   const interfaceRef = useRef(null);
   const dragSafeRef = useRef(null);
-  const twoMode = useMemo(() => isArray(stage.subject), [stage.subject]);
+  const twoMode = useMemo(() => Array.isArray(stage.subject), [stage.subject]);
 
   const getAssetUrl = useSelector(getAssetUrlFromId);