more code comments

This commit is contained in:
Bernt Christian Egeland 2023-01-21 23:27:03 +01:00
parent 216194bfbd
commit 98996f03eb

View File

@ -11,16 +11,18 @@ const TimePicker = ({ dateRange, onChange }) => {
if (!dateRange.after) return setTimeRange(new Set()); if (!dateRange.after) return setTimeRange(new Set());
}, [dateRange.after]); }, [dateRange.after]);
// We subtract one from the before time to count the exact number of days in unix timestamp selected in the calendar /**
* Initializes two variables before and after with date objects,
* If they are not null, it creates a new Date object with the value of the property and if not,
* it creates a new Date object with the current hours to 0 and 24 respectively.
*/
const before = dateRange.before ? new Date(dateRange.before) : new Date(new Date().setHours(24, 0, 0, 0)); const before = dateRange.before ? new Date(dateRange.before) : new Date(new Date().setHours(24, 0, 0, 0));
const after = dateRange.after ? new Date(dateRange.after) : new Date(new Date().setHours(0, 0, 0, 0)); const after = dateRange.after ? new Date(dateRange.after) : new Date(new Date().setHours(0, 0, 0, 0));
/** /**
* numberOfDaysSelected is a set that holds the number of days selected in the dateRange.
numberOfDaysSelected is a set that holds the number of days selected in the dateRange. * The loop iterates through the days starting from the after date's day to the before date's day.
The loop iterates through the days starting from the after date's day to the before date's day. * If the before date's hour is 0, it skips it.
If the before date's hour is 0, it skips it.
*/ */
const numberOfDaysSelected = new Set( const numberOfDaysSelected = new Set(
[...Array(before.getDate() - after.getDate() + 1)].map((_, i) => after.getDate() + i) [...Array(before.getDate() - after.getDate() + 1)].map((_, i) => after.getDate() + i)
@ -30,12 +32,17 @@ const TimePicker = ({ dateRange, onChange }) => {
// Create repeating array with the number of hours for each day selected ...23,24,0,1,2... // Create repeating array with the number of hours for each day selected ...23,24,0,1,2...
const hoursInDays = Array.from({ length: numberOfDaysSelected.size * 24 }, (_, i) => i % 24); const hoursInDays = Array.from({ length: numberOfDaysSelected.size * 24 }, (_, i) => i % 24);
// function for handling the selected time from the provided list
const handleTime = (hour) => { const handleTime = (hour) => {
if (!hour) return; if (!hour) return;
const _timeRange = new Set([...timeRange]); const _timeRange = new Set([...timeRange]);
_timeRange.add(hour); _timeRange.add(hour);
/**
* Check if the variable "hour" exists in the "timeRange" set.
* If it does, reset the timepicker
*/
setError(null); setError(null);
if (timeRange.has(hour)) { if (timeRange.has(hour)) {
setTimeRange(new Set()); setTimeRange(new Set());
@ -49,8 +56,8 @@ const TimePicker = ({ dateRange, onChange }) => {
//update after //update after
if (_timeRange.size === 1) { if (_timeRange.size === 1) {
// check if the first selected value is within first day // check if the first selected value is within first day
const selDay = Math.ceil(Math.min(..._timeRange) / 24); const selectedDay = Math.ceil(Math.min(..._timeRange) / 24);
if (selDay !== 1) { if (selectedDay !== 1) {
return setError('Select a time on the initial day!'); return setError('Select a time on the initial day!');
} }
@ -111,6 +118,7 @@ const TimePicker = ({ dateRange, onChange }) => {
return !!timeRange.has(idx); return !!timeRange.has(idx);
}; };
// background colors for each day
const isSelectedCss = 'bg-blue-600 transition-all duration-50 hover:rounded-none'; const isSelectedCss = 'bg-blue-600 transition-all duration-50 hover:rounded-none';
function randomGrayTone(shade) { function randomGrayTone(shade) {
const grayTones = [ const grayTones = [