@tellescope/react-components 1.173.0 → 1.175.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.173.0",
+  "version": "1.175.0",
   "description": "",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
@@ -47,13 +47,13 @@
     "@reduxjs/toolkit": "^1.6.2",
     "@stripe/react-stripe-js": "^2.9.0",
     "@stripe/stripe-js": "^1.52.1",
-    "@tellescope/constants": "^1.173.0",
-    "@tellescope/sdk": "^1.173.0",
-    "@tellescope/types-client": "^1.173.0",
-    "@tellescope/types-models": "^1.173.0",
-    "@tellescope/types-utilities": "^1.173.0",
-    "@tellescope/utilities": "^1.173.0",
-    "@tellescope/validation": "^1.173.0",
+    "@tellescope/constants": "^1.175.0",
+    "@tellescope/sdk": "^1.175.0",
+    "@tellescope/types-client": "^1.175.0",
+    "@tellescope/types-models": "^1.175.0",
+    "@tellescope/types-utilities": "^1.175.0",
+    "@tellescope/utilities": "^1.175.0",
+    "@tellescope/validation": "^1.175.0",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "css-to-react-native": "^3.0.0",
@@ -84,7 +84,7 @@
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-native": "^0.65.0 || ^0.66.0 || ^0.67.0 || ^0.68.0 || ^0.71.0"
   },
-  "gitHead": "0239f40d9a62d16c2d94830a5f65db54aee48e1f",
+  "gitHead": "d4b035d1d3a40b4177169dd41b911eec7383c949",
   "publishConfig": {
     "access": "public"
   }

package/src/Forms/inputs.tsx

@@ -1755,7 +1755,11 @@ export const DropdownInput = ({ field, value, onChange }: FormInputProps<'Dropdo
               ? onChange(e.target.value ? [e.target.value] : [], field.id)
               : undefined
           )}
-          placeholder={field.placeholder + ((!field.title && !field.isOptional) ? '*' : '')}
+          placeholder={
+            field.placeholder
+              ? field.placeholder + ((!field.title && !field.isOptional) ? '*' : '')
+              : undefined
+          }
           label={
             (!field.options?.radio && field.options?.other)
               ? "Press enter to save a custom value"

package/src/inputs_shared.tsx

@@ -5,8 +5,8 @@ import { LoadFunction, LoadFunctionArguments } from "@tellescope/sdk"
 import { ALL_ACCESS, UNSEARCHABLE_FIELDS } from "@tellescope/constants"
 import { SearchAPIProps, useSearchAPI } from "./hooks"
 import { TextFieldProps } from "./mui"
-import { AgentRecord, AllergyCode, AppointmentBookingPage, AppointmentLocation, AutomationTrigger, CalendarEventTemplate, CallHoldQueue, ChatRoom, Database, DatabaseRecord, DiagnosisCode, Enduser, EnduserOrder, FaxLog, File, Form, FormGroup, Forum, Journey, ManagedContentRecord, MessageTemplateSnippet, Organization, PrescriptionRoute, SuggestedContact, Template, Ticket, TicketQueue, User, UserNotification } from "@tellescope/types-client"
-import { Button, Checkbox, Flex, HoverPaper, LoadingButton, LoadingData, LoadingLinear, ScrollingList, SearchTextInput, Typography, useAgentRecords, useAllergyCodes, useAppointmentBookingPages, useAppointmentLocations, useAutomationTriggers, useCalendarEventTemplates, useCallHoldQueues, useChatRooms, useDatabaseRecords, useDatabases, useDiagnosisCodes, useEnduserOrders, useEndusers, useFaxLogs, useFiles, useFormGroups, useForms, useForums, useJourneys, useManagedContentRecords, useMessageTemplateSnippets, useNotifications, useOrganization, useOrganizations, usePrescriptionRoutes, useResolvedSession, useSession, useSuggestedContacts, useTemplates, useTicketQueues, useTickets, useUsers, value_is_loaded } from "."
+import { AgentRecord, AllergyCode, AppointmentBookingPage, AppointmentLocation, AutomationTrigger, CalendarEventTemplate, CallHoldQueue, ChatRoom, Database, DatabaseRecord, DiagnosisCode, Enduser, EnduserOrder, FaxLog, File, Form, FormGroup, Forum, Journey, ManagedContentRecord, MessageTemplateSnippet, Organization, PrescriptionRoute, SuggestedContact, Template, Ticket, TicketQueue, User, UserNotification, Waitlist } from "@tellescope/types-client"
+import { Button, Checkbox, Flex, HoverPaper, LoadingButton, LoadingData, LoadingLinear, ScrollingList, SearchTextInput, Typography, useAgentRecords, useAllergyCodes, useAppointmentBookingPages, useAppointmentLocations, useAutomationTriggers, useCalendarEventTemplates, useCallHoldQueues, useChatRooms, useDatabaseRecords, useDatabases, useDiagnosisCodes, useEnduserOrders, useEndusers, useFaxLogs, useFiles, useFormGroups, useForms, useForums, useJourneys, useManagedContentRecords, useMessageTemplateSnippets, useNotifications, useOrganization, useOrganizations, usePrescriptionRoutes, useResolvedSession, useSession, useSuggestedContacts, useTemplates, useTicketQueues, useTickets, useUsers, useWaitlists, value_is_loaded } from "."
 import { SxProps } from "@mui/material"
 import { AccessPermissions } from "@tellescope/types-models"
 
@@ -618,6 +618,17 @@ export const SuggestedContactSearch = (props: Omit<GenericSearchProps<SuggestedC
   )
 }
 
+export const WaitlistSearch = (props: Omit<GenericSearchProps<Waitlist>, 'filterKey'> & { filterKey?: string }) => {
+  const session = useSession()
+  const [, { addLocalElements }] = useWaitlists({ dontFetch: true })
+  return (
+    <ModelSearchInput filterKey="waitlist" {...props} 
+      searchAPI={session.api.waitlists.getSome}
+      onLoad={addLocalElements}
+    />
+  )
+}
+
 export const AgentRecordSearch = (props: Omit<GenericSearchProps<AgentRecord>, 'filterKey'> & { filterKey?: string }) => {
   const session = useSession()
   const [, { addLocalElements }] = useAgentRecords({ dontFetch: true })

package/src/state.tsx

@@ -98,6 +98,7 @@ import {
   IntegrationLog,
   EnduserEligibilityResult,
   AgentRecord,
+  Waitlist,
 } from "@tellescope/types-client"
 
 import {
@@ -363,6 +364,7 @@ const allergyCodesSlice = createSliceForList<AllergyCode, 'allergy_codes'>('alle
 const integrationLogsSlice = createSliceForList<IntegrationLog, 'integration_logs'>('integration_logs')
 const enduserEligibilityResultsSlice = createSliceForList<EnduserEligibilityResult, 'enduser_eligibility_results'>('enduser_eligibility_results')
 const agentRecordsSlice = createSliceForList<AgentRecord, 'agent_records'>('agent_records')
+const waitlistsSlice = createSliceForList<Waitlist, 'waitlists'>('waitlists')
 
 const roleBasedAccessPermissionsSlice = createSliceForList<RoleBasedAccessPermission, 'role_based_access_permissions'>('role_based_access_permissions')
 
@@ -455,6 +457,7 @@ export const sharedConfig = {
     suggested_contacts: suggestedContactsSlice.reducer,
     diagnosis_codes: diagnosisCodesSlice.reducer,
     allergy_codes: allergyCodesSlice.reducer,
+    waitlists: waitlistsSlice.reducer,
   },
 }
 
@@ -528,10 +531,13 @@ export interface LoadMoreFunctions<T> {
 
 export const INACTIVE_SYNC_INTERVAL_IN_MS = 30000
 export const DEFAULT_SYNC_INTERVAL_IN_MS  = 15000
+export const MEDIUM_SYNC_INTERAVL         = 10000
 export const FAST_SYNC_INTERVAL           = 5000
 
 export const lastActiveForSync = { at: new Date(0), hasFocus: true }
 
+export const lastDataSync = { current : { numResults: 0, at: new Date(0), from: new Date(0), latency: 0, duration: 0 } }
+
 export const useDataSync____internal = () => {
   const session = useSession()
   const lastFetch = React.useRef(new Date())
@@ -576,11 +582,31 @@ export const useDataSync____internal = () => {
         ...Object.values(loadTimings.current).filter(v => v > 999)
       )
 
+      const handleLoadedData = () => {
+        for (const handler of Object.values(handlers.current)) {
+          try {
+            handler?.()
+          } catch(err) { console.error(err) }
+        }
+      }
+
       if (lastFetch.current.getTime() + pollDurationInMS > Date.now()) {
         return
       }
 
-      session.sync({ from: lastFetch.current }).then(({ results }) => {
+      // ensure we don't miss updates due to latency
+      const from = new Date(lastFetch.current.getTime() - 1000) // large leeway could result in same data being fetched twice, but helps ensure nothing is dropped
+      lastFetch.current = new Date() // update before syncing, not after it returns
+
+      session
+      .sync({ from })
+      .then(({ results }) => {
+        lastDataSync.current = { 
+          numResults: results.length, at: lastFetch.current, from, 
+          latency: Date.now() - lastFetch.current.getTime(),
+          duration: pollDurationInMS,
+        }
+
         for (const r of results) {
           if (r.data === 'deleted') {
             if (!deleted.current[r.modelName]) {
@@ -599,14 +625,11 @@ export const useDataSync____internal = () => {
           }
         }
       })
-      .then(() => {
-        for (const handler of Object.values(handlers.current)) {
-          handler?.()
-        }
+      .then(handleLoadedData)
+      .catch(err => {
+        console.error('Sync error', err)
+        lastFetch.current = from // don't skip this interval yet
       })
-      .catch(console.error)
-
-      lastFetch.current = new Date()
     }, 1000)
 
     return () => { clearInterval(i) }
@@ -631,12 +654,31 @@ export const useDataSync____internal = () => {
   }, [])
 
   const setHandler = useCallback((key: string, handler: undefined | (() => void)) => {
+    // call handler when initially set in case results were loaded when there was no handler
+    if (!handlers.current[key] && handler) {
+      try {
+        // console.log("handle on add", key)
+        handler?.() 
+      } 
+      catch(err) { 
+        console.error(err) 
+      }
+    }
+
+    // console.log('setting handler', key)
     handlers.current[key] = handler
   }, [])
 
+  const removeHandler = useCallback((key: string, handler: () => void) => {
+    if (handlers.current[key] !== handler) return // if a handler was overwritten, don't remove it
+
+    // console.log('removing handler', key)
+    delete handlers.current[key]
+  }, [])
+
   return {
     setLoadTiming, 
-    setHandler,
+    setHandler, removeHandler,
     getLoaded, getDeleted,
     popLoaded, popDeleted,
   }
@@ -702,7 +744,7 @@ export const useListStateHook = <T extends { id: string | number }, ADD extends
   } & HookOptions<T>
 ): ListStateReturnType<T, ADD> => 
 {
-  const { setHandler, popDeleted, popLoaded } = useSyncContext() ?? {}
+  const { setHandler, popDeleted, popLoaded, removeHandler } = useSyncContext() ?? {}
   const { loadQuery, findOne, findByIds, addOne, addSome, updateOne, deleteOne } = apiCalls
   if (options?.refetchInMS !== undefined && options.refetchInMS < 5000) {
     throw new Error("refetchInMS must be greater than 5000")
@@ -790,7 +832,7 @@ export const useListStateHook = <T extends { id: string | number }, ADD extends
     // context not provided
     if (!setHandler) return
 
-    setHandler(modelName, () => {
+    const handler = () => {
       if (state.status !== LoadingStatus.Loaded) return
       
       const deleted = popDeleted(modelName)
@@ -802,8 +844,12 @@ export const useListStateHook = <T extends { id: string | number }, ADD extends
       if (loaded?.length) {
         addLocalElements(loaded as any, { replaceIfMatch: true })
       }
-    })
-  }, [state.status, setHandler, addLocalElements, removeLocalElements, popDeleted, popLoaded])
+    }
+
+    setHandler(modelName, handler)
+
+    return () => { removeHandler(modelName, handler) }
+  }, [modelName, state.status, setHandler, removeHandler, addLocalElements, removeLocalElements, popDeleted, popLoaded])
 
   const findById: ListUpdateMethods<T, ADD>['findById'] = useCallback((id, options) => {
     if (!id) return undefined
@@ -980,7 +1026,7 @@ export const useListStateHook = <T extends { id: string | number }, ADD extends
     const sortBy = loadOptions?.sortBy ?? options?.sortBy
 
     if (!loadQuery) return
-    if (options?.dontFetch) return
+    if (options?.dontFetch && !force) return
     const fetchKey = (loadFilter || sort || sortBy) ? JSON.stringify({ ...loadFilter, sort, sortBy }) + modelName : modelName
 
     if (didFetch(fetchKey, force, options?.refetchInMS)) return
@@ -2837,4 +2883,23 @@ export const useCalendarEventsForUser = (options={} as HookOptions<CalendarEvent
   }, [session, loadedRef, fetchEvents, addLocalElements])
 
   return [eventsLoading, { loadEvents, filtered }] as const
+}
+
+export const useWaitlists = (options={} as HookOptions<Waitlist>) => {
+  const session = useSession()
+
+  return useListStateHook('waitlists', useTypedSelector(s => s.waitlists), session, waitlistsSlice,
+    { 
+      loadQuery: session.api.waitlists.getSome,
+      findOne: session.api.waitlists.getOne,
+      findByIds: session.api.waitlists.getByIds,
+      addOne: session.api.waitlists.createOne,
+      addSome: session.api.waitlists.createSome,
+      deleteOne: session.api.waitlists.deleteOne,
+      updateOne: session.api.waitlists.updateOne,
+    },
+    { 
+      ...options,
+    },
+  )
 }

package/src/table.tsx

@@ -38,7 +38,7 @@ import { PRIMARY_HEX } from "@tellescope/constants"
 
 import CloudDownloadIcon from '@mui/icons-material/CloudDownload';
 import { Autocomplete } from "@mui/material"
-import { SortingField } from "@tellescope/types-models"
+import { ListQueryQualifier, SortingField } from "@tellescope/types-models"
 // import DragHandleIcon from '@mui/icons-material/DragHandle';
 
 const LIGHT_GRAY = "#fafafa"
@@ -101,6 +101,7 @@ const checkboxStyle: React.CSSProperties = {
 type LocalFilter = {
   query: string,
   values?: string[],
+  valuesQualifier?: ListQueryQualifier,
 }
 
 // export type SortType = 'infer'
@@ -183,6 +184,19 @@ export const TableHeader = <T extends Item>({
         <Flex flex={1} justifyContent="center">
         {fields[openFilter]?.filterType === 'multi'
           ? (
+            <>
+            <Autocomplete disableClearable disablePortal size={'small'} options={['One Of', 'All Of']} sx={{ width: 140, mr: 0.5 }}
+              onChange={(e, value) => {
+                setLocalFilters(fs => fs.map((f, i) => i === openFilter ? { ...f, valuesQualifier: value === 'All Of' ? 'All Of' : 'One Of' } : f))
+              }}
+              value={localFilters[openFilter]?.valuesQualifier === 'All Of' ? 'All Of' : 'One Of'}
+              renderInput={(params) => 
+                <TextField {...params} fullWidth autoFocus label={"Qualifier"} size={'small'}
+                  value={localFilters[openFilter]?.valuesQualifier === 'All Of' ? 'All Of' : 'One Of'}
+                />
+              }
+            />
+            
             <Autocomplete size={'small'}
               disablePortal multiple
               options={(filterSuggestions?.[fields[openFilter]?.key?.toString()] || []).sort()}
@@ -192,13 +206,14 @@ export const TableHeader = <T extends Item>({
               }}
               value={localFilters[openFilter]?.values ?? []}
               renderInput={(params) => 
-                <TextField {...params} autoFocus label={"Filter"} size={'small'} 
+                <TextField {...params} autoFocus label={"Filter by"} size={'small'} 
                   style={{ width: 400 }}
                   value={localFilters[openFilter]?.query ?? ''}
                   // onKeyUp={e => e.which === 13 && onEnterPress?.()}
                 />
               }
             />
+            </>
           ) : (
             <Autocomplete size={'small'}
               disablePortal
@@ -922,13 +937,16 @@ export const Table = <T extends Item>({
         const { getFilterValue, filterType } = fields[i]
         if (!getFilterValue) continue
 
-        const { query, values } = localFilters[i] ?? {}
+        const { query, values, valuesQualifier } = localFilters[i] ?? {}
 
         if (filterType === 'multi') {
           if (!values?.length) continue
 
           const filterValueOrValues = getFilterValue(v)
           const filterValues = Array.isArray(filterValueOrValues) ? filterValueOrValues : [filterValueOrValues]
+          if (valuesQualifier === 'All Of') {
+            return values.every(v => filterValues.includes(v))
+          }
           if (!filterValues.find(v => values.includes(v))) {
             return false
           }