@tellescope/react-components 1.184.0 → 1.185.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.184.0",
+  "version": "1.185.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.184.0",
-    "@tellescope/sdk": "^1.184.0",
-    "@tellescope/types-client": "^1.184.0",
-    "@tellescope/types-models": "^1.184.0",
-    "@tellescope/types-utilities": "^1.184.0",
-    "@tellescope/utilities": "^1.184.0",
-    "@tellescope/validation": "^1.184.0",
+    "@tellescope/constants": "^1.185.0",
+    "@tellescope/sdk": "^1.185.0",
+    "@tellescope/types-client": "^1.185.0",
+    "@tellescope/types-models": "^1.185.0",
+    "@tellescope/types-utilities": "^1.185.0",
+    "@tellescope/utilities": "^1.185.0",
+    "@tellescope/validation": "^1.185.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": "ad996fbec7a2840e68b90a0df0b2ff182e348ee3",
+  "gitHead": "cfec3c3b78a63582657d3fbf942cdbe2a0375f22",
   "publishConfig": {
     "access": "public"
   }

package/src/Forms/hooks.tsx

@@ -1100,7 +1100,7 @@ export const useTellescopeForm = ({ isPublicForm, form, urlLogicValue, customiza
     // ensure Question Group responses are included
 
     for (const r of responsesToSubmit) {
-      if (r.answer.type !== 'Question Group') continue
+      if (r?.answer?.type !== 'Question Group') continue
 
       for (const f of r.answer.value ?? []) {
         const match = responses.find(r => r.fieldId === f?.id)

package/src/layout.tsx

@@ -407,7 +407,7 @@ export const ScrollingList = <T extends { id: string | number }>({
               {({ data, index, style }) => (
                 <div style={style}>
                   <Item key={data[index].id} item={data[index]} index={index} />
-                  {index === items.length -1 && loadMore &&
+                  {index === items.length -1 && loadMore && !doneLoading?.() &&
                     <div style={{ textAlign: 'center' }}>
                     <LoadingButton submitText="Load Older Data" submittingText="Loading..."
                       disabled={doneLoading?.()} onClick={loadMore} 

package/src/state.tsx

@@ -1049,6 +1049,9 @@ export const useListStateHook = <T extends { id: string | number }, ADD extends
           if (es.value.length < limit && !loadFilter && !mdbFilter) {
             setFetched('id' + modelName + DONE_LOADING_TOKEN, true) 
           }
+          else if (es.value.length < limit) {
+            setFetched(fetchKey + DONE_LOADING_TOKEN, true) 
+          }
           if (es.value.length) { // don't store oldest record from a filter, may skip some pages
             setLastId(fetchKey, es.value[es.value.length - 1]?.id?.toString())
             const createdAt: any = (es.value[es.value.length - 1] as any).createdAt;
@@ -1083,9 +1086,28 @@ export const useListStateHook = <T extends { id: string | number }, ADD extends
     load(false)
   }, [load, options?.unbounceMS])
 
-  const doneLoading = useCallback((key="id") => (
-    didFetch(key + modelName + DONE_LOADING_TOKEN)
-  ), [didFetch, modelName])
+  const doneLoading = useCallback((key="id") => {
+    const unfileteredCase = didFetch(key + modelName + DONE_LOADING_TOKEN)
+    if (unfileteredCase) return true
+
+    const sort = options?.sort
+    const sortBy = options?.sortBy
+
+    const _filter = options?.loadFilter    
+    const filter = (_filter && object_is_empty(_filter)) ? undefined : _filter
+
+    const _mdbFilter = options?.mdbFilter
+    const mdbFilter = (_mdbFilter && _mdbFilter?.$and?.length) ? _mdbFilter : undefined
+
+    const filterKey = (
+      (mdbFilter || filter || sort || sortBy) 
+        ? JSON.stringify({ ...mdbFilter, ...filter, sort, sortBy }) + modelName 
+        : modelName
+    )
+    if (didFetch(filterKey + DONE_LOADING_TOKEN)) return true
+
+    return false
+  }, [didFetch, modelName, options?.loadFilter, options?.mdbFilter, options?.sort, options?.sortBy])
 
   const loadMore = useCallback(async (loadOptions?: LoadMoreOptions<T>) => {
     const sort = options?.sort
@@ -1127,6 +1149,9 @@ export const useListStateHook = <T extends { id: string | number }, ADD extends
           if (es.value.length < limit && !mdbFilter && (!filter || object_is_empty(filter))) {
             setFetched(key + modelName + DONE_LOADING_TOKEN, true) 
           }
+          else if (es.value.length < limit) {
+            setFetched(filterKey + DONE_LOADING_TOKEN, true) 
+          }
           const newLastId = es.value[es.value.length - 1]?.id?.toString()
           if (newLastId) {
             setLastId(filterKey, newLastId)
@@ -2888,14 +2913,35 @@ export const useCalendarEventsForUser = (options={} as HookOptions<CalendarEvent
 
   const [eventsLoading, { addLocalElements, filtered }] = useCalendarEvents()
 
-  const loadEvents = useCallback((options?: LoadEventOptions) => {
+  const loadEvents = useCallback(async (options?: LoadEventOptions & { to?: Date }) => {
     const key = JSON.stringify(options ?? {})
     if (loadedRef.current[key]) return
     loadedRef.current[key] = Date.now()
 
-    fetchEvents(options)
-    .then(es => addLocalElements(es, { replaceIfMatch: true }))
-    .catch(console.error)
+    const load = (from?: Date) => (
+      console.log('Loading events from', from, 'to', options?.to),
+      fetchEvents({ ...options, from })
+      .then(es => addLocalElements(es, { replaceIfMatch: true }))
+      .catch(console.error)
+    )
+
+    let i = 0
+    let from = options?.from
+    while (i < 10) {
+      i++
+      const loaded = await load(from)
+
+      const to = options?.to
+      if (!to) { break }
+      if (!loaded) { break }
+      if (loaded.length === 0) { break }
+
+      if (loaded.find(e => new Date(e.startTimeInMS).getTime() > to.getTime())) {
+        break
+      }
+      // else continue to loop (up to 10 times) until we find events after the to date
+      from = new Date(Math.max(...loaded.map(e => e.startTimeInMS)))
+    }
   }, [session, loadedRef, fetchEvents, addLocalElements])
 
   return [eventsLoading, { loadEvents, filtered }] as const

package/src/table.tsx

@@ -977,7 +977,7 @@ export const Table = <T extends Item>({
   }, [sorted, localFilters, fields])
 
   // make sure filterCounts incorporates column filters whose state is in Table, not parent component
-  const filterCounts = _filterCounts ? { ..._filterCounts, filtered: filtered.length } : undefined
+  const filterCounts = (_filterCounts && !paginated) ? { ..._filterCounts, filtered: filtered.length } : undefined
 
   const headerFilterIsActive = (
      !!(fields.find(f => f.filterIsActive) || localFilters.find(f => f?.query))
@@ -1101,12 +1101,13 @@ export const Table = <T extends Item>({
                 {emptyText || 'No results found the current filter'}
               </Typography> 
 
-              <div style={{ paddingLeft: horizontalPadding, paddingBottom: horizontalPadding }}>
-              <LoadingButton submitText="Load Older Data" submittingText="Loading..."
-                disabled={doneLoading?.()} onClick={loadMore} 
-                variant="outlined" style={{ width: 200, textAlign: 'center', marginTop: 10 }}
-              />
-              </div>
+              {loadMore && !doneLoading?.() &&
+                <div style={{ paddingLeft: horizontalPadding, paddingBottom: horizontalPadding }}>
+                <LoadingButton submitText="Load Older Data" submittingText="Loading..." onClick={loadMore} 
+                  variant="outlined" style={{ width: 200, textAlign: 'center', marginTop: 10 }}
+                />
+                </div>
+              }
               </>
             )
             : undefined