cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-04 23:18:01 +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 { 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) => {
)}
</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 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);
client/src/features/editors/list/EventListWrapper.jsx
+81 -92
View File
@@ -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 (
<>