feat: Add noise sensor activity list

.storybook/seed-fake.js

@@ -513,6 +513,26 @@ export const seedFake = (db) => {
     name: 'Active Hours',
   })
 
+  db.addEvent({
+    device_id: device7.device_id,
+    workspace_id: ws2.workspace_id,
+    created_at: '2024-05-16T00:16:12.000',
+    event_type: 'noise_sensor.noise_threshold_triggered',
+    noise_level_decibels: 75,
+    noise_threshold_id: 2,
+    noise_threshold_name: 'Active Hours',
+  })
+
+  db.addEvent({
+    device_id: device7.device_id,
+    workspace_id: ws2.workspace_id,
+    created_at: '2024-05-16T00:16:12.000',
+    event_type: 'noise_sensor.noise_threshold_triggered',
+    noise_level_decibels: 75,
+    noise_threshold_id: 2,
+    noise_threshold_name: 'Active Hours',
+  })
+
   // add climate setting schedules
   db.addClimateSettingSchedule({
     device_id: device5.device_id,

src/lib/seam/components/DeviceDetails/DeviceDetails.stories.tsx

@@ -18,6 +18,7 @@ const meta: Meta<typeof DeviceDetails> = {
       type: 'figma',
       url: 'https://www.figma.com/file/Su3VO6yupz4yxe88fv0Uqa/Seam-Components?type=design&node-id=358-39439&mode=design&t=4OQwfRB8Mw8kT1rw-4',
     },
+    layout: 'fullscreen',
   },
 }
 

src/lib/seam/components/DeviceDetails/NoiseSensorDeviceDetails.tsx

@@ -1,4 +1,5 @@
 import classNames from 'classnames'
+import { useState } from 'react'
 import type { NoiseSensorDevice } from 'seamapi'
 
 import type { NestedSpecificDeviceDetailsProps } from 'lib/seam/components/DeviceDetails/DeviceDetails.js'
@@ -8,7 +9,11 @@ import { DeviceImage } from 'lib/ui/device/DeviceImage.js'
 import { NoiseLevelStatus } from 'lib/ui/device/NoiseLevelStatus.js'
 import { OnlineStatus } from 'lib/ui/device/OnlineStatus.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
+import { NoiseSensorActivityList } from 'lib/ui/noise-sensor/NoiseSensorActivityList.js'
 import { NoiseThresholdsList } from 'lib/ui/noise-sensor/NoiseThresholdsList.js'
+import { TabSet } from 'lib/ui/TabSet.js'
+
+type TabType = 'details' | 'activity'
 
 interface NoiseSensorDeviceDetailsProps
   extends NestedSpecificDeviceDetailsProps {
@@ -22,38 +27,63 @@ export function NoiseSensorDeviceDetails({
   onBack,
   className,
 }: NoiseSensorDeviceDetailsProps): JSX.Element | null {
+  const [tab, setTab] = useState<TabType>('details')
+
   return (
     <div className={classNames('seam-device-details', className)}>
-      <ContentHeader title={t.noiseSensor} onBack={onBack} />
-
-      <div className='seam-body'>
-        <div className='seam-summary'>
-          <div className='seam-content'>
-            <div className='seam-image'>
-              <DeviceImage device={device} />
-            </div>
-            <div className='seam-info'>
-              <span className='seam-label'>{t.noiseSensor}</span>
-              <h4 className='seam-device-name'>{device.properties.name}</h4>
-              <div className='seam-properties'>
-                <span className='seam-label'>{t.status}:</span>{' '}
-                <OnlineStatus device={device} />
-                <NoiseLevelStatus device={device} />
-                <DeviceModel device={device} />
+      <div className='seam-body seam-body-no-margin'>
+        <div className='seam-contained-summary'>
+          <ContentHeader
+            title={t.noiseSensor}
+            onBack={onBack}
+            className='seam-content-header-contained'
+          />
+          <div className='seam-summary'>
+            <div className='seam-content'>
+              <div className='seam-image'>
+                <DeviceImage device={device} />
+              </div>
+              <div className='seam-info'>
+                <span className='seam-label'>{t.noiseSensor}</span>
+                <h4 className='seam-device-name'>{device.properties.name}</h4>
+                <div className='seam-properties'>
+                  <span className='seam-label'>{t.status}:</span>{' '}
+                  <OnlineStatus device={device} />
+                  <NoiseLevelStatus device={device} />
+                  <DeviceModel device={device} />
+                </div>
               </div>
             </div>
           </div>
+
+          <TabSet<TabType>
+            tabs={['details', 'activity']}
+            tabTitles={{
+              details: t.details,
+              activity: t.activity,
+            }}
+            activeTab={tab}
+            onTabChange={(tab) => {
+              setTab(tab)
+            }}
+          />
         </div>
 
-        <NoiseThresholdsList device={device} />
+        {tab === 'details' && (
+          <div className='seam-padded-container'>
+            <NoiseThresholdsList device={device} />
+
+            <DeviceInfo
+              device={device}
+              disableConnectedAccountInformation={
+                disableConnectedAccountInformation
+              }
+              disableResourceIds={disableResourceIds}
+            />
+          </div>
+        )}
 
-        <DeviceInfo
-          device={device}
-          disableConnectedAccountInformation={
-            disableConnectedAccountInformation
-          }
-          disableResourceIds={disableResourceIds}
-        />
+        {tab === 'activity' && <NoiseSensorActivityList device={device} />}
       </div>
     </div>
   )
@@ -63,4 +93,6 @@ const t = {
   noiseSensor: 'Noise Sensor',
   status: 'Status',
   noiseLevel: 'Noise level',
+  details: 'Details',
+  activity: 'Activity',
 }

src/lib/seam/events/use-events.ts

@@ -0,0 +1,44 @@
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import type {
+  Event,
+  EventsListRequest,
+  EventsListResponse,
+  SeamError,
+} from 'seamapi'
+
+import { useSeamClient } from 'lib/seam/use-seam-client.js'
+import type { UseSeamQueryResult } from 'lib/seam/use-seam-query-result.js'
+
+export type UseEventsParams = EventsListRequest
+export type UseEventsData = Event[]
+export interface UseEventsOptions {
+  refetchInterval?: number
+}
+
+export function useEvents(
+  params?: UseEventsParams,
+  options?: UseEventsOptions
+): UseSeamQueryResult<'events', UseEventsData> {
+  const { client } = useSeamClient()
+  const queryClient = useQueryClient()
+
+  const { data, ...rest } = useQuery<EventsListResponse['events'], SeamError>({
+    enabled: client != null,
+    queryKey: ['events', 'list', params],
+    queryFn: async () => {
+      if (client == null) return []
+      return await client.events.list(params)
+    },
+    onSuccess: (events) => {
+      for (const event of events) {
+        queryClient.setQueryData(
+          ['events', 'get', { event_id: event.event_id }],
+          event
+        )
+      }
+    },
+    refetchInterval: options?.refetchInterval ?? 30_000,
+  })
+
+  return { ...rest, events: data }
+}

src/lib/ui/TabSet.tsx

@@ -0,0 +1,110 @@
+import classNames from 'classnames'
+import {
+  type MouseEventHandler,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useState,
+} from 'react'
+
+interface TabSetProps<TabType extends string> {
+  tabs: TabType[]
+  tabTitles: Record<TabType, string>
+  activeTab: TabType
+  onTabChange: (tab: TabType) => void
+}
+
+interface HighlightStyle {
+  left: number
+  width: number
+}
+
+export function TabSet<TabType extends string>({
+  tabs,
+  tabTitles,
+  activeTab,
+  onTabChange,
+}: TabSetProps<TabType>): JSX.Element {
+  const [highlightStyle, setHighlightStyle] = useState<HighlightStyle>({
+    left: 0,
+    width: 140,
+  })
+
+  const calculateHighlightStyle = useCallback(() => {
+    const tabButton: HTMLButtonElement | null =
+      globalThis.document?.querySelector(
+        `.seam-tab-button:nth-of-type(${tabs.indexOf(activeTab) + 1})`
+      )
+
+    setHighlightStyle({
+      left: tabButton?.offsetLeft ?? 0,
+      width: tabButton?.offsetWidth ?? 140,
+    })
+  }, [activeTab, tabs])
+
+  useLayoutEffect(() => {
+    calculateHighlightStyle()
+  }, [activeTab, calculateHighlightStyle])
+
+  useEffect(() => {
+    globalThis.addEventListener?.('resize', calculateHighlightStyle)
+    return () => {
+      globalThis.removeEventListener?.('resize', calculateHighlightStyle)
+    }
+  }, [calculateHighlightStyle])
+
+  return (
+    <div className='seam-tab-set'>
+      <div className='seam-tab-set-buttons'>
+        <div className='seam-tab-set-highlight' style={highlightStyle} />
+
+        {tabs.map((tab) => (
+          <TabButton<TabType>
+            key={tab}
+            tab={tab}
+            title={tabTitles[tab]}
+            isActive={activeTab === tab}
+            onTabChange={onTabChange}
+            setHighlightStyle={setHighlightStyle}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+interface TabButtonProps<TabType> {
+  tab: TabType
+  title: string
+  isActive: boolean
+  onTabChange: (tab: TabType) => void
+  setHighlightStyle: (style: HighlightStyle) => void
+}
+
+function TabButton<TabType extends string>({
+  tab,
+  title,
+  isActive,
+  onTabChange,
+  setHighlightStyle,
+}: TabButtonProps<TabType>): JSX.Element {
+  const handleClick: MouseEventHandler<HTMLButtonElement> = (ev) => {
+    onTabChange(tab)
+    setHighlightStyle({
+      left: ev.currentTarget.offsetLeft,
+      width: ev.currentTarget.offsetWidth,
+    })
+  }
+
+  return (
+    <button
+      className={classNames(
+        'seam-tab-button',
+        isActive && 'seam-tab-button-active'
+      )}
+      onClick={handleClick}
+    >
+      <p className='seam-tab-button-label'>{title}</p>
+    </button>
+  )
+}

src/lib/ui/layout/ContentHeader.tsx

@@ -1,19 +1,22 @@
+import classNames from 'classnames'
+
 import { ArrowBackIcon } from 'lib/icons/ArrowBack.js'
 
 interface ContentHeaderProps {
   onBack: (() => void) | undefined
   title?: string
   subheading?: string
+  className?: string
 }
 
 export function ContentHeader(props: ContentHeaderProps): JSX.Element | null {
-  const { title, onBack, subheading } = props
+  const { title, onBack, subheading, className } = props
   if (title == null && onBack == null) {
     return null
   }
 
   return (
-    <div className='seam-content-header'>
+    <div className={classNames('seam-content-header', className)}>
       <BackIcon onClick={onBack} />
       <div>
         <span className='seam-title'>{title}</span>