improved functions with useCallback

This commit is contained in:
Bernt Christian Egeland 2021-12-11 10:46:06 +01:00
parent 86f54bb4ff
commit 4e5a368a97

View File

@ -99,25 +99,38 @@ const Calender = ({ onChange, calenderRef }) => {
setState((prev) => ({ ...prev, selectedDay: todayTimestamp, monthDetails: getMonthDetails(year, month) })); setState((prev) => ({ ...prev, selectedDay: todayTimestamp, monthDetails: getMonthDetails(year, month) }));
}, [year, month, getMonthDetails]); }, [year, month, getMonthDetails]);
const isCurrentDay = (day) => { const isCurrentDay = (day) => day.timestamp === todayTimestamp;
return day.timestamp === todayTimestamp;
};
const isSelectedRange = (day) => { const isSelectedRange = useCallback(
(day) => {
if (!state.timeRange.after || !state.timeRange.before) return; if (!state.timeRange.after || !state.timeRange.before) return;
return day.timestamp < state.timeRange.before && day.timestamp >= state.timeRange.after; return day.timestamp < state.timeRange.before && day.timestamp >= state.timeRange.after;
}; },
[state.timeRange]
);
const isFirstDayInRange = (day) => { const isFirstDayInRange = useCallback(
(day) => {
if (isCurrentDay(day)) return; if (isCurrentDay(day)) return;
return state.timeRange.after === day.timestamp; return state.timeRange.after === day.timestamp;
}; },
const isLastDayInRange = (day) => { [state.timeRange.after]
return state.timeRange.before === new Date(day.timestamp).setHours(24, 0, 0, 0); );
};
const getMonthStr = (month) => monthMap[Math.max(Math.min(11, month), 0)] || 'Month'; const isLastDayInRange = useCallback(
(day) => {
return state.timeRange.before === new Date(day.timestamp).setHours(24, 0, 0, 0);
},
[state.timeRange.before]
);
const getMonthStr = useCallback(
(month) => {
return monthMap[Math.max(Math.min(11, month), 0)] || 'Month';
},
[monthMap]
);
const onDateClick = (day) => { const onDateClick = (day) => {
const { before, after } = state.timeRange; const { before, after } = state.timeRange;
@ -155,7 +168,8 @@ const Calender = ({ onChange, calenderRef }) => {
} }
}; };
const setYear = (offset) => { const setYear = useCallback(
(offset) => {
const year = state.year + offset; const year = state.year + offset;
const month = state.month; const month = state.month;
setState((prev) => { setState((prev) => {
@ -165,7 +179,9 @@ const Calender = ({ onChange, calenderRef }) => {
monthDetails: getMonthDetails(year, month), monthDetails: getMonthDetails(year, month),
}; };
}); });
}; },
[state.year, state.month, getMonthDetails]
);
const setMonth = (offset) => { const setMonth = (offset) => {
let year = state.year; let year = state.year;