Add Filters in Calendar Events and Highlights

Author: dineshsingh1

.changeset/fair-falcons-wonder.md

@@ -0,0 +1,5 @@
+---
+'mexit': patch
+---
+
+Add Filter in Events and Highlights in Context Sidebar of Extension

apps/extension/src/Components/Sidebar/ContextInfoBar.tsx

@@ -2,7 +2,16 @@ import React, { useEffect, useMemo, useState } from 'react'
 
 import { formatDistanceToNow } from 'date-fns'
 
-import { API_BASE_URLS, DrawerType, useCalendarStore, useHighlightStore, useLayoutStore } from '@mexit/core'
+import {
+  API_BASE_URLS,
+  CalendarEventFilterType,
+  DrawerType,
+  getMenuItem,
+  MenuListItemType,
+  useCalendarStore,
+  useHighlightStore,
+  useLayoutStore
+} from '@mexit/core'
 import {
   CenteredFlex,
   DefaultMIcons,
@@ -12,16 +21,17 @@ import {
   Group,
   IconDisplay,
   List,
+  Select,
   SidebarListFilter,
   SnippetCards,
   SpaceBetweenHorizontalFlex,
   StyledButton,
-  Toggle,
   useCalendar,
   useInterval
 } from '@mexit/shared'
 
 import { useSaveChanges } from '../../Hooks/useSaveChanges'
+import { getElementById } from '../../Utils/cs-utils'
 
 import { GenericCard } from './GenericCard'
 import { HighlightGroups } from './HighlightGroup'
@@ -78,7 +88,9 @@ const CalendarEvent = ({ event }) => {
   }
 
   const openMeetLink = (url?: string) => {
-    window.open(url ?? event.links.meet, '_blank')
+    const webLink = url ?? event.links.meet ?? event.links.event
+
+    window.open(webLink, '_blank')
   }
 
   return (
@@ -91,7 +103,7 @@ const CalendarEvent = ({ event }) => {
         <FadeContainer flex={false} fade>
           <Group>
             <IconDisplay icon={DefaultMIcons.NOTE} onClick={openMeetingNote} />
-            <IconDisplay icon={DefaultMIcons.WEB_LINK} onClick={openMeetLink} />
+            <IconDisplay icon={DefaultMIcons.WEB_LINK} onClick={() => openMeetLink()} />
           </Group>
         </FadeContainer>
       ) : (
@@ -107,6 +119,7 @@ const UpcomingEvents = () => {
   const [isFetching, setIsFetching] = useState(false)
 
   const { getUpcomingEvents, getCalenderEvents, getCalendarAuth } = useCalendar()
+  const [calendarEventFilter, setCalendarEventFilter] = useState<CalendarEventFilterType>('Upcoming')
   const calendarEvents = useCalendarStore((state) => state.events)
   const calendarToken = useCalendarStore((store) => store.tokens['GOOGLE_CAL'])
 
@@ -141,18 +154,34 @@ const UpcomingEvents = () => {
   useInterval(fetchEvents, 30 * 60 * 1000)
 
   const upcomingEvents = useMemo(() => {
-    return getUpcomingEvents()
-  }, [calendarEvents])
+    return getUpcomingEvents(calendarEventFilter)
+  }, [calendarEvents, calendarEventFilter])
 
   const hasUpcomingEvents = upcomingEvents?.length > 0
 
+  const onClick = (event: MenuListItemType) => {
+    setCalendarEventFilter(event.label as CalendarEventFilterType)
+  }
+
   return (
-    <SidebarSection label="Upcoming Events" isLoading={isFetching} icon={DefaultMIcons.NOTIFICATION}>
+    <SidebarSection
+      label="Events"
+      isLoading={isFetching}
+      icon={DefaultMIcons.NOTIFICATION}
+      rightComponent={
+        <Select
+          root={getElementById('ext-side-nav')}
+          items={[
+            getMenuItem('Upcoming', onClick, false),
+            getMenuItem('Past', onClick, false),
+            getMenuItem('All', onClick, false)
+          ]}
+        />
+      }
+    >
       {calendarToken && hasUpcomingEvents ? (
         <List $noMargin scrollable $maxHeight="140px">
           {upcomingEvents.map((event) => {
-            const desc = event.description ? `: ${event.description}` : ''
-
             return <CalendarEvent event={event} />
           })}
         </List>
@@ -198,7 +227,15 @@ const Highlights = () => {
       scrollable
       label="Captures"
       icon={DefaultMIcons.HIGHLIGHT}
-      rightComponent={<Toggle size="small" onChange={setShowAll} text="All" />}
+      rightComponent={
+        <Select
+          root={getElementById('ext-side-nav')}
+          items={[
+            getMenuItem('Page', () => setShowAll(false), false),
+            getMenuItem('All', () => setShowAll(true), false)
+          ]}
+        />
+      }
     >
       {pageHighlights?.length > 0 ? (
         <List $noMargin scrollable>

apps/extension/src/Components/Sidebar/HighlightGroup.tsx

@@ -10,6 +10,7 @@ import {
   getFavicon,
   Highlight,
   Highlights,
+  mog,
   useHighlightStore,
   useLayoutStore
 } from '@mexit/core'
@@ -153,13 +154,18 @@ export const HighlightGroups = ({ highlights, all }: { highlights: Highlights; a
     highlights.forEach((highlight) => {
       if (!highlight) return
 
-      const sourceUrl = new URL(highlight.properties?.sourceUrl)?.origin
+      try {
+        const sourceUrl = new URL(highlight.properties?.sourceUrl)?.origin
 
-      if (!groupedHighlights[sourceUrl]) {
-        groupedHighlights[sourceUrl] = []
-      }
+        if (!groupedHighlights[sourceUrl]) {
+          groupedHighlights[sourceUrl] = []
+        }
 
-      groupedHighlights[sourceUrl].push(highlight)
+        groupedHighlights[sourceUrl].push(highlight)
+      } catch (err) {
+        mog('Unable to group highlights', { highlight })
+        console.error('Unable to group highlights', err)
+      }
     })
 
     return groupedHighlights

libs/core/src/Types/Calendar.ts

@@ -14,3 +14,5 @@ export type PersistAuth = {
   email: string
   expiresIn?: number
 }
+
+export type CalendarEventFilterType = 'Upcoming' | 'Past' | 'All'

libs/shared/src/Components/Select/index.tsx

@@ -0,0 +1,51 @@
+import React, { useState } from 'react'
+
+import { MenuListItemType, MIcon } from '@mexit/core'
+
+import { Group } from '../../Style/Layouts'
+import { ItemLabel, Menu, MenuItem } from '../FloatingElements'
+import { IconDisplay } from '../IconDisplay'
+import { getMIcon } from '../Icons'
+
+interface SelectProps {
+  items: MenuListItemType[]
+  onClick?: (option: MenuListItemType) => void
+  label?: string
+  root?: any
+}
+
+export const Select: React.FC<SelectProps> = ({ items, onClick, label = 'Select', root }) => {
+  const [selected, setSelected] = useState(null)
+
+  const handleOnClick = (option: MenuListItemType) => {
+    setSelected(option)
+    if (onClick) onClick(option)
+    else if (option.onSelect) option.onSelect(option)
+  }
+
+  return (
+    <Menu
+      noHover
+      noBackground
+      root={root}
+      values={
+        <Group>
+          <ItemLabel fontSize="small">{selected?.label ?? items?.at(0)?.label ?? label}</ItemLabel>
+          <IconDisplay icon={getMIcon('ICON', 'bi:caret-down-fill')} size={10} />
+        </Group>
+      }
+    >
+      {items.map((op) => {
+        return (
+          <MenuItem
+            fontSize="small"
+            key={op.id}
+            icon={op.icon as MIcon}
+            onClick={(e) => handleOnClick(op)}
+            label={op.label}
+          />
+        )
+      })}
+    </Menu>
+  )
+}

libs/shared/src/Components/index.tsx

@@ -22,6 +22,7 @@ export * from './PreviewMeta'
 export * from './ProjectIcon'
 export * from './RelativeTime'
 export * from './Reminder'
+export * from './Select'
 export * from './ShareToggle'
 export * from './ShortenURL'
 export * from './TableWrapper'

libs/shared/src/Hooks/useCalendar.ts

@@ -2,6 +2,7 @@ import { add, format, sub } from 'date-fns'
 
 import {
   API_BASE_URLS,
+  CalendarEventFilterType,
   generateNodeId,
   getSlug,
   MEETING_PREFIX,
@@ -111,20 +112,30 @@ export const useCalendar = () => {
     await getEvents(request)
   }
 
-  const getUpcomingEvents = () => {
+  const getUpcomingEvents = (calendarEventFilter: CalendarEventFilterType) => {
     const now = new Date()
     const twoHoursFromNow = add(now, { hours: 2 })
     const events = useCalendarStore.getState().events
 
-    const todayEvents = events
-      .filter((event) => {
-        const start = new Date(event.times.start)
-        console.log('START', { start, event, twoHoursFromNow, isStart: start <= twoHoursFromNow })
-        return start <= twoHoursFromNow && start >= now
-      })
-      .sort((a, b) => b.times.start - a.times.start)
-
-    return todayEvents
+    switch (calendarEventFilter) {
+      case 'All':
+        return events.sort((a, b) => b.times.start - a.times.start)
+      case 'Past':
+        return events
+          .filter((event) => {
+            const start = new Date(event.times.start)
+            return start < now
+          })
+          .sort((a, b) => b.times.start - a.times.start)
+      case 'Upcoming':
+      default:
+        return events
+          .filter((event) => {
+            const start = new Date(event.times.start)
+            return start <= twoHoursFromNow && start >= now
+          })
+          .sort((a, b) => b.times.start - a.times.start)
+    }
   }
 
   const getCalendarAuth = async () => {