From cae5c91bc28ea08b36563d92e6596cd489208b80 Mon Sep 17 00:00:00 2001 From: cv <34649812+cpvalente@users.noreply.github.com> Date: Tue, 11 May 2021 14:44:33 +0200 Subject: [PATCH] performance: memo --- .../src/features/editors/list/EventBlock.jsx | 18 +- .../features/editors/list/EventListItem.jsx | 19 +- .../editors/list/EventListWrapper.jsx | 173 ++++++++---------- 3 files changed, 100 insertions(+), 110 deletions(-) diff --git a/client/src/features/editors/list/EventBlock.jsx b/client/src/features/editors/list/EventBlock.jsx index 6e9d045c3..e9cba4876 100644 --- a/client/src/features/editors/list/EventBlock.jsx +++ b/client/src/features/editors/list/EventBlock.jsx @@ -1,6 +1,6 @@ import Icon from '@chakra-ui/icon'; import { FiChevronDown, FiChevronUp, FiMoreVertical } from 'react-icons/fi'; -import { memo, useState } from 'react'; +import { useState } from 'react'; import { Draggable } from 'react-beautiful-dnd'; import EventTimes from '../../../common/components/eventTimes/EventTimes'; import EventTimesVertical from '../../../common/components/eventTimes/EventTimesVertical'; @@ -11,16 +11,6 @@ import DeleteIconBtn from '../../../common/components/buttons/DeleteIconBtn'; import { millisToMinutes } from '../../../common/dateConfig'; import style from './EventBlock.module.css'; -const areEqual = (prevProps, nextProps) => { - return ( - prevProps.data.revision === nextProps.data.revision && - prevProps.selected === nextProps.selected && - prevProps.next === nextProps.next && - prevProps.index === nextProps.index && - prevProps.delay === nextProps.delay - ); -}; - const ExpandedBlock = (props) => { const { provided, data, next, delay, delayValue, actionHandler } = props; @@ -153,7 +143,7 @@ const CollapsedBlock = (props) => { ); }; -const EventBlock = (props) => { +export default function EventBlock(props) { const { data, selected, delay, index, actionHandler } = props; const [expanded, setExpanded] = useState(true); @@ -200,6 +190,4 @@ const EventBlock = (props) => { )} ); -}; - -export default memo(EventBlock, areEqual); +} diff --git a/client/src/features/editors/list/EventListItem.jsx b/client/src/features/editors/list/EventListItem.jsx index 0a6bd8b4a..345403b22 100644 --- a/client/src/features/editors/list/EventListItem.jsx +++ b/client/src/features/editors/list/EventListItem.jsx @@ -2,8 +2,19 @@ import DelayBlock from './DelayBlock'; import BlockBlock from './BlockBlock'; import EventBlock from './EventBlock'; import { showErrorToast } from '../../../common/helpers/toastManager'; +import { memo } from 'react'; -export default function EventListItem(props) { +const areEqual = (prevProps, nextProps) => { + return ( + prevProps.data.revision === nextProps.data.revision && + prevProps.selected === nextProps.selected && + prevProps.next === nextProps.next && + prevProps.index === nextProps.index && + prevProps.delay === nextProps.delay + ); +}; + +const EventListItem = (props) => { const { type, index, @@ -27,7 +38,7 @@ export default function EventListItem(props) { case 'block': eventsHandler('add', { type: 'block', order: index + 1 }); break; - case 'delete': + case 'delete': eventsHandler('delete', data.id); break; case 'update': @@ -83,4 +94,6 @@ export default function EventListItem(props) { default: break; } -} +}; + +export default memo(EventListItem, areEqual); diff --git a/client/src/features/editors/list/EventListWrapper.jsx b/client/src/features/editors/list/EventListWrapper.jsx index ce7c9dc7b..5d5ab369d 100644 --- a/client/src/features/editors/list/EventListWrapper.jsx +++ b/client/src/features/editors/list/EventListWrapper.jsx @@ -203,104 +203,93 @@ export default function EventListWrapper() { }, [isError]); // Events API - const eventsHandler = useCallback( - async (action, payload) => { - switch (action) { - case 'add': - try { - let t = Date.now(); - await addEvent.mutateAsync(payload); - console.log('debug m add', Date.now() - t); - } catch (error) { - showErrorToast('Error creating event', error.message); - } - break; - case 'update': - try { - let t = Date.now(); - await updateEvent.mutateAsync(payload); - console.log('debug m update', Date.now() - t); - } catch (error) { - showErrorToast('Error updating event', error.message); - } - break; - case 'patch': - try { - let t = Date.now(); - await patchEvent.mutateAsync(payload); - console.log('debug m patch', Date.now() - t); - } catch (error) { - showErrorToast('Error updating event', error.message); - } - break; - case 'delete': - try { - let t = Date.now(); - await deleteEvent.mutateAsync(payload); - console.log('debug m delete', Date.now() - t); - } catch (error) { - showErrorToast('Error deleting event', error.message); - } - break; - case 'reorder': - try { - let t = Date.now(); - await reorderEvent.mutateAsync(payload); - console.log('debug m reorder', Date.now() - t); - } catch (error) { - showErrorToast('Error reordering event', error.message); - } - break; - case 'applyDelay': + const eventsHandler = useCallback(async (action, payload) => { + switch (action) { + case 'add': + try { let t = Date.now(); + await addEvent.mutateAsync(payload); + console.log('debug m add', Date.now() - t); + } catch (error) { + showErrorToast('Error creating event', error.message); + } + break; + case 'update': + try { + let t = Date.now(); + await updateEvent.mutateAsync(payload); + console.log('debug m update', Date.now() - t); + } catch (error) { + showErrorToast('Error updating event', error.message); + } + break; + case 'patch': + try { + let t = Date.now(); + await patchEvent.mutateAsync(payload); + console.log('debug m patch', Date.now() - t); + } catch (error) { + showErrorToast('Error updating event', error.message); + } + break; + case 'delete': + try { + let t = Date.now(); + await deleteEvent.mutateAsync(payload); + console.log('debug m delete', Date.now() - t); + } catch (error) { + showErrorToast('Error deleting event', error.message); + } + break; + case 'reorder': + try { + let t = Date.now(); + await reorderEvent.mutateAsync(payload); + console.log('debug m reorder', Date.now() - t); + } catch (error) { + showErrorToast('Error reordering event', error.message); + } + break; + case 'applyDelay': + let t = Date.now(); - // if delay <= 0 delete delay and next block - if (payload.duration <= 0) { - try { - // look for block after - let afterId = false; - let blockAfter = null; - for (const d of data) { - if (d.id === payload.id) afterId = true; - if (afterId && d.type === 'block') { - blockAfter = d.id; - break; - } + // if delay <= 0 delete delay and next block + if (payload.duration <= 0) { + try { + // look for block after + let afterId = false; + let blockAfter = null; + for (const d of data) { + if (d.id === payload.id) afterId = true; + if (afterId && d.type === 'block') { + blockAfter = d.id; + break; } + } - // delete delay - await deleteEvent.mutateAsync(payload.id); - // delete block after, if any - if (blockAfter) await deleteEvent.mutateAsync(blockAfter); - } catch (error) { - showErrorToast('Error applying delay', error.message); - } - } else { - console.log('debug applydelay', payload.id); - try { - await applyDelay.mutateAsync(payload.id); - } catch (error) { - showErrorToast('Error applying delay', error.message); - } + // delete delay + await deleteEvent.mutateAsync(payload.id); + // delete block after, if any + if (blockAfter) await deleteEvent.mutateAsync(blockAfter); + } catch (error) { + showErrorToast('Error applying delay', error.message); } - console.log('debug m apply', Date.now() - t); + } else { + console.log('debug applydelay', payload.id); + try { + await applyDelay.mutateAsync(payload.id); + } catch (error) { + showErrorToast('Error applying delay', error.message); + } + } + console.log('debug m apply', Date.now() - t); - break; - default: - showErrorToast('Unrecognised request', action); - break; - } - }, - [ - addEvent, - applyDelay, - data, - deleteEvent, - patchEvent, - reorderEvent, - updateEvent, - ] - ); + break; + default: + showErrorToast('Unrecognised request', action); + break; + } + }, []); return ( <>