More lint fixes

packages/sdk/packages/embed/package.json

@@ -49,6 +49,7 @@
     "@xylabs/delay": "^4.0.10",
     "@xylabs/react-async-effect": "^4.2.10",
     "@xylabs/react-flexbox": "^4.2.10",
+    "@xylabs/react-hooks": "^4.2.10",
     "@xylabs/react-select": "^4.2.10",
     "@xylabs/react-shared": "^4.2.10",
     "@xyo-network/huri": "^3.1.9",
@@ -80,4 +81,4 @@
     "access": "public"
   },
   "docs": "dist/docs.json"
-}
+}

packages/sdk/packages/embed/src/contexts/EmbedPluginContext/Provider.tsx

@@ -1,6 +1,6 @@
+import { useResetState } from '@xylabs/react-hooks'
 import type { WithChildren } from '@xylabs/react-shared'
-import type { PayloadRenderPlugin } from '@xyo-network/react-payload-plugin'
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 
 import { EmbedPluginContext } from './Context.ts'
 import type { EmbedPluginBase } from './State.ts'
@@ -16,11 +16,7 @@ export const EmbedPluginProvider: React.FC<WithChildren<EmbedPluginProviderProps
   plugins,
   embedPluginConfig,
 }) => {
-  const [activePlugin, setActivePlugin] = useState<PayloadRenderPlugin | undefined>(plugins ? plugins[0] : undefined)
-
-  useEffect(() => {
-    setActivePlugin(plugins ? plugins[0] : undefined)
-  }, [plugins])
+  const [activePlugin, setActivePlugin] = useResetState(plugins ? plugins[0] : undefined)
 
   return (
     <EmbedPluginContext.Provider

packages/sdk/packages/embed/src/contexts/ResolvePayloadContext/Provider.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @eslint-react/hooks-extra/no-direct-set-state-in-use-effect */
 import { delay } from '@xylabs/delay'
 import { useAsyncEffect } from '@xylabs/react-async-effect'
 import type { WithChildren } from '@xylabs/react-shared'

packages/sdk/packages/map/src/Components/MapBox.tsx

@@ -50,6 +50,7 @@ export const MapBox: React.FC<MapBoxProps> = ({
 
     // Allow external components to control the map
     setMapBoxInstance?.(map)
+    // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
     setMap(map)
 
     // save the map canvas ref to help with resizing

packages/sdk/packages/map/src/Components/MapBoxPoints.tsx

@@ -3,7 +3,7 @@ import { FlexCol } from '@xylabs/react-flexbox'
 import type { Feature, Point } from 'geojson'
 import type { MapOptions } from 'mapbox-gl'
 import React, {
-  useCallback, useEffect, useState,
+  useCallback, useEffect, useMemo,
 } from 'react'
 
 import { useMapBoxInstance, useMapSettings } from '../Contexts/index.ts'
@@ -25,7 +25,6 @@ export const MapboxPointsFlexBox: React.FC<MapboxPointsFlexBoxProps> = ({
   zoom,
   ...props
 }) => {
-  const [mapPoints, setMapPoints] = useState<MapPoints>()
   const { mapSettings } = useMapSettings()
   const { map, mapInitialized } = useMapBoxInstance()
 
@@ -40,6 +39,14 @@ export const MapboxPointsFlexBox: React.FC<MapboxPointsFlexBoxProps> = ({
     return {}
   }
 
+  const mapPoints = useMemo(() => {
+    return (map && features?.length)
+      ? new MapPoints({
+        features, map, zoom,
+      })
+      : undefined
+  }, [map, features, zoom])
+
   const updateFeatures = useCallback(() => {
     if (mapPoints?.isMapReady && features?.length && layers)
       for (const layer of layers) {
@@ -70,14 +77,6 @@ export const MapboxPointsFlexBox: React.FC<MapboxPointsFlexBoxProps> = ({
     updateFeatures()
   }, [mapPoints, fitToPointsPadding, updateFeatures, zoom])
 
-  useEffect(() => {
-    if (map && features?.length) {
-      setMapPoints(new MapPoints({
-        features, map, zoom,
-      }))
-    }
-  }, [map, features, zoom])
-
   useEffect(() => {
     if (mapInitialized) {
       updateMapSetup()

packages/sdk/packages/map/src/Contexts/HeatMapInitializer/Provider.tsx

@@ -1,9 +1,7 @@
 import { forget } from '@xylabs/forget'
 import type { WithChildren } from '@xylabs/react-shared'
 import type { Feature, Polygon } from 'geojson'
-import React, {
-  useEffect, useMemo, useState,
-} from 'react'
+import React, { useEffect, useMemo } from 'react'
 
 import type { AnimatedHeatMapColorProps, HeatMapColorProps } from '../../Colors/index.ts'
 import { useDynamicPositioning } from '../../hooks/index.ts'
@@ -34,11 +32,18 @@ export const HeatMapInitializerProvider: React.FC<WithChildren<MapInitializerPro
   layers,
   zoom,
 }) => {
-  const [mapHeat, setMapHeat] = useState<MapHeat>()
   const { options } = useDynamicPositioning()
   const { mapSettings } = useMapSettings()
   const { map, mapInitialized } = useMapBoxInstance()
 
+  const mapHeat = useMemo(() => {
+    return (map && features?.length)
+      ? new MapHeat({
+        features, map, zoom,
+      })
+      : undefined
+  }, [map, features, zoom])
+
   const value: HeatMapInitializerState = useMemo(() => ({
     MapHeat: mapHeat,
     heatMapColorProps,
@@ -76,22 +81,13 @@ export const HeatMapInitializerProvider: React.FC<WithChildren<MapInitializerPro
             map,
             features,
           )
-        } else if (options.zoom && options.center) {
+        } else if (options?.zoom && options.center) {
           map.setZoom(options.zoom)
           map.setCenter(options.center)
         }
       }
     }
   }, [mapHeat, map, mapSettings, fitToPadding, options, mapInitialized, features])
 
-  useEffect(() => {
-    if (map && features?.length) {
-      // Every time we get a new map or features, we make a new class
-      setMapHeat(new MapHeat({
-        features, map, zoom,
-      }))
-    }
-  }, [map, features, zoom])
-
   return <HeatMapInitializerContext.Provider value={value}>{children}</HeatMapInitializerContext.Provider>
 }

packages/sdk/packages/map/src/hooks/useDynamicMapResize.tsx

@@ -1,8 +1,6 @@
 import type { Map } from 'mapbox-gl'
 import type { MutableRefObject } from 'react'
-import {
-  useEffect, useMemo, useState,
-} from 'react'
+import { useEffect, useMemo } from 'react'
 
 /**
  * Inspired by - https://bl.ocks.org/danswick/fc56f37c10d40be62e4feac5984250d2
@@ -13,8 +11,6 @@ export const useDynamicMapResize = (
   mapInstance?: Map,
   active = true,
 ) => {
-  const [dependenciesReady, setDependenciesReady] = useState(false)
-
   const resizer = useMemo(
     () =>
       new ResizeObserver(() => {
@@ -29,9 +25,8 @@ export const useDynamicMapResize = (
     [mapCanvasRef, mapContainerRef, mapInstance],
   )
 
-  useEffect(() => {
-    const dependenciesReady = !!(active && mapInstance && mapContainerRef?.current && mapCanvasRef.current)
-    setDependenciesReady(dependenciesReady)
+  const dependenciesReady = useMemo(() => {
+    return !!(active && mapInstance && mapContainerRef?.current && mapCanvasRef.current)
   }, [active, mapCanvasRef, mapContainerRef, mapInstance])
 
   useEffect(() => {

packages/sdk/packages/map/src/hooks/useDynamicPositioning.tsx

@@ -1,6 +1,6 @@
 import { useWindowSize } from '@xylabs/react-shared'
 import type { MapOptions } from 'mapbox-gl'
-import { useEffect, useState } from 'react'
+import { useMemo } from 'react'
 
 /**
  * Zoom level for the map
@@ -49,17 +49,16 @@ const linearInterpolate = (aspectRatio: number, degreeRange: number[], aspectRat
 }
 
 const useDynamicPositioning = () => {
-  const [options, setOptions] = useState<Partial<MapOptions>>({})
   const { width, height } = useWindowSize()
 
-  useEffect(() => {
+  const options = useMemo(() => {
     if (width && height) {
       const aspectRatio = width / height
 
-      setOptions({
+      return {
         center: [linearInterpolate(aspectRatio, lngRange), linearInterpolate(aspectRatio, latRange)],
         zoom: defaultZoom,
-      })
+      } as Partial<MapOptions>
     }
   }, [height, width])
 

packages/sdk/packages/map/src/hooks/useQuadKeyPayloadsToFeatures.tsx

@@ -1,7 +1,7 @@
 import { exists } from '@xylabs/exists'
 import { GeoJson } from '@xyo-network/sdk-geo'
 import type { Feature, Geometry } from 'geojson'
-import { useEffect, useState } from 'react'
+import { useMemo, useState } from 'react'
 
 import type { NetworkLocationHeatmapQuadkeyAnswerPayload } from '../types/index.ts'
 
@@ -26,7 +26,7 @@ const useQuadKeyPayloadsToFeatures = (payloads?: NetworkLocationHeatmapQuadkeyAn
   const [features, setFeatures] = useState<Feature<Geometry>[]>([])
   const [error, setError] = useState<Error>()
 
-  useEffect(() => {
+  useMemo(() => {
     // Convert Multiple Payloads from Quadkey to GeoJson
     if (Array.isArray(payloads)) {
       if ((payloads)?.filter(exists).length > 0) {

packages/sdk/packages/network/src/components/SelectEx/NetworkSelectEx.stories.tsx

@@ -1,7 +1,9 @@
 import { Card, CardContent } from '@mui/material'
 import type { Meta, StoryFn } from '@storybook/react'
 import { FlexCol } from '@xylabs/react-flexbox'
-import React, { useEffect, useState } from 'react'
+import React, {
+  useEffect, useMemo, useState,
+} from 'react'
 import { BrowserRouter } from 'react-router-dom'
 
 import {
@@ -59,7 +61,7 @@ const TemplateWithRouteProviderInner: StoryFn<typeof NetworkSelectEx> = (props)
   const { network } = useNetwork()
   const [uris, setUris] = useState<(string | undefined)[]>([])
 
-  useEffect(() => {
+  useMemo(() => {
     setUris(previous => [...previous, network?.nodes?.find(node => node.type === 'archivist')?.uri])
   }, [network?.nodes])
 

packages/sdk/packages/network/src/contexts/Provider/Route.tsx

@@ -1,8 +1,6 @@
 import type { WithChildren } from '@xylabs/react-shared'
 import type { NetworkPayload } from '@xyo-network/network'
-import React, {
-  useCallback, useEffect, useState,
-} from 'react'
+import React, { useCallback, useMemo } from 'react'
 import { useSearchParams } from 'react-router-dom'
 
 import { defaultNetworkConfigs, findNetworkConfig } from '../../lib/index.ts'
@@ -12,7 +10,6 @@ import { NetworkMemoryProvider } from './Memory.tsx'
 import type { NetworkProviderProps } from './Props.ts'
 
 const NetworkRouteProviderInner: React.FC<WithChildren> = ({ children }) => {
-  const [initialized, setInitialized] = useState(false)
   const { network, setNetwork } = useNetwork()
 
   const [params, setParams] = useSearchParams()
@@ -44,7 +41,7 @@ const NetworkRouteProviderInner: React.FC<WithChildren> = ({ children }) => {
   )
 
   // sync memory and route storage of network
-  useEffect(() => {
+  const initialized = useMemo(() => {
     if (routeNetwork !== network) {
       if (routeNetwork === undefined && network !== undefined) {
         // if the route does not have a network selected, use what is in the memory context
@@ -54,7 +51,7 @@ const NetworkRouteProviderInner: React.FC<WithChildren> = ({ children }) => {
         setNetwork?.(routeNetwork)
       }
     }
-    setInitialized(true)
+    return true
   }, [routeNetwork, network, setNetworkParam, setNetwork])
 
   return (

packages/sdk/packages/payload/packages/context/src/contexts/Payload/Provider.tsx

@@ -3,7 +3,9 @@ import { useAsyncEffect } from '@xylabs/react-async-effect'
 import type { WithChildren } from '@xylabs/react-shared'
 import type { ArchivistInstance, ArchivistModule } from '@xyo-network/archivist-model'
 import type { Payload } from '@xyo-network/payload-model'
-import React, { useEffect, useState } from 'react'
+import React, {
+  useCallback, useEffect, useState,
+} from 'react'
 
 import { PayloadContext } from './Context.ts'
 
@@ -28,9 +30,10 @@ export const PayloadProvider: React.FC<WithChildren<PayloadProviderProps>> = ({
   const [payload, setPayload] = useState<Payload | null>()
   const [payloadError, setPayloadError] = useState<Error>()
 
-  const refreshPayload = () => {
+  const refreshPayload = useCallback(() => {
+    // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
     setPayload(undefined)
-  }
+  }, [setPayload])
 
   const clearPayload = () => {
     setPayload(null)

packages/sdk/packages/payload/packages/plugin-resolver/package.json

@@ -44,6 +44,7 @@
   },
   "dependencies": {
     "@xylabs/assert": "^4.0.10",
+    "@xylabs/react-hooks": "^4.2.10",
     "@xyo-network/payload-model": "^3.1.9",
     "@xyo-network/payload-plugin": "^3.1.9",
     "@xyo-network/payloadset-plugin": "^3.1.9",
@@ -74,4 +75,4 @@
     "access": "public"
   },
   "docs": "dist/docs.json"
-}
+}

packages/sdk/packages/payload/packages/plugin-resolver/src/contexts/PayloadSetPluginResolver/Provider.tsx

@@ -1,6 +1,7 @@
+import { useResetState } from '@xylabs/react-hooks'
 import type { PayloadSetPluginResolver } from '@xyo-network/payloadset-plugin'
 import type { ContextExProviderProps } from '@xyo-network/react-shared'
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 
 import { PayloadSetPluginResolverContext } from './Context.ts'
 
@@ -13,11 +14,7 @@ export const PayloadSetPluginResolverProvider: React.FC<PayloadSetPluginResolver
   required = false,
   children,
 }) => {
-  const [resolver, setResolver] = useState<PayloadSetPluginResolver>(resolverProp)
-
-  useEffect(() => {
-    setResolver(resolverProp)
-  }, [resolverProp])
+  const [resolver, setResolver] = useResetState<PayloadSetPluginResolver>(resolverProp)
 
   return (
     <PayloadSetPluginResolverContext.Provider

packages/sdk/packages/property/src/components/IdenticonCorner.tsx

@@ -2,22 +2,17 @@ import { useTheme } from '@mui/material'
 import type { FlexBoxProps } from '@xylabs/react-flexbox'
 import { FlexRow } from '@xylabs/react-flexbox'
 import { Identicon } from '@xylabs/react-identicon'
-import React, {
-  useEffect, useRef, useState,
-} from 'react'
+import React, { useMemo, useRef } from 'react'
 
 export interface IdenticonCornerProps extends FlexBoxProps {
   value?: string | number | boolean | null
 }
 
 export const IdenticonCorner: React.FC<IdenticonCornerProps> = ({ value, ...props }) => {
   const theme = useTheme()
-  const [parentHeight, setParentHeight] = useState<number>()
   const ref = useRef<HTMLDivElement>(null)
 
-  useEffect(() => {
-    setParentHeight(ref.current?.parentElement?.parentElement?.clientHeight)
-  }, [])
+  const parentHeight = useMemo(() => ref.current?.parentElement?.parentElement?.clientHeight, [ref.current])
 
   const calculatedHeight = parentHeight ?? 0
 

packages/sdk/packages/schema/package.json

@@ -47,6 +47,7 @@
     "@xylabs/hex": "^4.0.10",
     "@xylabs/react-async-effect": "^4.2.10",
     "@xylabs/react-link": "^4.2.10",
+    "@xylabs/react-promise": "^4.2.10",
     "@xylabs/react-select": "^4.2.10",
     "@xylabs/react-shared": "^4.2.10",
     "@xyo-network/diviner-schema-list-model": "^3.1.9",
@@ -70,6 +71,7 @@
     "@mui/styles": "^5.16.7",
     "@storybook/react": "^8.2.9",
     "@xylabs/react-flexbox": "^4.2.10",
+    "@xylabs/react-hooks": "^4.2.10",
     "@xylabs/ts-scripts-yarn3": "^4.0.7",
     "@xylabs/tsconfig-react": "^4.0.7",
     "@xyo-network/bridge-http": "^3.1.9",