From 9a7960556b07d355d28d1694e09f4cd97b2dd540 Mon Sep 17 00:00:00 2001
From: Andrew P Maney <amaney@usc.edu>
Date: Wed, 18 Mar 2020 13:00:28 -0700
Subject: [PATCH] Tasks: adds memoization to Sidebar

---
 src/Pim/index.tsx                 | 16 +++++++++-------
 src/components/Tasks/Sidebar.tsx  |  4 ++--
 src/components/Tasks/TaskList.tsx | 10 +++++++---
 3 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/Pim/index.tsx b/src/Pim/index.tsx
index b38d502..7734879 100644
--- a/src/Pim/index.tsx
+++ b/src/Pim/index.tsx
@@ -42,10 +42,6 @@ import { addJournalEntry } from '../etesync-helpers';
 
 import { syncEntriesToItemMap, syncEntriesToEventItemMap, syncEntriesToTaskItemMap } from '../journal-processors';
 
-function objValues(obj: any) {
-  return Object.keys(obj).map((x) => obj[x]);
-}
-
 const itemsSelector = createSelector(
   (props: {syncInfo: SyncInfo}) => props.syncInfo,
   (syncInfo) => {
@@ -80,6 +76,11 @@ const itemsSelector = createSelector(
   }
 );
 
+const itemValuesSelector = createSelector(
+  itemsSelector,
+  ({ addressBookItems, calendarItems, taskListItems }) => [addressBookItems, calendarItems, taskListItems].map(Object.values)
+);
+
 const ItemChangeLog = React.memo((props: any) => {
   const {
     syncInfo,
@@ -313,6 +314,7 @@ class Pim extends React.PureComponent {
 
   public render() {
     const { collectionsAddressBook, collectionsCalendar, collectionsTaskList, addressBookItems, calendarItems, taskListItems } = itemsSelector(this.props);
+    const [contacts, events, tasks] = itemValuesSelector(this.props);
 
     return (
       <Switch>
@@ -321,9 +323,9 @@ class Pim extends React.PureComponent {
           exact
           render={({ history }) => (
             <PimMain
-              contacts={objValues(addressBookItems)}
-              events={objValues(calendarItems)}
-              tasks={objValues(taskListItems)}
+              contacts={contacts}
+              events={events}
+              tasks={tasks}
               history={history}
               onItemSave={this.onItemSave}
               collectionsTaskList={collectionsTaskList}
diff --git a/src/components/Tasks/Sidebar.tsx b/src/components/Tasks/Sidebar.tsx
index 3477a75..3c47821 100644
--- a/src/components/Tasks/Sidebar.tsx
+++ b/src/components/Tasks/Sidebar.tsx
@@ -42,7 +42,7 @@ function SidebarListItem(props: ListItemPropsType) {
   );
 }
 
-export default function Sidebar(props: { tasks: TaskType[] }) {
+export default React.memo(function Sidebar(props: { tasks: TaskType[] }) {
   const { tasks } = props;
 
   const amountDueToday = tasks.filter((x) => x.dueDate && moment(x.dueDate.toJSDate()).isSame(moment(), 'day')).length;
@@ -71,4 +71,4 @@ export default function Sidebar(props: { tasks: TaskType[] }) {
       {tagsList}
     </List>
   );
-}
\ No newline at end of file
+});
\ No newline at end of file
diff --git a/src/components/Tasks/TaskList.tsx b/src/components/Tasks/TaskList.tsx
index 3c302f6..4fd5bfb 100644
--- a/src/components/Tasks/TaskList.tsx
+++ b/src/components/Tasks/TaskList.tsx
@@ -38,13 +38,17 @@ interface PropsType {
   onItemSave: (item: PimType, journalUid: string, originalItem?: PimType) => Promise<void>;
 }
 
-export default React.memo(function TaskList(props: PropsType) {
+export default function TaskList(props: PropsType) {
   const [showCompleted, setShowCompleted] = React.useState(false);
   const settings = useSelector((state: StoreState) => state.settings.taskSettings);
   const { filterBy } = settings;
   const theme = useTheme();
 
-  const potentialEntries = props.entries.filter((x) => showCompleted || !x.finished);
+  const potentialEntries = React.useMemo(
+    () => props.entries.filter((x) => showCompleted || !x.finished),
+    [showCompleted, props.entries]
+  );
+
   let entries;
 
   const tagPrefix = 'tag:';
@@ -98,4 +102,4 @@ export default React.memo(function TaskList(props: PropsType) {
       </Grid>
     </Grid>
   );
-});
+}