@seamapi/react 1.3.0 → 1.4.0

package/src/lib/ui/SupportedDeviceTable/SupportedDeviceContent.tsx

@@ -1,6 +1,5 @@
 import { useQuery } from '@tanstack/react-query'
-import axios from 'axios'
-import { useCallback, useEffect, useState } from 'react'
+import { useState } from 'react'
 
 import { Button } from 'lib/ui/Button.js'
 import { SupportedDeviceFilterArea } from 'lib/ui/SupportedDeviceTable/SupportedDeviceFilterArea.js'
@@ -9,8 +8,6 @@ import type { DeviceModel, Filters } from 'lib/ui/SupportedDeviceTable/types.js'
 import { SupportedDeviceHeader } from './SupportedDeviceHeader.js'
 import { SupportedDeviceRow } from './SupportedDeviceRow.js'
 
-const BASE_URL = 'https://devicedb.seam.co/api/device_models/list'
-
 export interface SupportedDeviceContentProps {
   cannotFilter?: boolean
 }
@@ -18,7 +15,6 @@ export interface SupportedDeviceContentProps {
 export function SupportedDeviceContent({
   cannotFilter = false,
 }: SupportedDeviceContentProps) {
-  const [allDeviceModels, setAllDeviceModels] = useState<DeviceModel[]>([])
   const [filterValue, setFilterValue] = useState('')
   const [filters, setFilters] = useState<Filters>({
     supportedOnly: false,
@@ -26,54 +22,46 @@ export function SupportedDeviceContent({
     brand: null,
   })
 
-  const fetchDeviceModels = useCallback(async () => {
-    const queries = []
-
-    if (filterValue.trim() !== '') {
-      queries.push(`text_search=${encodeURIComponent(filterValue.trim())}`)
-    }
-
-    if (filters.supportedOnly) {
-      queries.push('support_level=live')
-    }
-
-    if (filters.category !== null) {
-      queries.push(`main_category=${encodeURIComponent(filters.category)}`)
-    }
-
-    if (filters.brand !== null) {
-      queries.push(`brand=${encodeURIComponent(filters.brand)}`)
-    }
-
-    const url = `${BASE_URL}?${queries.join('&')}`
-    return await axios.get(url)
-  }, [filterValue, filters])
-
-  const { data, isLoading, isError, refetch } = useQuery<{
-    data: {
-      device_models?: DeviceModel[]
-    }
-  }>({
+  const {
+    data: deviceModels,
+    isLoading,
+    isError,
+    refetch,
+  } = useQuery<DeviceModel[]>({
     queryKey: ['supported_devices', filterValue, filters],
-    queryFn: fetchDeviceModels,
+    queryFn: async () => {
+      const url = new URL('https://devicedb.seam.co/api/device_models/list')
+
+      if (filterValue.trim() !== '') {
+        url.searchParams.set('text_search', filterValue.trim())
+      }
+
+      if (filters.supportedOnly) {
+        url.searchParams.set('support_level', 'live')
+      }
+
+      if (filters.category !== null) {
+        url.searchParams.set('main_category', filters.category)
+      }
+
+      if (filters.brand !== null) {
+        url.searchParams.set('brand', filters.brand)
+      }
+
+      const res = await fetch(url)
+      if (!res.ok) {
+        throw new Error('Failed to load device models')
+      }
+      const data = await res.json()
+      return data?.device_models ?? []
+    },
   })
 
-  useEffect(() => {
-    if (
-      data?.data?.device_models !== undefined &&
-      allDeviceModels.length === 0
-    ) {
-      setAllDeviceModels(data.data.device_models)
-    }
-  }, [data, allDeviceModels.length])
-
-  const deviceModels = data?.data?.device_models ?? []
-
   return (
-    <div className='seam-supported-devices-table-wrap'>
+    <div className='seam-supported-device-table-content-wrap'>
       {!cannotFilter && (
         <SupportedDeviceFilterArea
-          deviceModels={allDeviceModels}
+          deviceModels={deviceModels ?? []}
           filterValue={filterValue}
           setFilterValue={setFilterValue}
           filters={filters}
@@ -82,13 +70,13 @@ export function SupportedDeviceContent({
       )}
 
       {isLoading && (
-        <div className='seam-supported-devices-table-state-block'>
+        <div className='seam-supported-device-table-content-state-block'>
           <p>Loading device models...</p>
         </div>
       )}
 
       {isError && (
-        <div className='seam-supported-devices-table-state-block'>
+        <div className='seam-supported-device-table-content-state-block'>
           <p>There was an error fetching device models.</p>
           <Button
             variant='solid'
@@ -102,8 +90,8 @@ export function SupportedDeviceContent({
         </div>
       )}
 
-      {!isLoading && !isError && data?.data?.device_models !== null && (
-        <table className='seam-supported-devices-table'>
+      {!isLoading && !isError && deviceModels !== null && (
+        <table className='seam-supported-device-table-content'>
           <SupportedDeviceHeader />
           <tbody>
             {deviceModels.length !== 0 &&
@@ -115,9 +103,9 @@ export function SupportedDeviceContent({
               ))}
 
             {deviceModels.length === 0 && (
-              <tr className='seam-supported-devices-table-message-row'>
+              <tr className='seam-supported-device-table-content-message-row'>
                 <td colSpan={6}>
-                  <div className='seam-supported-devices-table-message'>
+                  <div className='seam-supported-device-table-content-message'>
                     {filterValue.length === 0 ? (
                       <p>No device models found.</p>
                     ) : (
@@ -129,7 +117,7 @@ export function SupportedDeviceContent({
                           onClick={() => {
                             setFilterValue('')
                           }}
-                          className='seam-supported-devices-table-message-clear-search'
+                          className='seam-supported-device-table-content-message-clear-search'
                         >
                           Clear search terms
                         </Button>

package/src/lib/ui/SupportedDeviceTable/SupportedDeviceFilterArea.tsx

@@ -55,7 +55,7 @@ export function SupportedDeviceFilterArea({
     : 'Filter'
 
   return (
-    <div className='seam-supported-devices-filter-area'>
+    <div className='seam-supported-device-table-filter-area'>
       <div className='seam-deliberate-block' />
       <div className='seam-filters-wrap'>
         <Menu
@@ -70,7 +70,7 @@ export function SupportedDeviceFilterArea({
           )}
         >
           <div
-            className='seam-supported-devices-filter-menu'
+            className='seam-supported-device-table-filter-menu'
             onClick={(event) => {
               event.stopPropagation()
             }}
@@ -116,13 +116,13 @@ export function SupportedDeviceFilterArea({
           </div>
         </Menu>
 
-        <div className='seam-supported-devices-filter-area-search-bar-wrap'>
+        <div className='seam-supported-device-table-filter-area-search-bar-wrap'>
           <SearchTextField
             value={filterValue}
             onChange={(value) => {
               setFilterValue(value)
             }}
-            className='seam-supported-devices-filter-area-search-bar'
+            className='seam-supported-device-table-filter-area-search-bar'
           />
         </div>
       </div>

package/src/lib/ui/SupportedDeviceTable/SupportedDeviceRow.tsx

@@ -11,7 +11,7 @@ export function SupportedDeviceRow({ deviceModel }: SupportedDeviceRowProps) {
   return (
     <tr>
       <td>
-        <img style={{ width: 40 }} src={deviceModel.icon_url} />
+        <img width={40} src={deviceModel.icon_url} />
       </td>
       <td>{deviceModel.main_category}</td>
       <td>{deviceModel.model_name}</td>

package/src/lib/ui/Table/TableFilterBar/TableFilterBar.tsx

@@ -3,23 +3,20 @@ import { IconButton } from 'lib/ui/IconButton.js'
 import type { ButtonProps, DivProps } from 'lib/ui/types.js'
 
 interface TableFilterBarProps extends DivProps {
-  isFilterCleared?: boolean
+  filterCleared?: boolean
   onFilterClear?: () => void
 }
 
 export function TableFilterBar({
-  isFilterCleared,
+  filterCleared = false,
   onFilterClear,
   children,
   ...props
 }: TableFilterBarProps) {
-  const showClearFilterButton = isFilterCleared === false
   return (
     <div className='seam-table-filter-bar' {...props}>
       {children}{' '}
-      {showClearFilterButton ? (
-        <ClearFiltersButton onClick={onFilterClear} />
-      ) : null}
+      {!filterCleared && <ClearFiltersButton onClick={onFilterClear} />}
     </div>
   )
 }

package/src/lib/ui/TextField/TextField.tsx

@@ -23,7 +23,7 @@ export function TextField(props: TextFieldProps): JSX.Element {
     startAdornment,
     endAdornment,
     inputProps,
-    disabled,
+    disabled = false,
   } = props
 
   return (

package/src/styles/_main.scss

@@ -12,7 +12,7 @@
 @use './device-details';
 @use './device-table';
 @use './access-code-details';
-@use './supported-devices';
+@use './supported-device-table';
 
 .seam-components {
   // Reset
@@ -33,5 +33,5 @@
   @include access-code-table.all;
   @include access-code-details.all;
   @include alert.all;
-  @include supported-devices.all;
+  @include supported-device-table.all;
 }

package/src/styles/_menus.scss

@@ -9,7 +9,15 @@
     position: fixed;
     inset: 0;
     z-index: 999999;
-    display: none; // Toggled in JS (component)
+    display: none;
+  }
+
+  .seam-menu-hidden {
+    display: none;
+  }
+
+  .seam-menu-visible {
+    display: flex;
   }
 
   .seam-menu-content {

package/src/styles/{_supported-devices.scss → _supported-device-table.scss}

@@ -3,7 +3,7 @@
 $row-padding: 8px;
 
 @mixin all {
-  .seam-supported-devices-filter-area {
+  .seam-supported-device-table-filter-area {
     width: 100%;
     display: flex;
     justify-content: space-between;
@@ -19,7 +19,7 @@ $row-padding: 8px;
       gap: 8px;
     }
 
-    .seam-supported-devices-filter-area-search-bar-wrap {
+    .seam-supported-device-table-filter-area-search-bar-wrap {
       position: relative;
       display: flex;
       justify-content: center;
@@ -28,7 +28,7 @@ $row-padding: 8px;
     }
   }
 
-  .seam-supported-devices-filter-menu {
+  .seam-supported-device-table-filter-menu {
     width: 100%;
     padding: 8px 16px;
 
@@ -56,7 +56,7 @@ $row-padding: 8px;
       }
     }
 
-    .seam-supported-devices-filter-menu-wrap {
+    .seam-supported-device-table-filter-menu-wrap {
       width: 100%;
       display: flex;
       justify-content: space-between;
@@ -92,7 +92,7 @@ $row-padding: 8px;
     }
   }
 
-  .seam-supported-devices-table-state-block {
+  .seam-supported-device-table-content-state-block {
     width: 100%;
     background-color: colors.$bg-a;
     padding: 32px 8px;
@@ -103,11 +103,11 @@ $row-padding: 8px;
     gap: 8px;
   }
 
-  .seam-supported-devices-table-message-row {
+  .seam-supported-device-table-content-message-row {
     height: auto !important;
   }
 
-  .seam-supported-devices-table-message {
+  .seam-supported-device-table-content-message {
     width: 100%;
     padding: 32px 0;
     display: flex;
@@ -128,7 +128,7 @@ $row-padding: 8px;
     }
   }
 
-  .seam-supported-devices-table {
+  .seam-supported-device-table-content {
     width: 100%;
     overflow-x: auto;
     table-layout: auto;