Tasks: adds memoization to Sidebar

master
Andrew P Maney 5 years ago committed by Tom Hacohen
parent f3ba0b30ef
commit 9a7960556b

@ -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}

@ -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>
);
}
});

@ -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>
);
});
}

Loading…
Cancel
Save