MPDX-6917-Remove-Lodash

.eslintrc.js

@@ -24,7 +24,10 @@ module.exports = {
     'import/no-named-default': 'error',
     'import/no-anonymous-default-export': 'error',
     'import/dynamic-import-chunkname': 'error',
-    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      { argsIgnorePattern: '^_', varsIgnorePattern: '^_' },
+    ],
   },
   settings: {
     react: {

pages/accountLists/[accountListId]/tasks.tsx

@@ -3,23 +3,21 @@ import Head from 'next/head';
 import { GetServerSideProps } from 'next';
 import { getSession } from 'next-auth/client';
 import { useTranslation } from 'react-i18next';
-import { castArray, pick } from 'lodash/fp';
 import { parse } from 'query-string';
 import { useRouter } from 'next/router';
 import { useApp } from '../../../src/components/App';
 import TaskHome from '../../../src/components/Task/Home';
 import { TaskFilter } from '../../../src/components/Task/List/List';
-import reduceObject from '../../../src/lib/reduceObject';
 
 export const initialFilterFromPath = (path: string): TaskFilter => {
-  let initialFilter = {};
+  let initialFilter: TaskFilter = {};
   const queryString = path.split('?')[1];
 
   if (queryString) {
     const filter = parse(queryString);
 
-    initialFilter = reduceObject(
-      (result: TaskFilter, value: string | string[], key: string) => {
+    initialFilter = Object.entries(filter).reduce(
+      (result: TaskFilter, [key, value]) => {
         switch (key) {
           case 'completed':
             result.completed = value === 'true';
@@ -36,28 +34,34 @@ export const initialFilterFromPath = (path: string): TaskFilter => {
             result.startAt.min = value.toString();
             break;
           default:
-            result[key.replace('[]', '')] = castArray(value);
+            result[key.replace('[]', '')] = Array.isArray(value)
+              ? value
+              : [value];
         }
         return result;
       },
       {},
-      filter,
     );
 
-    initialFilter = pick(
-      [
-        'userIds',
-        'tags',
-        'contactIds',
-        'activityType',
-        'completed',
-        'wildcardSearch',
-        'startAt',
-      ],
-      initialFilter,
-    );
+    const {
+      userIds,
+      tags,
+      contactIds,
+      activityType,
+      completed,
+      wildcardSearch,
+      startAt,
+    } = initialFilter;
 
-    return initialFilter;
+    return {
+      userIds,
+      tags,
+      contactIds,
+      activityType,
+      completed,
+      wildcardSearch,
+      startAt,
+    };
   }
 };
 

src/components/App/Provider.tsx

@@ -6,7 +6,6 @@ import React, {
   Dispatch,
 } from 'react';
 import { v4 as uuidv4 } from 'uuid';
-import { omit, remove, find } from 'lodash/fp';
 import TaskDrawer, { TaskDrawerProps } from '../Task/Drawer/Drawer';
 import theme from '../../theme';
 import rootReducer, { Action, AppState } from './rootReducer';
@@ -39,12 +38,10 @@ const AppProvider = ({ initialState, children }: Props): ReactElement => {
     const id = uuidv4();
     if (
       !taskDrawerProps.taskId ||
-      !find(
-        {
-          taskId: taskDrawerProps.taskId,
-          showCompleteForm: taskDrawerProps.showCompleteForm,
-        },
-        taskDrawers,
+      !taskDrawers.find(
+        ({ taskId, showCompleteForm }) =>
+          taskId === taskDrawerProps.taskId &&
+          showCompleteForm === taskDrawerProps.showCompleteForm,
       )
     ) {
       setTaskDrawers([
@@ -56,7 +53,9 @@ const AppProvider = ({ initialState, children }: Props): ReactElement => {
             taskDrawerProps.onClose && taskDrawerProps.onClose();
             setTimeout(
               () =>
-                setTaskDrawers((taskDrawers) => remove({ id }, taskDrawers)),
+                setTaskDrawers((taskDrawers) =>
+                  taskDrawers.filter(({ id: taskId }) => taskId !== id),
+                ),
               theme.transitions.duration.leavingScreen,
             );
           },
@@ -74,9 +73,11 @@ const AppProvider = ({ initialState, children }: Props): ReactElement => {
   return (
     <AppContext.Provider value={value}>
       {children}
-      {taskDrawers.map((props: TaskDrawerPropsWithId) => (
-        <TaskDrawer key={props.id} {...omit('id', props)} />
-      ))}
+      {taskDrawers.map((props: TaskDrawerPropsWithId) => {
+        const { id, ...taskDrawerProps } = props;
+
+        return <TaskDrawer key={id} {...taskDrawerProps} />;
+      })}
     </AppContext.Provider>
   );
 };

src/components/Dashboard/ThisWeek/PartnerCare/PartnerCare.tsx

@@ -21,7 +21,7 @@ import CakeIcon from '@material-ui/icons/Cake';
 import FavoriteIcon from '@material-ui/icons/Favorite';
 import { Skeleton } from '@material-ui/lab';
 import { motion } from 'framer-motion';
-import { uniqBy } from 'lodash/fp';
+import uniqBy from 'lodash/fp/uniqBy';
 import { useTranslation } from 'react-i18next';
 import Link from 'next/link';
 import { dayMonthFormat } from '../../../../lib/intlFormat';

src/components/Layouts/Primary/TopBar/NotificationMenu/Item/Item.tsx

@@ -13,7 +13,6 @@ import {
 import { Skeleton } from '@material-ui/lab';
 import React, { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
-import { cloneDeep, isFunction } from 'lodash/fp';
 import { isSameMonth } from 'date-fns';
 import { AcknowledgeUserNotificationMutation } from '../../../../../../../types/AcknowledgeUserNotificationMutation';
 import {
@@ -102,14 +101,19 @@ const NotificationMenuItem = ({
               after: null,
             },
           };
-          const data = cloneDeep(cache.readQuery<GetNotificationsQuery>(query));
+          const dataFromCache = cache.readQuery<GetNotificationsQuery>(query);
+          const data = {
+            userNotifications: {
+              ...dataFromCache.userNotifications,
+            },
+          };
           data.userNotifications.unreadCount--;
           cache.writeQuery({ ...query, data });
           optimisticResponse = false;
         },
       });
     }
-    if (isFunction(onClick)) onClick();
+    if (typeof onClick === 'function') onClick();
   };
 
   let message;

src/components/Layouts/Primary/TopBar/NotificationMenu/NotificationMenu.tsx

@@ -13,7 +13,6 @@ import React, { ReactElement, useEffect, useState } from 'react';
 import NotificationsIcon from '@material-ui/icons/Notifications';
 import { gql, useMutation, useLazyQuery } from '@apollo/client';
 import { useTranslation } from 'react-i18next';
-import { cloneDeep } from 'lodash/fp';
 import { useApp } from '../../../../App';
 import { GetNotificationsQuery } from '../../../../../../types/GetNotificationsQuery';
 import { AcknowledgeAllUserNotificationsMutation } from '../../../../../../types/AcknowledgeAllUserNotificationsMutation';
@@ -105,7 +104,12 @@ const NotificationMenu = (): ReactElement => {
             after: null,
           },
         };
-        const data = cloneDeep(cache.readQuery<GetNotificationsQuery>(query));
+        const dataFromCache = cache.readQuery<GetNotificationsQuery>(query);
+        const data = {
+          userNotifications: {
+            ...dataFromCache.userNotifications,
+          },
+        };
         data.userNotifications.unreadCount = 0;
         data.userNotifications.edges = data.userNotifications.edges.map(
           ({ node }) => ({

src/components/Layouts/Primary/TopBar/TopBar.tsx

@@ -26,7 +26,6 @@ import MenuIcon from '@material-ui/icons/Menu';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import { signout } from 'next-auth/client';
-import { compact } from 'lodash/fp';
 import NextLink from 'next/link';
 import { GetTopBarQuery } from '../../../../../types/GetTopBarQuery';
 import { SIDE_BAR_MINIMIZED_WIDTH, SIDE_BAR_WIDTH } from '../SideBar/SideBar';
@@ -366,9 +365,9 @@ const TopBar = ({ open, handleOpenChange }: Props): ReactElement => {
               <Avatar>{data.user.firstName[0]}</Avatar>
             </ListItemAvatar>
             <ListItemText
-              primary={compact([data.user.firstName, data.user.lastName]).join(
-                ' ',
-              )}
+              primary={[data.user.firstName, data.user.lastName]
+                .filter(Boolean)
+                .join(' ')}
               secondary={data.user.keyAccounts[0]?.email}
             />
           </MenuItem>
@@ -400,7 +399,7 @@ const TopBar = ({ open, handleOpenChange }: Props): ReactElement => {
           </MenuItem>
         </HandoffLink>
         {(data?.user?.admin ||
-          !!data?.user?.administrativeOrganizations?.nodes?.length) && (
+          data?.user?.administrativeOrganizations?.nodes?.length) && (
           <HandoffLink path="/preferences/organizations">
             <MenuItem onClick={handleProfileMenuClose} component="a">
               <ListItemText primary={t('Manage Organizations')} />

src/components/Task/Drawer/CommentList/CommentList.tsx

@@ -2,7 +2,6 @@ import React, { ReactElement, useRef, useEffect } from 'react';
 import { makeStyles, Theme, Box, Card, CardContent } from '@material-ui/core';
 import { useTranslation } from 'react-i18next';
 import { gql, useQuery } from '@apollo/client';
-import { reduce } from 'lodash/fp';
 import { GetCommentsForTaskDrawerCommentListQuery } from '../../../../../types/GetCommentsForTaskDrawerCommentListQuery';
 import illustration4 from '../../../../images/drawkit/grape/drawkit-grape-pack-illustration-4.svg';
 import TaskDrawerCommentListItem from './Item';
@@ -104,27 +103,21 @@ const TaskDrawerCommentList = ({
               </Card>
             )}
             {data.task.comments.nodes.length > 0 &&
-              reduce(
-                (result, comment) => {
-                  return [
-                    ...result,
-                    <Box
-                      data-testid={`TaskDrawerCommentListItem-${comment.id}`}
-                      key={comment.id}
-                    >
-                      <TaskDrawerCommentListItem
-                        comment={comment}
-                        reverse={comment.me}
-                        nextComment={
-                          data.task.comments.nodes[result.length + 1]
-                        }
-                      />
-                    </Box>,
-                  ];
-                },
-                [],
-                data.task.comments.nodes,
-              )}
+              data.task.comments.nodes.reduce((result, comment) => {
+                return [
+                  ...result,
+                  <Box
+                    data-testid={`TaskDrawerCommentListItem-${comment.id}`}
+                    key={comment.id}
+                  >
+                    <TaskDrawerCommentListItem
+                      comment={comment}
+                      reverse={comment.me}
+                      nextComment={data.task.comments.nodes[result.length + 1]}
+                    />
+                  </Box>,
+                ];
+              }, [])}
           </>
         )}
       </Box>

src/components/Task/Drawer/CommentList/Form/Form.tsx

@@ -13,7 +13,7 @@ import * as yup from 'yup';
 import SendIcon from '@material-ui/icons/Send';
 import { useMutation, gql } from '@apollo/client';
 import { motion } from 'framer-motion';
-import { cloneDeep, reject } from 'lodash/fp';
+import reject from 'lodash/fp/reject';
 import { v4 as uuidv4 } from 'uuid';
 import { CreateTaskCommentMutation } from '../../../../../../types/CreateTaskCommentMutation';
 import { TaskCommentCreateInput } from '../../../../../../types/globalTypes';
@@ -125,16 +125,24 @@ const Form = ({ accountListId, taskId }: Props): ReactElement => {
             taskId,
           },
         };
-        const data = cloneDeep(
-          cache.readQuery<GetCommentsForTaskDrawerCommentListQuery>(query),
+        const dataFromCache = cache.readQuery<GetCommentsForTaskDrawerCommentListQuery>(
+          query,
         );
-        data.task.comments.nodes = [
-          ...reject(
-            ({ id: commentId }) => id === commentId,
-            data.task.comments.nodes,
-          ),
-          comment,
-        ];
+        const data = {
+          task: {
+            ...dataFromCache.task,
+            comments: {
+              ...dataFromCache.task.comments,
+              nodes: [
+                ...reject(
+                  ({ id: commentId }) => id === commentId,
+                  dataFromCache.task.comments.nodes,
+                ),
+                { ...comment },
+              ],
+            },
+          },
+        };
         cache.writeQuery({ ...query, data });
       },
     });

src/components/Task/Drawer/CommentList/Item/Item.tsx

@@ -9,7 +9,6 @@ import {
   Slide,
 } from '@material-ui/core';
 import { formatDistanceToNow, isSameHour } from 'date-fns';
-import { compact } from 'lodash/fp';
 import { Skeleton } from '@material-ui/lab';
 import { GetCommentsForTaskDrawerCommentListQuery_task_comments_nodes as Comment } from '../../../../../../types/GetCommentsForTaskDrawerCommentListQuery';
 
@@ -103,11 +102,13 @@ const TaskDrawerCommentListItem = ({
   return (
     <Slide direction={reverse ? 'left' : 'right'} in={true}>
       <Box
-        className={compact([
+        className={[
           classes.container,
           reverse && classes.reverse,
           nextCommentMatches && classes.compact,
-        ]).join(' ')}
+        ]
+          .filter(Boolean)
+          .join(' ')}
       >
         {!reverse && (
           <Box>

src/components/Task/Drawer/ContactList/ContactList.tsx

@@ -9,7 +9,6 @@ import {
 } from '@material-ui/core';
 import { useTranslation } from 'react-i18next';
 import { gql, useLazyQuery } from '@apollo/client';
-import { sortBy } from 'lodash/fp';
 import { GetContactsForTaskDrawerContactListQuery } from '../../../../../types/GetContactsForTaskDrawerContactListQuery';
 import illustration4 from '../../../../images/drawkit/grape/drawkit-grape-pack-illustration-4.svg';
 import TaskDrawerContactListItem from './Item';
@@ -144,15 +143,17 @@ const TaskDrawerContactList = ({
           )}
           {data?.contacts?.nodes && data.contacts.nodes.length > 0 && (
             <Grid container spacing={2} direction="column">
-              {sortBy('name', data.contacts.nodes).map((contact) => (
-                <Grid
-                  item
-                  key={contact.id}
-                  data-testid={`TaskDrawerContactListItem-${contact.id}`}
-                >
-                  <TaskDrawerContactListItem contact={contact} />
-                </Grid>
-              ))}
+              {[...data.contacts.nodes]
+                .sort((a, b) => a.name.localeCompare(b.name))
+                .map((contact) => (
+                  <Grid
+                    item
+                    key={contact.id}
+                    data-testid={`TaskDrawerContactListItem-${contact.id}`}
+                  >
+                    <TaskDrawerContactListItem contact={contact} />
+                  </Grid>
+                ))}
             </Grid>
           )}
         </>