@tellescope/react-components 1.183.0 → 1.185.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.183.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.183.0",
-    "@tellescope/sdk": "^1.183.0",
-    "@tellescope/types-client": "^1.183.0",
-    "@tellescope/types-models": "^1.183.0",
-    "@tellescope/types-utilities": "^1.183.0",
-    "@tellescope/utilities": "^1.183.0",
-    "@tellescope/validation": "^1.183.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": "1b65f936169b011cfd20179c25625af7a6f34cba",
+  "gitHead": "cfec3c3b78a63582657d3fbf942cdbe2a0375f22",
   "publishConfig": {
     "access": "public"
   }

package/src/Forms/hooks.tsx

@@ -552,6 +552,7 @@ export const useTellescopeForm = ({ isPublicForm, form, urlLogicValue, customiza
   const getNumberOfRemainingPages: (field?: FormField, explored?: string[]) => number = useCallback((field=activeField.value, explored=[]) => {
     // prevents recursing on an already explored node (there shouldn't be loops anyway, but just in case)
     if (explored.includes(field.id)) return 0
+    explored.push(field.id) // make sure to push this node to prevent future exploration
 
     const children = fields.filter(
       f => (
@@ -562,7 +563,7 @@ export const useTellescopeForm = ({ isPublicForm, form, urlLogicValue, customiza
 
     return (
       1 + Math.max(
-        ...children.map(c => getNumberOfRemainingPages(c, [...explored, field.id]))
+        ...children.map(c => getNumberOfRemainingPages(c, explored))
       )
     )
   }, [activeField, fields])
@@ -1099,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/inputs_shared.tsx

@@ -1,14 +1,454 @@
 import React, { useEffect, useCallback, useMemo, useState, useRef } from "react"
 import { Indexable, ScoreFilter } from "@tellescope/types-utilities"
-import { objects_equivalent, read_local_storage, safeJSONParse, to_human_readable_phone_number, update_local_storage, user_display_name } from "@tellescope/utilities"
+import { is_full_iso_string_heuristic, object_is_empty, objects_equivalent, read_local_storage, replace_keys_and_values_in_object, safeJSONParse, update_local_storage, user_display_name, value_for_dotted_key } from "@tellescope/utilities"
 import { LoadFunction, LoadFunctionArguments } from "@tellescope/sdk"
-import { ALL_ACCESS, UNSEARCHABLE_FIELDS } from "@tellescope/constants"
+import { ALL_ACCESS, HEALTHIE_TITLE, 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, 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 { Button, Checkbox, Flex, HoverPaper, LoadingButton, LoadingData, 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"
+import { AccessPermissions, ListOfStringsWithQualifier } from "@tellescope/types-models"
+
+export type FilterV2 = Record<string, any>
+export type FiltersV2 = Record<string, FilterV2>
+export type FilterV2Options = { showArchived: boolean }
+
+export const enduser_condition_to_mongodb_filter = (condition: Record<string, any> | undefined, customFields: string[]): Record<string, any> | undefined => {
+  if (!condition) { return condition }
+
+  if (condition.$and) {
+    return { $and: condition.$and.map((v: any) => enduser_condition_to_mongodb_filter(v, customFields)) }
+  }
+  if (condition.$or) {
+    return { $or: condition.$or.map((v: any) => enduser_condition_to_mongodb_filter(v, customFields)) }
+  }
+  if (condition.$nor) {
+    return { $nor: condition.$nor.map((v: any) => enduser_condition_to_mongodb_filter(v, customFields)) }
+  }
+  if (condition.$not) {
+    return { $not: enduser_condition_to_mongodb_filter(condition.$not, customFields) }
+  }
+
+  if (condition && typeof condition === 'object' && condition.constructor === Object) {
+    const updated = { } as Record<string, any>
+    for (const [_key, _value] of Object.entries(condition)) {
+      const key = customFields.includes(_key) ? `fields.${_key}` : _key
+      const value = enduser_condition_to_mongodb_filter(_value, customFields)
+      // console.log(key, _value, value)
+
+      if (key === 'condition') { 
+        const toReturn = enduser_condition_to_mongodb_filter(value, customFields)
+        delete updated.condition
+        return toReturn
+      } // base case is comparison to value, so just return it
+
+      // journeys currently have a special ui/syntax in filter
+      if (key === 'Journeys') {
+        if ((typeof (value as any)?.$in) === 'string') {
+          return { [`journeys.${(value as any).$in}`]: { $exists: true } }
+        }
+        else if ((typeof (value as any)?.$nin) === 'string') {
+          return { [`journeys.${(value as any).$nin}`]: { $exists: false } }
+        }
+      }
+
+      if (key === 'Healthie ID') {
+        // $setSet ($nin null, '')
+        if ((value as any)?.$nin) return { $or: [{ source: HEALTHIE_TITLE, externalId: { $nin: [null, ''] } }, { 'references.type': HEALTHIE_TITLE }] }
+        // $isNotSet ($in null, '')
+        if ((value as any)?.$in) return { $and: [{ source: { $ne: HEALTHIE_TITLE } }, { 'references.type': { $ne: HEALTHIE_TITLE } }] } 
+      } 
+
+      // ensure to parse string to number values
+      if (key === 'height') {
+        return { 
+          'height.value': replace_keys_and_values_in_object(value, v => typeof v === 'string' && !v.startsWith('$') ? parseFloat(v) : v) 
+        }
+      }
+      if (key === 'weight') {
+        return { 
+          'weight.value': replace_keys_and_values_in_object(value, v => typeof v === 'string' && !v.startsWith('$') ? parseFloat(v) : v) 
+        }
+      }
+      if (key === "relationships") {
+        return {
+          'relationships.type': value
+        }
+      }
+
+      // case for isSet and isNotSet includes empty string as unset value
+      if (key === '$isSet') {
+        updated.$nin = [null, '', []]
+      }
+      else if (key === '$isNotSet') {
+        updated.$in = [null, '', []]
+      }
+      else if (key === '$contains') {
+        updated.$regex = value
+      }
+      else if (key === '$doesNotContain') {
+        updated.$not = { $regex: value }
+      }
+      else if (key === '$before') {
+        updated.$lt = value
+      }
+      else if (key === '$after') {
+        updated.$gt = value
+      }
+      else {
+        updated[key] = value
+      }
+    }
+
+    return updated
+  }
+
+  return condition
+}
+
+export const mongo_db_filter_to_enduser_condition = (filter?: FilterV2): Record<string, any> | undefined => {
+  if (!filter) { return filter }
+
+  if (objects_equivalent(filter, {
+    "$and": [
+      {
+        "source": {
+          "$ne": "Healthie"
+        }
+      },
+      {
+        "references.type": {
+          "$ne": "Healthie"
+        }
+      }
+    ]
+  })) {
+    return { condition: { 'Healthie ID': { $isNotSet: 'Value' } } }
+  }
+  if (objects_equivalent(filter, {
+    "$or": [
+      {
+        "source": "Healthie",
+        "externalId": {
+          "$nin": [
+            null,
+            ""
+          ]
+        }
+      },
+      {
+        "references.type": "Healthie"
+      }
+    ]
+  })) {
+    return { condition: { 'Healthie ID': { $isSet: 'Value' } } }
+  }
+
+  if (filter.$and) {
+    return { $and: filter.$and.map((v: any) => mongo_db_filter_to_enduser_condition(v)) }
+  }
+  if (filter.$or) {
+    return { $or: filter.$or.map((v: any) => mongo_db_filter_to_enduser_condition(v)) }
+  }
+  if (filter.$nor) {
+    return { $nor: filter.$nor.map((v: any) => mongo_db_filter_to_enduser_condition(v)) }
+  }
+  if (filter.$not) {
+    return { $not: mongo_db_filter_to_enduser_condition(filter.$not) }
+  }
+
+  if (filter && typeof filter === 'object' && filter.constructor === Object) {
+    if (object_is_empty(filter)) return filter
+
+    const updated = { condition: { } as Record<string, any> }
+
+    for (const [_key, value] of Object.entries(filter)) {
+      const key = (
+        (typeof _key === 'string' && _key.startsWith('fields.')) ? _key.replace('fields.', '')
+      : _key === 'height.value' ? 'height'
+      : _key === 'weight.value' ? 'weight'
+      : _key === 'relationships.type' ? 'relationships'
+          : _key
+      )
+
+      if (value && typeof value === 'object' && value.constructor === Object) {
+        updated.condition[key] = {} as Record<string, any>
+        if (Object.keys(value)[0] === '$exists') {
+          if (key.startsWith('journeys.')) {
+            // journeys currently have a special ui/syntax in filter
+            updated.condition['Journeys'] = { [value.$exists ? '$in' : '$nin']: key.split('.')[1] }
+          }
+          else if (value.$exists) { updated.condition[key]['$isSet'] = "Value" }
+          else { updated.condition[key]['$isNotSet'] = "Value" }
+        }
+
+        // case for isSet and isNotSet includes empty string as unset value
+        else if (Array.isArray(value.$in) && value.$in.length === 3 && value.$in.includes(null) && value.$in.includes('') && value.$in.find((v: any) => Array.isArray(v) && v.length === 0)) {
+          updated.condition[key]['$isNotSet'] = "Value"
+        }
+        else if (Array.isArray(value.$nin) && value.$nin.length === 3 && value.$nin.includes(null) && value.$nin.includes('') && value.$nin.find((v: any) => Array.isArray(v) && v.length === 0)) {
+          updated.condition[key]['$isSet'] = "Value"
+        }
+
+        else if (Object.keys(value)[0] === '$gt' && (value.$gt instanceof Date || is_full_iso_string_heuristic(value.$gt) || value.$gt === '$now')) {
+          updated.condition[key]['$after'] = value.$gt
+        }
+        else if (Object.keys(value)[0] === '$lt' && (value.$lt instanceof Date || is_full_iso_string_heuristic(value.$lt) || value.$lt === '$now')) {
+          updated.condition[key]['$before'] = value.$lt
+        }
+        else if (Object.keys(value)[0] === '$regex') {
+          updated.condition[key]['$contains'] = value.$regex
+        }
+        else if (Object.keys(value)[0] === '$not' && Object.keys(value.$not ?? {})?.[0] === '$regex') {
+          updated.condition[key]['$doesNotContain'] = value.$not.$regex
+        } else {
+          updated.condition[key] = value
+        }
+      }
+      else {
+        updated.condition[key] = value
+      }
+    }
+
+    return updated
+  }
+
+  return filter
+}
+
+export const list_of_strings_with_qualifier_to_mongodb_filter = (tags?: ListOfStringsWithQualifier) => {
+  if (tags?.qualifier === 'All Of') {
+    return { $all: tags.values || [] }
+  }
+  return { $in: tags?.values || [] }
+}
+export const mongo_db_filter_to_list_of_strings_with_qualifier = (filter?: FilterV2): ListOfStringsWithQualifier => {
+  const defaultValue: ListOfStringsWithQualifier = { qualifier: 'One Of', values: [] }
+
+  if (!filter) { return defaultValue }
+  if (filter.$all) {
+    return { values: filter.$all, qualifier: 'All Of' }
+  }
+  if (filter.$in) {
+    return { values: filter.$in, qualifier: 'One Of' }
+  }
+
+  return defaultValue
+}
+
+export interface FilterComponentWithDefaultKeyV2 {
+  filters: FiltersV2,
+  setFilters: React.Dispatch<React.SetStateAction<FiltersV2>>,
+  onKeyDown?: (e: { code: string }) => void,
+}
+// can include a version with an optional key, but make sure to use it in all cases when it's possibly passed as a prop (don't just use a string literal as default)
+export interface FilterComponentV2 extends FilterComponentWithDefaultKeyV2 {
+  filterKey: string,
+}
+
+export const apply_mongodb_style_filter = <T,>(data: T[], filter: FilterV2, options: FilterV2Options): T[] => {
+  const matchesFilter = (item: any, filter: FilterV2): boolean => {
+    if (!options.showArchived && item?.archivedAt) return false 
+
+    for (const [key, condition] of Object.entries(filter)) {
+      if (key === "$and") {
+        if (!Array.isArray(condition) || !condition.every((subFilter) => matchesFilter(item, subFilter))) {
+          return false;
+        }
+      } else if (key === "$or") {
+        if (!Array.isArray(condition) || !condition.some((subFilter) => matchesFilter(item, subFilter))) {
+          return false;
+        }
+      } else if (key === "$nor") {
+        if (!Array.isArray(condition) || condition.some((subFilter) => matchesFilter(item, subFilter))) {
+          return false;
+        }
+      } else if (key === "$not") {
+        if (typeof condition !== "object" || matchesFilter(item, condition)) {
+          return false;
+        }
+      } else {
+        const value = value_for_dotted_key(item, key, { handleArray: true });
+        // console.log('checking value', key, value, condition)
+
+        // to be consistent with mongodb, $in/$nin should match null and undefined
+        const modifyArrayOperandForNull = (v: any[]) => ([
+          ...v,
+          ...(v.includes(null) ? [undefined] : []),
+        ])
+
+        if (Array.isArray(value)) {
+          if (typeof condition === "object" && condition !== null) {
+            for (const [operator, operand] of Object.entries(condition)) {
+              // handle empty array
+              if (Array.isArray(value) && value.length === 0) {
+                if (operator === '$eq' && Array.isArray(operand) && operand.length === 0) { continue }
+                if (operator === '$ne' && Array.isArray(operand) && operand.length === 0) { return false }
+                if (Array.isArray(operand) && operand.find(a => Array.isArray(a) && a.length === 0)) {
+                  if (operator === '$in') { continue }
+                  if (operator === '$nin') { return false }
+                }
+              }
+
+              if (operator === '$eq' && !value.includes(operand)) return false
+              if (operator === '$ne' && value.includes(operand)) return false
+              
+              if (operator === "$in"   && Array.isArray(operand) && !modifyArrayOperandForNull(operand).some((o: any) => value.includes(o))) return false;
+              if (operator === "$nin"  && Array.isArray(operand) && modifyArrayOperandForNull(operand).some((o: any) => value.includes(o))) return false;
+
+              if (operator === "$all"  && Array.isArray(operand) && !operand.every((o: any) => value.includes(o))) return false;
+              if (operator === '$all' && condition.length === 0) return false
+              if (operator === '$all' && Array.isArray(operand) && operand.length === 0) return false
+
+              if (operator === "$size" && value.length !== operand) return false;
+
+              if (operator === '$exists' && operand === false) return false
+            }
+          } else {
+            if (!value.includes(condition)) return false;
+          }
+        } else {
+          if (typeof condition === "object" && condition !== null) {          
+            for (const [operator, operand] of Object.entries(condition)) {
+              const numberValue = (
+                is_full_iso_string_heuristic((value as any)?.toString())
+                  ? new Date(value).getTime()
+                  : parseFloat(value)
+              )
+              const parsedOperandForNumber = (
+                is_full_iso_string_heuristic((operand as any)?.toString())
+                  ? new Date(operand as any).getTime()
+              : operand === '$now'
+                  ? new Date().getTime()
+                  : parseFloat(operand as any)
+              )
+
+              if (operator === "$eq" && value !== operand) return false;
+              if (operator === "$ne" && value === operand) return false;
+              if (operator === "$in" && (!Array.isArray(operand) || !(modifyArrayOperandForNull(operand).includes(value)))) return false; 
+              if (operator === "$nin" && !(Array.isArray(operand) && !modifyArrayOperandForNull(operand).includes(value))) return false;
+              if (operator === "$exists" && ((operand && value === undefined) || (!operand && value !== undefined))) return false;
+              if (operator === "$regex" && !(typeof value === "string" && new RegExp(operand as string).test(value))) return false;
+              if (operator === "$gt" && (numberValue <= parseFloat(parsedOperandForNumber as any) || isNaN(numberValue) || numberValue === null || numberValue === undefined)) return false;
+              if (operator === "$gte" && (numberValue < parseFloat(parsedOperandForNumber as any) || isNaN(numberValue) || numberValue === null || numberValue === undefined)) return false;
+              if (operator === "$lt" && (numberValue >= parseFloat(parsedOperandForNumber as any) || isNaN(numberValue) || numberValue === null || numberValue === undefined)) return false;
+              if (operator === "$lte" && (numberValue > parseFloat(parsedOperandForNumber as any) || isNaN(numberValue) || numberValue === null || numberValue === undefined)) return false;
+
+              // only valid for lists, shoujld return false by default
+              if (operator === '$all') return false
+            }
+          } else {
+            if (value !== condition) return false;
+          }
+        }
+      }
+    }
+
+    return true;
+  };
+
+  try {
+    return data.filter(item => matchesFilter(item, filter))
+  } catch(err) {
+    console.error("Filter error:", err)
+  }
+
+  return data
+}
+
+export const remove_inactive_filters = (filters: Record<string, any>[]) => (
+  filters.map(f => {
+    // gpt4o
+    const cleanedFilter = Object.entries(f).reduce((acc, [key, value]) => {
+      if (key === "$and" || key === "$or") {
+        const subFilters = Array.isArray(value) ? value.filter(sub => Object.keys(sub).length > 0) : [];
+        if (subFilters.length > 0) {
+          acc[key] = subFilters;
+        }
+      } else if (key === "$in" || key === "$all") {
+        if (Array.isArray(value) && value.length > 0) {
+          acc[key] = value;
+        }
+      } else if (key === "$exists" || key === "$not") {
+        acc[key] = value;
+      } else if (typeof value === "object" && value !== null) {
+        const nestedFilter = remove_inactive_filters([value])[0];
+        if (nestedFilter && Object.keys(nestedFilter).length > 0) {
+          acc[key] = nestedFilter;
+        }
+      } else {
+        acc[key] = value;
+      }
+      return acc;
+    }, {} as Record<string, any>);
+
+    return Object.keys(cleanedFilter).length > 0 ? cleanedFilter : null;
+
+  })
+  .filter(v => v && !object_is_empty(v))
+)
+
+export const useFiltersV2 = <T,>(
+  args?: { 
+    memoryId?: string, 
+    initialFilters?: FiltersV2,
+    reload?: boolean, 
+    onFilterChange?: (fs: FiltersV2) => void,
+    showArchived?: boolean,
+  }
+) => {
+  const { onFilterChange, reload, memoryId, initialFilters, showArchived } = args ?? {}
+
+  const loadFilters = useCallback(() => (
+    initialFilters || (
+      memoryId 
+        ? (safeJSONParse(read_local_storage(memoryId)) || {}) 
+        : {}
+    )
+  ), [initialFilters, memoryId])
+
+  const [filters, setFilters] = React.useState<FiltersV2>(loadFilters())
+
+  const didReloadRef = useRef(false)
+  useEffect(() => {
+    if (!reload) return
+    if (didReloadRef.current) return
+    didReloadRef.current = true
+
+    setFilters(loadFilters)
+  }, [reload, loadFilters])
+
+  useEffect(() => {
+    if (!memoryId) return
+    update_local_storage(memoryId, JSON.stringify(filters))
+  }, [filters, memoryId])
+
+  const prevFilterRef = React.useRef(filters)
+  useEffect(() => {
+    if (!onFilterChange) return
+    if (objects_equivalent(prevFilterRef.current, filters)) return
+
+    prevFilterRef.current = filters
+    onFilterChange(filters)
+  }, [filters, onFilterChange])
+
+  const mdbFilter = useMemo(() => ({ 
+    $and: remove_inactive_filters(Object.values(filters))
+  }), [filters])
+
+  const applyFilters = useCallback((
+    (data: T[]) => apply_mongodb_style_filter(data, mdbFilter, { showArchived: !!showArchived })
+  ), [mdbFilter, showArchived])
+
+  return { 
+    mdbFilter,
+    filters, 
+    setFilters,
+    applyFilters,
+    activeFilterCount: Object.values(filters).filter(f => !!f.filter).length
+  }
+}
 
 /* FILTER / SEARCH */
 export const filter_setter_for_key = <T,>(key: string, setFilters: React.Dispatch<React.SetStateAction<Filters<T>>>) => (
@@ -215,7 +655,6 @@ export const filter_for_query = <T,>(query: string, getAdditionalFields?: (v: T)
 
     const toAdd = getAdditionalFields?.(record as T)
     const joined = { ...toAdd, ...record }
-    // console.log(JSON.stringify(joined, null, 2))
 
     for (const field in joined) {
       const value = joined[field as keyof typeof record]

package/src/layout.tsx

@@ -14,6 +14,7 @@ import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
 import { FixedSizeList } from 'react-window';
 import { usePageWidth } from "./CMS";
 import { LoadMoreOptions } from "./state";
+import { LoadingButton } from ".";
 
 export const IN_REACT_WEB = true
 
@@ -400,12 +401,20 @@ export const ScrollingList = <T extends { id: string | number }>({
                 if (doneLoading?.() || !loadMore) return
 
                 setLoading(true)
-                loadMore(loadMoreOptions).finally(() => setLoading(false))
+                loadMore(loadMoreOptions).catch(console.error).finally(() => setLoading(false))
               }}
             >
               {({ data, index, style }) => (
                 <div style={style}>
                   <Item key={data[index].id} item={data[index]} index={index} />
+                  {index === items.length -1 && loadMore && !doneLoading?.() &&
+                    <div style={{ textAlign: 'center' }}>
+                    <LoadingButton submitText="Load Older Data" submittingText="Loading..."
+                      disabled={doneLoading?.()} onClick={loadMore} 
+                      variant="outlined" style={{ width: 200, textAlign: 'center', marginTop: 10 }}
+                    />
+                    </div>
+                  }
                 </div>
               )}
             </FixedSizeList>