feat(Filters): Added Calendar Highlights section (fixes scraly#924)

page/src/app.hooks.js

@@ -87,9 +87,27 @@ export const useDayEvents = (monthEvents, day = null) => {
     let result = monthEvents;
     if (filterDay) {
       result = result.filter(
-        e =>
-          (e.date[0] && new Date(e.date[0]).getDate() === filterDay.getDate()) ||
-          (e.date[1] && new Date(e.date[1]).getDate() === filterDay.getDate())
+        e => {
+          let retval = false;
+
+          if (e.date[0]) {
+            const startDate = new Date(e.date[0]);
+            retval = (startDate.getDate() === filterDay.getDate());
+          }
+
+          if (e.date[1]) {
+            const endDate = new Date(e.date[1]);
+            retval = retval || (endDate.getDate() === filterDay.getDate());
+          }
+
+          if (e.date[0] && e.date[1]) {
+            const startDate = new Date(e.date[0]);
+            const endDate = new Date(e.date[1]);
+            retval = retval || (filterDay >= startDate && endDate >= filterDay);
+          }
+
+          return retval;
+        }
       );
     }
     return result;

page/src/components/Day/Day.jsx

@@ -1,19 +1,47 @@
 import {useDayEvents} from 'app.hooks';
 import {useNavigate, useSearchParams, useParams} from 'react-router-dom';
 
+export function dayEventFilterFactory(search, date) {
+    // TODO: Make these boolean searchParams boolean, not strings.
+    let { showEventsMode0, showEventsMode1, showEventsMode2 } = search;
+  if (showEventsMode0 === undefined) {
+    showEventsMode0 = 'true';
+  }
+
+  return function (event) {
+    const start = new Date(event.date[0]);
+    const end = new Date(event.date[1]);
+    const hrs = 1000 * 60 * 60 * 24 - 1000; // 24 hours - 1 second
+    // edgeOfDay is crucial to prevent excess marks from appearing because of
+    // events ending above 00:00:00.000.
+    // For example, an event is expected to end at 11am. 0am < 11am will be evaluated as 'true'.
+    // but to mark the end of an event is the work of mode2, not mode1.
+    const edgeOfDay = end ? date.getTime() + hrs : 0;
+
+    if (showEventsMode0 == 'true' && start.toDateString() == date.toDateString()) return true;
+    if (showEventsMode1 == 'true' && end && start < date && edgeOfDay < end) return true;
+    // TODO: One-day events ends at the same day, it should be included as well.
+    if (showEventsMode2 == 'true' && end && end.toDateString() == date.toDateString()) return true;
+    // if (showEventsMode2 == 'true' && event.date.length == 1 && start.toDateString() == date.toDateString()) return true;
+
+    return false;
+  };
+}
+
 const Day = ({date, events}) => {
   const dayEvents = useDayEvents(events, date)
   const navigate = useNavigate();
   const {year} = useParams();
   const [searchParams] = useSearchParams();
+  const search = Object.fromEntries(searchParams);
 
   let intensity = '';
   let invisible = 'invisible';
 
   if (date) {
     if (dayEvents.length > 0) {
       intensity = ` intensity-${Math.min(
-        dayEvents.length,
+        dayEvents.filter(dayEventFilterFactory(search, date)).length,
         7
       )}`;
     }

page/src/components/Filters/Filters.jsx

@@ -10,7 +10,6 @@ import { FilterContext } from 'contexts/FilterContext';
 
 const Filters = () => {
   const context = useContext(FilterContext);
-  console.log(context)
   const [searchParams, setSearchParams] = useSearchParams(context.searchParams);
   const [open, setOpen] = useState(context.open);
 
@@ -20,12 +19,17 @@ const Filters = () => {
   }, [searchParams, open]);
 
   const onChange = useCallback((key, value) => {
-      setSearchParams({...Object.fromEntries(searchParams), [key]: value})
+      const clone = { ...Object.fromEntries(searchParams), [key]: value };
+      if (value === undefined) delete clone[key];
+      setSearchParams(clone);
   }, [searchParams, setSearchParams]);
 
   const countries = useCountries()
 
-  const search = Object.fromEntries(searchParams)
+  const search = Object.fromEntries(searchParams);
+  if (search.showEventsMode0 === undefined) {
+
+  }
 
   return (
     <div className={"filters " + (open ? 'open' : 'closed')}>
@@ -68,6 +72,24 @@ const Filters = () => {
         </div>
       </div>
 
+      <fieldset className='filtersList'>
+        <legend>Calendar Highlight</legend>
+
+        {/* TODO: Make showEventsMode an array */}
+        <div className='filtersItem'>
+          <input checked={search.showEventsMode0 == 'true' || search.showEventsMode0 === undefined} type='checkbox' id='filter-sem-0' onChange={(e) => onChange('showEventsMode0', e.target.checked || false)}/>
+          <label htmlFor='filter-sem-0'>Start Date</label>
+        </div>
+        <div className='filtersItem'>
+          <input checked={search.showEventsMode1 == 'true'} type='checkbox' id='filter-sem-1' onChange={(e) => onChange('showEventsMode1', e.target.checked || undefined)}/>
+          <label htmlFor='filter-sem-1'>In-Between Dates</label>
+        </div>
+        <div className='filtersItem'>
+          <input checked={search.showEventsMode2 == 'true'} type='checkbox' id='filter-sem-2' onChange={(e) => onChange('showEventsMode2', e.target.checked || undefined)}/>
+          <label htmlFor='filter-sem-2'>End Date</label>
+        </div>
+      </fieldset>
+
       <div className='filtersItem'>
         <label htmlFor='filter-country'>Country:</label>
         <select value={search.country} id='filter-country' onChange={(e) => onChange('country', e.target.value)}>

page/src/components/SelectedEvents/SelectedEvents.jsx

@@ -7,11 +7,13 @@ import EventCount from '../EventCount/EventCount'
 import {formatDate, getMonthName} from '../../utils';
 import {useMonthEvents, useDayEvents, useYearEvents} from 'app.hooks';
 import { ArrowLeftCircle, ArrowRightCircle } from 'lucide-react';
+import { dayEventFilterFactory } from 'components/Day/Day';
 
 const SelectedEvents = () => {
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const {year, month, date} = useParams();
+  const search = Object.fromEntries(searchParams);
 
   let currentMonth = parseInt(month, 10);
   if (Number.isNaN(month)) {
@@ -27,7 +29,7 @@ const SelectedEvents = () => {
 
   const yearEvents = useYearEvents()
   const monthEvents = useMonthEvents(yearEvents, currentMonth != -1 ? currentMonth : currentDate.getMonth())
-  const dayEvents = useDayEvents(monthEvents, currentDate)
+  const dayEvents = useDayEvents(monthEvents, currentDate).filter(dayEventFilterFactory(search, currentDate));
   const events = currentMonth != -1 ?  monthEvents : dayEvents;
 
   useEffect(() => {