ON-41824 # remove usePage provider

src/components/ArcGISWebMap.tsx

@@ -12,7 +12,7 @@ import OnLoading from '../components/renderer/OnLoading'
 import MaterialIcon from './MaterialIcon'
 
 import '../styles/arcgis-external.css'
-import usePage from '../hooks/usePage'
+import useIsPageVisible from '../hooks/useIsPageVisible'
 
 type Props = {
  element: FormTypes.ArcGISWebMapElement
@@ -26,7 +26,7 @@ function FormElementArcGISWebMap({ element, id, ...props }: Props) {
  const layerPanelRef = React.useRef<Expand | null>(null)
  const mapGalleryPanelRef = React.useRef<Expand | null>(null)
  const [isLoading, setIsLoading] = React.useState<boolean>(true)
- const { isPageVisible } = usePage()
+ const isPageVisible = useIsPageVisible()
 
  React.useEffect(() => {
  let view: MapView

src/components/renderer/LookupNotification.tsx

@@ -3,8 +3,6 @@ import clsx from 'clsx'
 import { generateHeaders } from '@oneblink/apps/dist/services/fetch'
 import { Sentry, formService } from '@oneblink/apps'
 import { FormTypes, SubmissionTypes } from '@oneblink/types'
-import { formElementsService } from '@oneblink/sdk-core'
-import _cloneDeep from 'lodash.clonedeep'
 
 import useIsOffline from '../../hooks/useIsOffline'
 import OnLoading from './OnLoading'
@@ -19,7 +17,6 @@ import useFormSubmissionModel from '../../hooks/useFormSubmissionModelContext'
 import useFormIsReadOnly from '../../hooks/useFormIsReadOnly'
 import useIsMounted from '../../hooks/useIsMounted'
 import useFormElementLookups from '../../hooks/useFormElementLookups'
-import usePage from '../../hooks/usePage'
 import mergeExecutedLookups from '../../utils/merge-executed-lookups'
 
 import { FormElementLookupHandler, ExecutedLookups } from '../../types/form'
@@ -98,8 +95,6 @@ function LookupNotificationComponent({
  )
  }, [formElementDataLookup, formElementElementLookup])
 
- const { pageId } = usePage()
-
  const mergeLookupData = React.useCallback(
  ({
  newValue,
@@ -155,17 +150,9 @@ function LookupNotificationComponent({
  }
  }
 
- const clonedElements = _cloneDeep(definition.elements)
-
- formElementsService.forEachFormElement(clonedElements, (el) => {
- if (el.type === 'page' && el.id === pageId) {
- el.elements = allElements
- }
- })
-
  return {
  elements: allElements,
- submission: generateDefaultData(clonedElements, {
+ submission: generateDefaultData(allElements, {
  ...submission,
  [element.name]: newValue,
  ...dataLookupResult,
@@ -181,7 +168,7 @@ function LookupNotificationComponent({
  }
  })
  },
- [element, injectPagesAfter, onLookup, definition.elements, pageId],
+ [element, injectPagesAfter, onLookup],
  )
 
  const isNotStaticLookup = React.useMemo(() => {

src/components/renderer/PageFormElements.tsx

@@ -11,7 +11,7 @@ import {
  SetFormSubmission,
  UpdateFormElementsHandler,
 } from '../../types/form'
-import { PageProvider } from '../../hooks/usePage'
+import { IsPageVisibleProvider } from '../../hooks/useIsPageVisible'
 import { FlatpickrGuidProvider } from '../../hooks/useFlatpickrGuid'
 
 export type Props = {
@@ -122,7 +122,7 @@ function PageFormElements({
  )
 
  return (
- <PageProvider isPageVisible={isActive} pageId={pageElement.id}>
+ <IsPageVisibleProvider isPageVisible={isActive}>
  <FlatpickrGuidProvider>
  <div
  id={pageElement.id}
@@ -146,7 +146,7 @@ function PageFormElements({
  />
  </div>
  </FlatpickrGuidProvider>
- </PageProvider>
+ </IsPageVisibleProvider>
  )
 }
 

src/form-elements/FormElementNumber.tsx

@@ -5,7 +5,7 @@ import LookupButton from '../components/renderer/LookupButton'
 import { FormTypes } from '@oneblink/types'
 import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'
 import { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'
-import usePage from '../hooks/usePage'
+import useIsPageVisible from '../hooks/useIsPageVisible'
 import { LookupNotificationContext } from '../hooks/useLookupNotification'
 import useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'
 import MaterialIcon from '../components/MaterialIcon'
@@ -30,7 +30,7 @@ function FormElementNumber({
  setIsDirty,
 }: Props) {
  const ariaDescribedby = useElementAriaDescribedby(id, element)
- const { isPageVisible } = usePage()
+ const isPageVisible = useIsPageVisible()
 
  const text = React.useMemo(
  () => (typeof value === 'number' ? value.toString() : ''),

src/form-elements/FormElementSignature.tsx

@@ -13,7 +13,7 @@ import AttachmentStatus from '../components/renderer/attachments/AttachmentStatu
 import { canvasToBlob } from '../services/blob-utils'
 import ImagePreviewUnavailable from '../components/renderer/attachments/ImagePreviewUnavailable'
 import { FormElementValueChangeHandler } from '../types/form'
-import usePage from '../hooks/usePage'
+import useIsPageVisible from '../hooks/useIsPageVisible'
 import ProgressBar from '../components/renderer/attachments/ProgressBar'
 import { IsDirtyProps } from '../types/form'
 
@@ -36,7 +36,7 @@ function FormElementSignature({
  setIsDirty,
  isDirty,
 }: Props) {
- const { isPageVisible } = usePage()
+ const isPageVisible = useIsPageVisible()
 
  const handleChange = React.useCallback<
  FormElementValueChangeHandler<FormElementBinaryStorageValue>

src/hooks/useIsPageVisible.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react'
+
+type IsPageVisibleContextValue = boolean
+
+type Props = {
+ isPageVisible: IsPageVisibleContextValue
+ children: React.ReactNode
+}
+
+const IsPageVisibleContext =
+ React.createContext<IsPageVisibleContextValue>(false)
+
+export function IsPageVisibleProvider({ isPageVisible, children }: Props) {
+ return (
+ <IsPageVisibleContext.Provider value={isPageVisible}>
+ {children}
+ </IsPageVisibleContext.Provider>
+ )
+}
+
+export default function useIsPageVisible() {
+ return React.useContext(IsPageVisibleContext)
+}