cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-19 22:24:11 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

performance: memo

Browse Source
This commit is contained in:
cv
2021-05-11 14:44:33 +02:00
parent 5449aee0b0
commit cae5c91bc2
3 changed files with 100 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/features/editors/list/EventBlock.jsx
+3 -15
View File
@@ -1,6 +1,6 @@
import Icon from '@chakra-ui/icon'; import Icon from '@chakra-ui/icon';
import { FiChevronDown, FiChevronUp, FiMoreVertical } from 'react-icons/fi'; import { FiChevronDown, FiChevronUp, FiMoreVertical } from 'react-icons/fi';
import { memo, useState } from 'react'; import { useState } from 'react';
import { Draggable } from 'react-beautiful-dnd'; import { Draggable } from 'react-beautiful-dnd';
import EventTimes from '../../../common/components/eventTimes/EventTimes'; import EventTimes from '../../../common/components/eventTimes/EventTimes';
import EventTimesVertical from '../../../common/components/eventTimes/EventTimesVertical'; import EventTimesVertical from '../../../common/components/eventTimes/EventTimesVertical';
@@ -11,16 +11,6 @@ import DeleteIconBtn from '../../../common/components/buttons/DeleteIconBtn';
import { millisToMinutes } from '../../../common/dateConfig'; import { millisToMinutes } from '../../../common/dateConfig';
import style from './EventBlock.module.css'; 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 ExpandedBlock = (props) => {
const { provided, data, next, delay, delayValue, actionHandler } = 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 { data, selected, delay, index, actionHandler } = props;
const [expanded, setExpanded] = useState(true); const [expanded, setExpanded] = useState(true);
@@ -200,6 +190,4 @@ const EventBlock = (props) => {
)} )}
</Draggable> </Draggable>
); );
}; }
export default memo(EventBlock, areEqual);
client/src/features/editors/list/EventListItem.jsx
+16 -3
View File
@@ -2,8 +2,19 @@ import DelayBlock from './DelayBlock';
import BlockBlock from './BlockBlock'; import BlockBlock from './BlockBlock';
import EventBlock from './EventBlock'; import EventBlock from './EventBlock';
import { showErrorToast } from '../../../common/helpers/toastManager'; 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 { const {
type, type,
index, index,
@@ -27,7 +38,7 @@ export default function EventListItem(props) {
case 'block': case 'block':
eventsHandler('add', { type: 'block', order: index + 1 }); eventsHandler('add', { type: 'block', order: index + 1 });
break; break;
case 'delete': case 'delete':
eventsHandler('delete', data.id); eventsHandler('delete', data.id);
break; break;
case 'update': case 'update':
@@ -83,4 +94,6 @@ export default function EventListItem(props) {
default: default:
break; break;
} }
} };
export default memo(EventListItem, areEqual);
client/src/features/editors/list/EventListWrapper.jsx
+81 -92
View File
@@ -203,104 +203,93 @@ export default function EventListWrapper() {
}, [isError]); }, [isError]);
// Events API // Events API
const eventsHandler = useCallback( const eventsHandler = useCallback(async (action, payload) => {
async (action, payload) => { switch (action) {
switch (action) { case 'add':
case 'add': try {
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(); 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 delay <= 0 delete delay and next block
if (payload.duration <= 0) { if (payload.duration <= 0) {
try { try {
// look for block after // look for block after
let afterId = false; let afterId = false;
let blockAfter = null; let blockAfter = null;
for (const d of data) { for (const d of data) {
if (d.id === payload.id) afterId = true; if (d.id === payload.id) afterId = true;
if (afterId && d.type === 'block') { if (afterId && d.type === 'block') {
blockAfter = d.id; blockAfter = d.id;
break; break;
}
} }
}
// delete delay // delete delay
await deleteEvent.mutateAsync(payload.id); await deleteEvent.mutateAsync(payload.id);
// delete block after, if any // delete block after, if any
if (blockAfter) await deleteEvent.mutateAsync(blockAfter); if (blockAfter) await deleteEvent.mutateAsync(blockAfter);
} catch (error) { } catch (error) {
showErrorToast('Error applying delay', error.message); 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);
}
} }
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; break;
default: default:
showErrorToast('Unrecognised request', action); showErrorToast('Unrecognised request', action);
break; break;
} }
}, }, []);
[
addEvent,
applyDelay,
data,
deleteEvent,
patchEvent,
reorderEvent,
updateEvent,
]
);
return ( return (
<> <>