Allow searching events

Also upgrade Fresh

components/calendar/MainCalendar.tsx

@@ -1,5 +1,4 @@
 import { useSignal } from '@preact/signals';
-import { useEffect } from 'preact/hooks';
 
 import { Calendar, CalendarEvent } from '/lib/types.ts';
 import { baseUrl, capitalizeWord } from '/lib/utils.ts';
@@ -15,6 +14,7 @@ import CalendarViewWeek from './CalendarViewWeek.tsx';
 import CalendarViewMonth from './CalendarViewMonth.tsx';
 import AddEventModal, { NewCalendarEvent } from './AddEventModal.tsx';
 import ViewEventModal from './ViewEventModal.tsx';
+import SearchEvents from './SearchEvents.tsx';
 
 interface MainCalendarProps {
   initialCalendars: Pick<Calendar, 'id' | 'name' | 'color' | 'is_visible'>[];
@@ -28,12 +28,10 @@ export default function MainCalendar({ initialCalendars, initialCalendarEvents,
   const isDeleting = useSignal<boolean>(false);
   const isExporting = useSignal<boolean>(false);
   const isImporting = useSignal<boolean>(false);
-  const isSearching = useSignal<boolean>(false);
   const calendars = useSignal<Pick<Calendar, 'id' | 'name' | 'color' | 'is_visible'>[]>(initialCalendars);
   const isViewOptionsDropdownOpen = useSignal<boolean>(false);
   const isImportExportOptionsDropdownOpen = useSignal<boolean>(false);
   const calendarEvents = useSignal<CalendarEvent[]>(initialCalendarEvents);
-  const searchTimeout = useSignal<ReturnType<typeof setTimeout>>(0);
   const openEventModal = useSignal<
     { isOpen: boolean; calendar?: typeof initialCalendars[number]; calendarEvent?: CalendarEvent }
   >({ isOpen: false });
@@ -344,44 +342,6 @@ export default function MainCalendar({ initialCalendars, initialCalendarEvents,
     isExporting.value = false;
   }
 
-  function searchEvents(searchTerms: string) {
-    if (searchTimeout.value) {
-      clearTimeout(searchTimeout.value);
-    }
-
-    searchTimeout.value = setTimeout(async () => {
-      isSearching.value = true;
-
-      // TODO: Remove this
-      await new Promise((resolve) => setTimeout(() => resolve(true), 1000));
-
-      // try {
-      //   const requestBody: RequestBody = { search: searchTerms };
-      //   const response = await fetch(`/api/calendar/search-events`, {
-      //     method: 'POST',
-      //     body: JSON.stringify(requestBody),
-      //   });
-      //   const result = await response.json() as ResponseBody;
-
-      //   if (!result.success) {
-      //     throw new Error('Failed to search events!');
-      //   }
-      // } catch (error) {
-      //   console.error(error);
-      // }
-
-      isSearching.value = false;
-    }, 500);
-  }
-
-  useEffect(() => {
-    return () => {
-      if (searchTimeout.value) {
-        clearTimeout(searchTimeout.value);
-      }
-    };
-  }, []);
-
   const visibleCalendars = calendars.value.filter((calendar) => calendar.is_visible);
 
   return (
@@ -390,14 +350,7 @@ export default function MainCalendar({ initialCalendars, initialCalendarEvents,
         <section class='relative inline-block text-left mr-2'>
           <section class='flex flex-row items-center justify-start'>
             <a href='/calendars' class='mr-4 whitespace-nowrap'>Manage calendars</a>
-            <input
-              class='input-field w-72 mr-2'
-              type='search'
-              name='search'
-              placeholder='Search events...'
-              onInput={(event) => searchEvents(event.currentTarget.value)}
-            />
-            {isSearching.value ? <img src='/images/loading.svg' class='white mr-2' width={18} height={18} /> : null}
+            <SearchEvents calendars={calendars.value} onClickOpenEvent={onClickOpenEvent} />
           </section>
         </section>
 

components/calendar/SearchEvents.tsx

@@ -0,0 +1,149 @@
+import { useSignal } from '@preact/signals';
+import { useEffect } from 'preact/hooks';
+
+import { Calendar, CalendarEvent } from '/lib/types.ts';
+import { RequestBody, ResponseBody } from '/routes/api/calendar/search-events.tsx';
+interface SearchEventsProps {
+  calendars: Pick<Calendar, 'id' | 'name' | 'color' | 'is_visible'>[];
+  onClickOpenEvent: (calendarEvent: CalendarEvent) => void;
+}
+
+export default function SearchEvents({ calendars, onClickOpenEvent }: SearchEventsProps) {
+  const isSearching = useSignal<boolean>(false);
+  const areResultsVisible = useSignal<boolean>(false);
+  const calendarEvents = useSignal<CalendarEvent[]>([]);
+  const searchTimeout = useSignal<ReturnType<typeof setTimeout>>(0);
+  const closeTimeout = useSignal<ReturnType<typeof setTimeout>>(0);
+
+  const dateFormat = new Intl.DateTimeFormat('en-GB', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+  });
+
+  const calendarIds = calendars.map((calendar) => calendar.id);
+
+  function searchEvents(searchTerm: string) {
+    if (searchTimeout.value) {
+      clearTimeout(searchTimeout.value);
+    }
+
+    if (searchTerm.trim().length < 2) {
+      return;
+    }
+
+    areResultsVisible.value = false;
+
+    searchTimeout.value = setTimeout(async () => {
+      isSearching.value = true;
+
+      try {
+        const requestBody: RequestBody = { calendarIds, searchTerm };
+        const response = await fetch(`/api/calendar/search-events`, {
+          method: 'POST',
+          body: JSON.stringify(requestBody),
+        });
+        const result = await response.json() as ResponseBody;
+
+        if (!result.success) {
+          throw new Error('Failed to search events!');
+        }
+
+        calendarEvents.value = result.matchingCalendarEvents;
+
+        if (calendarEvents.value.length > 0) {
+          areResultsVisible.value = true;
+        }
+      } catch (error) {
+        console.error(error);
+      }
+
+      isSearching.value = false;
+    }, 500);
+  }
+
+  function onFocus() {
+    if (calendarEvents.value.length > 0) {
+      areResultsVisible.value = true;
+    }
+  }
+
+  function onBlur() {
+    if (closeTimeout.value) {
+      clearTimeout(closeTimeout.value);
+    }
+
+    closeTimeout.value = setTimeout(() => {
+      areResultsVisible.value = false;
+    }, 300);
+  }
+
+  useEffect(() => {
+    return () => {
+      if (searchTimeout.value) {
+        clearTimeout(searchTimeout.value);
+      }
+
+      if (closeTimeout.value) {
+        clearTimeout(closeTimeout.value);
+      }
+    };
+  }, []);
+
+  return (
+    <>
+      <input
+        class='input-field w-72 mr-2'
+        type='search'
+        name='search'
+        placeholder='Search events...'
+        onInput={(event) => searchEvents(event.currentTarget.value)}
+        onFocus={() => onFocus()}
+        onBlur={() => onBlur()}
+      />
+      {isSearching.value ? <img src='/images/loading.svg' class='white mr-2' width={18} height={18} /> : null}
+      {areResultsVisible.value
+        ? (
+          <section class='relative inline-block text-left ml-2 text-xs'>
+            <section
+              class={`absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black ring-opacity-15 focus:outline-none`}
+              role='menu'
+              aria-orientation='vertical'
+              aria-labelledby='view-button'
+              tabindex={-1}
+            >
+              <section class='py-1'>
+                <ol class='mt-2'>
+                  {calendarEvents.value.map((calendarEvent) => (
+                    <li class='mb-1'>
+                      <a
+                        href='javascript:void(0);'
+                        class={`block px-2 py-2 hover:no-underline hover:opacity-60 ${
+                          calendars.find((calendar) => calendar.id === calendarEvent.calendar_id)
+                            ?.color || 'bg-gray-700'
+                        }`}
+                        onClick={() => onClickOpenEvent(calendarEvent)}
+                      >
+                        <time
+                          datetime={new Date(calendarEvent.start_date).toISOString()}
+                          class='mr-2 flex-none text-slate-100 block'
+                        >
+                          {dateFormat.format(new Date(calendarEvent.start_date))}
+                        </time>
+                        <p class='flex-auto truncate font-medium text-white'>
+                          {calendarEvent.title}
+                        </p>
+                      </a>
+                    </li>
+                  ))}
+                </ol>
+              </section>
+            </section>
+          </section>
+        )
+        : null}
+    </>
+  );
+}