@tellescope/react-components 1.180.0 → 1.181.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.180.0",
+  "version": "1.181.1",
   "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.180.0",
-    "@tellescope/sdk": "^1.180.0",
-    "@tellescope/types-client": "^1.180.0",
-    "@tellescope/types-models": "^1.180.0",
-    "@tellescope/types-utilities": "^1.180.0",
-    "@tellescope/utilities": "^1.180.0",
-    "@tellescope/validation": "^1.180.0",
+    "@tellescope/constants": "^1.181.1",
+    "@tellescope/sdk": "^1.181.1",
+    "@tellescope/types-client": "^1.181.1",
+    "@tellescope/types-models": "^1.181.1",
+    "@tellescope/types-utilities": "^1.181.1",
+    "@tellescope/utilities": "^1.181.1",
+    "@tellescope/validation": "^1.181.1",
     "@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": "552ac02d3991ba26c6b32f7323d3cd36e884a94a",
+  "gitHead": "b83a341ad50cf72e2a30de11d40de8a3fafdd118",
   "publishConfig": {
     "access": "public"
   }

package/src/Forms/forms.tsx

@@ -136,6 +136,7 @@ export const QuestionForField = ({
   isInQuestionGroup,
   logicOptions,
   uploadingFiles, setUploadingFiles, handleFileUpload,
+  groupFields,
 } : {
   spacing?: number,
   form?: Form,
@@ -147,10 +148,12 @@ export const QuestionForField = ({
   setCustomerId: React.Dispatch<React.SetStateAction<string | undefined>>,
   isSinglePage?: boolean,
   isInQuestionGroup?: boolean,
+  questionGroupSize?: number,
   logicOptions?: NextFieldLogicOptions,
   handleFileUpload: (blob: FileBlob, fieldId: string) => Promise<any>,
   uploadingFiles: { fieldId: string }[]
   setUploadingFiles: React.Dispatch<React.SetStateAction<{ fieldId: string }[]>>,
+  groupFields?: FormField[],
 } & Pick<TellescopeFormProps, "rootResponseId" | "goToNextField" | "groupId" | "groupInstance" | "submit" | "formResponseId" | 'enduserId' | 'isPreviousDisabled' | 'goToPreviousField' | 'enduser' | 'handleDatabaseSelect' | 'onAddFile' | 'onFieldChange' | 'fields' | 'customInputs' | 'responses' | 'selectedFiles' | 'validateField'>) => {
   const String = customInputs?.['string'] ?? StringInput
   const StringLong = customInputs?.['stringLong'] ?? StringLongInput
@@ -256,7 +259,7 @@ export const QuestionForField = ({
           <DateStringInput field={field} disabled={value.disabled} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<'string'>} form={form} />
         )
         : field.type === 'Hidden Value' ? (
-          <HiddenValue isSinglePage={isSinglePage} goToNextField={goToNextField} goToPreviousField={goToPreviousField} field={field} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<any>} form={form} />
+          <HiddenValue groupFields={groupFields} isSinglePage={isSinglePage} goToNextField={goToNextField} goToPreviousField={goToPreviousField} field={field} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<any>} form={form} />
         )
         : field.type === 'Address' ? (
           <Address field={field} disabled={value.disabled} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<any>} form={form} />
@@ -350,7 +353,7 @@ export const QuestionForField = ({
         )
         : field.type === 'Question Group' ? (
           <Flex column flex={1}>
-          {(field.options?.subFields ?? []).map(({ id }) => {
+          {(field.options?.subFields ?? []).map(({ id }, indexInGroup) => {
             const match = fields.find(f => f.id === id)
             if (!match) return null
 
@@ -371,7 +374,11 @@ export const QuestionForField = ({
                   validateField={validateField} enduserId={enduserId}
                   spacing={field.options?.groupPadding}
                   logicOptions={logicOptions}
-                  isInQuestionGroup
+                  isInQuestionGroup 
+                  groupFields={
+                    fields.filter(f => field.options?.subFields?.find(s => s.id === f.id))
+                  }
+                  questionGroupSize={field.options?.subFields?.length}
                   uploadingFiles={uploadingFiles} setUploadingFiles={setUploadingFiles}
                   handleFileUpload={handleFileUpload}
                 />

package/src/Forms/inputs.tsx

@@ -3087,9 +3087,18 @@ export const RedirectInput = ({ enduserId, groupId, groupInsance, rootResponseId
   return null
 }
 
-export const HiddenValueInput = ({ goToNextField, goToPreviousField, field, value, onChange, form, isSinglePage, }: FormInputProps<'email'>) => {
+export const HiddenValueInput = ({ goToNextField, goToPreviousField, field, value, onChange, isSinglePage, groupFields }: FormInputProps<'email'>) => {
   let lastRef = useRef(0)
   let lastIdRef = useRef('')
+
+  // in a Question Group, only the first Hidden Value should navigate
+  // AND, it should only navigate if the group only contains hidden values
+  const firstHiddenValue = groupFields?.find(v => v.type === 'Hidden Value')
+  const dontNavigate = (
+    (firstHiddenValue && firstHiddenValue?.id !== field.id) // is in a group, but not the first hidden value
+  || !!(groupFields?.find(v => v.type !== 'Hidden Value')) // group contains at least 1 non-hidden value
+  )
+
   useEffect(() => {
     if (lastRef.current > Date.now() - 1000 && lastIdRef.current === field.id) return
     lastRef.current = Date.now()
@@ -3098,14 +3107,19 @@ export const HiddenValueInput = ({ goToNextField, goToPreviousField, field, valu
     if (value) {
       if (isSinglePage) return
       onChange('', field.id)
+
+      if (dontNavigate) return
       goToPreviousField?.()
     } else {
       onChange(field.title, field.id)
-      console.log('going to next field for hidden value', field.title, !!goToNextField)
+
+      if (dontNavigate) return
+
       // pass value that is set after above onChange
+      console.log('going to next field for hidden value', field.title, !!goToNextField)
       goToNextField?.({ type: 'Hidden Value', value: field.title })
     }
-  }, [value, onChange, field, goToNextField, goToPreviousField, isSinglePage])
+  }, [value, onChange, field, goToNextField, goToPreviousField, isSinglePage, dontNavigate])
 
   return <></>
 }

package/src/Forms/types.ts

@@ -35,6 +35,7 @@ export interface FormInputProps<K extends keyof AnswerForType> {
   handleFileUpload?: (blob: FileBlob, fieldId: string) => Promise<any>,
   uploadingFiles?: { fieldId: string }[]
   setUploadingFiles?: React.Dispatch<React.SetStateAction<{ fieldId: string }[]>>,
+  groupFields?: FormField[],
 }
 
 export type FormInputs = { 

package/src/state.tsx

@@ -719,6 +719,7 @@ export interface ListUpdateMethods <T, ADD> extends LoadMoreFunctions<T> {
   getOldestLoadedId: () => string | undefined,
   setOldestLoadedId: (id: string) => void,
   loadRecentlyCreated: () => Promise<T[]>,
+  loadRecentlyUpdated: () => Promise<T[]>,
   recentlyCreatedFetch: Date,
 }
 export type ListStateReturnType <T extends { id: string | number }, ADD=Partial<T>> = [LoadedData<T[]>, ListUpdateMethods<T, ADD>]
@@ -764,6 +765,10 @@ export const useListStateHook = <T extends { id: string | number }, ADD extends
   if (now.getTime() === recentlyCreatedFetch.current.getTime()) {
     setLastDate(`${modelName}-recentlyCreatedFetch`, now)
   }
+  const recentlyUpdatedFetch = useRef(getLastDate(`${modelName}-recentlyUpdatedFetch`) || now)
+  if (now.getTime() === recentlyUpdatedFetch.current.getTime()) {
+    setLastDate(`${modelName}-recentlyUpdatedFetch`, now)
+  }
 
   const addLocalElement = useCallback((e: T, o?: AddOptions) => {
     dispatch(slice.actions.add({ value: e, options: o }))
@@ -1163,6 +1168,25 @@ export const useListStateHook = <T extends { id: string | number }, ADD extends
 
     return []
   }, [session.api, modelName, addLocalElements, loadQuery, setLastDate])
+
+  const loadRecentlyUpdated = React.useCallback(async () => {
+    if (!loadQuery) return []
+
+    const fromUpdated = recentlyUpdatedFetch.current
+
+    if (fromUpdated.getTime() + 1000 > Date.now()) return [] // throttle by 1 sec
+    recentlyUpdatedFetch.current = new Date()
+    setLastDate(`${modelName}-recentlyUpdatedFetch`, recentlyUpdatedFetch.current)
+
+    try {
+      const created = await loadQuery({ fromUpdated })
+      if (created.length === 0) return []
+
+      return addLocalElements(created, { replaceIfMatch: true })
+    } catch(err) { console.error(err) }
+
+    return []
+  }, [session.api, modelName, addLocalElements, loadQuery, setLastDate])
   
   return [
     state,
@@ -1171,7 +1195,7 @@ export const useListStateHook = <T extends { id: string | number }, ADD extends
       createElement, createElements, updateElement, updateLocalElement, updateLocalElements, findByFilter, findById, removeElement, removeLocalElements,
       reload, loadMore, doneLoading, filtered, 
       getOldestLoadedDate, setOldestLoadedDate, setOldestLoadedId, getOldestLoadedId,
-      loadRecentlyCreated,
+      loadRecentlyCreated, loadRecentlyUpdated,
       recentlyCreatedFetch: recentlyCreatedFetch.current,
     }
   ]